CSS的基本属性，行级、块级、行级块标签，盒子模型

CSS基本属性

文本属性

color:字体颜色。
font-size:字体大小。
font-family：字体大小。 
text-align:文本水平对齐方式。取值：left center right
text-decoration:定义穿过文本的一条线。取值：line-through：穿过文本  underline：文本下   none：标准文本
font-style：italic:斜体文本。
font-weight：字体粗细。
line-height：行高。
letter-spacing:指定字符间距  适用于中文。
word-spacing:指定字符间距  单词间。
text-indent:首行缩进。

需注意：这里的首行缩进最好使用em作为单位，1em=当前1个文字尺寸。可以避免因为文本样式的改变导致缩进变大或变小。

背景属性

background-color：背景颜色。
background-image：背景图片。值：url（图片路径）。
background-repeat：背景重复。取值：no-repeat 不重复   repeat-x 水平重复   repeat-y  垂直重复
background-size：背景尺寸。值：宽（xpx） 高（ypx）
background-position：背景位置。值：水平  垂直

需注意：背景图片的优先级高于背景颜色，背景图片不占标签空间。

CSS列表

list-style-type:设置列表项标志类型。如之前的无序列表项图标是小黑点，可以改变为小圆圈。
list-style-image:用图片替换列表项标志。
list-style-position:控制列表项标志位置。取值：outside 列表项图标不与文字在一起  inside 列表项图标与文字紧随
list-style:简写属性，可直接罗列所需列表项属性，无顺序。

CSS伪类

作用：表示标签的一种特殊状态，为处在不同状态的标签设置样式。例如：鼠标移动或者点击标签之后。

伪类语法如下：

:link 普通链接（未访问）。
:visited  访问过的链接。
:hover  鼠标移动到标签上的状态。
:active  鼠标点击后的状态。
:focus  键盘输入焦点（输入框）修改样式。
透明度（CSS属性，不局限于伪类）
opacity  规定标签透明度。 取值：0.0（完全透明）-> 1.0（完全不透明）

需注意：“:visited”是浏览器通过访问历史记录知道这个标签是否已经访问过了的，它只能设置字体的颜色。 当设置带有超链接的标签时，标签使用是有顺序的：visited——>hover——>active

行级、块级、行级块标签

重点：我们要清除的理解关于行级、块级、行级块的概念，因为只有理解这几种标签的区别和不同，你才能学懂下面要讲的漂浮float和定位position。

行级标签

无论行级标签中的内容有多少都只会占据自身的大小，不会霸道的直接占据一行，但是它也有点小固执，它只想顾好自己的一亩三分地，即使你给它设置更大的宽、高值它都不变。

块级标签

块级标签就像是一个需要人哄着的孩子。不管它有多少内容都会牢牢的占据一行，雷打不动。但是它不倔强，只要你劝他，给他设置宽width、高height值它就会改变。

需注意：

默认宽：与父级标签相同。
默认高：“0”或者“与内容高度一致”

行级块标签

行级块标签算是三兄弟当中最最听话的了，它既不会霸道的占据一行，又可以给它设置大小。

注意：

一般使用块级标签包含行标签。
可以包含任何标签，但不可以包含本身。
p标签不能包含块级标签。

两个纯净的标签

我们知道在之前学习的各种属性标签中既有像标题标签、p标签这样的块级标签，也有像b标签，i标签这样的行级标签，但是这些标签或多或少都会有自己的样式或者自带的边距之类的，这就给我们CSS的设定样式和定位造成了一定的影响，因此，下面将介绍两个纯净无暇的标签。

div标签

纯净的块级标签。

块级标签，可以放置任何标签。
没有默认样式，给什么属性就变成什么样式。
可以用来进行网页布局。

span标签

纯净的行级标签。

行级标签。
没有默认样式，给什么属性就变成什么样式。
是用来选中文档文字的。

Display

作用：

通过display样式修改标签类型。

display：

block; ：设置标签为块级标签。
inline; ：设置标签为行级标签。
inline—block; ：设置标签为行级块标签。
none; ： 让标签在网页上消失，不占用网页空间。

盒子模型

一个盒子模型（标签）是由四个部分组成：

内容区（content)

内边距（padding）

边 框（border）

外边距（margin）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GI532FmX-1601982612661)(C:\Users\caichunlei2017\AppData\Roaming\Typora\typora-user-images\1601981083820.png)]

内容区-content

标签中的内容都存储在内容区中。（例如：文字，子标签等）

width和height只是内容区的大小，不是整个标签的大小。若没有内边距和边框，那么内容区的大小就是标签的大小。width和height只适用于块级标签。

内边距-padding

内容区到边框之间的距离，会影响标签的大小。

padding-left/right/bottom/top
padding:10px;上下左右内边距相同。
padding:10px 5px;上下内边距  左右内边距。
padding:10px 9px 8px 7px;上 下 左 右。

边框-border

在标签周围创建边框，是标签可见的最外部。

border-top/left/bottom/right  边框线
线条设置取值：color 线条颜色  width 线宽  style  线的类型
线的类型：solid实线  dotted点线  dashed虚线 double双线 goove槽线
简写 例：border-bottom:1px red solid;下框线
		border:1px red solid;全部框线

注意：标签实际大小=内容区+内边距+边框

外边距-margin

在标签边框距周围标签的空间。使用margin属性可以设置外边距。

margin-top/left/bittom/right  外边距
margin的值可以为负。
margin-left/right：auto；左右外边距自动时，左右外边距达到最大值，水平居中效果。
margin-top/bottom:auto;  设置auto时值一般为0px，因此不建议直接设置为auto，可以设置为具体值。
margin的其它用法基本和padding相同。

清除浏览器默认样式

*{
	margin：0px；
	padding：0px；
}

清除一些标签自带的margin和padding。