页面布局解决方案

时间：2023-03-31 12:22:48 CSS

页面布局解决方案居中布局子元素相对父元素水平居中，子元素宽度可变。除非另有说明，HTML结构如下：Demo

inline-block+text-align.parent{text-align:center;}.child{显示：内联块；宽度：300px；/*可变宽度*/background:#ffff00;}良好的兼容性（甚至兼容IE6和IE7）table+marginDemo

.parent{text-align:center;}.child{display:table;保证金：0自动；宽度：200px；/*可变宽度*/背景：#ffff00;}注意：显示：表格的行为类似于块元素，但宽度是内容宽度。优点无需设置父元素样式（支持IE8及以上）注意：兼容IE8以下版本需要调整的结果。absolute+transform.parent{位置：相对；文本对齐：居中；}.child{位置：绝对；左：50%；转换：translateX(-50%)；宽度：200px；/*可变宽度*/background:#ffff00;}优点绝对定位与文档流分离，不会影响后续元素的布局。设置绝对定位position:absolute;对于子元素和相对定位position：relative；for父元素是一种典型的定位方式，多用于设置子元素定位的参考点。缺点：transform是CSS3属性，存在兼容性问题。注意：transform属性的translateX和translateY旋转、缩放、移动或倾斜元素，移动函数可用于定位。flex+justify-content.parent{显示：flex;证明内容：居中；text-align:center;}.child{width:200px;/*可变宽度*/background:#ffff00;}/*下面的方法，可以达到同样的效果*/.parent{display:flex;text-align:center;}.child{margin:0auto;宽度：200px；/*可变宽度*/background:#ffff00;}优点是只需要设置父元素属性，不需要设置子元素。优点Flex存在兼容性问题。垂直居中的子元素相对于父元素居中，子元素的高度是可变的。表格单元格+vertical-align.parent{显示：表格单元格；垂直对齐：中间；高度：200px；background:#ffff00;}兼容性好（支持IE8，以下版本需要调整页面结构为table）absolute+transform.parent{position:relative;宽度：200px；高度：200px；背景：#ffff00；}.child{位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}优点绝对定位与文档流分离，不会影响后续元素的布局。但是如果绝对定位的元素是唯一的元素，父元素也会失去高度。缺点：transform是CSS3属性，存在兼容性问题。flex+align-items.parent{显示：flex;对齐项目：居中；/*垂直居中*/justify-content:center;/*水平居中*/width:200px;高度：200px；background:#ffff00;}优点只需要设置父节点属性，不需要设置子元素缺点兼容性问题水平和垂直居中水平和垂直居中的一般布局已经在另一篇文章中总结过，可以作为供学习参考。子元素相对于父元素水平和垂直居中，其（子元素和父元素）的高度和宽度是可变的。inline-block+text-align+table-cell+vertical-align.parent{text-align:center;显示：表格单元格；垂直对齐：中间；宽度：300px；/*宽度和高度都是可变的*/height:300px;background:#ffff00;}.child{display:inline-block;}兼容性好absolute+transform.parent{position:relative;宽度：300px；/*宽度和高度都是可变的*/height:300px;背景：#ffff00；}.child{位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}优点绝对定位脱离文档流，不会影响后续元素的布局。缺点：transform是CSS3属性，存在兼容性问题。flex+justify-content+align-items.parent{显示：flex;证明内容：居中；对齐项目：居中；宽度：300px；/*宽度和高度都是可变的*/height:300px;background:#ffff00;}优点只需要设置父节点属性，不需要设置子元素多栏布局多栏布局在网页中很常见（比如两栏布局），多栏布局可以可以是两列固定宽度，一列自适应，或者多列可变一列自适应，等距布局。一栏定宽，一栏自适应除非另有说明，HTML结构如下：

left

right

float+marginp{margin:0;/*清除p标签的默认边距*/}.left{float:left;宽度：100px；背景：#ffff00;}.right{margin-left:100px;背景：#c7254e;}float+margin+（修复）修改版本

left

right

p{margin:0;/*清除p标签的默认边距*/}.left{float:left;宽度：100px；背景：#ffff00；位置：相对；}.right-fix{浮动：正确；宽度：100%；左边距：-100px;}.right{左边距：100像素；background:#c7254e;}注意：此方法不存在IE6中3像素的bug，但.left无法选中。您需要设置.left{position:relative}来增加级别。此方法适用于多版本浏览器（包括IE6）。缺点是冗余的HTML文本结构。float+overflowp{保证金：0;/*清除p标签的默认边距*/}.left{float:left;宽度：100px；背景：#ffff00;}.right{溢出：隐藏;background:#c7254e;}设置overflow:hidden会触发BFC模式（BlockFormattingContext）块级格式化文本。BFC中的内容与外部元素隔离。溢出：隐藏；除了隐藏溢出的内容，它还有清除浮动的功能。具体实现是触发BFC或者IFC，也是很常用的方法。溢出：隐藏；将父元素显示区域的重叠部分剪掉，只显示在BFC区域，从而实现浮动的清除。明确：两者；是清除浮动的经典方法，但它与overflow:hidden;有很大不同。明确：两者；就是清除父元素同侧的浮动元素，即同侧不允许有其他浮动内容，子元素需要换行显示。如果布局目标是在同一侧有其他浮动元素，则可以选择overflow:hidden;。此功能称为浮动元素闭包。如果您对此功能感兴趣或有深入研究，请给我您的建议。这个在解决high-levelcollapses和触发BFC中被广泛使用，非常实用。table.parent{显示：表格；宽度：100%；table-layout:fixed;}.left{display:table-cell;宽度：100px；背景：#ffff00;}.right{显示：表格单元格；/*宽度为剩余宽度*/background:#c7254e;}表格的显示特点是每列单元格宽度之和必须等于表格宽度。表格布局：固定；可以加快渲染速度，也可以设置布局优先级。注意：margin不能在table-cell中设置，但可以通过padding设置间距。flex.parent{display:flex;}.left{width:100px;背景：#ffff00;}.right{flex:1;背景：#c7254e;}注意：弹性项目默认为内容宽度。缺点低版本浏览器兼容性问题。性能问题，只适合小规模布局。两列固定宽度，一列自适应除非另有说明，HTML结构如下：

left

center

right

p{保证金：0；/*清除p标签的默认边距*/}.left,.center{float:left;宽度：100px；背景：#ffff00;}.right{溢出：隐藏;/*等价于*//*flex:110;*/background:#c7254e;}多列定宽的实现可以按照单列定宽的例子修改实现。一列可变宽度+一列自适应可变宽度。宽度由内容决定。下面的方法可以达到这个效果：float+overflow。该方法在IE6table中存在兼容性问题，该方法在IE6flex中存在兼容性问题。该方法在IE9及以下版本存在兼容性问题。可变宽度的多列+一列自适应。解决方法类似同列变宽加一列自适应。多列等距布局除非另有说明，HTML结构如下：

float.parent{/*margin-left:-20px;*/}.column{float:left;宽度：25%；框大小：边框框；/*padding-left:20px;*/background:#c7254e;}注意：此方法完美兼容IE8以上版本。注意+：这种方法结构和风格是耦合的。表

.parent-fix{/*margin-left:-20px;*/}.parent{display:table;宽度：100%；/*可以优先布局，也可以不设置单元格宽度均分的情况下*/table-layout:fixed;}.column{display:table-cell;/*padding-left:20px;*/background:#c7254e;}注意：缺点是文本结果较多flex.parent{display:flex;}.column{flex:1;background:#c7254e;}注意：flex的特点是分配剩余空间。注意+：兼容性问题。两列等高布局除非另有说明，否则HTML结构如下：

left

right

tabletable的特点是每列等宽，每行等高都可以使用来解决这个需求。.parent{显示：表格；宽度：100%；table-layout:fixed;}.left{display:table-cell;背景：#ffff00;}.right{显示：表格单元格；background:#c7254e;}flex两列布局，一列固定宽度，一列adaptive.parent{display:flex;}.left{width:100px;背景：#ffff00;}.right{flex:1;背景：#c7254e;}float.parent{overflow:hidden;}.left,.right{padding-bottom:99px;/*这里设置了一个很大的值9999px，其实是满足一定尺寸的*/margin-bottom:-99px;}.left{float:left;宽度：100px；背景：#ffff00;}.right{溢出：隐藏;background:#c7254e;}注意：这种方法是伪等高的（只是背景显示的高度等），左右真正的高度实际上是不等的。注意+：这种方法更兼容。全屏布局除非另有说明，否则HTML结构如下：固定宽度要求实现方案位置常规方案flexCSS3新实现位置html,body,.parent{height:100%;/*用于隐藏滚动条*/overflow:hidden;}.top{/*相对于主体定位*/position:absolute;顶部：0；左：0；右：0；高度：100px；背景：#ffff00;}.left{位置：绝对;顶部：100px；左：0；底部：50px；宽度：200px；背景：#c7254e；}。右{位置：绝对；左：200px；顶部：100px；右：0；底部：50px；溢出：自动；nd:#5cb85c;}.bottom{位置：绝对；左：0；右：0；底部：0；高度：50px；背景：#2a6496;}Flexhtml,body,.parent{height:100%;用于隐藏滚动条*/overflow:hidden;保证金：0；填充：0;}.parent{显示：flex;flex-direction:column;}.top{height:100px;背景：#ffff00;}.bottom{高度：50px;background:#2a6496;}.middle{/*中心自适应*/display:flex;弹性：1；/*flex-direction:row为默认值*/}.left{width:200px;背景：#c7254e;}.right{flex:1;溢出：自动；background:#5cb85c;}百分比宽度要求只需要将固定宽高（值以px为单位）的实现改为百分比（%）即可，内容自适应仅右边栏占剩余空间，剩余空间需要根据内容进行更改。所以postion这种定位方式不适合这种方案。下面列出两种布局方案：flexgrid，W3C草案不稳定，浏览器支持不理想。flex只要不限制宽高，就可以对里面的内容进行自适应布局。去掉定宽实施方案中设置宽高的部分。

上一篇：解决img图片底部空白的问题

下一篇：【软作业二】作业总结

页面布局解决方案相关文章