css样式

1. 字体段落相关属性

color：字体颜色

十六进制值 - 如"＃FF0000" 一个RGB值 - "RGB（255,0,0）" 颜色的名称 - 如"#red

font-size：指定字体大小 -14px text-align：对齐方式

left：把文本排列到左边。默认值：由浏览器决定。 right：把文本排列到右边。 center：把文本排列到中间。 justify：实现两端对齐文本效果。 inherit：规定应该从父元素继承 text-align 属性的值

line-height：文本行高

normal： 默认。设置合理的行间距。 number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length：设置固定的行间距。 %： 基于当前字体尺寸的百分比行间距。 inherit： 规定应该从父元素继承 line-height 属性的值

--- 实现垂直居中（行高 = 盒子高)

list-style：li样式

none 取消默认样式

2. bacground：背景 background-color 背景颜色 background-image 背景图片 background-repeat 背景图片水平或垂直平铺或重复 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-position 改变图像在背景中的位置

css3 新增属性

background-size 背景图片大小 background-origin 指定背景图像的定位区域 background-clip 指定背景图像的绘画区域

行内元素和块级元素和行内块元素

使用display：block；可以将元素转换为块级元素 使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见 使用display：inline-block；可以将元素转换为行内块元素

元素的隐藏

使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样 使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置

盒子模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型 (Box Model)：

width属性 width属性表示盒子内容的宽度 width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位 当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

border属性

border: 宽度 样式 颜色;

padding属性

padding属性是盒子的内边距，即盒子边框内壁到文字的距离 padding属性可以使用固定数值或百分比进行赋值，但不能使用负值 padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding

margin属性

margin是盒子的外边距，即盒子与其他盒子的距离 定义规则类似于padding margin塌陷问题