详解CSS布局

Posted gitnull

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了详解CSS布局相关的知识,希望对你有一定的参考价值。

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实现三栏自适应布局  ,

以上是关于详解CSS布局的主要内容,如果未能解决你的问题,请参考以下文章

详解CSS的Flex布局

CSS多列布局Multi-column伸缩布局Flexbox网格布局Grid详解

详解 CSS 居中布局技巧

CSS flex 布局属性详解

CSS页面布局(超详解)

第103天:CSS3中Flex布局(伸缩布局)详解