前端之CSS重点知识

字体属性

字体大小: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-width: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

1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4. 从父现象：父亲怂了，儿子再牛逼也没用

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。