前端校招面经分享：关于CSS那些事（一）
CSS
CSS在html的基础上为网页“增色”，有了CSS，我们才做出如今灵动多彩的网页。
CSS将作为面试考察的第一关，对CSS足够了解，才能成为一个合格的前端开发者。
在大部分的面试中，会在开场丢出几个CSS相关的问题来考察基础。
本文为大家带来CSS初学阶段的一些基础知识和面试常考题。
css 选择器及其权重
为元素写CSS样式，那么首先就要了解CSS选择器。
选择器：
- 行内样式权重为 1000
- ID选择器 —— 权重100
- 类选择器 —— 权重10
- 标签/伪类/属性选择器 —— 权重1
- 通配符选择器 —— 权重0
- 继承没有权重。
- 遇到!important 则是最大，大于一切。
行内元素和块级元素
block：是块级元素，会独占一行，能设置宽度，高度。
inline：行内元素，设置
width和height无效，由内容撑开，inline-block：能设置宽度高度，且不会独占一行。
盒子模型
盒子模型由：内容 content，内边距 paddig，边框 border，外边距 margin 组成。
通常我们设置标准盒子模型（W3C 盒子模型）的宽度时，要考虑他的宽度是：
width=content（设定宽度）+ padding + border
设定的宽度与实际的宽度不符。这让我们在使用时需要计算。
css3 提供了一种新方法：
box-sizing:border-box；
可以让我们盒子的宽度就是我们所设定的 width，不会因内边距和边框而撑开。
我们也称这种盒模型叫 IE 盒子模型或怪异盒子模型。
margin 常见问题
1.外边距合并和传递
当我们在设置两个上下排列的 p 标签的上下外边距时，会发生外边距合并（重叠）。
<style>
.p{
margin-bottom:10px;
margin-top:15px;
}
</style>
<body>
<p>段落1</p>
<p></p>
<p></p>
<p></p>
<p>段落2</p>
</body>当这样两个 p 标签上下排列时，他们的间距并不是：15+10=25px。
会发生外边距合并，他们中间将只有 15px（较大者）的距离。
同时，他们中的空标签，会被忽略，不会影响两个有内容的标签。
2.负值的 margin
我们在操作中有时会给 margin 加一个负值，目的是让盒子朝我们期望的方向移动。
当为盒子添加 margin-top/left：负数的时候，这个盒子会朝上或左移动。
但我们给盒子添加 margin-bottom/right：负数时，这个盒子之后的元素会向着这个盒子的位置移动。（自身宽高缩小）
float
float可以说是CSS的必备招式
float会为元素设置浮动，浮动的元素自动变为行内块元素，且会“一个挨一个”的排列在一行上。
这种排练元素的手法在flex出现之前非常常见，但同时也会伴随诸多问题。
其中最常问的就是清除浮动,那就涉及到BFC的应用
BFC
_嵌套元素的外边距塌陷_：
我们在为子元素加一个向上的 margin 时，期待的效果是子元素可以与父元素隔开，而事实却不会这样。
这个margin会加到父元素上，父元素依此移动，但父子元素还是紧贴在一起。
为了解决这样的现象，我们有几种办法：
- 加一个透明边框。
- 使用父元素 padding 的方式来隔开父子。
- 父元素 overflow:hidden。
第三种解决方案就是利用了BFC
BFC 是块级格式化上下文。可以为内容添加独立的渲染区域。
BFC 的常见应用有：
- 清除浮动。
- 独立渲染。
- 解决外边距塌陷。
形成 BFC 的几种条件：
- 浮动元素————float 不是 none
- 定位元素————position 是 absolute 或 fixed
- 块级元素————overflow 不是 visible
- 行内快元素、flex 元素
清除浮动
这是一道常见的手写题：
.clearfix :after{
content:'';
height:0;
overflow:hidden;
clear:both;
display:block;
}
.clearfix{
*zoom:1; //浏览器兼容性
}水平居中及垂直居中方式
简单来说，分几种常用的手法：
- 最最基础的方式是的使用
margin:0 auto来使元素水平居中。 - 使父元素中的子元素垂直居中的方式是：父元素
line-height与自身高度相同。 - 接下来就是使用
定位+位移的方法:
1.定位+margin position:absolute; left:50%; top:50%; margin:-1/2height 0 0 -1/2width; 2.定位+tarnslate position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)
- 用flex来实现居中：
display:flex; justify-content:center; align-items:center;
flex布局在工作中的使用频率极高也极其方便，需要重点学习！
flex 弹性布局
flex 弹性布局提供了一种不同于传统 float 的布局方式，通过主轴和侧轴实现元素的排列。
- 我们先来看父元素的属性(只列举一些常见的）：
display:flex; //定义父元素为flex盒子 flex-direction:row/column; //定义flex盒子中的主轴方向 flex-warp:warp/nowarp; //定义flex盒子的主轴元素是否自动换行 justify-content:center/space-around/space-between; //定义元素在主轴上的排列方式 align-items:center; //定义元素在副轴上的排列方式。
- 对于子元素来说有一个必须知道的知识点：
flex:1代表什么？
简单来说，flex:1是一个语法糖，浏览器会解析为对应的属性。
flex-grow:1; //会填充主轴的剩余空间 flex-shrink:1; //会在主轴空间元素不足时，被压缩 flex-basis:0%; //元素在扩展或收缩时，基于的自身原本宽度
那我们就知道了，这三个属性配合使用，就可以使所有的子元素都保持同样的大小。
在开发中通常需要擅用这三个属性，来控制flex中子元素的大小。
通过这些特性，实现了flex“弹性”盒子，让布局更加方便。
如果你需要内推，可以私信联系我。
我的字节跳动内推码：NAN4PZA。
#23秋招##前端##字节跳动##面经#
投递牛客等公司10个岗位 >