CSS3面试题合集

最新推荐文章于 2024-06-15 19:32:28 发布

想要一只肥宅快乐兽

最新推荐文章于 2024-06-15 19:32:28 发布

阅读量1.6k

点赞数

分类专栏：前端学习文章标签： css3

本文链接：https://blog.csdn.net/qq_42502919/article/details/117407330

版权

前端学习专栏收录该内容

70 篇文章 0 订阅

订阅专栏

1.margin合并问题

在正常布局流中上下两个含有内容的div的margin会发生合并，合并后的margin值为相对大的值，当div内容为空时也会自动忽略其margin

2.margin负值问题

当margin-top为负值时：元素会向上移动
当margin-bottom为负值时：元素本身不会发生移动，其下面的元素会上移
当margin-left为负值时：元素会向左移动
当margin-right为负值时：元素自身不会发生移动，其右边的元素会左移

3.BFC问题

BFC：Block formating context 块级格式化上下文

形成独立的渲染区域

内部元素的渲染不会影响外界，外界也不会影响内部

形成BFC的条件：

条件	操作
浮动元素	float不为none
绝对定位元素	position是absolute或fixed
块级元素	overflow不是visible
flex元素	display设置为flex
inline-block元素	display设置为inline-block

BFC布局规则：

内部的box会在垂直方向一个接一个排列
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
每个盒子(块盒与行盒)的margin box左边与包含块的border box的左边相接触(对于从左向右格式化，否则相反)即使存在浮动也是如此。
BFC的区域不会与flex box重叠

应用场景：

清除浮动(最常用就是设置overflow:hidden)
避免外边距折叠
可以创建自适应两栏布局

<!--清除浮动-->
<body>
    <div class='container bfc'>
        <img src='xxx.jpg' />
        <p class='bfc'>下次一定</p>
    </div>
</body>
<style>
    .container {
        background-color: #ccc;
    }
    .container img{
        float: left;
        width: 300px;
    }
    .bfc {
        overflow: hidden;
    }
</style>

4.圣杯布局和双飞翼布局

两者的目的：

两侧内容宽度固定，中间内容宽度自适应
三栏布局，中间一栏最先加载、渲染出来(主要内容)

圣杯实现方法：

float+margin+position

<body>
    <header>头部</header>
    <div id="container">
        <div class="middle">
            中间内容
        </div>
        <div class="left side">左侧内容</div>
        <div class="right side">右侧内容</div>
    </div>
    <footer>底部</footer>
    <script>
    </script>
</body>
<style>
body {
    min-width: 762px;
}
header {
    text-align: center;
    background: chartreuse;
    width: 100%;
}
footer {
    text-align: center;
    background: coral;
    width: 100%;
}
#container {
    overflow: hidden;
    padding: 0 200px;
}
.middle {
    width: 100%;
    height: 200px;
    background: aqua;
    float: left;
}
.left {
    background: red;
    float: left;
    margin-left: -100%;
    left: -200px;
}
.right {
    
    background: pink;
    margin-left: -200px;
    right: -200px;
}
.side {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
}
</style>

双飞翼布局的实现方法：

float+margin

<body>
    <header>头部</header>
    <div id="container">
        <div class="middle">
            中间内容杀得好佛山蒂法搜的发哈市东侯坊搜啊哈发顺丰哈搜饭后我阿萨德花覅爱上的佛hasof哈斯欧迪芬哈三大佛山的覅
            中间内容杀得好佛山蒂法搜的发哈市东侯坊搜啊哈发顺丰哈搜饭后我阿萨德花覅爱上的佛hasof哈斯欧迪芬哈三大佛山的覅
            中间内容杀得好佛山蒂法搜的发哈市东侯坊搜啊哈发顺丰哈搜饭后我阿萨德花覅爱上的佛hasof哈斯欧迪芬哈三大佛山的覅
            中间内容杀得好佛山蒂法搜的发哈市东侯坊搜啊哈发顺丰哈搜饭后我阿萨德花覅爱上的佛hasof哈斯欧迪芬哈三大佛山的覅
            中间内容杀得好佛山蒂法搜的发哈市东侯坊搜啊哈发顺丰哈搜饭后我阿萨德花覅爱上的佛hasof哈斯欧迪芬哈三大佛山的覅
            中间内容杀得好佛山蒂法搜的发哈市东侯坊搜啊哈发顺丰哈搜饭后我阿萨德花覅爱上的佛hasof哈斯欧迪芬哈三大佛山的覅
        </div>
        <div class="left side">左侧内容</div>
        <div class="right side">右侧内容</div>
    </div>
    <footer>底部</footer>
    <script>
    </script>
</body>
<style>
body {
    min-width: 762px;
}
header {
    text-align: center;
    background: chartreuse;
    width: 100%;
}
footer {
    text-align: center;
    background: coral;
    width: 100%;
}
/* 双飞翼布局 */
#container {
    overflow: hidden;
}
.middle {
    /*不需要设置宽度，否则margin会出现问题*/
    height: 200px;
    margin: 0 200px;
    float: left;
    background: bisque;
}
.left {
    margin-left: -100%;
    background: pink;
}
.right {
    margin-left: -200px;
    background: deepskyblue;
}
.side {
    float: left;
    width: 200px;
    height: 200px;
}
</style>

水平居中

1.行内元素(inline元素)：可以通过设置text-align:center来实现

2.块级元素(block元素)：可以通过设置margin: 0 auto

3.absolute定位元素：在子元素宽度位置的情况下可以通过设置left:50%; transform: translate(0,-50%);在子元素宽度已知的情况下可以使用left:50% margin-left: -子元素一半宽度来实现

垂直居中

1.行内元素：可以通过设置line-height: 外层元素高度来实现

2.absolute定位元素：在子元素高度位置的情况下可以通过设置top:50%; transform: translate(-50%,0);在子元素高度已知的情况下可以使用left:50% margin-top: -子元素一半高度来实现，这类方法可能会存在兼容性问题，还可以通过设置top:0;right:0;bottom:0;left:0;margin auto的方式来实现水平垂直居中，此方法不存在兼容性问题

line-height继承的坑

当父元素设置font-size且line-height的值为百分比时，子元素继承line-height的值会是父元素font-size值乘line-height的值，其他情况下是正常的

几种常见长度单位

px：绝对长度单位
em：相对长度单位，相对于父元素
rem：相对长度单位，相对于html根元素中定义的font-size值，例如html中定义font-size: 100px那么1rem就等于100px

想要一只肥宅快乐兽

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS3面试题合集

1.margin合并问题在正常布局流中上下两个含有内容的div的margin会发生合并，合并后的margin值为相对大的值，当div内容为空时也会自动忽略其margin2.margin负值问题当margin-top为负值时：元素会向上移动当margin-bottom为负值时：元素本身不会发生移动，其下面的元素会上移当margin-left为负值时：元素会向左移动当margin-right为负值时：元素自身不会发生移动，其右边的元素会左移3.BFC问题BFC：Block formating
复制链接

扫一扫