CSS常用布局_1

时间：2023-03-30 22:53:37 CSS

1.单栏布局单栏布局是这样的。主要有两种类型：普通单栏布局和竖栏单栏布局。布局{宽度：960px;保证金：0自动；}#header{高度：60px；背景：红色；}#content{高度：400px；背景：蓝色；}#footer{高度：50px；背景：黄色；}head

content

Tail

执行结果链接说明当浏览器宽度超过960px时，出现外边距。当将浏览器宽度缩小到小于960px时，margin为0并出现滚动条。2.横幅header

内容footer执行结果链接说明在header和footer上包裹一层div，在外面的div上添加背景色，设置左边和rightmargin:auto在内层布局上，会出现banner的效果。其实布局所占的位置是固定的，如下图边框框所示。当浏览器宽度缩小时，滚动条也会出现。二、双列布局一列宽度固定，另一列宽度自适应。通过float+margin实现#content:after{content:'';显示：块；明确：两者；}.aside{宽度：200px；高度：500px；背景：黄色；向左飘浮;}.main{左边距：210px；高度：400px；背景：红色；}#footer{背景：#ccc;}asidecontentfooterexecuteResultlinkdescription1.最重要的布局时，浮动元素要放在最前面，先搁置一边，再写内容。因为content是一个普通的块级元素，如果先执行content，它会占据一整行，aside只能往下飘。如果先放在一边执行，因为有左边距，可以放在刚好合适的位置。2、注意浮动三栏布局用完后要清空。通过留出左右float+左右margin.aside{background:yellow;实现

12345li>678

执行结果链接说明左右没有边距五、flex布局关于flex的三篇文章写的很好flex布局教程：实例flex布局教程：语法深入理解flex-grow&flex-shrink&flex-basis6.圣杯布局1.原因在三列布局中，有通常两侧是广告，中间是实际内容。要求中间内容元素在dom元素顺序中处于优先位置。所以普通的三栏布局是不能用的，必须用更复杂的方法来实现。二、原理（float+负margin+绝对定位）1.设置main,aside,extra为float，设置main的宽度为100%2.设置aside负margin-left为100%（相当于移动一个parent元素向左宽度)，移到main3的左侧，设置extranegativemargin-left为150px(extra的宽度)，将extra移到main4的右侧，以免main内容被遮挡额外的和旁边的。将内容的左内边距设置为100px，将右内边距设置为150px以便为extra和aside腾出空间5.最后，使用position:relative将extra和aside分别移动到两侧。计算的基础是父元素的宽度。很难使用负边距。在使用之前，您可以阅读负保证金原理的这篇文章。mainasideextra执行结果链接说明7.双飞翼布局（浮动+左右边距+负边距）演示原理：双飞翼的布局很像圣杯，不同的是，双飞翼在主体内部嵌套了一层包裹。使用wrap设置左右边距，而不是使用content设置padding和绝对定位。main一边extra执行结果

上一篇：移动端适配第二篇：视觉视口、布局视口和理想视口介绍

下一篇：前端实例练习——模态框

CSS常用布局_1相关文章