摘要:因为个人所学有限所以可能不会罗列出所有的实现方法,不过我会继续努力查漏补缺。两栏布局左固定,右适应先写出初始样式和结构。因为是主要的显示区域,所以我们应该先加载它再加载其它的地方。
这一次我想讲解一下HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法,不过我会继续努力查漏补缺。
1.两栏布局(左固定,右适应)
先写出初始样式和结构。
div { height: 200px; color: #fff; }Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
float+margin实现方式
.left { float: left; width: 300px; background-color: #5616; } .right { width: 100%; margin-left: 300px; background-color: #438; }
position实现方式
.left { position: absolute; left: 0; width: 300px; background-color: #5616; } .right { width: 100%; margin-left: 300px; background-color: #438; }
flex
.container { display: flex; } .left { flex: 0 0 300px; background-color: #5616; } .right { flex: 1 1; background-color: #438; }
右固定,左适应同理。
2.三栏布局
float + margin方式
div { height: 200px; color: #fff; } .main { width: 100%; margin-left: 300px; margin-right: 100px; background-color: #554; } .left { float: left; width: 300px; background-color: #5616; } .right { float: right; width: 100px; background-color: #438; }Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
position实现方式
.main { width: 100%; margin-left: 300px; margin-right: 100px; background-color: #554; } .left { position: absolute; left: 0px; width: 300px; background-color: #5616; } .right { position: absolute; right: 0px; width: 100px; background-color: #438; }
以上这些实现方式,虽然实现了但还不够好。因为main是主要的显示区域,所以我们应该先加载它再加载其它的地方。
grid实现方式
.container { display: grid; grid-template-columns: 300px auto 100px; //列的宽度 } .main { grid-row: 1; //第几行 background-color: #554; } .left { grid-row: 1; //第几行 background-color: #5616; } .right { grid-row: 1; //第几行 background-color: #438; }
圣杯布局
.container { padding: 0 100px 0 300px; overflow: hidden; } .main { float: left; width: 100%; background-color: #554; } .left { position: relative; float: left; width: 300px; left: -300px; margin-left: -100%; background-color: #5616; } .right { position: relative; float: left; right: -100px; margin-left: -100px; width: 100px; background-color: #438; }
双飞翼布局
div { height: 200px; color: #fff; } .wrap { float: left; width: 100%; } .main { margin: 0 100px 0 300px; overflow: hidden; background-color: #554; } .left { float: left; width: 300px; margin-left: -100%; background-color: #5616; } .right { float: left; width: 100px; margin-left: -100px; background-color: #438; }Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
两种布局方式的不同之处在于如何处理中间主列的位置:
圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
3.垂直居中
position + margin实现(1)
.container { position: relative; width: 500px; height: 500px; background-color: #5465; } .content { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; background-color: #6465; }
position + margin实现(2)
.container { position: relative; width: 500px; height: 500px; background-color: #5465; } .content { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 200px; height: 200px; margin: auto; background-color: #6465; }
position + transform实现
.container { position: relative; width: 500px; height: 500px; background-color: #5465; } .content { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background-color: #6465; }
flex实现
.container { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; background-color: #5465; } .content { width: 200px; height: 200px; background-color: #6465; }
inline-block实现
.container { display: inline-block; width: 500px; height: 500px; text-align: center; background-color: #5465; } .content { display: inline-block; width: 200px; height: 200px; vertical-align: middle; background-color: #6465; } .container::after{ content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
效果都如下
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53512.html
摘要:因为个人所学有限所以可能不会罗列出所有的实现方法,不过我会继续努力查漏补缺。两栏布局左固定,右适应先写出初始样式和结构。因为是主要的显示区域,所以我们应该先加载它再加载其它的地方。 这一次我想讲解一下HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法,不过我会继续努力查漏补缺。 1.两栏布局(左固定,右适应) 先写出初始样式和结构。...
摘要:属性是中最重要的用于控制布局的属性。布局的高度多数情况下,布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。 这是《CSS设计指南》的读书笔记,用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...
摘要:属性是中最重要的用于控制布局的属性。布局的高度多数情况下,布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。 这是《CSS设计指南》的读书笔记,用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...
摘要:元素框相对于之前正常文档流中的位置发生偏移,并且原先的位置仍然被占据。这些相对于布局来说是基础的,同时也是非常重要的。可以看到,浮动元素,其实对于布局来说,是特别危险的。 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。 其实,我们可能经常在聊组件化,咋地咋地。但是,回过头来思...
阅读 3012·2021-11-25 09:43
阅读 1591·2021-11-24 11:15
阅读 2330·2021-11-22 15:25
阅读 3481·2021-11-11 16:55
阅读 3206·2021-11-04 16:10
阅读 2752·2021-09-14 18:02
阅读 1668·2021-09-10 10:50
阅读 1051·2019-08-29 15:39