CSS Cascading Style Sheets - Properties/Box Model

1. Attributes

(1) Font properties

Official document: https://www.apiref.com/css-zh/properties/font/index.htm

1）font-style

specify font style

attribute usage	describe
value	normal、italic、oblique
grammatical format	font-style:italic;

2）font-weight

Specifies the text font weight

attribute usage	describe
value	normal, bold, bolder, lighter, integers from 100 to 900
grammatical format	font-weight:bold;

3）font-size

specify font size

attribute usage	describe
value	<absolute-size>、<relative-size>、<length>、<percentage>
grammatical format	font-size:20px or font-size:2em ((em means multiple, for example, the current font is 12px, this is 2em, the font will become 24px))

4）font-family

Specify text to use a font or font sequence

attribute usage	describe
value	font or font sequence
grammatical format	font-family:Microsoft Yahei;

(2) Border property

Official document: https://www.apiref.com/css-zh/properties/backgrounds/index.htm

1）border

set border style

attribute usage	describe
value	border:{set border thickness} {set border style} {set border color}
grammatical format	border:1px solid blue;

2）border-width

set border thickness

attribute usage	describe
value	border-width: border thickness
grammatical format	border-width:2px;

Set the thickness of the border on one side

border-top-width: set the top border thickness

border-right-width: set the right border thickness

border-bottom-width: set the bottom border thickness

border-left-width: set the thickness of the left border

3）border-style

set border style

attribute usage	describe
value	none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
grammatical format	border-style:solid;

4）border-color

set border color

attribute usage	describe
value	border-color: border color
grammatical format	border-color:blue;

Set the single border color

border-top-color: set the top border color

border-right-color: set the right border color

border-bottom-color: set the bottom border color

border-left-color: set the left border color

(3) Text attributes

Official document: https://www.apiref.com/css-zh/properties/text/index.htm

1）text-align

Defines the horizontal alignment of the element's content

attribute usage	describe
value	left、center、right
grammatical format	text-align:center;

2）text-indent

Defines the indentation of text content within a block

attribute usage	describe
value	<length>、<percentage>
grammatical format	text-indent:2em;

3）vertical-align

Defines the vertical alignment of inline elements within the line box

attribute usage	describe
value	baseline、sub、super、top、text-top、middle、bottom、text-bottom、<percentage>、<length>
grammatical format	vertical-align:middle;

4）letter-spacing

specify extra space between characters

attribute usage	describe
value	normal、<length>
grammatical format	letter-spacing:20px;

5）text-transform

Defines how the element's text is converted to case

attribute usage	describe
value	none、capitalize、uppercase、lowercase、full-width
grammatical format	text-transform:capitalize;

6）word-spacing

specify extra space between words

attribute usage	describe
value	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