前端面经：CSS

最新推荐文章于 2024-05-18 23:49:15 发布

北岭有燕

最新推荐文章于 2024-05-18 23:49:15 发布

阅读量356

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/qq_41160739/article/details/106078034

版权

其他专栏收录该内容

14 篇文章 1 订阅

订阅专栏

CSS
说说盒子模型
w3c标准盒模型box-sizing ：content-box ；一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
IE盒子模型 / 怪异盒模型box-sizing ： border-box ；一个块的总宽度=width+margin（左右）（width指的是内容、边框、内边距总的宽度content + border + padding）

如何画一条0.5px的线
1.采用meta viewport的方式 initial-scale初始缩放值
div { border-bottom: 1px solid #000; }
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
2.采用transform: scale()的方式
div{
border-bottom: 1px solid black;
transform: scaleY(0.5);
}

link标签和import标签的区别
link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

transition和animation的区别
transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，
并且transition为2帧，from .... to，而animation可以一帧一帧的。

BFC
一个独立的渲染区域，并且有一定的布局规则。
那些元素会生成BFC：
浮动元素
position为fixed和absolute的元素
display为inline-block、table-cell、flex等的元素
overflow不为visible的元素

垂直居中的方法
1.margin:auto法子绝父相，子元素定位为上下左右为0 margin: auto；
2.margin负值法子绝父相子元素{ top: 50%; left: 50%; transform: translate(-50%,-50%); }
3.利用flex 将父元素设置为display:flex，并且设置align-items:center; justify-content:center;

关于js动画和css3动画的差异性
简单的交互动画就用css3实现，控制比较复杂、比较繁琐的交互动画可以交由js实现。
js比css大
CSS3比js更加简单，性能跳优方向固定
css3有兼容性问题

说一下块元素和行元素
块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。

元素隐藏消失
opacity=0，不会改变页面布局，可以触发绑定的事件
visibility=hidden，不会改变页面布局，不会触发该元素已经绑定的事件
display=none，会改变页面布局，像在页面中把该元素删除掉一样。
z-index ，只能在定位元素上奏效，默认值0，可以为负，越大越近。

双边距重叠问题（外边距折叠）
多个相邻普通流的块元素垂直方向marigin会重叠
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

position属性比较
固定定位fixed：相对于浏览器窗口是固定位置。与文档流无关，因此不占据空间。
相对定位relative：相对于它的起点进行移动。
绝对定位absolute：相对于最近的已定位父元素
默认定位Static：默认值。没有定位，元素出现在正常的流中。

加上浮动后，父元素高度塌陷，需要清除浮动
1.在浮动元素后使用一个空元素，<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性
2.给浮动元素的容器添加overflow:hidden;

CSS选择器有哪些，优先级
!important > 内联样式 > id > class / 伪类 > 标签
内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

CSS3中对溢出的处理
text-overflow：clip 直接将溢出的文本裁切。 text-overflow：ellipsis 显示省略号。
要实现溢出时产生省略号的效果还须定义另外两个属性：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）

float的元素，display为block

三栏布局的实现方式
三栏布局一般多指左右两栏宽度固定，中间栏宽度自适应的布局。
1.绝对定位布局。子绝父相，左盒子left: 0;width: 200px; 右盒子right: 0; width: 150px; 中间盒子left: 200px; right: 150px;
2.左右浮动布局。左盒子float: left; width: 200px; 右盒子float: right; width: 150px; 中间盒子 margin: 0 150px 0 200px; 注意要把中间盒子div放在最后面
3.Flex布局。左盒子order: 1; width: 200px; 中间盒子 order: 2; flex: 1; 右盒子 order: 3; width:150px;
4.table-cell布局每个盒子display: table-cell; height: 100px; 左盒子width: 200px; 中间盒子 width: 100%; 右盒子width:150px;
圣杯布局，双飞翼布局，Grid布局

calc属性
自适应的布局，只知道一个百分值。动态计算长度值，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

display：table和本身的table有什么区别
display: table系列几乎是和table系的元素相对应的
能够让一个HTML元素和它的子节点像table元素一样，使用基于表格的CSS布局，能够更轻松定义样式，
div+css编写出来的文件写出来的文件更小，更简洁。不用完全加载，是逐行显示的。

如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？
可以更改父元素的color

line-height和height的区别
line-height一段文字上下行之间的高度，height一般是指容器的整体高度，

设置一个元素的背景颜色，背景颜色会填充哪些区域？
会填充元素的content、padding、border区域，

inline-block、inline和block的区别
Block是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding水平垂直方向都有效。
Inline：设置width和height无效，margin在竖直方向上无效，padding在水平方向垂直方向都有效，前后无换行符
Inline-block：能设置宽度高度，margin/padding水平垂直方向都有效，前后无换行符

重排，重绘
当涉及到dom节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫回流或重排。
当影响dom元素可见性的属性发生变化如颜色时，浏览器会重新描绘相关的元素，此过程称为重绘，（如何记忆，绘画，画是颜色，颜色是可见性属性。），
重排必然引起重绘。因为一个dom的大小改变，那么颜色要把多的去掉，少的补上。所以重排必然引起重绘。

引起重排重绘的原因有：
添加或者删除可见的DOM元素，
元素尺寸位置的改变
浏览器页面初始化，
浏览器窗口大小发生改变，

减少重绘重排的方法有：
不在布局信息改变时做DOM查询，
使用csstext,className一次性改变属性
使用fragment
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

overflow的原理
当元素设置了overflow样式且值不为visible时，该元素就构建了一个BFC格式化上下文，BFC在计算高度时，
内部浮动元素的高度也要计算在内，也就是说技术BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，所以达到了清除浮动的目的，

css预处理器有什么
less，sass等