CSS核心属性

1.字体属性 font

1.1 字体大小 font-size

属性值为数值型时，必须给属性值加单位，属性值为0时除外。

例：div{font-size:12px;}//将div里字体大小设为12px

单位关系：1em = 一个字体的大小 ，9pt=12px

1.2 字体颜色 color

颜色表示：十六进制，颜色模式，单词

例：div{color:red;}//将div里字体颜色设为红色

1.3 字体家族 font-family

多个字体用逗号隔开

当字体是中文字体时需加引号

当英文字体中有空格时需加引号如“Times New Roman”

1.4 字体加粗 font-weight

在css规范中把字体的粗细分为9个等级，分别从100-900，其中100对应最轻的字体变形，而900对应最重的字体变形。

font-weight:bolder加粗/bold加粗/normal无/100-900;

100-500常规字体

600-900加粗字体

 

1.5 字体风格 font-style

font-style:normal常规字体/italic倾斜/oblique倾斜;

2.文本属性 text

2.1 检索文本大小写 text-transform

text-transform:none无/capitalize首字母大写/uppercase转大写/lowercase转小写

2.2 水平对齐方式 text-align

text-align:left左对齐/right右对齐/center居中对齐/justify两端对齐（中文不起作用）;

2.3 垂直对齐方式 vertical-align

vertical-align:top顶部对齐/bottom底部对齐/middle中线对齐;（默认基线对齐）

2.4 行高 line-height

line-height:normal/数值;

当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；

2.5 文本修饰 text-decoration

text-decoration:none/underline/overline/line-through/blink

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

blink：闪烁

2.6 首行缩进 text-indent

text-indent:value;

可以取负值；

只对第一行起作用。

2.7 字间距 letter-spacing

控制英文字母或汉字的字距。

2.8 词间距 word-spacing

控制英文单词词距。

3.列表属性 list

3.1列表符号样式

list-style-type:disc(实心圆)/ circle（空心圆）/square(实心方块 ) /none(去掉列表符号)；

3.2 图片作为列表符号

list-style-image:url(所使用图片的路径);

3.3列表符号位置

list-style-position:outside/inside;

3.4简写：list-style:;

4.边框属性 border

4.1边框宽度 border-width

例：border-width：2px；

4.2 边框样式 border-style

solid:实线 | dashed:虚线| dotted:点状线| double:双线| none:没有边框

4.3 边框颜色 border-color

5.背景属性 background

5.1 背景颜色

语法：选择符{background-color:颜色值;}

5.2 背景图片的设置

语法：background-image:url(背景图片的路径及全称);

5.3 背景图片的显示原则

容器尺寸等于图片尺寸，背景图片正好显示在容器中;

容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。

5.4 背景图片平铺属性

语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

no-repeat:不平铺 repeat平铺  repeat-x横向平铺  repeat-y：纵向平铺

5.5 背景图片的位置

语法：选择符{background-position：水平方向属性值 垂直方向属性性;}

水平方向值：left/center/right或数值 

垂直方向值： top/center/bottom或数值

5.6 背景属性缩写

语法：选择符{background：属性值1 属性值2 属性值3;}

6.浮动属性 float

描述：
设置了浮动属性的元素脱离了标准流（从上到下排序），后面的元素将会占据原来的位 置。

语法：float:none/left/right;

left：左浮动  right：右浮动none：没有浮动

7.元素类型display

7.1 元素分类

三种类型:块状元素，内联(行内)元素，行内块元素

7.2 内联(行内)元素：不可置换元素

特点：一行显示多个，不能设置宽高，宽高由内容决定

代表标签：a,span,b,u,i,s,strong,em,ins,del

设置：display: inline

7.3 块状元素

特点：单独占据一行，从上往下排序，可设置宽高；

代表标签：p,h1-h6,div,ul,li,ol,dl,dt,dd

设置：display:block

用法：块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和部分块状元素。我们可以把这种容器比喻为一个盒子。

7.4 行内块元素 ：可置换元素

特点：可以设置宽高，一行内可显示多个。

代表标签：img,input，textarea

设置：display:inline-block

7.5 元素之间显示方式切换

修改display属性、使用浮动（为inline-block）

 

8. 定位 position

 

8.1静态定位 static（默认值）

描述：

1.position:static; 静态定位。

2.所有的标准流（文档流）中的元素都是静态定位。

Left、bottom、top、right都是无效的。

 

8.2相对定位 relative

描述：

1.使用的时候可配合：top,left,right,bottom来使用。

2.设置了相对定位的元素,即使发生了偏移,在页面上还占据着为变动前的位置.

3.未脱离标准流。总结：灵魂出窍。

8.3绝对定位 absolute

描述：

1.如果设置绝对定位的元素的父级有定位属性，该元素就会按父级的位置进行定位。

如果父级没有设置定位属性，那么他就在外父元素的父元素找。如果都没有就会根据 body和html进行定位。

2.绝对定位以后的元素会脱离标准流,不占据原来的位置.

 

8.4 固定定位 fixed

描述：

1.不管页面有多大，固定定位永远是相对于浏览器的可视区域来的。

2.固定定位的元素也脱离了标准流（不在页面上占据位置）

8.5 层级关系 z-index

描述：

多个元素设置定位属性后，会出现想要显示的元素被遮住，此时你就要设置层级把你想要显示的内容设到最高

注意事项：

1. z-index可以取所有的整数（负整数，0，正整数）

2. z-index只能与定位一起使用