day15-CSS-浮动

情况默认边距

• 浏览器会默认添加一些内边距和外边距，我们为了更好控制盒子的宽高，开发的第一件事就是要清空默认的边距
• 格式

• 方式一：通配符选择器

 * { margin:0;
    padding:0
}

• 方式二：YUI CSS Reset
  • 链接地址：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

行高和字号

• 1.行高
  • CSS中所有的行都有行高
• 注意：行高和盒子的高度是不同的概念！！
  • 盒子高度：是整个标签的高度
  • 行高：一行的高度
  • 没有设置盒子高度的时候，默认就是行高
    • 1️⃣一行文字会在行高中垂直居中的
    • 2️⃣让文字垂直居中：设置行高等于盒子高 度即可
    • 3️⃣多行文字要垂直居中：通过padding和box-sizing
• 2.还原字体和字号
  • 利用fw，左侧T，输入文字在工具栏进行跳转，测试出网页中的字体和字号和行高
  • 设置文字padding时，一般是以左边的内边距为基准，因为右边有可能因为文字大小显示自动换行而有误差
  • 文字上下的内边距并不是文字和上下边距的距离，而是行高与上下边距的距离

文字界面

• 开发步骤
  • 1️⃣清空所有默认边距
  • 2️⃣从外向内，从上到下

网页布局方式

• 1.标准流排版方式
  • 浏览器默认的排版方式就是标准流
  • 块级元素、行内元素、行内块级元素
  • 排版方式：水平排版（行内、行内块级）、垂直排版（块级）
• 2.浮动流排版方式
  • 浮动流：是一种半脱离标准流的排版方式，只能进行水平排版
  • float：和其父元素的最左边或最右边对齐
  • 注意点：没有center取值；margin：0 auto是无效的
  • 特点：
    • 1️⃣浮点流中不区分块级、行内、行内块级元素都可以进行水平排版
    • 2️⃣浮点流中块级、行内、行内块级元素都可以设置宽高
    • 3️⃣浮动流类似于行内块级元素
• 3.定位流排版方式

浮动元素脱标

• 脱标：脱离标准流 --- 浮动之后就会脱离标准流；当一个元素浮动之后，那么这个元素看书去就像从标准流中脱离
• 影响：在脱标元素后面的元素会盖住其后面的元素--浮动的盖住没浮动的

浮动元素排序规则

• 1️⃣相同方向上的浮动元素，先浮动的显示在前面，后浮动的显示在后面
• 2️⃣不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
• 3️⃣浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定 --- 原先在哪一行就会浮动在哪一行

浮动元素贴靠现象

• 最后一个浮动的元素宽度如果超过了父控件的宽度，则不会贴靠其前一个元素，会去看看其前一个元素贴靠的元素，若位置足够才会浮动上去；由此往内对比，直到贴靠到父控件，贴靠父控件时，无论位置是否足够都会贴靠

浮动元素字围现象

• 没有浮动的部分的文字并不会被浮动元素覆盖，出现字围效果 -- 用途：图文混排