字体属性
字体大小:font_size
<-! rgba调整透明度-></-!>
<div style="background: rgba(125,125,111,0.5)">aaaaa</div>
文字属性
text-align
元素中的文本居中对齐:text-align:center;
元素中的文本右对齐:text-align:right;
元素中的文本左对齐:text-align:left;
元素中的文本两端对齐:text-align:justify;
text-decoration
默认标准文本(a标签去除下划线):text-decoration:none
定义文本下的一条线:text-decoration:underline
定义文本上的一条线:text-decoration:overline
定义穿过文本下的一条线 :text-decoration:line_through
首行缩进:text-indent:32px
背景属性
background-color: red; /*背景图片*/ background-image: url('1.jpg');
background-repeat:repeat(默认):背景图片平铺排满整个网页
background-repeat:no-repeat：背景图片不平铺
边框
边框宽度：border-1px
边框样式：border-style:solid (所有样式:none,dotted,dashed,solid) -> 简写： border: 2px solid red;
边框颜色：border-color:red
圆形border-radius:50%;
display属性
| 值 | 意义 |
|---|---|
| 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:5px 10px 15px 20px(顺序分别对应 上，右，下，左)
常见居中: margin: 0 auto;
padding内填充
padding: 5px 10px 15px 20px; (顺序同margin)
float
向左浮动 -> float:left ;
向右浮动 :->float:right ;
默认值,不浮动 :->float:none ;
clear
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素。
伪元素清除法（使用较多）：
.clearfix:after { content: ""; display: block; clear: both; }
overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
定位(position)
static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的
relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
absolute（绝对定位）
置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位
重点: 如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
fixed(固定)
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
z-index
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。