宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
字体属性
文字字体
按照从第一个开始识别,直到能够识别到为止,识别到后后面的不再继续
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }字体大小
p { font-size: 14px; }字重(粗细)
font-weight用来设置字体的字重（粗细）。
normal 标准粗细 (默认) bold 粗体 bolder 更粗 lighter 更细
inherit 继承父元素字体的粗细值100~900 设置具体粗细，400等同于normal，而700等同于bold
p { font-weight: bold; }p { font-weight: 500; }文本颜色
格式:
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
rgba(255,0,0,0.3)，第四个值指定了色彩的透明度/不透明度，范围为0.0~1.0
p { color:RGB(255,0,0); }
段落属性
文字对其
text-align属性规定元素中的文本的水平对齐方式。
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐文字装饰
text-decoration 给文字添加特殊效果。
none 定义标准的文本。(默认)
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。常用的为去掉a标签默认的自划线
a { text-decoration: none; }首行缩进
将段落的第一行缩进 32像素
p { text-indent: 32px; }
背景属性
background-color:背景颜色 background-image:url('11.jpg'); 背景图片链接 background-repeat:repeat-x; x轴平铺 background-repeat:no-repeat; 不重复 background-position:400px 200px 调整背景的位置（距左。距右） background-position: center:center; 背景居中
简写：
background: url('11.jpg') no-repeat center;
边框
属性
border-width 宽度 border-style 风格 none 无边框。 dotted 点状虚线边框。 dashed 矩形虚线边框。 solid 实线边框。 border-color 颜色 border-radius 用这个属性能实现圆角边框的效果。 将border-radius设置为长或高的一半即可得到一个圆形，可用于圆形头像展示示例
#i1 { border-width: 2px; border-style: solid; border-color: red; }支持简写方式：
#i1 { border: 2px solid red; }
display 属性
用于控制HTML元素的显示效果。
属性
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 display:"inline-block" 使元素同时具有行内元素和块级元素的特点。display:"none"与visibility:hidden的区别：
visibility:hidden: 隐藏某个元素，隐藏的元素仍需占用与未隐藏之前一样的空间。会影响布局。
display:none: 隐藏某个元素，隐藏的元素不会占用任何空间。不影响布局
CSS盒子
概念
margin: 用于控制元素与元素之间的距离；
margin的最基本用途就是控制元素周围空间的间隔，
从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。
margin外边距
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }推荐使用简写：
顺序：上右下左
.margin-test { margin: 5px 10px 15px 20px; }常见的居中方式:
.mycenter { margin: 0 auto; }padding内填充
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }推荐使用简写：
顺序：上右下左
.padding-test { padding: 5px 10px 15px 20px; }补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
float
概念
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
取值
left： 向左浮动
right： 向右浮动
none： 默认值，不浮动
clear
概念
清除浮动的副作用（父标签塌陷问题）
父标签塌陷问题:
浮动后的元素会脱离文档流,被浮动的元素会跑出父标签,从而破坏页面布局
实例
div设置边框为1,里面包两个p1和p2.p1浮动后.div会变成一条线
而p1和p2 会被放置在 div 下面而不是div内部 ,即浮动后的元素跑出了父标签
解决方法
固定高度
固定高度限制死了.如果后期有更多的浮动元素快超出了限定高度就无效了
伪元素清除法
只要子孙元素有浮动就给父标签设置这一属性即可,原理是浮动元素的下面添加空内容动态撑起父标签
overflow:hidden
将溢出的部分消除,会破坏子标签的显示,不推荐
推荐伪元素清除法（使用较多）：
.clearfix:after { # 在元素的最下面插入一个内容 content: ""; # 内容为空 display: block; # 展示为整个宽度(变成块级) clear: both; # 不允许浮动 }清除浮动示例 :
View Code
overflow溢出属性
属性值
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。滚动条出现位置：
overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向）圆形头像示例:
定位（position）
属性值
static 默认值 不定位
relative 相对定位 相对于该元素的原始位置
absolite 绝对定位 相对于父标签的定位,一层一层往上直到 body
fixed 固定,以窗口为参考点固定返回顶部按钮示例
z-index
概念
设置对象的层叠顺序。
z-index 值表示谁压着谁，数值大的压盖住数值小的，
z轴代表了你与电脑的距离,离你越近的页面z-index越大
被定位后的元素，才可使用z-index,不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
ps:
position:relative 可以让元素定位而不变换位置.虽然没换位置,但是这个元素已经是被定位过的元素了.
z-index值 没有单位，就是一个正整数，
默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，
定位了元素，永远压住没有定位的元素。
#i2 { z-index: 999; }自定义模态框示例 :
opacity
定义透明效果 0~1