当前位置：首页 > news >正文

前端优化-css

news 2025/8/2 20:20:00

1.css盒子模型

标准盒子模型，IE盒子模型

标准盒子模型：margin-border-padding-content

IE盒子模型：margin-content(border-padding-content)

如何转换：

box - sizing: border - box; // IE盒子模型
box - sizing: content - box;// 标准盒子模型

2.line-height 和 height 区别

line-height 每一行文字的高，文字换行，整个盒子会增大

height :盒子高度固定

3.CSS选择符哪些属性可以继承

通配（*）、id选择器（#）、类选择器（.）、标签选择器（div、p、h1...）、相邻选择器（ + ）、后代选择器（空格）子元素选择器（>）属性选择器（a[abc]）

ul li + li{// 排除第一个li的样式
}
// vue 
<div v-data-abc></div>
div[v - data - abc]{}

可以继承

文字系列：font-size color line-height...

不可继承的：border padding margin

4.css优先级算法

!important > 内联样式 > id > class > 标签 > *

css 权重计算

内联：权重1000 ID：权重0100 类选择器：0010 标签&伪元素;0001 通配：权重 0000

5.用css画一个三角形

用border画

div{width: 0;height: 0;border - left: 100px solid transparent;border - right: 100px solid #ccc;border - top: 100px solid transparent;border - bottom: 100px solid transparent;
}

6.盒子不给宽高，垂直居中

// 方法一
.container{display: flex;align - items: ClientRequest;justify - content: center;
}
// 方法二
.container{position: relative;
}
.main{position: absolute;left: 50 %;right: 50 %;transform: translate(-50 %, -50 %);
}

7.display有哪些值

none（隐藏）/block（转化成块元素） inline（内联元素）/inline-block（行内块元素）

8.BFC规范（块级格式化上下文）

BFC就是页面上一个独立容器，容器里面子元素不会影响到外面元素

原则：如果一个元素具有BFC，内部元素不管怎么设置都不会影响到外面元素

如何触发：float不是none，overflow不是visible，display为inline-block/table-cell position的值为absolute,fixed

9.清除浮动方式

a.触发BFC

b.创建一个div，clear:both，

ul.after{content: '';display: block;clear: both;
}

10.网页中应该用奇数还是偶数字体？为什么？

偶数，方便开发；表现更好看

11.position有哪些定位，根据什么定位的

static:没有定位

fixed: 固定定位，相当于浏览器窗口定位

relative:1、相当于自身定位，2.不脱离文档流 3.如果有left,right,top,bottom -> left\top

absolute:1、相当于父级定位，2.脱离文档流，相对于第一个有relative的元素 3.如果有left,right,top,bottom ->left\right\top\bottom

12.双飞翼

先加载中间块（写前面）

.container > div{float: left;
}
.l{margin - left: -100 %;width: 200px;
}
.r{margin - left: -200px;width: 200px;}
.c{padding - left: 200px;
}
<div class="container"><div class="c"></div><div class="l"></div><div class="r"></div>
</div>