border-*-radius

通过上面的介绍我们知道，通过 border-*-radius 系列函数能够分别为元素的四个角设置圆角效果，函数的语法格式如下：

border-*-radius：[ | ]{1,2}

语法的含义为，需要为 border-*-radius 属性提供 1~2 个参数，参数之间使用空格进行分隔。其中第一个参数表示圆角水平方向的半径或半轴，第二个参数表示圆角垂直方向的半径或半轴，如果省略第二个参数，那么该参数将直接沿用第一个参数的值。

使用四个 border-*-radius 属性为元素设置圆角效果：

 .one {
            border-top-left-radius: 2em 0.5em;
            border-top-right-radius: 1em 3em;
            border-bottom-right-radius: 4em 0.5em;
            border-bottom-left-radius: 1em 3em;
            background-color: #CCC;
            margin-bottom: 10px;
        }

border-radius

border-radius 属性是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 四个属性的简写形式，使用 border-radius 可以同时设置四个 border-*-radius 属性。border-radius 属性的格式如下：

border-radius：[ | ]{1,4} [ / [ | ]{1,4} ]?

语法说明如下：

• border-radius 属性可以接收两组参数，参数之间使用斜杠/进行分隔，每组参数都允许设置 1~4 个参数值，其中第一组参数代表圆角水平方向上的半径或半轴，第二组参数代表圆角垂直方向上的半径或半轴，如果省略第二组参数的值，那么该组参数将直接沿用第一组参数的值。
• 第一组参数中，如果提供全部的四个参数，那么将按照上左 top-left、上右 top-right、下右 bottom-right、下左 bottom-left 的顺序作用于元素的四个角；如果提供三个参数，那么第一个参数将作用于元素的左上角 top-left，第二个参数将作用于元素的右上角 top-right 和左下角 bottom-left，第三个参数将作用于元素的右下角 bottom-right；如果提供两个参数，那么第一个参数将作用于元素的左上角 top-left 和右下角 bottom-right，第二个参数将作用于元素的右上角 top-right 和左下角 bottom-left；如果只提供一个参数，那么该参数将同时作用于元素的四个角。
• 第二组参数同样遵循第一组参数的规律，只是作用的方向不同。

 .test2 .four {
        border-radius: 10px 20px 30px 40px/5px 10px 15px 20px;
    }

9. vertical-align

vertical-align 属性用来定义元素内文本的垂直对齐方式：

上表中提到了基线、底线、顶线、中线等概念，它们到底指什么呢

• 顶线：中文汉字的上边沿；
• 中线：贯穿小写英文字母 x 中间的线；
• 基线：小写英文字母 x 的下边沿；
• 底线：中文汉字的下边沿；
• 内容区：指底线与顶线包裹的区域；
• 行高：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高，也可以认为是相邻文本行基线间的距离；
• 行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离；
• 行内框：是一个浏览器渲染模型中的概念，无法显示出来，但是它又确实存在，它的高度与行高相同；
• 行框：同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

置换元素

有这样一个疑问，为什么img是行内元素，但是它还可以设置宽高？是因为img是典型的置换元素

置换元素：img , input , select ,textarea , label , Button

没有实际的内容，只是一个空元素 ，
1.置换元素的内容不受css约束，它拥有默认的宽度和高度，比如button在页面有默认的大小，input框有默认的大小。而span标签是没有这个属性的。
2.浏览器根据元素的标签和属性，来决定元素的具体显示内容，是可替换的元素

非置换元素

1.有内容，是不可改变的，里面显示什么内容，浏览器就渲染显示什么内容。

html和body的区别

1. 在页面的设计中，当我们没有为一个div块级元素设置宽度和高度的时候，浏览器会为其分配一个最大可用的宽度，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的，所以html和body标签也是由子元素撑起来的；

2. 元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用，如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用，此时的情况是父元素高度依赖子元素堆砌撑高，而子元素依赖父元素的定高不起作用，互相依赖，却都无法依赖，死循环了；

3. 浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的。

   :root

   　　css 伪类匹配文档的根元素。

   　　对于 HTML 来说， :root 表示元素，除了优先级更高之外，与 html 选择器相同。

   　　非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用

   var()

   　　var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

   :root{
            /* background-color: antiquewhite; */
            --default-bg-color: green; /* 设置变量*/
        }
        .box2{
            background-color: var(--default-bg-color); /*引用变量*/
            height: 100%;
        }

   css书写顺序

   css的顺序能决定网页渲染性能。
   1、布局定位属性
   display、posotion、float、clear、visibility、overflow（建议display第一个写，关系到模式）

2、自身属性
width、height、margin、padding、border、background

3、文本属性
color、font、text-decoration、text-align、vertical-align、white-space、break-wird

4、其他属性（CSS3）
content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient…

BFC块级格式化上下文

BFC(Block Formatting Context),一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素。

形成一个BFC的条件

只要满足以下任一条件，即可形成BFC区域

• 浮动元素（float为left或者right）；
• 绝对定位元素（position 的值为absolute或fixed）；
• 非块级元素的块级容器（display 的值为inline-block、table-cell、table-caption、flex，inline-flex）
• overflow 的值不为 visible；

只要符合一个就可以触发BFC，创建BFC最常见的做法是使用overflow:hidden，因为它几乎不会造成任何负面影响。

BFC的特点

• 同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并（即上面元素的margin-bottom和下边元素的margin-top会合并，当二者不一致时将以最大的那个外边距为准）；
• BFC不会与浮动元素重叠（overflow:hidden可以实现左侧固定右侧100%效果利用的就是这个特性）；
• BFC可以包含浮动（给父容器设置overflow:hidden可以清除浮动利用的就是这个特性）；
• 在BFC中，每个盒子的margin-left紧挨着包含块的border-left（从右到左的格式，则为紧挨右边框）。

总结

• 一个BFC区域只包含其子元素，不包括其子元素的子元素
• 并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域
• 不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响

BFC的用途

1. 使用BFC来防止外边距折叠

上面我们知道，同一个BFC内部相邻两个垂直方向的块级元素会发生margin合并，如果他们属于不同的BFC，他们之间的外边距将不会折叠。所以通过创建一个新的BFC我们可以防止外边距折叠。

2. 使用BFC清除浮动

清除浮动通常使用clear:both来实现，但也可以通过创建一个BFC来清除浮动（通常的做法是给浮动父元素设置overflow:hidden）。

3. 使用BFC实现左侧固定右侧100%的布局