2020Web前端知识点总结-CSS篇（三）

1、CSS盒子模型

1.1、标准盒子模型

1.2、IE盒子模型

1.3、标准盒子模型和IE盒子模型之间差异

• width的包含范围不同(故这使得在计算整个盒子的宽度时存在着差异)
  • 标准盒子模型：width指content部分的宽度，
  • IE盒子模型中：width表示content+padding+border这三个部分的宽度，

1.4、盒子尺寸计算

width的包含范围不同，故这使得在计算整个盒子的宽度时存在着差异

• 标准盒子模型的盒子尺寸：左右border+左右padding+width
• IE盒子模型的盒子尺寸：width

2、CSS边框 border

2.1、边框样式border-style

同时设置上下左右四个边框样式
border-style: none;
/* 定义无边框。 */
border-style: hidden;
/* 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 */
border-style: dotted;
/* 定义点状边框。在大多数浏览器中呈现为实线。 */
border-style: dashed;
/* 定义虚线。在大多数浏览器中呈现为实线。 */
border-style: solid;
/* 定义实线。 */

分别设置上下左右四个边框样式
border-style: dotted solid double dashed;
/* 上边框是点状  右边框是实线  下边框是双线  左边框是虚线 */
border-style: dotted solid double;
/* 上边框是点状   右边框和左边框是实线	下边框是双线 */
border-style: dotted solid;
/* 上边框和下边框是点状	右边框和左边框是实线 */
border-style: dotted;
/* 所有4个边框都是点状 */

设置下边框样式
border-bottom-style: none;
/* 定义无边框。 */
border-bottom-style: hidden;
/* 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 */
border-bottom-style: dotted;
/* 定义点状边框。在大多数浏览器中呈现为实线。 */
border-bottom-style: dashed;
/* 定义虚线。在大多数浏览器中呈现为实线。 */
border-bottom-style: solid;
/* 定义实线。 */

2.2、边框宽度 border-width

同时设置上下左右四个边框宽度
border-width: thin;
/* 定义细的边框。 */
border-width: medium;
/* 默认。定义中等的边框。 */
border-width: thick;
/* 定义粗的边框。 */
border-width: 5px;
/* 允许您自定义边框的宽度。 */
border-width: inherit;
/* 规定应该从父元素继承边框宽度。 */

分别设置上下左右四个边框样式
border-width: thin medium thick 10px;
/* 上边框是细边框右边框是中等边框   下边框是粗边框  左边框是 10px 宽的边框 */
border-width: thin medium thick;
/* 上边框是细边框右边框和左边框是中等边框   下边框是粗边框 */
border-width: thin medium;
/* 上边框和下边框是细边框右边框和左边框是中等边框 */


设置下边框样式边框宽度
border-bottom-width: thin;
/* 定义细的边框。 */
border-bottom-width: medium;
/* 默认。定义中等的边框。 */
border-bottom-width: thick;
/* 定义粗的边框。 */
border-bottom-width: 5px;
/* 允许您自定义边框的宽度。 */
border-bottom-width: inherit;
/* 规定应该从父元素继承边框宽度。 */

2.3、边框颜色border-color

同时设置上下左右四个边框颜色
border-color:color; 	
/* 指定背景颜色。在CSS颜色值查找颜色值的完整列表 */
border-color:transparent; 	
/* 指定边框的颜色应该是透明的。这是默认 */
border-color:inherit; 	
/* 指定边框的颜色，应该从父元素继承 */

分别设置上下左右四个边框颜色
border-color:red green blue pink;
/* 上边框是红色   右边框是绿色   底部边框是蓝  左边框是粉红色 */
border-color：red green blue;
/* 上边框是红色   左，右边框是绿色   底部边框是蓝 */
border-color：:red green;
/* 顶部和底部边框是红色   左右边框是绿色 */
border-color：red;
/* 所有四个边框是红色 */


设置下边框样式边框颜色
border-top-color: #000;
border-left-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-bottom-color:color; 	
/* 指定背景颜色。在CSS颜色值查找颜色值的完整列表 */
border-bottom-color:transparent; 	
/* 指定边框的颜色应该是透明的。这是默认 */
border-bottom-color:inherit; 	
/* 指定边框的颜色，应该从父元素继承 */

2.4、同时设置：border-width border-style border-color;

border:border-width border-style border-color;
border:5px solid red;

2.5、边框圆角border-radius CSS3

边框圆角四个角同时设置
border-radius: 10px;
/* 定义弯道的形状。 */
border-radius: 50%;
/* 使用%定义角落的形状。 */

四个角分别设置

border-radius: 左上 右上 右下 左下;

border-top-left-radius: 2px; /* 左上 */
border-top-right-radius: 2px; /* 右上 */
border-bottom-right-radius: 2px; /* 右下 */
border-bottom-left-radius: 2px; /* 左下 */

2.6、边框图像border-image CSS3

用于指定要用于绘制边框的图像
border-image-source: url(border.png);


指定图像的边界向内偏移（number|%|fill）;
border-image-slice:20%;
/* 四个边界同时设置 */
border-image-slice:20% 20% 20% 20%;
/* 上 右 下 左 */
border-image-slice:20% 20% ;
/* 上下  左右 */
border-image-slice:20% 20% 20% ;
/* 上  右  下左 */

指定图像边界的宽度（参数：number|%|auto）
border-image-width:10px;
/* 四个边界同时设置 */
border-image-width:20% 20% 20% 20%;
/* 上 右 下 左 */
border-image-width:20% 20% ;
/* 上下  左右 */
border-image-width:20% 20% 20% ;
/* 上  右  下左 */

用于指定在边框外部绘制 border-image-area 的量
border-image-outset: length|number;


用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
border-image-repeat: stretch|repeat|round|initial|inherit;
border-image-repeat:stretch; 	
/* 默认值。拉伸图像来填充区域 	 */
border-image-repeat:repeat ;	
/* 平铺（repeated）图像来填充区域。 */
border-image-repeat:round 	;
/* 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 	 */
border-image-repeat:space 	;
/* 类似 repeat 值。如果无法完整平铺所有图像，扩展空间会分布在图像周围 	 */
border-image-repeat:initial; 	
/* 将此属性设置为默认值。查看 initial 	 */
border-image-repeat:inherit; 	
/* 从父元素中继承该属性。  */

border-image:border-image-source
			 border-image-slice 
			 border-image-width 
			 border-image-outset 
			 border-image-repeat;

2.8、box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 	必需的。水平阴影的位置。允许负值
v-shadow 	必需的。垂直阴影的位置。允许负值
blur 	可选。模糊距离
spread 	可选。阴影的大小
color 	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 	可选。从外层的阴影（开始时）改变阴影内侧阴影

2.7、边框合并折叠border-collapse用于table

border-collapse:collapse; 	
/* 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 */
border-collapse:separate; 	
/* 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 */
border-collapse:inherit; 	
/* 规定应该从父元素继承 border-collapse 属性的值 */

3、外边距margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin: 25px 50px 75px 100px;
/* 上边距为25px
    右边距为50px
    下边距为75px
    左边距为100px */
margin: 25px 50px 75px;
/* 上边距为25px
    左右边距为50px
    下边距为75px */
margin: 25px 50px;
/* 上下边距为25px
    左右边距为50px */
margin: 25px;
/* 所有的4个边距都是25px */

4、内边距padding

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

padding:25px 50px 75px 100px;
/* 上填充为25px
右填充为50px
下填充为75px
左填充为100px */
padding:25px 50px 75px;
/* 上填充为25px
左右填充为50px
下填充为75px */
padding:25px 50px;
/* 上下填充为25px
左右填充为50px */
padding:25px;
/* 所有的填充都是25px */

5、CSS 尺寸

盒子高度
height: auto;
/* 默认。浏览器会计算出实际的高度。 */
height: 200px;
/* 使用 px、cm 等单位定义高度。 */
height: 60%;
/* 基于包含它的块级对象的百分比高度。 */
height: inherit;
/* 规定应该从父元素继承 height 属性的值。 */

行高(设置行高等于盒子高度此时盒子中的内容会垂直居中)
line-height: normal;
/* 默认。设置合理的行间距。 */
line-height: number;
/* 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 */
line-height: 30px;
/* 设置固定的行间距。 */
line-height: 100%;
/* 基于当前;字体尺寸的百分比行间距。 */
line-height: inherit;
/* 规定应该从父元素继承 line-height 属性的值。 */

最大高度
max-height: none;
/* 默认。定义对元素被允许的最大高度没有限制。 */
max-height: 600px;
/* 定义元素的最大高度值。 */
max-height: 50%;
/* 定义基于包含它的块级对象的百分比最大高度。 */
max-height: inherit;
/* 规定应该从父元素继承 max-height 属性的值。 */

最小高度
min-height: 100px;
/* 定义元素的最小高度。默认值是 0。 */
min-height: 20%;
/* 定义基于包含它的块级对象的百分比最小高度。 */
min-height: inherit;
/* 规定应该从父元素继承 min-height 属性的值。 */

宽度
width: auto;
/* 默认值。浏览器可计算出实际的宽度。 */
width: 300px;
/* 使用 px、cm 等单位定义宽度。 */
width: 100%;
/* 定义基于包含块（父元素）宽度的百分比宽度。 */
width: inherit;
/* 规定应该从父元素继承 width 属性的值。 */

最大宽度
max-width: none;
/* 默认。定义对元素的最大宽度没有限制。 */
max-width: 600px;
/* 定义元素的最大宽度值。 */
max-width: 60%;
/* 定义基于包含它的块级对象的百分比最大宽度。 */
max-width: inherit;
/* 规定应该从父元素继承 max-width 属性的值。 */

最小宽度
min-width: 200px;
/* 定义元素的最小宽度值。默认值：取决于浏览器。 */
min-width: 20%;
/* 定义基于;包含它的块级对象的百分比最小宽度。 */
min-width: inherit;
/* 规定应该从父元素继承 min-width 属性的值。 */

6、CSS 轮廓outline

• 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

• CSS outline 属性规定元素轮廓的样式、颜色和宽度。

• outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）

在一个声明中设置所有的轮廓属性
outline:outline-color outline-style outline-width;

设置轮廓的颜色
outline-color:color-name;
outline-color:hex-number;
outline-color:rgb-number;
outline-color:invert;
outline-color:inherit; 

设置轮廓的样式
outline-style:none;
outline-style:dotted;
outline-style:dashed;
outline-style:solid;
outline-style:double;
outline-style:groove;
outline-style:ridge;
outline-style:inset;
outline-style:outset;
outline-style:inherit;	

设置轮廓的宽度
outline-width:thin;
outline-width:medium;
outline-width:thick;
outline-width:length;
outline-width:inherit;