边框圆角 

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;

}