CSS高频面试题

大肥妹

已于 2022-09-11 11:29:53 修改

阅读量904

点赞数 1

分类专栏： CSS 文章标签： css

于 2022-04-24 22:43:00 首次发布

本文链接：https://blog.csdn.net/qq_44810886/article/details/124355440

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.元素水平垂直居中

1.1 水平居中

1.1.1行内元素

给其父元素添加text-align: center;（父元素是块级元素的情况下，否则先转换为块级元素）
将该元素转换为块元素display:block;再用 margin: 0 auto;

注意： margin auto是自动根据剩余的长度居中对齐，并不是0

1.1.2 块元素

具有宽高的块级元素： margin: 0 auto;
没有宽高的块级元素

法1：

子元素：display:inline

父元素：text-align:center

法2：

首先子绝父相，

子元素：left：50%；

margin-left：-50px（元素宽度一半）

translateX（-50%）

父元素：display:flex

justify-center:center

1.2 垂直居中

前提：

html模板：

<div class="parent">

<div class="content">内容垂直居中</div>

</div>

1.2.1 单行文本

可设置该行内元素的父元素的height与line-heigth的值相等，让行内元素垂直居中

针对行内元素，可通过设置vertical-align: middle;以及line-height进行垂直居中

1.2.2 多行文本

针对文本，通过display:flex;配合align-items和justify-content实现文本居中

1.2.3 块级元素

参考css实现垂直居中的几种方式（布局常用）_Deng冬的博客-CSDN博客_垂直居中的几种方法

1.3 水平垂直居中（五种）

1.盒子有宽高

1）

父：position: relative

子：position: absolute；

top：50%；

left：50%；

margin-top：-25px；

margin-left：-25px；

2）

父：position: relative

子：position: absolute；

top：0；

left：0；

right:0；

bottom：0；

margin：auto；

2. 盒子没有给宽高

父：position: relative

子：position: absolute；

top：50%；

left：50%；

transform：translateX（-50%）；

transform：translateY（-50%）；

//transform：translate(-50%, -50%)

3. 利用伸缩盒的方式：当普通盒子被调整为伸缩盒后，要让子盒子水平垂直居中，就得给父盒子设置为：

display：flex；

justify-content：center；//项目在主轴上的对齐方式

align-items：center；//在交叉轴上的对齐方式

4.利用JS的方式

5.将显示方式设置为表格

.father{

display: table-cell;//使子元素成为表格单元格

vertical-align: middle;//控制文本垂直居中

text-align: center;//控制文本水平居中

width: 500px;

height: 600px;//必须要有固定宽高

}

.son{

display:inline-block;

}

2.两列布局(左列定宽，右边自适应）

1. float + margin 布局

左：float: left; 给宽高

右：只给高，给margin-left(大于或等于左列的宽度)

2. float + overflow 布局（float+BFC）

左：float: left; 给宽高

右边：只给高， overflow: hidden

3. float

左右盒子双浮动，

左width: 200px;

右width: calc(100% - 200px);

4. 绝对定位布局

左：position: absolute; 给宽高

右：只给高，给margin-left。

5. table布局

父display:table；width：100%，给高

左display：table-cell；只给width：200px（给宽）

右display：table-cell，不给宽高

6. flex

父display: flex; width：100%，给高

左只给宽200px;

右只flex: 1;

7.grid布局

#parent {
width: 100%;
height: 400px;
display: grid;
grid-template-columns: 200px auto;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}

3.三列布局（中间自适应，两边固定）

1.flex布局（注意三个盒子的顺序）

<style>
    .container {
        display: flex;
        text-align: center;
    }
    
    .left {
        order: -1;
        width: 200px;
        background-color: orange;
    }
    
    .right {
        width: 300px;
        background-color: yellow
    }
    
    .center {
        flex: 1;
        background-color: gray;
    }
</style>

<body>
    <div class="container">
        <div class="center">flex布局 </div>
        <div class="left">左边 </div>
        <div class="right">右边</div>
    </div>
</body>

2. 圣杯布局

<style type="text/css">
        .container {
            padding: 0 300px 0 200px;
        }
        
        .left,
        .main,
        .right {
            position: relative;
            min-height: 130px;
            float: left;
        }
        
        .left {
            left: -200px;
            margin-left: -100%;
            background: green;
            width: 200px;
        }
        
        .right {
            right: -300px;
            margin-left: -300px;
            background-color: red;
            width: 300px;
        }
        
        .main {
            background-color: blue;
            width: 100%;
        }
    </style>
</head>

</html>

<body>
    <div class="container">

        <div class="main">main</div>

        <div class="left">left</div>

        <div class="right">right</div>
    </div>
</body>

3、双飞翼布局（注意三个盒子的顺序）

1）都加左浮动

2）在main盒子左右边留出距离（在main盒子里面再加一个盒子）

3）左边盒子加margin-left: -100%;

4）右边盒子加 margin-left: -50px;

 <style>
        #main {
            width: 100%;
            background-color: #ddd;
        }
        
        #main-wrapper {
            margin-left: 100px;
            margin-right: 50px;
        }
        
        #left {
            margin-left: -100%;
            width: 100px;
            background-color: orange;
        }
        
        #right {
            margin-left: -50px;
            width: 50px;
            background-color: green;
        }
        
        .column {
            float: left
        }
    </style>
</head>

<body>
    <div id="main" class="column">
        <div id="main-wrapper">
            main
        </div>
    </div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</body>

参考：一文汇总 CSS 两列布局和三列布局 - 掘金

4.盒子模型，box-sizing可以设置哪些属性

css盒子属性box-sizing，控制元素盒模型的解析模式。

box-sizing:

content-box（默认W3C标准盒模型）：盒子大小=width(content)+padding+border

2. border-box(IE传统盒模型，IE8以下怪异模式)：

盒子大小= width(content+padding+border)

5.BFC，实现BFC的几种方式？什么场景下使用BFC

BFC：Block formatting context,是CSS的一个布局概念，块级格式化上下文，是页面上的一个隔离的容器，容器里面的子盒子不会影响到外面的元素，形成独立的渲染区域

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发BFC的条件

根元素，即html元素
float的值不为none的浮动元素
overflow的值不为visible，为 auto、scroll、hidden
position的值为absolute或fixed的定位元素
dispaly的值为inline-block,inline-cell,flex,flow-root,table-caption,table-cell

用途

清除浮动，在父元素上设置overflow:hidden
利用BFC避免margin重叠
自适应两栏布局（可以阻止元素被浮动的元素覆盖）

1.清除浮动，在父元素上设置overflow:hidden

当我们不给父元素设置高度，子元素浮动的时候，会发生高度塌陷，这时要清除浮动

BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生成BFC，则内部浮动元素计算高度时候也会计算
 <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <style>
        .par {
            width: 300px;
            border: 5px solid skyblue
        }
  
        .child {
            float: left;
            width: 100px;
            height: 100px;
            border: 5px solid yellowgreen
        }
    </style>
父元素设置overflow:hidden后：

2.利用BFC避免margin重叠

属于同一个BFC的两个相邻盒子会发生margin重叠
<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>
页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠
<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>
这时候，边距则不会重叠：

3.自适应两栏布局（可以阻止元素被浮动的元素覆盖）

每个元素的左外边距与包含块的左边界相接触

因此，虽然.left为浮动元素，但是right的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发right生成BFC，以此适应两栏布局
    <div class="left">left</div>
    <div class="right">right</div>
<style>
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .right {
            width: 200px;
            height: 200px;
            background-color: green
        }
    </style>
解决：右盒子加overflow:hidden触发右盒子的BFC

6.设置padding 10px，width 10px，页面上盒子的宽度是多少(30px)，高度是多少(20px) ，为什么:标准盒子模型padding会撑大盒子

padding会撑大盒子

7.块级元素和行内元素的区别

见https://editor.csdn.net/md/?articleId=124168341

8.浮动，引起外边距塌陷，如何清除浮动

Float使用小结 - 简书

浮动元素会脱离标准流

浮动的元素会一行内显示并且元素顶部对齐

浮动的元素会具有行内块元素的特性

1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上

2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
3、若不浮动的是块级元素，那么浮动的元素将显示在其上方
4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方

如何清除浮动（原理撑起父盒子的高度），四种方法：

额外标签法，浮动元素末尾添加一个空标签（必须是块级元素）,然后给添加的元素设置样式clear：both
父元素添加overflow清除浮动，overflow：hidden
父元素添加伪元素（clearfix）

.clearfix:after {

display: block;

content: '.';

height: 0;

clear: both;

visibility:hidden

父元素添加双伪元素

.clearfix:before,

.clearfix:after{

content:"",

display:table

}

.clearfix:after{

clear:both

}

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素

9.定位

定位模式是否脱标描述
static 否默认值。没有定位，元素出现在正常的流中
relative（自恋型）否相对于其正常位置进行定位
absolute（拼爹型） 是（不占有位置） 相对于static定位以外的第一个父元素进行定位
fixed 是（不占有位置） 生成绝对定位的元素，相对于浏览器窗口进行定位
sticky 否浏览可视区

相对定位，如果祖先元素没有定位，则以浏览器为准定位（Document文档）
定位叠放次序，z-index，数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越往上靠；数字后面不能加单位；只有定位的盒子此才有z-index属性

10.选择器优先级

!important>行内样式 style=“”>ID选择器>类选择器，伪类选择器>元素选择器>继承或*
通用选择器（*）
子选择器（>）选择亲儿子
相邻选择器（+） div后面紧跟着的第一个p标签(必须是紧邻的标签)
同胞选择器（~） <div>后面所有的<p>标签选中

需要注意注意：

1. 权重计算不会进位

2. 继承的权重为0，见下面例题，文字颜色为黄色，因为继承的权重为0 ，所以.father下p继承为0 ，p单独选择出来，权重为0000+0001=0001。


<style>
    .father {
        color: red !important;
    }
    
    p {
        color: yellow;
    }
</style>

<body>
    <div id="father">
        <p>继承的权重为0</p>
    </div>
</body>

其他

CSS伪类

动态伪类

用于向某些选择器添加特殊的效果

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式

:hover 当鼠标悬浮在元素上方时，向元素添加样式

:focus 向拥有键盘输入焦点的元素添加样式
:active 向被激活的元素添加样式

注意：

除了a元素， :hover， :active也能用在其他元素上

例题：把鼠标移到按钮并点击时，会产生一串什么样的事件？
hover focus active
触发顺序为link-->visited--->hover--->active即记为love and hate

然后单独记住focus在hover和active之间即可

目标伪类

:target

语言伪类

:lang()

元素状态伪类

:enabled

:disabled

:checked

结构伪类

:nth-child(n),odd奇数，even偶数

:nth-last-child

p:nth-of-type(n) 第n个为p的子元素

:nth-last-of-type(n)

:only-child

:only-of-type

:empty

:first-child,等同于:nth-child(1)

:last-child，等同于 :nth-last-child（1）

:first-of-type

:root

注意：没有only-of-child，只有only-child

否定伪类

:not()

伪元素选择器

::before, ::after:用来在一个元素内容之前或之后插入其他内容

:first ::first-line

:first-letter ::first-letter

:before

:after

将下面代码中超链接文本呈现为红色，不可以使用的样式表是（）。

1 <div><a href="http://www.w3.org/">链接到W3C</ a></div>
正确答案: D
a:link{color:red}
div a:link{color:red}
div>a:link{color:red}
div:first-child{color:red}
1.div:first-child
要满足的条件，首先必须得是div元素，还得是第一个子元素，如果不满足就不会被选中
2.div:first-of-type
要满足的条件，首先必须得是div元素，还得是第一个出现的div元素，如果不满足就不会被选中
3.nth-child
a:nth-child(5)：必须是a元素必须是第五个子元素
4.nth-of-type：
a:nth-of-type:选中所有a元素中的第n个a元素
看来规律就是child相关的是绝对位置，type相关的是相对位置

C3的新特性：

属性选择器(a[rel="external"])；
结构伪类选择器；
伪元素选择器；（伪元素可以清除浮动）；
CSS3盒子模型；
2D转换之translate（实现元素的位移，旋转，缩放）；
动画animation具体等

display:none 对应的元素不会在文档流中占据空间
visibility:hidden 虽然元素隐藏，但是对应的元素的会在文档流中占据空间
opacity，以透明度隐藏，仍然可以监听

display：none涉及到了DOM结构，故产生reflow与repaint

visibility：hidden不影响结构，故只产生repaint

CSS引入方式

行内样式（内联式）

<div style='font-size:12px' >内联式</div>

内部式（内嵌式，嵌入式）

把所有的css代码抽取出来，单独放在一个style标签中，写到html页面内部

样式表

新建.css文件，在html页面中，使用link标签引入这个文件

关于样式的优先级：

！important> 内联式> 内部式>外部式

其中外部引用有两种：link和@import

XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");

link 和 import 区别
本质区别：link 是 html 标记提供的一种方式，import 是 css 提供的一种方式
加载顺序：link 的方式可以让结构和样式同时加载，import 是先加载结构后加载样式，所以在网速过慢的时候会看见网页内容闪烁的情况
兼容问题：link 没有兼容问题，import 一些老的版本的浏览器不支持（尤其是低版本IE）
控制 DOM 区别：link 可以被DOM控制，而 import 不能被控制

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

大肥妹

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS高频面试题

1.元素水平垂直居中水平居中1.具有宽高的块级元素margin: 0 auto;2. 行内块元素或行内元素给其父元素添加text-align: center;水平垂直居中1.盒子有宽高1）父：position: relative子：position: absolute；top：50%；left：50%；margin-top：-25px；margin-left：-25px；2）父：position: relative子：positi..
复制链接

扫一扫

专栏目录