HTML学习笔记Day4
一、浮动属性
1.首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流；
无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”；
显然标准流已经无法满足需求，这就要用到浮动；
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次；
2.页面浮动多个div的规律：
假如某个div元素A是浮动的，如果A元素上一个也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下则两个元素，那么A元素会被挤到下一行）；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐；
div的顺序是HTML代码中div的顺序决定的；
靠近页面边缘的一端是前，远离页面边缘的一端是后；
经过上边的学习，可以看出：元素浮动之前，也就是标准流中，是纵向排列的，而浮动之后可以理解为横向排列
3.语法：float：none（默认值不浮动）/left（左浮动）/right（右浮动）
4.浮动的目的：就是让纵向排列的元素横向排列，也就是能让元素和元素并排显示
5.显示规则：浮动对象会向左或者向右移动直到遇到边框（border）、内补丁（padding）、外补丁 （margin）或者另一个块元素为止
6.float：定义网页中其他文本如何围环绕该元素显示
7.三种情况float不生效：a.当宽+宽大于父级元素的宽时；b.只给一个元素加了float时；c.单词写错
8.清除浮动语法：clear：none（默认值允许两边浮动）/left（不允许左边有浮动）/right（不允许右边有浮动）/both（不允许有浮动对象）
注：对于css的清除浮动（clear），一定要记住：这个规则只能影响使用清除的元素本身，不能影响其他元素，清除浮动可以理解为打破横向排列。
二、盒模型
1.盒模型：盒模型是css布局的基石，它规定了网页元如何显示以及元素间相互关系，css定义所有的元素都可以像盒子一样的外形和平面空间，即包含内容区、填充区（padding）、边框（border）、边界（margin），这就是盒模型。
2.填充（padding）：padding是指在内容与边框的空白区域，也称补白。
作用：1）用来调整子元素与父元素的位置关系；
2）调整内容在容器中的关系；
注：padding写在父元素上
用法：1）padding值时额外加在元素原有大小之上的，想要原来尺寸不变，加完padding值后在原始数值上减去加上的padding值；
2）可单独设置一方向填充，如：
padding-left：10px；padding-right：10px；padding-bottom：10px；padding-top：10px
padding：10px；定义元素上下左右填充值都为10px；
padding：10px 20px；定义元素上下填充值为10px，左右填充值为20px；
padding：10px 20px 30px；定义元素上填充值为10px，左右填充值为20px，下填充值为30px；
padding：10px 20px 30px 40px；定义元素上填充值为10，右填充值为20px，下填充值为30px，左填充值为40px；
补充：1）padding属性处于内容与边框之间，我们可以利用该属性设置图片与边框之间的空隙；
2）背景图不受padding值影响
3.边界：margin，在边框外边的空白区域，被称为边界。
作用：用来调整并列元素间的位置关系；
用法：1）可单独设置一方向填充，与padding类似
margin-left：10px；margin-right：10px；margin-top：10px；margin-bottom：10px；
2）margin：0 auto；定义元素上下边界为0，且在浏览器中横向居中
margin可以写负值；例如：margin：-10px；
3.边框：border
作用：网页中很多修饰性的线条都是由边框来实现
边框宽度：border-width：2px；
边框样式：border-style：solid（实线）/dotted（点）/dashed（虚线）/double（双边线）/none（取消边框）；
边框颜色：border-color：#fff；
用法：1）缩写：border：2px solid #fff；
2）可单独设置一方边框：border-left/right/top/bottom；
4.盒子实际占有的宽度区域：宽=左右margin+左右border+左右padding+width
盒子实际占有的高度区域：高=上下margin+上下border+上下padding+height
注：以上是标准盒模型所占有区域的实际大小
