1、字体
font-size:一般我们常用的字体大小为12px 14px 16px，
【注】谷歌浏览器支持的最小字体只有12px。
color：字体颜色
font-weight：normal（默认正常） bold（加粗）
font-family: 字体
font-style:normal(默认正常) italic(斜体)
2、文本属性
text-indent:文本缩进
text-align:对齐方式, left center right
text-overflow（clip、ellipsis）
【注】这个属性需要配合overflow来使用，将overflow设置hidden
clip:直接截断
ellipsis：单行最后显示省略号
white-space:nowrap; 【了解】强制在一行显示所有文本
text-decoration（none、underline(下划线)、overline（上划线）、line-through（删除
线） ）
text-shadow：给文本设置阴影效果
text-shadow：1px 1px 1px red;
值1：水平偏移值
值2：垂直偏移值
值3：阴影模糊度,一般取值1px 2px
值4：阴影颜色
line-height:行高
【注】将行高设置为和div高度一样，则文本就会垂直居中
vertical-align：由于很多浏览器不兼容这个属性，所以不推荐使用该属性。
当碰见图片和文字水平布局的时候，使用这个属性。
将文字行高设置和div高度一样，将图片设置为垂直居中。
3、背景
background-color：背景色
background-image:url(图片地址)
background-repeat：
repeat:重复背景（默认）
no-repeat：不重复背景图
repeat-x：水平方向重复背景图
repeat-y：垂直方向重复背景图
background-attachment
fixed：（了解）相对窗口固定，当显示该div的时候，背景图才显示出来
local：背景图会随着内容的滚动而滚动
scroll：默认属性，背景图不会随着内容的滚动而滚动
background-position（left、center、right、top、bottom、xy值）
x值：图片水平方向偏移的距离
y值：图片垂直方向偏移的距离，参考00点在div的左上角
简写形式：该简写形式没有顺序，中间以空格隔开
/简写形式为/
background:url(cjk.png) norepeat 50px 50px;
4、列表
list-style：none
list-style-image:自定义前面显示的图片
list-style-position：inside（小点在li里面） outside（默认，小点在li外面）
list-style-type：li前面小点的类型，见css手册
5、布局
float（left、right）
脱离文档流，在更高一层级来布局，不会影响原来的布局，但是会盖住父级上面的
其他内容
clear（left、right、both）
清楚浮动，如果上面有浮动的元素，那么下面布局其他元素的时候会被浮动的元素
盖住，这时候就需要清除浮动，从浮动元素的下面开始布局。
clear:both;
display（none、inline-block、block、inline）
inline-block：切换为行内块
block：切换为块
inline：切换为行内元素
none：让标签消失，位置也不再
visibility（visible、hidden）：让标签消失，但是位置依然存在
overflow（visible、hidden、scroll、auto）
当内容超出div的宽度或者高度的时候，
visible：默认属性，显示出来
hidden：超出部分隐藏
scroll：显示滚动条，滚动显示
auto：自动显示滚动条
overflow-x：scroll
overflow-y：scroll
属性值和上面的一样，一个x方向的特点，一个是y方向的特点
white-space:nowrap在一行显示
6、定位
position（relative、absolute、static、fixed）
static:默认属性，这时候设置top right left bottom无效
fixed：相对于窗口的位置。脱离文档流
relative：相对定位，相对于自己原来的位置，不会脱离文档流。
absolute:绝对定位,会脱离文档流。原来的位置已经不在。
【注】如果想让子元素相对于父元素绝对定位，那么需要设置父元素为相
对定位，设置子元素为绝对定位即可。
z-index：这个属性的测试需要都为absolute或者fixed的才有效。数值越高，显示越靠前，
针对浮动无效。默认值为0
如下属性只有当定位是relative、absolute、fixed时有效
top
right
bottom
left
7、边框
border
border-width
border-style
dotted:点线
solid:实线
dashed:虚线
double:双线
border-color
/*
border-width:10px;
border-color:blue;
border-style:dotted; */
如下为简写形式
border: 10px solid #0000ff;
border-radius：边框圆角
box-shadow:
box-shadow:2px 2px 2px yellow; 边框阴影
8、盒子模型（针对于块元素和行内块元素）
自动居中
简写形式
/*
margin-left:auto;
margin-right:auto;/
/top right bottom left/
/margin: 0 auto 0 auto;*/
margin:10px auto;
9、内外边距
padding
padding-top
padding-right
padding-bottom
padding-left
padding:10px 20px;
margin
margin-top
margin-right
margin-left
margin-bottom
margin重叠问题(了解)
解决：只设置一个元素的margin，另一个设置为0
行内元素没有宽高，也没有内边距，外边距
网友评论