边框圆角
1）
（左上角、右上角、右下角、左上角）
2）border-radius: 50%; --------圆形
3）图片圆形显示：(盒子圆形显示，图片为方形，溢出)
border-radius: 50%;
Overflow:hidden:
[if !supportLists]2、[endif]轮廓、阴影
轮廓：是不占空间的边框，设置轮廓不会影响元素的布局（outline）
阴影：box-shadow用来设置元素的阴影，和轮廓一样，阴影也不会影响页面的布局
1） box-shadow 值：
inset内部阴影
第一个值，阴影的水平偏移量：正值向右移动，负值向左移动
第二个值，阴影的垂直偏移量：正值向下移动，负值向上移动
第三个值，阴影的模糊半径
第四个值，阴影的颜色
2）用 “，”号隔开，可设置多个阴影：
浮动：float
1)浮动可以使元素向左或向右移动
可选值：
none默认值，不浮动
left向左浮动
right向右浮动
2)浮动的特点:
1.设置浮动以后，元素会向页面的左侧或右侧移动
2.设置浮动以后，元素会完全脱离文档流，不再占据文档流中的位置，所以它下边的元素会自动上移
3.浮动元素不会超过其上没有浮动的块元素（兄弟元素），也不会超出父元素。
4.浮动元素的默认位置不会超过其上的其他的浮动元素，最多一边齐
3)元素脱离文档流以后的特点：
1.默认宽度被内容撑开
2.默认高度被内容撑开
3.块元素不会独占一行。
4.元素不会在文档流中再占据位置。
行内元素浮动以后也会脱离文档流，脱离文档流以后行内元素自动变成块元素，特点和块元素一样
4）文字不会被浮动元素所覆盖，而是环绕在浮动元素的四周，从而我们可以利用浮动来实现一个文字环绕图片的效果。
]布局
竖着：直接写；横着：浮动。
1)
=========网页的头部
=========网页的主体
<nav> </nav>
<aside></aside>
<section></section>
</main>
=========网页的底部
[if !supportLists]2) [endif]公共的样式提取出来：为、<main> 、<footer>设置类名w ，写公共样式
5、高度塌陷
1）
高度塌陷，块元素的高度默认情况下是被子元素撑开的，如果子元素浮动，将会完全脱离文档流，脱离文档流子元素无法撑起父元素高度，将会导致父元素高度丢失，父元素一旦丢失页面的其他元素位置也会移动，导致布局的混乱。
[if !supportLists]2） [endif]BFC
[if !supportLists]1> [endif]BFC（Block Format Context）
-块级格式化环境
- BFC是元素的一个隐藏的属性，一旦元素开了BFC它将会开启一个独立的布局的区域，这个区域会独立布局，不会受到其他外部元素的影响。
这个布局区域将会具有一些特殊的性质：
1.开启了BFC的元素子元素的垂直外边距不会传递给父元素
2.开启了BFC的元素，不会被浮动的元素所覆盖（d1、d2垂直排列，d1浮动，d2上移，被d1覆盖。d2开启BFC ，挨着d1向左排列）
3.开启了BFC的元素可以包含浮动的子元素
3> BFC无法直接开启，需要通过一些属性来开启BFC
1.设置元素浮动可以开启BFC
2.将元素设置为行内块元素
3.可以将元素的overflow设置为一个非visible的（影响最小）
4>我们可以通过 overflow:hidden来开启元素的bfc，从而解决高度塌陷的went
3)清除浮动：clear用来清除浮动元素对当前元素的影响
可选值：
none默认值 不清除
left清除左侧浮动元素对当前元素的影响
right清除右侧浮动元素对当前元素的影响
both清除两侧中对当前元素影响最大的那一侧
[if !supportLists]3） [endif]解决高度塌陷和垂直相邻外边距折叠问题
1解决高度塌陷：
开启父元素BFC，overflow: hidden;
使用clearfix:
.clearfix::after{
content: “”;
dispaly:block;
clear:both;
2解决高度塌陷和垂直相邻外边距折叠问题
.clearfix::before, .clear::after{
Content: ‘ ’:
Display :table;
Clear :both;
}
