CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。主要对文档流的改变进行布局。假设你已经掌握了CSS的选择器、属性和值,并且可能对布局有一定了解可以往下看,如果没有可以先看这篇博客css解析。
css实现左右布局
css实现左右布局的方式大概有六种:
1. table的li实现
table标签是能够具有实现左右布局的属性,tr表示一行,td表示一列,tr中可以添加td实现盒子的左右布局.
2 . inline-block
display:inline-block属性是介于行级元素(display:inline)和块级元素(display:block)之间的属性,它可以像行级元素一样水平布局,也可以像块级元素设置宽高属性,所以可以进行左右布局。
3. float实现左右布局
float浮动,将该块状区域脱离父级标签的文档流,left属性值使该区域向父级标签区域的左侧边界放置,right属性值使该区域块向父级标签的右侧边界放置,如是利用该属性可以实现左右布局。
float布局对于后面节点的布局采用交错性的布局,inline-block采用正常式的布局。
4. flexbox属性实现左右布局
flexbox弹性盒子布局,display:box;该种布局主要用于移动前端开发。
5. float+margin实现左右布局
float能够使得元素向左或者向右靠边布局,如果在同级元素中设置一个正常流的区域与浮动块并列,则浮动块会在该正常流同级区域的边界处,只是浮动块会影响该区域块的布局,所以要清除浮动块的影响,所以此时将正常流区域块外的盒子设置margin等于浮动块的宽度既可以清除影响。
6. position:absolute左右布局
绝对定位,产生脱离文档流的布局现象。absolute可以覆盖任何位置的元素且不会影响正常流的布局,但是会产生遮盖。
左中右布局
三栏自适应布局:两边定宽,中间block宽度自适应。
1.绝对定位法
将左右两边使用absolute定位,因为绝对定位脱离文档流,后面的center会自然流动到上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
2. 使用自身浮动法
对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。同时父盒子设置 overflow: auto; 来避免子盒子溢出
3. 圣杯布局
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合。
居中布局
水平居中
对于行内元素(inline):text-align: center;
对于块级元素(block):设置宽度且 marigin-left 和 margin-right 是设成 auto,使用 max-width 替代 width。
对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;(vertical-alinga:top);或者使用 flex 布局
flex 布局: display:flex; justify-content:center
垂直居中
对于行内元素(inline)
单行:设置上下 pandding 相等(或者设置 line-height 和 height 相等)
多行:设置上下 pandding 相等;或者设置 display: table-cell; 和 vertical-align: middle;;或者使用 flex 布局;或者使用伪元素
对于块级元素(block):(下面前两种方案,父元素需使用相对布局)
已知高度:子元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度
未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);
使用 Flexbox:选择方向,justify-content: center;
水平垂直居中
定高定宽:先用绝对布局 top: 50%; left: 50%;,再用和宽高的一半相等的负 margin 把子元素回拉
高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);
使用 Flexbox:justify-content: center; align-items: center。
box-sizing
当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。
百分比宽度
百分比是一种相对于包含块的计量单位。它对图片和盒子模很有用:比如实现图片宽度始终是容器宽度的50%,即使窗口缩小。
inline-block 布局
inline-block 元素 影响垂直居中,加vertical-align:top。
ps:参考链接 :介绍 CSS 布局,学习CSS布局 ,CSS经典布局 ,使用CSS实现三栏自适应布局 ,
原文地址:https://www.cnblogs.com/gitnull/p/9365422.html