1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式  边框颜色。
2.边框样式 border-style 可以设置如下值：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线  
- dotted：边框为点线
3.当我们给盒子指定 padding 值之后，发生了 2 件事情：
     -内容和边框有了距离，添加了内边距。
     -padding影响了盒子实际大小。
4、内边距对盒子大小的影响：
- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
5、解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
6.border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius:length;   
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用。
7.为什么需要浮动？
​                总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.
​                浮动最典型的应用：可以让多个块级元素一行内排列显示。
​                网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
8.浮动布局注意点
     浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
    一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
9.清除浮动本质
清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
注意：
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了。
10.解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1给图片添加vertical-align:middle | top| bottom等。 （提倡使用的）
2.把图片转换为块级元素display: block。

1、border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式  边框颜色。
2.边框样式 border-style 可以设置如下值：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线  
- dotted：边框为点线
3.当我们给盒子指定 padding 值之后，发生了 2 件事情：
     -内容和边框有了距离，添加了内边距。
     -padding影响了盒子实际大小。
4、内边距对盒子大小的影响：
- 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
- 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
5、解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
6.border-radius 属性用于设置元素的外边框圆角。
语法：
border-radius:length;   
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用。
7.为什么需要浮动？
​                总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.
​                浮动最典型的应用：可以让多个块级元素一行内排列显示。
​                网页布局第一准则：**多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
8.浮动布局注意点
     浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
    一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
9.清除浮动本质
清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度
注意：
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度，就不会影响下面的标准流了。
10.解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：
1给图片添加vertical-align:middle | top| bottom等。 （提倡使用的）
2.把图片转换为块级元素display: block。