CSS布局Blog

CSS常用布局

01|引言

作为一名前端工程师或者是学习前端的小白,在日常制作Web页面的时候都有碰到用CSS制作水平垂直居中的需求,刚好最近这段时间我也在梳理学习这边关于CSS的知识,现在根据我在网上借鉴别人的博客和自学讲讲CSS中的一些布局知识吧!
其中关于CSS一些标签和具体的参数详细介绍都是借鉴和参考MDN里面,如有疑问可以通过访问MDN!

02|左右布局

其实左右布局,听名字就很容易从字面意思上理解,左右布局其实就是通过左右两个模块将一个Web展开来,虽然说现在的Web前端页面布局虽然说用到的比较少,但是我们还是在这里简单实现一下:

01|利用"float"实现左右布局

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

float参数列表:

标签	描述
float:left	表明元素必须浮动在其所在的块容器左侧的关键字。
float:right	表明元素必须浮动在其所在的块容器右侧的关键字。
float:none	表明元素不进行浮动的关键字。
float:inline-start	关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。
float:inline-end	关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。

其中在该实例中用到的只有left和right这两个float的参数!

先声明一个Div作为父元素,然后在div里面生命两个div作为左右布局的两个布局块,然后对两个声明的left-block和right-block进行浮动(float)定位操作,最后的时候,对父元素进行清除浮动操作!

关于Height的定义,在父元素中制定了具体的宽度的话,子元素只需要设置对应的属性:height为100%就可以获得和父元素一样的高度了!

左右的两个div的宽度加起来等于100%就把父元素div给铺满了!

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
19
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>left And Right Layout</title>
6
    <link rel="stylesheet" href="./leftAndRight Layout.css">
7
</head>
8
9
<body>
10
    <div class="wrap clearfix">
11
        <div class="left-block">
12
            This is left Block!
13
        </div>
14
        <div class="right-block">
15
            This is right Block!
16
        </div>
17
    </div>
18
</body>
19
</html>

CSS Code:


xxxxxxxxxx
26
1
.clearfix::after{
2
    content:'';
3
    display: block;
4
    clear: both;
5
}
6
.wrap{
7
    padding: 10px;
8
    background: grey;
9
    height: 300px;
10
}
11
.left-block{
12
    float: left;
13
    font-size: 30px;
14
    text-align: center;
15
    width: 50%;
16
    background: blue;
17
    height: 100%;
18
}
19
.right-block{
20
    float: right;
21
    font-size: 30px;
22
    text-align: center;
23
    width: 50%;
24
    background: pink;
25
    height: 100%;
26
}

通过float实现左右布局效果图显示:

left and right layout by float

02|利用"flex"实现左右布局

CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置flex-grow, flex-shrink与flex-basis。

通过display属性设置为flex,flex容器变得灵活!使用display:flex将对应的div声明为弹性布局,当然弹性布局的出现肯定是为了解决某些问题而出现的!

此时带有display:flex属性声明的父元素div里面的两个子元素就能通过该特性进行左右布局了!

其中的子元素可以通过flex或者是直接通过width进行百分比布局!flex就是通过比例进行布局的!

标签	描述
display:flex	该元素的行为类似于块元素，并根据flexbox模型布置其内容。

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
19
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>leftAndRight Layout by flex</title>
6
    <link rel="stylesheet" href="./leftAndRight Layout by flex.css">
7
</head>
8
9
<body>
10
    <div class="wrap">
11
        <div class="left-block">
12
            This is left Block!
13
        </div>
14
        <div class="right-block">
15
            This is right Block!
16
        </div>
17
    </div>
18
</body>
19
</html>

CSS Code:


xxxxxxxxxx
22
1
.wrap{
2
    display: flex;
3
    padding: 10px;
4
    background: grey;
5
    height: 300px;
6
}
7
.left-block{
8
    float: left;
9
    font-size: 30px;
10
    text-align: center;
11
    width: 50%;
12
    background: blue;
13
    height: 100%;
14
}
15
.right-block{
16
    float: right;
17
    font-size: 30px;
18
    text-align: center;
19
    width: 50%;
20
    background: pink;
21
    height: 100%;
22
}

通过flex实现左右布局效果图显示:

left and right layout by flex

03|左中右布局

左中右布局,顾名思义就是通过三个区域来划分Web网页,将最主要的区域划分开来,最后通过不同的区域进行页面设计!

01|通过folat进行左中右的区域划分操作:

根据我们在上面知识点讲到的通过float进行区域划分,其实划分左中右应该是不难的,通过在父元素div中再加上一个div作为子元素并且设置其对应的属性就行了!

其中的float设定元素的布局位置,因为是中间部分的div我们直接通过float:left将其设定为左边浮动,并且给定具体的百分比宽度!

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
16
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>leftAndRightAndMiddle Layout</title>
6
    <link rel="stylesheet" href="./leftAndRightAndMiddle Layout.css">
7
</head>
8
<body>
9
    <div class="wrap clearfix">
10
        <div class="left">This is left Block!</div>
11
        <div class="middle">This is middle Block!</div>
12
        <div class="right">This is right Block!</div>
13
    </div>
14
</body>
15
</html>
16

CSS Code:


xxxxxxxxxx
34
1
.clearfix::after{
2
    content: '';
3
    display: block;
4
    clear: both;
5
}
6
.wrap{
7
    padding: 10px;
8
    background: grey;
9
    height: 300px;  
10
}
11
.left{
12
    float: left;
13
    font-size: 30px;
14
    text-align: center;
15
    width: 40%;
16
    background: blue;
17
    height: 100%
18
}
19
.middle{
20
    float: left;
21
    font-size: 30px;
22
    text-align: center;
23
    width: 20%;
24
    background: white;
25
    height: 100%
26
}
27
.right{
28
    float: right;
29
    font-size: 30px;
30
    text-align: center;
31
    width: 40%;
32
    background: red;
33
    height: 100%
34
}

通过float进行左中右布局划分效果显示:

通过float进行左中右布局划分效果图

02|通过flex进行左中右的区域划分操作:

同样的根据上面所提到的flex的特性进行区域划分!通过弹性布局盒子的特性对其进行左中右的区域划分,在父元素里面加一个div作为子元素,配置相关属性,就可以完成左中右区域的划分!

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
22
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>leftAndRightAndMiddle Layout by flex</title>
6
    <link rel="stylesheet" href="./leftAndRightAndMiddle Layout by flex.css">
7
</head>
8
<body>
9
    <div class="wrap">
10
    <div class="left-block">
11
      This is  left Block!
12
    </div>
13
    <div class="middle-block">
14
      This is  middle Block!
15
    </div>
16
    <div class="right-block">
17
      This is  right Block!
18
    </div>
19
  </div>
20
21
</body>
22
</html>

CSS Code:


xxxxxxxxxx
27
1
.wrap {
2
  display: flex;
3
  padding: 10px;
4
  background: #ccc;
5
  font-size: 0;
6
}
7
.left-block {
8
  width: 40%;
9
  background: #eaa;
10
  font-size: 30px;
11
  text-align: center;
12
  height: 300px;
13
}
14
.middle-block {
15
  width: 20%;
16
  background: #a8a;
17
  font-size: 20px;
18
  text-align: center;
19
  height: 300px;
20
}
21
.right-block {
22
  width: 40%;
23
  background: #6a8;
24
  font-size: 30px;  
25
  text-align: center;
26
  height: 300px;
27
}

通过float进行左中右布局划分效果显示:

通过flex金星左中右的区域划分操作

04|水平居中

我们现在来讲讲水平居中吧,还是蛮常见的一个布局方式!

01|使用margin:auto配合元素的width来实现水平居中的效果!

具体实现请见代码 :


xxxxxxxxxx
1
1
<div class="horizontal">content</div>

CSS Code:


xxxxxxxxxx
4
1
.horizontal {
2
    width: 200px;
3
    margin: 0 auto;
4
    }

使用上面所说的这种方法来实现水平居中的效果一定要满足两个条件:
元素一定需要有一个固定的宽度值
元素的margin-left和margin-right都必须设置为auto,两个属性少了任何一个都不行的,无法让元素达到水平居中的效果.元素的margin-left和margin-right都必须设置为auto,两个属性少了任何一个都不行的,无法让元素达到水平居中的效果.
此方法使用水平居中,支持所有的浏览器运行,所以也常常使用它来实现Web页面的水平居中的效果,但是如果说用在布局的情况下,那么就要注意一下在IE下的效果,如果Web页面中没有声明'"!DOCTYPE",那么在IE会以比较奇怪的方式解析你的Web页面,下面这段代码是针对这个情况而出现的!

HTML Markup:


xxxxxxxxxx
1
1
<div class="container"> 页面内容。... </div>

CSS Code:


xxxxxxxxxx
9
1
body {
2
    text-align: center;/*实现IE在怪异模式下页面水平居中*/
3
}
4
.container {
5
    text-align: left;/*让文本恢复到左对齐*/
6
    width: 960px;/*设置页面总宽度*/
7
    margin: 0 auto;/*使页面水平居中对齐*/
8
}
9

02|使用绝对定位配合负的margin来实现

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
1
1
<div class="horizontal">content</div>

CSS Code:


xxxxxxxxxx
6
1
.horizontal {
2
    width: 960px;
3
    position: absolute;
4
    left: 50%;
5
    margin-left: -480px;/*此值等于“-width/2”*/
6
}

其中该方法中需要注意的地方有:

要有一个固定宽度
其二对要居中的元素进行绝对定位，并且“left: 50%”；
对此元素设置一个负的“margin-left”并且值等于宽度的一半，另外如果元素不是相对于浏览器的话，还需要在其父元素上设置一个相对定位“position: relative”。

03|运用text-align:center燃元素水平居中

具体实现请见代码:


xxxxxxxxxx
1
1
.testH{text-align:center;}

05|垂直居中

用CSS来实现元素的垂直居中效果时间苦差事,虽然说方法有很多种,但是可能因为浏览器的兼容问题或者是别的问题,在一些别的浏览器上无法正常的工作,下面我将会结合我这几天学习CSS的知识进行总结和讲解.本小节参照了大漠的Blog进行CSS部分的学习!

01| 使用line-height来实现垂直居中

这种方法用来实现但行垂直居中相对来讲是比较简单的,但是前提是必须要保证元素内容是单行,并且height 高度是固定的!

实现方法:将line-height和height的值设置成一样的就行了!

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
3
1
<div class="vertical">
2
    content
3
</div>

CSS Code:


xxxxxxxxxx
4
1
.vertical{
2
    height:100px;
3
    line-height:100px;
4
}

优点:
社何在所有的浏览器上面使用,没有足够的空间时,内容不会被切掉!
缺点:
仅仅是用于文本和图片上面,并且这种方法,当你文本不是单行时,展示效果比较差!
这种方法对运用在校元素上是比较有效的,比如说一个Button,图片或者是文本字段上面!

02|给容器设置绝对定位达到垂直居中的效果

这种效果的实现主要是给容器设置绝对定位(absolute),并且定位高度为50%和margin-top为高度的一半并且值为负值:(margin-top:height/2).

其中如果要使用这种方法的话,必须要满足:

1.因为方法中提到高度的50%才能实现这种效果,那么也就意味着有一个固定的高度

2.不能设置"overflow:auto",因为当元素内容超过容器后,元素就会出现滚动,不适应内容的高度!

标签	描述
position:static	该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 `top`, `right`, `bottom`, `left` 和 `z-index`属性无效。
position:relative	该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
position:absolute:	不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
position:fixed	不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。`fixed`属性会创建新的层叠上下文。当元素祖先的 `transform` 属性非 `none` 时，容器由视口改为该祖先。
sticky	盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table 时`），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky`对 `table` 元素的效果与 `position: relative`相同。
top	top样式属性定义了定位元素的上外边距边界与其包含块上边界之间的偏移，非定位元素设置此属性无效。
position:absolute or position:fixed	`top`属性指定了定位元素上外边距边界与其包含块上边界之间的偏移。
position:relative	`top`属性指定了元素的上边界离开其正常位置的偏移。
position:sticky	如果元素在viewport里面，`top`属性的效果和position为`relative`等同；如果元素在viewport外面，`top`属性的效果和position为`fixed`等同。
position:static	`top`属性无效!

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
3
1
<div calss="vertical">
2
    content 
3
</div>

CSS Code:


xxxxxxxxxx
6
1
.vertical{
2
    height:100px;/*给定div具体的高度*/
3
    position:absolute;/*绝对定位*/
4
    top:50%;/*元素顶部边界离父元素的位置是父元素高度的一半*/
5
    margin-top:-50%;/*设置元素顶边负边距,大小为高度的一半!*/
6
}

优点:
能在各浏览器下工作,结构简单明了,不需要增加额外的标签!
缺点:
因为前面讲到了,该方法的使用有限制,必须有一个固定的高度,因此如果说当没有足够的空间,内容足够多的时候,要么出现消息,要么出现滚动条!(如果内容出现在body时,当用户缩小浏览器窗口时,body的滚动条将不会出现!)
该方法主要是针对多行元素进行元素的垂直居中! 并非元素内容的垂直居中,这一点还需要做明确的区分,以免混淆概念!
该方法是通过绝对定位来实现的,因此该方法实现元素的垂直居中需要注意以下几点:
元素定位关系到一个相对定位参考!确定元素相对于那一个作为参考坐标!
需要给元素具体的高度值,并且给margin-top一个负值,为高度的一半!
其中推荐改代码中给一个固定的宽度值,因为进行绝对定位后,会脱离文档流,宽度是根据元素内容的所占宽度以此为计算的! 为了更好的视觉效果可以给定一个宽度值!

03|通过父元素里面嵌套两个div实现垂直居中

该方法的主要实现原理就是:

通过在举重元素前面放一个div(or block元素),并且将div高度设置为父元素的50%,margin-bottom为元素高度的一半,并且清除浮动.
其中需要注意的地方就是:如果居中元素是放在body中的话,需要给html,body设置一个height:100%的属性!
1. 一个div块级元素没有主动为期设置宽度和高度,浏览器会为其分配可使用的最大宽度(如全屏的宽度),但是不负责分配高度,块级元素的高度是由子元素堆砌撑起来的!
2. 但是如果说子元素需要依赖父元素的高度,但是html和body都没有给定固定的高度值那么怎么办呢?
3. 浏览器负责分配块级元素宽度,但是高度是否能够获取啊?
4. 之前的css代码没有对其html进行高度设置body就不能向上获取父元素的height值了,但是通过修改后加入html之后的css设置就可以获取到浏览器最大的width和height!

通过以下代码可以发现:

HTML Markup:


xxxxxxxxxx
10
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>text html and body Height and width</title>
6
</head>
7
<body>
8
    <div></div>
9
</body>
10
</html>

CSS Code:


xxxxxxxxxx
13
1
*{
2
margin:0px;
3
padding:0px;
4
}
5
6
body{
7
height:100%;
8
}
9
10
div{
11
    background:#ddd;
12
    height:50%;
13
}

通过浏览器的开发者工具可以看到具体的width和height的信息:

test_01

test_02

test_03

修改后的CSS Code:


xxxxxxxxxx
13
1
*{
2
margin:0px;
3
padding:0px;
4
}
5
6
html,body{
7
height:100%;
8
}
9
10
div{
11
    background:#ddd;
12
    height:50%;
13
}

test_04

test_05

test_06

所以通过这个小实验可以得到,通过以下代码可以拿到width和height的值并且给子元素赋值!


xxxxxxxxxx
6
1
html,body{
2
    height:100%;
3
}
4
div{
5
    height:50%;
6
}

具体实现请见代码:

HTML Markup:


xxxxxxxxxx
7
1
<body>
2
   <div id="floater">/*这个块是一个空的内容!*/
3
    </div> 
4
    <div id="content">
5
        content section
6
    </div>     
7
</body>

CSS Code:


xxxxxxxxxx
11
1
html,body {height: 100%;}
2
    #floater{
3
        float:left;
4
        height:50%;/*相对于父元素高度的50%*/
5
        margin-bottom: -120px;/*值大小为居中元素高度的一半（240px/2）*/
6
    }
7
    #content {
8
        clear:both;/*清除浮动*/
9
        height: 240px;
10
        position: relative;
11
    }

优点:
能够兼容所有的浏览器,在没有足够的空间下,内容不会被切掉!
缺点:
元素高度被固定死,因为通过CSS获取HTML 高度是固定的,无法达到内容自适应高度,如果居中元素加上overflow的话,那么元素出现滚动条的话,元素就会被切掉,
还有就是加了一个div,空内容的div!

06|CSS小技巧

01|inline元素间的空白间隙

这里要介绍一个神器font-size:0。如果你写了个列表，因为元素节点有文本节点，在缩进代码时会占据宽度，比如：


xxxxxxxxxx
6
1
<ul>
2
    <li>我是第一项</li>
3
    <li>我是第二项</li>
4
    <li>我是第三项</li>
5
    <li>我是第四项</li>
6
</ul>

设置了CSS


xxxxxxxxxx
13
1
<style>
2
    ul {
3
        list-style: none;
4
    }
5
    li {
6
        width: 25%;
7
        display: inline-block;
8
        background: green;
9
        text-align: center;
10
        height: 40px;
11
        line-height: 40px;
12
    }
13
</style>

就会发现!

CSS Tips_01

我们为了页面代码的整洁可读性，往往会设置一些适当的缩进、换行，但当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，所以出现上述问题。虽然还有其他方法能解决我们因为缩进、换行而产生的问题，但此时，最合适的方法就是给li的父级ul设置font-size: 0，给li设置font-size: 16px，如此就达到了所需效果

CSS Tips_02

02|文字折行

单行文本溢出


xxxxxxxxxx
3
1
overflow: hidden;
2
text-overflow: ellipsis;
3
white-space: nowrap;

2.多行文本溢出


xxxxxxxxxx
4
1
display: -webkit-box;
2
-webkit-box-orient: vertical;
3
-webkit-line-clamp: 3;
4
overflow: hidden;

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

今天的Blog还是参考了很多前辈的一些知识点,我也在随着计划安排一直在不紧不慢的学习,其中有的知识点可能会因为个人的水平等原因,有些地方还请大家多多斧正,谢谢!

我是ProbeDream!