CSS-属性 /盒子模型

1、属性

（1）字体属性

• 官方文档：https://www.apiref.com/css-zh/properties/font/index.htm

1）font-style

• 指定字体风格

属性用法	描述
取值	normal、italic、oblique
语法格式	font-style:italic;

2）font-weight

• 指定文本字体粗细

属性用法	描述
取值	normal、bold、bolder、lighter、100~900的整数
语法格式	font-weight:bold;

3）font-size

• 指定字体大小

属性用法	描述
取值	<absolute-size>、<relative-size>、<length>、<percentage>
语法格式	font-size:20px 或者 font-size:2em（（em表示倍数，例如当前字体为12px，这是2em，字体将变成24px））

4）font-family

• 指定文本使用某个字体或者字体序列

属性用法	描述
取值	字体 或 字体序列
语法格式	font-family:Microsoft Yahei;

（2）边框属性

• 官方文档：https://www.apiref.com/css-zh/properties/backgrounds/index.htm

1）border

• 设置边框样式

属性用法	描述
取值	border:{设置边框厚度} {设置边框样式} {设置边框颜色}
语法格式	border:1px solid blue;

2）border-width

• 设置边框厚度

属性用法	描述
取值	border-width:边框厚度
语法格式	border-width:2px;

设置单边边框厚度

• border-top-width：设置顶部边框厚度
• border-right-width：设置右边框厚度
• border-bottom-width：设置底部边框厚度
• border-left-width：设置左边框厚度

3）border-style

• 设置边框样式

属性用法	描述
取值	none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
语法格式	border-style:solid;

4）border-color

• 设置边框颜色

属性用法	描述
取值	border-color:边框颜色
语法格式	border-color:blue;

设置单边边框颜色

• border-top-color：设置顶部边框颜色
• border-right-color：设置右边框颜色
• border-bottom-color：设置底部边框颜色
• border-left-color：设置左边框颜色

（3）文本属性

• 官方文档：https://www.apiref.com/css-zh/properties/text/index.htm

1）text-align

• 定义元素内容的水平对齐方式

属性用法	描述
取值	left、center、right
语法格式	text-align:center;

2）text-indent

• 定义块内文本内容的缩进

属性用法	描述
取值	<length>、<percentage>
语法格式	text-indent:2em;

3）vertical-align

• 定义行内元素在行框内的垂直对齐方式

属性用法	描述
取值	baseline、sub、super、top、text-top、middle、bottom、text-bottom、<percentage>、<length>
语法格式	vertical-align:middle;

4）letter-spacing

• 指定字符之间的额外间隙

属性用法	描述
取值	normal、<length>
语法格式	letter-spacing:20px;

5）text-transform

• 定义元素的文本如何转换大小写

属性用法	描述
取值	none、capitalize、uppercase、lowercase、full-width
语法格式	text-transform:capitalize;

6）word-spacing

• 指定单词之间的额外间隙

属性用法	描述
取值	normal、<length>、<percentage>
语法格式	word-spacing:20px;

7）line-height

• 定义元素中行框的最小高度

属性用法	描述
取值	设置方法：normal、<length>、<percentage>、<number>
语法格式	line-height:10px;

（4）尺寸与补白

• 官方文档：https://www.apiref.com/css-zh/properties/dimension/index.htm

1）width

• 定义元素宽度

属性用法	描述
取值	<length>、<percentage>、auto
语法格式	width:200px;

2）height

• 定义元素内容区域高度

属性用法	描述
取值	<length>、<percentage>、auto
语法格式	height:200px;

3）margin

• 为元素设置外边距

属性用法	描述
取值	<length>、<percentage>、auto
语法格式	margin:20px;

单边设置外边距

• margin-top：设置顶部外边距
• margin-right：设置右边外边距
• margin-bottom：设置底部外边距
• margin-left：设置左边外边距

4）padding

• 为元素设置内边距

属性用法	描述
取值	<length>、<percentage>、auto
语法格式	padding:20px;

单边设置内边距

• padding-top：设置顶部内边距
• padding-right：设置右边内边距
• padding-bottom：设置底部内边距
• padding-left：设置左边内边距

（5）布局属性

• 官方文档：https://www.apiref.com/css-zh/properties/layout/index.htm

1）display

• 设置或检索对象是否及如何显示
• 文档：https://www.apiref.com/css-zh/properties/layout/display.htm

属性用法	描述
取值	none、inline、block 、 list-item 、 inline-block 、 table 、 inline-table 、 table-caption 、 table-cell 、 table-row 、 table-row-group 、 table-column 、 table-column-group 、 table-footer-group 、 table-header-group 、 run-in 、 box 、 inline-box 、 flexbox 、 inline-flexbox 、 flex 、 inline-flex
语法格式	display:block;

2）float

• 定义了元素向左或者向右浮动放置
• 文档：https://www.apiref.com/css-zh/properties/layout/float.htm

属性用法	描述
取值	none、left、right
语法格式	float:left;

① 文档流

• 文档流：就是指文档的排列顺序；
• 标准文档流：浏览器中网页的各个元素默认排列的方式（从上到下，从左到右）；
• 脱离标准文档流：不按照默认的方式，进行排列；

② 浮动的影响

• 浮动元素，会脱离标准文档流, 后面元素会向上移动
• 父元素的高度发生了变化 ，因为浮动元素脱离标签文档流
• 浮动元素变成了行内块级元素（在一行显示，可以设置宽高）

③ 清除浮动影响的方式

• 父元素设置高度
• 父元素添加一个最小的块级子元素，给子元素设置 clear:both; 属性
• 父元素设置 overflow:hidden; 属性
• 父元素设置伪元素（after）
• 父元素一起浮动

④ overflow 清除浮动与clear:both 清除浮动的区别

• overflow 清除浮动：不会新增元素，易于使用，overflow对于绝对定位的元素不能清除浮动
• clear:both清除浮动：需要新增元素，性能较低，可以清除任何元素的浮动

3）clear

• 定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置
• 文档：https://www.apiref.com/css-zh/properties/layout/clear.htm

属性用法	描述
取值	none、left、right、both
语法格式	clear:both;

4）visibility

• 定义了元素是否可见
• 文档：https://www.apiref.com/css-zh/properties/layout/visibility.htm

属性用法	描述
取值	visible 、 hidden 、 collapse
语法格式	visibility:hidden;

5）overflow

• 定义了元素处理溢出内容的方式
• 文档：https://www.apiref.com/css-zh/properties/layout/overflow.htm

属性用法	描述
取值	visible 、 hidden 、 scroll 、 auto 、 clip
语法格式	overflow:hidden;

（6）定位属性

• 官方文档：https://www.apiref.com/css-zh/properties/positioning/index.htm

1）position

• 用于指定一个元素在文档中的定位方式
• 文档：https://www.apiref.com/css-zh/properties/positioning/position.htm

属性用法	描述
取值	static 、 relative 、 absolute 、 fixed 、 sticky
语法格式	position:absolute;

2）z-index

• 定义一个元素在文档中的层叠顺序
• 文档：https://www.apiref.com/css-zh/properties/positioning/z-index.htm

属性用法	描述
取值	auto、<integer>
语法格式	z-index:1;

3）top

• 定义了元素的上外边距边界与其包含块上边界之间的偏移
• 文档：https://www.apiref.com/css-zh/properties/positioning/top.htm

属性用法	描述
取值	auto、<length>、<percentage>
语法格式	top:100px;

4）right

• 定义了元素的右外边距边界与其包含块右边界之间的偏移
• 文档：https://www.apiref.com/css-zh/properties/positioning/right.htm

属性用法	描述
取值	auto、<length>、<percentage>
语法格式	right:100px;

5）bottom

• 定义了元素的底外边距边界与其包含块底边界之间的偏移
• 文档：https://www.apiref.com/css-zh/properties/positioning/bottom.htm

属性用法	描述
取值	auto、<length>、<percentage>
语法格式	bottom:100px;

6）left

• 定义了元素的左外边距边界与其包含块左边界之间的偏移
• 文档：https://www.apiref.com/css-zh/properties/positioning/left.htm

属性用法	描述
取值	auto、<length>、<percentage>
语法格式	left:100px;

7）clip

• 定义了元素的哪一部分是可见的。区域外的部分是透明的
• 文档：https://www.apiref.com/css-zh/properties/positioning/clip.htm

属性用法	描述
取值	auto、<shape>
语法格式	clip: rect(auto 50px 20px auto)

（7）颜色属性

• 官网文档：https://www.apiref.com/css-zh/index.htm

属性用法	描述
取值	英文单词、16进制代码、rgb、rgba 、transparent(透明)
语法格式	color:#ffffff;

注意

• rgb，全称Red Green Blue，r(红色)，g(绿色)，b(蓝色)
• rgba，全称Red Green Blue Alpha，它是在 RGB 上扩展包括了 “alpha” 通道，r(红色)，g(绿色)，b(蓝色)，a(透明度)
• 除了设置线条颜色外，还可以设置为透明（transparent）

（8）列表属性

• 官方文档：https://www.apiref.com/css-zh/properties/list/index.htm

1）list-style

• 设置列表项目相关内容

属性用法	描述
取值	list-style:{项目符号样式} {项目符号排列方式} {设置图像项目符号}
语法格式	list-style:disc outside none;

（9）表格属性

• 官方文档：https://www.apiref.com/css-zh/properties/table/index.htm

1）border-collapse

• 设置或检索表格的行和单元格的边是合并还是独立

属性用法	描述
取值	separate、collapse
语法格式	border-collapse:collapse;

2）border-spacing

• 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距

属性用法	描述
取值	<length>
语法格式	border=spacing:20px;

（10）变换

• 官方文档：https://www.apiref.com/css-zh/properties/transform/index.htm

1）transform

• 设置或检索对象的转换

属性用法	描述
取值	none、translate()、scale()、rotate()、skew()
语法格式	transform:translate(100px,100px);

注意

• 这里取值，只是列举了部分值，详细文档请参考官方文档

（11）过渡

1）transition

• 检索或设置对象变换时的过渡
• 官方文档：https://www.apiref.com/css-zh/properties/transition/index.htm

属性用法	描述
取值	transition:{过渡的属性} {过渡的持续时间} {过渡的动画类型} {延迟过渡的时间}
语法格式	transition:all .5s linear .5s

（12）动画

• 官方文档：https://www.apiref.com/css-zh/properties/animation/index.htm

1）animation

• 检索或设置对象所应用的动画特效

属性用法	描述
定义动画	方法1：@keyframes 动画名{from{动画效果} to{动画效果}}；方法2：@keyframes 动画名{0%{动画效果} 50%{动画效果} 100%{动画效果}}
取值	animation: {动画名称} {持续时间} {过渡类型} {延迟时间} {次数} {是否停在终点} {往返}
语法格式	animation 动画名 1s linear 1s 3 forwards alternate

2、盒子模型

• 盒子模型是CSS非常重要的思维模型
• 把每一个标签当成一个矩形盒子
• 布局就是通过不同大小的盒子按照不同的排列方式组合而成
• 盒子与盒子之间可以相互影响

（1）盒子模型类型

• 标准盒子模型
• 怪异盒子模型
• 注意：只要完整定义DOCTYPE都会触发标准模式，如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式

1）标准盒子模型

① 标准盒子模型组成

• width：设置的宽度
• height：设置的高度
• padding：内填充
• border：边框
• margin：外边距(透明的)

② 标准盒子模型计算方式：

• 宽度：width + padding * 2 + border * 2 + margin * 2
• 高度：height + padding * 2 + border * 2 + margin * 2

2）怪异盒子模型组成

① 怪异盒子模型组成

• width：设置的宽度
• height：设置的高度
• margin：外边距

② 怪异盒子模型计算方式：

• 宽度：width(包含padding * 2 + border * 2) + margin * 2
• 高度：height(包含padding * 2 + border * 2) + margin *2

更多CSS属性学习，请参考官网文档

https://www.apiref.com/css-zh/index.htm