当前位置: 首页 > Web前端 > CSS

常用的CSS布局

时间:2023-03-30 17:04:38 CSS

1。导航栏垂直居中导航栏nav从左到右分为nav-left,nav-mid,nav-mid。如何实现从左到右依次排列且全部垂直居中的效果?全部设置float:left,方便nav-left、nav-right、nav-right垂直居中。只需要设置父元素nav的line-height等于它的height~1.1ul>li>a构成的导航栏内部navigation是水平居中的:ul设置text-align:center;li和set都显示:inline-block;2.清除父元素的浮动假设父元素是wrap,没有设置高度,包括三个子元素leftmidright需要实现水平三栏布局。首先,将float:left应用到left、mid、right三部分;并设置一个合理的宽度,假设都是30%。此时,由于内部元素全部浮动脱离文档流,父包含块的高度无法拉伸,缩成一条直线。接下来,您需要清除父包含块的浮动。此时,clear:both;没有用,因为它只能应用于清除左浮动或右浮动。方法一、溢出:隐藏;我们需要应用overflow:hidden;到父元素以清除浮动。原理是只要溢出的值不是默认值visible,就会触发BFC。而BFC则是一个傲娇的小张扬,有她自己的布局规则:内部的Boxes会在垂直方向上一个接一个的摆放。Box的垂直距离由margin决定。属于同一BFC的两个相邻框的边距会重叠每个元素的边距框的左侧触及包含块边框框的左侧(对于从左到右的格式,反之亦然)。即使存在浮动也是如此。BFC的区域不会和floatbox重叠。BFC是页面上一个隔离的独立容器,容器内部的子元素不会影响外部的元素。反之亦然。BFC计算高度时,浮动元素也参与计算。注意最后一项,因为在计算BFC的高度时,浮动元素也参与了计算,所以拉长了父元素的高度。并且这也符合在包含块没有设置高度(height:auto;)时的裁剪准则。因为包含块高度(height:auto;),所以永远不会出现内容超出包含块的情况,所以在应用overflow:hidden之后,需要计算所有内部元素的高度再进行切割。添加哪些元素会产生BFC:根元素的float属性不是none,position是absolute还是fixed显示是inline-block,table-cell,table-caption,flex,inline-flexoverflow不可见方法二。clearfix:after{...}clear属性清除浮动常见的解决方法:.clearfix:after{...}其实就是添加一个不可见的元素。主要代码:.clearfix:after{content:"";显示:块;明确:两者;//用于清除floating:块级元素带clear:bothset可以清除floatingoverflow:hidden;visibility:hidden;}将clearfix类添加到浮动元素的父元素上,清除父元素的影响,因为子元素浮动收缩成一行。完整代码参见:jsfiddle栗子3.横向三栏等宽布局横向三栏等宽布局当页面宽度发生变化时,如何保持三栏居中均匀显示?(真不知道“均匀居中”怎么形容简洁,意思是左右栏和页面的间距,栏与栏之间的间距,这四个间距是一样宽的。)其实就是的算术测验。根据设计稿样式计算3个柱子和4个间隙的百分比宽度,让它们加起来大约为100%,比如26%*3+5%*4=78%+20%=98%//html

//css.wrap{margin:0auto;宽度:400px;背景:黄色;溢出:隐藏;}.left,.mid,.right{浮动:左;左边距:5%;width:26%;}.left{background:blue;}.mid{background:pink;}.right{background:red;}效果如下图:更多方法参考这篇文章:Equal页面结构布局四、三行自适应布局:header(固定高度)+main(高度自适应)+footer(固定高度)方法一、栗子在positionjsfiddle//htmlheader内容页脚//css。header{位置:绝对;顶部:0;左:0;宽度:100%;高度:100px;背景颜色:粉红色;}.footer{位置:绝对;底部:0;左:0;宽度:100%;高度:100px;背景颜色:粉红色;}.ma在{位置:绝对;上:100px;左:0;bottom:100px;right:0;overflow:auto;background-color:yellow;}.content{height:1000px;}header和footercss属性和main基本一样在设置上注意两点:1.使用同时设置上下左右,同时打开元素的技巧。2.溢出:自动;用于在内部元素超出时显示进度条。这样当页面高度发生变化或者内部内容的高度发生变化时,始终可以保持正常的三行布局。方法二、flex(三行高自适应+两列宽自适应)可以直接看jsfiddle板栗主要代码://htmlheadersidemainfooter//cssbody{display:flex;flex-flow:column;}.heater,footer{height:100px;}div.body{flex:1;显示:弹性;宽度:500px;对齐自我:中心;}//div.body做三行flex布局的item,也是两列flex布局的container.side{width:200px;}.main{flex:1;}//事实上,flex-grow:1;占据了剩余宽度的1/n,而这里的n是1。可以看到我们的div.body还是水平居中的。其实我们给.body设置了固定宽度width:500px;加上对齐方式align-self:center;在此元素的横轴上。