圆角边框（重点）
border-radius: length;（可以输入像素或百分比）
radius：半径（圆的半径）
- 如果是正方形想要设置成一个圆，把数值修改为高度的一半即可，或直接写为50%
border-radius: 50%;
- 如果要做一个圆角矩形，设置为高度的一半即可
矩形高度 height：100px；
border-radius：50px；
- 该属性是简写属性，可跟四个值，分别为左上角、右上角、右下角、左下角（顺时针）
- 分开写：border-top-left-radius；border-top-right-radius；border-bottom-right-radius； border-bottom-left-radius；
盒子阴影（重点）
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必须写。水平阴影的位置，允许负值
v-shadow：必须写。垂直阴影的位置，允许负值
blur：可选。模糊距离（阴影的虚实效果）
spread：可选。阴影的尺寸（阴影的大小）
color：可选。阴影的颜色（rgba(0,0,0,0,3)）
inset：可选。将外部阴影(outset)改为内部阴影
注意：（1）默认是外阴影（outset），但是不可以写这个单词，否则会导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排序
原先盒子无阴影，鼠标经过盒子就添加阴影效果：
div:hover { box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.3); }
文字阴影
text-shadow: h-shadow v-shadow blur color;
浮动
传统网页布局的三种方式：（通过css摆盒子）
实际开发中，一个网页基本都包含了这三种布局方式（后面移动端再学新的布局方式）
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
网页布局第二准则：先设置盒子大小，之后设置盒子位置
- 普通流（标准流）：
标签按照规定好的默认方式排列
- 块级元素独占一行，从上向下顺序排序。常用元素：div;hr;p;h1-h6;ul;ol;dl;form;table
- 行内元素从左到右排序，碰到父元素边缘则自动换行。常用元素：span;a;i;em
标准流是最基本的布局方式
- 浮动
浮动的盒子不会有外边距合并（塌陷）的问题
为什么需要浮动？
答：很多布局效果标准流没法完成，浮动可以改变元素标签默认的排列方式
如何让多个块级盒子（div）水平排列成一行？
答：虽然转换为行内块元素可以实现一行显示，但他们之间会有大的空白缝隙，很难控制
如何实现两个盒子的左右对齐？
答：浮动（float）！
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含快或另一个浮动框边缘。
选择器{ float: 属性值:}
属性值：none：元素不浮动（默认值）
left：元素向左浮动
right：元素向右浮动
浮动特性（重难点）
- 浮动元素会脱离标准流（脱标）
- 脱离标准普通流的控制（浮）移动到指定位置（动）
- 浮动的盒子不再保留原先位置（若后面的盒子不加浮动，则会被浮动盒子覆盖在上）
- 浮动的元素会一行内显示并且元素顶部对齐
- 在一行显示的盒子（比如div）都要设置浮动属性
- 浮动的元素互相贴靠在一起（不会有缝隙），若父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
- 浮动的元素会具有行内块元素的特性
- 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后都具有行内块元素相似的特性
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，则添加浮动后，它的大小根据内容来决定
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的
- 行内元素同理
- 如果行内元素有了浮动，则不需要转换块级或行内块元素就可以直接给高度和宽度
4、浮动元素经常和标准流父级搭配使用
为了约束浮动元素的位置，网页布局采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
5、浮动布局注意点
- 浮动和标准流的父盒子搭配 （先用标准流的父元素排列网页各父元素盒子上下位置，之后各父元素内部子元素采取浮动排列左右位置）
- 一个元素浮动了，理论上其余的兄弟元素也要浮动（一浮全浮）（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）
- 清除浮动
为什么要清除浮动？
答：由于父级盒子很多情况下不方便给高度（产品很多，父元素不能写死高度；新闻页面不知道多少字给不了高度），但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动本质是清除浮动元素脱离标准流造成的影响
清除浮动的策略是闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
选择器{clear: 属性值;}
left：不允许左侧有浮动元素（清除左侧浮动的影响）
right：不允许右侧有浮动元素（清除右侧浮动的影响）
both：同时清楚左右两侧浮动的影响
实际工作中，几乎只用clear：both；
清除浮动的方法：
（1）额外标签发（隔墙法），W3C推荐做法。（实际工作可能会遇到，但不常用）
在浮动元素末尾添加一个空的标签。例如<div style=”clear: both”></div>，或者其他标签如<br/>等。
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注意：添加的这个新的空标签必须是块级元素
（2）父级添加overflow属性
给父级添加overflow: hidden; (子不教，父之过）
优点：代码简洁
缺点：无法显示溢出的部分
（3）父级添加after伪元素（代码不用记，需要的时候复制粘贴都可）
:after 方式是额外标签法的升级版，也是给父元素添加
.clearfix: after{
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6、7专有*/
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器
代表网站：百度、淘宝、网易等
（4）父级添加双伪元素
.clearfix:before,
.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix { /*IE6、7专有*/
*zoom: 1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯
