经典的css问题（面试）

最新推荐文章于 2024-11-11 23:45:17 发布

Liu Qiushi

最新推荐文章于 2024-11-11 23:45:17 发布

阅读量66

点赞数

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

本文链接：https://blog.csdn.net/qq_50105869/article/details/125907291

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了CSS面试中常见的盒子模型，包括标准盒子模型和怪异盒子模型，以及如何实现盒子的水平垂直居中，如通过定位、display:flex和display:table-cell等方法。此外，还介绍了左右固定宽度，中间自适应布局的解决方案，如圣杯布局、双飞翼布局以及使用Calc和Flexbox的策略。

摘要由CSDN通过智能技术生成

1 掌握盒子水平垂直居中的五大问题

定位 (三种)

//一种,知道宽高
.box{
width:100px
height:50px
position:absolute
top:50%
left:50%;
margin-top:-25px
margin-left:-50px
}
//二种不知道宽高
.box{
position:absolute
top:0
left:0;
rigin:0
bottom:0
margin: auto
}
//兼容性差
.box{
position:absolute
top:50%
left:50%;
transform:translate(-50%,-50%)
}

使用 display:flex
使用 display:table-cell

//固定宽高
body{
display:table-cell
vertical-align:middle
text-align:center
width:500px
height:500px
}
.box{
display:inline-block
}

2 css的盒子模型

标准盒子模型 (box-sizing:content-box)
content (width)+padding+margin+border
怪异盒子模型(box-sizing:boder-box) 源码常用，不用计算
content (width+padding+margin+border)
flex 盒子模型

3 左右固定，中间自适应

圣杯布局：浮动和margin clearfix( 清除浮动)

<div class='content clearfix' >
<div class='center'></div>
<div class='left'></div>
<div class='right'></div>
</div>
.content{
height:100%
padding: 0 200px
}
.left
.right{
width:200px
float:left
}
.center{
width:100%
float:left
}
.left{
margin-left:-100%
position:relative
left:-200px
}
.right{
margin-right:-200px
}

双飞翼布局：浮动和负margin

<div class='content'>
<div class='center'></div>
</div>
<div class='left'></div>
<div class='right'></div>

.left
.right
.content{
float:left
}

.content{
width:100%
}
.content center{
margin: 0 200px
}
.left
.right{
width:200px
}
.left{
margin-left:-100%
position:relative
left:-200px
}
right{
margin-right:-200px
}

使用CALC

// 兼容性IE9
width:calc(100% - 400px)

使用flex

<div class='content' >
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>

.content {
display:flex
justify-content:space-between
}
.left
.right{
width：200px
flex: 0 0 200px
}
.center{
flex:1
}

定位

<div class='content' >
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>

.content {
position:relative
}
.left
.right{
position: absolute
top:0
width:200px
}
.left{
left:0
}
.right{
right:0
}
.center{
margin: 0 200px
}