介绍
这篇文章给大家分享的是有关CSS中常见的布局是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
<强>本文将介绍如下5种常见的布局:
<李> 单列布局
<李> 两列自适应布局
<李> 圣飞布局和双飞翼布局
<李> 伪等高布局
<李> 粘连布局
<强>
<李> 标题,内容和页脚等宽的单列布局
<李> 页眉与页脚等宽,内容略窄的单列布局
<强>
对于第一种,先通过对标题,内容,页脚统一设置宽度:1000 px;或者max-width: 1000 px(这两者的区别是当屏幕小于1000 px时,前者会出现滚动条,后者则不会,显示出实际宽度),然后设置保证金:汽车实现居中即可得到。
& lt; p类=癶eader"祝辞& lt;/p>
类& lt; p=癱ontent"祝辞& lt;/p>
& lt; p类=癴ooter"祝辞& lt;/p> .header {
保证金:0汽车;
max-width: 960 px;
身高:100 px;
背景颜色:蓝色;
}
.content {
保证金:0汽车;
max-width: 960 px;
身高:400 px;
background - color:海蓝宝石;
}
.footer {
保证金:0汽车;
max-width: 960 px;
身高:100 px;
background - color:水;
} 对于第二种,页眉、页脚的内容宽度不设置,块级元素充满整个屏幕,但标题,内容和页脚的内容区设置同一个宽度,并通过保证金:汽车实现居中。
& lt; p类=癶eader"比;
类& lt; p=皀av"祝辞& lt;/p>
& lt;/p>
类& lt; p=癱ontent"祝辞& lt;/p>
& lt; p类=癴ooter"祝辞& lt;/p> .header {
保证金:0汽车;
max-width: 960 px;
身高:100 px;
背景颜色:蓝色;
}
.nav {
保证金:0汽车;
max-width: 800 px;
background - color: darkgray;
高度:50 px;
}
.content {
保证金:0汽车;
max-width: 800 px;
身高:400 px;
background - color:海蓝宝石;
}
.footer {
保证金:0汽车;
max-width: 960 px;
身高:100 px;
background - color:水;
} <强>
两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式
如果是普通的两列布的局,<强>浮动+普通元素的保证金强便可以实现,但如果是自适应的两列布的局,利用<强>浮动+溢出:隐藏强便可以实现,这种办法主要通过溢出触范克廉发,而均不会重叠浮动元素,由于设置溢出:隐藏并不会触发IE6——浏览器的haslayout属性,所以需要设置变焦:1来兼容IE6——浏览器。具体代码如下:
& lt; p类=皃arent"风格=癰ackground: lightgrey;“比;
类& lt; p=發eft"风格=癰ackground: lightblue;“比;
& lt; p> left
& lt;/p>
类& lt; p=皉ight"风格=癰ackground: lightgreen;“比;
& lt; p> right
& lt; p> right
& lt;/p>
& lt;/p> 。父母{
溢出:隐藏;
变焦:1;
}
.left {
浮:左;
margin-right: 20 px;
}
铃声{
溢出:隐藏;
变焦:1;
} 注意点:如果侧边栏在右边时,注意渲染顺序。即在HTML中,先写侧边栏后写主内容
<强>
Flex布的局,也叫弹性盒子布的局,区区简单几行代码就可以实现各种页面的的布局。
//HTML部分同上
.parent {
显示:flex;
}
铃声{
margin-left: 20 px;
flex: 1;
}
网格布的局,是一个基于网格的二维布局系统,目的是用来优化用户界面设计。
//html部分同上
.parent {
显示:网格;
grid-template-columns:汽车1 fr;
grid-gap: 20 px
} <强>
<强>特征:中间列自适应宽度,旁边两侧固定宽度强,实现三栏布局有多种方式(可以猛戳实现三栏布局的几种方法),本文着重介绍圣杯布局和双飞翼布局。
<强>①特点
比较特殊的三栏布的局,同样也是两边固定宽度,中间自适应,唯一区别是dom结构必须是先写中间列部分,这样实现中间列可以优先加载。
