css常用布局

最新推荐文章于 2022-03-08 16:25:55 发布

just_a_bad_guy

最新推荐文章于 2022-03-08 16:25:55 发布

阅读量282

点赞数

分类专栏： css布局

本文链接：https://blog.csdn.net/just_a_bad_guy/article/details/103821165

版权

css布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

居中布局

水平居中布局

text-align+inline-block

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:100%;
        height:200px;
        text-align:center;
    }
    .child{
        width:200px;
        height:200px;
        display:inline-block;
        /*
        block:块级元素 
        inline:内联元素 width与height无效
        inline-block:结合体
        */
    }
</style>

table+margin

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:100%;
        height:200px;
    }
    .child{
		width:100px;
        height:200px;
      	display:table;/*block也可*/
        margin:0 auto;
    }
</style>

absolute+transform

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:100%;
        height:200px;
        position:relative;
    }
    .child{
		width:100px;
        height:200px;
      	position:absolute;
        left:50%;
        transform:translateX(-50%)
    }
</style>

垂直居中布局

table-cell+vertical-align

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:200px;
        height:600px;
        display:table-cell;
        vertical-align:middle;
        /*设置文本对齐方式top middle bottom*/
    }
    .child{
		width:200px;
    }
</style>

absolute+transform

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:200px;
        height:600px;
        position:relative;
    }
    .child{
		width:200px;
        position:absolute;
        /*
        如果父元素开启定位，则相对父元素进行定位
        如果父元素未开启定位，则相对底页面进行定位
        */
        top:50%;
        transform:translateY(-50%)
    }
</style>

居中布局

table-cell+margin+vertical-align

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:200px;
        height:600px;
		
        display:table-cell;
        vertical-align:middle;
    }
    .child{
		width:100px;
        height:100px;

        display:block;
        margin:0 auto;
    }
</style>

absolute+translate

<div class='parent'>
	<div class='child'></div>
</div>
<style>
    .parent{
        width:200px;
        height:600px;
		
        position:relative;
    }
    .child{
		width:100px;
        height:100px;

        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
</style>

多列布局

两列布局

左定宽，右面自适应

float+margin

<div class='left'></div>
<div class='right'></div>

<style>

    .right,.left{
        height:300px;
    }
    .left{
        width:300px;
        float:left;
        /*使用浮动以后，元素将脱离文档流*/
    }
    .right{
        margin-left:300px;
    }
</style>

<!--优化-->

<div class='parent'>
    <div class='left'></div>
    <div class='right-fix'>
        <div class='right'></div>
    </div>
</div>
<style>
    .right,.left{
        height:300px;
    }
    .left{
        width:300px;
        float:left;
        position:relative;
        /*有定位的元素显示层级高于一般元素*/
    }
    .right-fix{
        float:right;
        /*在设置float以后，默认宽度为0,且可以由子元素所撑起*/
        width:100%;
        margin-left:-300px;
    }
</style>

float+overflow

<div class='left'></div>
<div class='right'></div>

<style>
    .right,.left{
        height:300px;
    }
    .left{
        width:300px;
        float:left;
        
    }
    .right{
        overflow:hidden;
        /*
        overflow将开启BFC模式，当前元素内部环境与外界完全隔离
        在不加overflow属性时，right与left在一行，但right会覆盖left且长度为100%;
        */
    }
</style>

table+table-cell

<div class='parent'>
    <div class='left'></div>
    <div class='right'></div>
</div>
<style>
    .parent{
        width:100%;
        display:table;
        table-layout:fixed;
        /*列宽由表格宽度和列宽度设定*/
    }
    .left,.right{
        display:table-cell;
    }
    .left{
        width:300px;
    }
</style>

三列布局

|-----------------|
|-----------------|
|	|  |	      |
|	|  |     	  |
|-----------------|
|-----------------|

<!--此处的三列布局为定长、定长、自适应）-->
<!--三列布局的实现与二列布局相似,常用方法也有三种-->
<div id='left'></div>
<div id="center"></div>
<div id='right'></div>
<style>
    #left,#right,#center{height:300px}
    #left{float:left;width:200px}
    #center{float:left;width:200px}
    #right{margin-left:400px;}
</style>

圣杯布局

|-----------------|
|-----------------|
|	|	     |	  |
|	|	     |	  |
|-----------------|
|-----------------|

<!--圣杯布局中间的三列布局（定长、自适应、定长）实现-->
<div id='left'></div>
<div id='right'></div>
<div id="center"></div>
<style>
    #left,#right,#center{height:300px}
    #left{float:left;width:200px}
    #right{float:right;width:200px}
    #center{margin-left:200px;margin-right:200px}
</style>
<!--float特性说明
	center必须放到最后。因为float的特性是，他的兄弟元素中，前面一个元素必须为浮动，否则它会自行另起一行渲染。也就是如果将center放到中间，right会另起一行渲染，和left、center不在同一行内。
-->
<!--缺陷
	这种布局使得center放在最后，所以会在浏览器中最后渲染。而作为页面主要内容的center往往需要最先渲染，即将center放在最前面。下面将进行改造。
-->
<div id="parent">
    <div id="center"></div>
	<div id='left'></div>
	<div id='right'></div>
</div>
<style>
    #parent{height:300px;margin-left:300px;margin-right:300px}
    /*如果子代全是浮动元素，父级元素会出现高度坍塌现象*/
    #left,#right,#center{
        height:300px;
        float:left;
    }
    #left{
        width:300px;
        margin-left:-100%;
        position:relative;
        left:-300px;
    }
    /*margin-left后移动到上一行的相同位置，开启定位，使用left纠正位置*/
    #right{
        width:300px;
        margin-left:-300px;
        position:relative;
        right:-300px;
    }
    #center{width:100%}
</style>

双飞翼布局

<!--与圣杯布局相同，它优化了left与right定位后带来的副作用-->
<div id="parent">
    <div id="center">
    	<div id='inner'></div>
    </div>
	<div id='left'></div>
	<div id='right'></div>
</div>
<style>
    #parent{height:300px}
    /*如果子代全是浮动元素，父级元素会出现高度坍塌现象*/
    #left,#right,#center{height:300px;float:left;}
    #left{width:300px;margin-left:-100%;}
    /*margin-left后移动到上一行的相同位置，开启定位，使用left纠正位置*/
    #right{width:300px;margin-left:-300px;}
    #center{width:100%}
    #inner{margin-left:300px;margin-right:300px;}
    /*center虽然占满全行，但inner元素为真正使用的中间元素*/
</style>

等分布局

将一行分为若干列，每一列占比相同

float实现

<div id='parent'>
    <div id='col1'></div>
    <div id='col2'></div>
    <div id='col3'></div>
    <div id='col4'></div>
</div>
<style>
    #parent{height:300px;}
    #col1,#col2,#col3,#col4{
        height:300px;
        width:25%;
        float:left;
    }
</style>
<!--增加间隙留白-->
<div class='parent-fix'>
    <div id='parent'>
    	<div id='col1'></div>
    	<div id='col2'></div>
    	<div id='col3'></div>
    	<div id='col4'></div>
	</div>
</div>
<style>
	#parent{height:300px;margin-left:-10px;}
    #col1,#col2,#col3,#col4{
        height:300px;
        width:25%;
        float:left;
        /*box-sizing:border-box使得padding的空隙为向内扩展，而非向外扩展*/
        box-sizing:border-box;
        padding-left:10px;
    }
</style>

table实现

<div id='parent'>
    <div id='col1'></div>
    <div id='col2'></div>
    <div id='col3'></div>
    <div id='col4'></div>
</div>
<style>
    #parent{display:table;width:100%}
    /*设置为table，默认width为0*/
    #col1,#col2,#col3,#col4{
        height:300px;
        display:table-cell;
    }
</style>
<!--增加间隙留白-->
<div class='parent-fix'>
    <div id='parent'>
    	<div id='col1'></div>
    	<div id='col2'></div>
    	<div id='col3'></div>
    	<div id='col4'></div>
	</div>
</div>
<style>
    #parent-fix{
        overflow:hidden;
    }
    #parent{
        display:table;
        width:1424;/*宽度为100%+10px*/
        margin-left:-10px;
    }
    /*设置为table，默认width为0*/
    #col1,#col2,#col3,#col4{
        height:300px;
        display:table-cell;
        
        box-sizing:border-box;
        padding-left:10px
    }
</style>

等高布局

一行划分为若干列，每列高度相同

使用table

<div id='parent'>
	<div id='left'>dhkadhwkjhdkahwdkhkawj</div>
	<div id='right'>       ewrqewrdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjwer
    </div>
</div>
<style>
    /*基于table的默认设置，单元格默认是等高的*/
    #parent{display:table}
    #left,#right{width:300px;display:table-cell;}
</style>

使用padding+margin (伪等高布局)

<div id='parent'>
	<div id='left'>dhkadhwkjhdkahwdkhkawj</div>
	<div id='right'>       ewrqewrdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjdhkadhwkjhdkahwdkhkawjwer
    </div>
</div>
<style>
    #parent{overflow:hidden;}
    #left,#right{
        width:300px;
    	float:left;
        padding-bottom:9999px;
        margin-bottom:-9999px;
    }
</style>

多列布局

一行多列，每列元素等宽

<div id='parent'>
	<div id='col1'></div>
	<div id='col2'></div>
	<div id='col3'></div>
	<div id='col4'></div>
</div>
<div id='parent2'>
	<div id='col5'></div>
</div>
<style>
    #parent,#parent2{
        column-count:4;/*有多少个子元素*/
		column-width:300px;/*子元素宽度*/
        /*column:4 300px;*/
        column-gap:15px;/*设置间隙大小*/
        column-rule:5px red double;/*设置间隙边框效果 */
    }
    #col1,#col2,#col3,#col4{
        column-fill:balance/*设置高度 auto根据内容自适应，balance根据内容最多的一列为准*/
    }
    #col5{
        column-span:all;/*横跨所有列*/
    }
</style>

全屏布局

html页面铺满整个浏览器窗口，有滚动条

|-----------------------------|  -->定长自适应宽
|-----------------------------|  
|	  |						  |  
|	  |						  |  -->（左）自适应长定宽、
|	  |						  |     （右）自适应长自适应款
|	  |						  |  
|-----------------------------|  
|-----------------------------|  -->定长自适应宽
<body>
	<header></header>
	<div class='content'>
	    <div class='left'></div>
	    <div class='right'></div>
	</div>
	<footer></footer>
</body>

<style>
    html,body{margin:0;overflow:hidden;}
    header{
        height:100px;
    	position:fixed;
        top:0;
        left:0;
        right:0;
    }
    .content{
       	position:fixed;
        top:100px;
        bottom:100px;
        left:0;
        right:0;    
        overflow:auto;
    }
    .content .left{
        width:300px;
        height:100%;
        
        position:fixed;
        left:0;
        top:100px;
        bottom:100px;
    }
    .content .right{
        margin-left:300px;
        
    }
    footer{
        height:100px;
    	position:fixed;
        bottom:0;
        left:0;
        right:0;
    }
</style>

css相关知识

实用属性

{
    width:calc(100%-120px) /*使用计算的方式得到宽*/
    scroll-behavior:smooth /*元素滑动时有过渡性*/
    scroll-snap-type:x mandatory;/*滚动容器只捕捉其水平轴上的捕捉位置。如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上*/
    scroll-snap-align:start /*发生移动后首选回到初始位置*/
}

盒子模型

content-box：默认值，总宽度 = margin + border + padding + width
border-box：盒子宽度包含 padding 和 border，总宽度 = margin + width
inherit：从父元素继承 box-sizing 属性

格式化上下文（Formatting Contexts即FC）

例如一个ifc并不是指的是一个行内元素，而是只可能由很多个行内级元素共同组成的一个上下文。

BFC

块级格式化上下文，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此(按照这个理念来想，只要脱离文档流，肯定就能产生 BFC)。产生 BFC 方式如下：

float 的值不为 none。
overflow 的值不为 visible。
position 的值不为 relative 和 static。
display 的值为 table-cell, table-caption, inline-block中的任何一个

BFC的布局规则如下：

内部的盒子会在垂直方向，一个个地放置；
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
计算BFC的高度时，浮动元素也参与计算

常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行

IFC

内联格式化上下文，IFC 的 line box（无形的线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。

IFC中的line box一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与 line box 之间，使得 line box 宽度缩短。同个 ifc 下的多个 line box 高度会不同。 IFC中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个p与 div 分隔开，即产生两个 IFC ，每个 IFC 对外表现为块级元素，与 div 垂直排列。

用处如下：

水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生IFC，通过 text-align 则可以使其水平居中。
垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中

布局规则：

在一个IFC中，从父级元素的顶部开始，盒子一个接一个横向排列
一个line box总是足够高对于包含在它内的所有盒子。然后，它也许比包含在它内最高的盒子高
当盒子的高度比包含它的line box的高度低，在line box内的盒子的垂直对齐线通过’vertical align’属性决定
当在一行中行内级盒子的总宽度比包含他们的line box的宽度小，他们的在line box中的水平放置位置由’text align’属性决定
当一个行内盒子超过了line box的宽度，则它被分割成几个盒子并且这些盒子被分配成几个横穿过的line boxs

GFC

网格布局格式化上下文

display: grid

FFC

自适应格式化上下文

display: flex

区分概念

块级元素：块级元素是那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。例例如：display属性为block, list-item, table, flex, grid
块元素：块元素是 display 属性值为 block 的元素，它应该是块级元素的一个子集
行内级元素：行内级元素是那些不会为自身内容形成新的块，而让内容分布在多行中的元素。
例如：display属性为inline, inline-table, inline-block, inline-flex, inline-grid。
行内元素：行内元素仅仅是display属性值为inline的元素。

just_a_bad_guy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css常用布局

文章目录居中布局水平居中布局text-align+inline-blocktable+marginabsolute+transform垂直居中布局table-cell+vertical-alignabsolute+transform居中布局table-cell+margin+vertical-alignabsolute+translate多列布局两列布局float+marginfloat+over...
复制链接

扫一扫