前端----css总结-白红宇

前端----css总结

阅读量：4970 次

发布时间：2019-06-12

本文共 5227 字，大约阅读时间需要 17 分钟。

1,权重计算:

权重:id class 标签--->>>顺序不变

当权重一样时,显示后来设置的

继承下来的标签,权重为0

若权重为0,那么谁描述的近,就显示谁

若权重为0,描述的一样近的时候,回归原始状态(数权重)

2,padding:

/*上右下左*/

padding: 20px 30px 40px 50px ;

/*上左右下*/

padding: 20px 30px 40px;

/* 上下左右*/

padding: 20px 30px;

/*上下左右*/

padding: 20px;

3,bordr: 10px solid red;

border-radius:10px; 设置圆角

4,标准文档流的现象: 空白折叠现象----高矮不齐，底边对齐----自动换行，一行写不满，换行写

5,块级---行内

行内元素：

与其他行内元素并排；

不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

霸占一行，不能与其他任何元素并列；

能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

display:inline 块级转为行内

display: block; 行内转块级

display: inline-block; 转为行内块

6,浮动

四大特性:

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果

4.收缩的效果

注意:所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高.

要浮一起浮,有浮动就要清除浮动.

若一个盒子浮动,另一个是行内的话不会顶进去,另一个是块级的话会顶进去,原因就是浮动有自围效果.

清除浮动:

1,给父盒子设置高度-----------不灵活,所以一样不用,万年不变的导航栏可以用

2,clear:both

3,伪元素清除法 .clearfix:after{

content:".";

display:block;

visibility:hidden;

height:0;

clear:both;}

4,overflow:hidden visible 内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522 (有时间就看一下)

7,margin用法:

塌陷问题:

两个标准流下兄弟盒子设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。

当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

8,文本属性:

文本对齐------------------------

text-align 属性规定元素中的文本的水平对齐方式。

属性值：none | center | left | right | justify

文本首行缩进--------------------

text-indent 属性规定元素首行缩进的距离，单位建议使用em

文本修饰

text-decoration属性规定文本修饰的样式

属性值：none(默认)|underline(下划线)|overline(定义文本上的一条线)|line-through (定义穿过文本下的一条线)

inherit(继承父元素的text-decoration属性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

8,字体属性:

字体大小

font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。

字体粗细

font-weight表示设置字体的粗细

属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细)

100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）

字体系列

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

9,行高:

line-height

针对单行文本垂直居中--------

公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。

针对多行文本垂直居中--------

行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

10,font-family------ https://www.cnblogs.com/majj/p/9040281.html (马哥博客详解)

11, 导航栏示例:

css代码:

{
    *{  padding: 0;  margin: 0;  }   ul{
     list-style: none; } .nav{
     width: 960px;  /*height: 40px;*/  overflow: hidden;  margin: 100px auto ;  background-color: purple;  /*设置圆角*/  border-radius: 5px; } .nav ul li{
     float: left;  width: 160px;  height: 40px;  line-height: 40px;  text-align: center; } .nav ul li a{
     display: block;  width: 160px;  height: 40px;  color: white;  font-size: 20px;  text-decoration: none;  font-family: 'Hanzipen SC'; } /*a标签除外，不继承父元素的color*/ .nav ul li a:hover{
     background-color: red;  font-size: 22px; }}

html代码: