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

　　　注：以上是标准盒模型所占有区域的实际大小