CSS常见布局

qujian 发布于2019-04-23 13:09 / 1624人阅读

摘要：双飞翼布局三列布局，左右定宽，中间宽度自适应中间栏要在浏览器中优先展示渲染允许任意列的高度最高。双飞翼布局和圣杯布局基本一样，不同之处在于解决遮盖问题的方式不同。

一、单列布局

1. 水平居中

1.1 使用inline-block和text-align

  .parent{text-align:center;}
  .child{display:inline-block;}

1.2 使用margin:0 auto实现

  .child{width:200px;margin:0 auto;}

1.3 使用绝对定位实现

  .parent{position:relative;}
  .child{position:absolute;left:50%;margin-left:-100px;width:200px;}  /*margin-left的负值为盒子宽度的一半*/

1.4 使用flex布局实现

  .parent{display:flex;justify-content:center;}

2. 垂直居中

2.1 使用vertical-align

  .parent{line-height:100px}
  .child{display:inline-block;vertical-align:middle;}

2.2 使用绝对定位实现

  .parent{position:relative;}
  .child{position:absolute;top:50%;margin-top:-100px;height:200px;}  /*margin-top的负值为盒子高度的一半*/

2.3 使用flex实现

  .parent{display:flex;align-items:center;}

3. 水平垂直居中

3.1 使用inline-block,text-align和vertical-align

  .parent{line-height:100px;text-align:center;}
  .child{display:inline-block;vertical-align:middle}

3.2 使用绝对定位实现

  .parent{position:relative;}
  .child{position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;width:200px;height:200px;}  /*margin-top的负值为盒子高度的一半,margin-left的负值为盒子宽度的一半*/

3.3 使用flex实现

  .parent{display:flex;justify-content:center;align-items:center;}

二、多列布局

　 1. 圣杯布局：三列布局，左右定宽，中间宽度自适应；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高。

HTML：

 <div class="header">headerdiv>
 <div class="container">
    <div class="main">maindiv>    
    <div class="left">leftdiv>
    <div class="right">rightdiv>
 div>
 <div class="footer">footerdiv>

(1) 基础样式

*{margin:0;padding:0}
body{min-width:800px;}
.header,.footer{
   border: 1px solid #333;
   background: #aaa;
   text-align: center;
}
.container{
   border:2px solid yellow;
}
.left{
   width:200px;
   background:skyblue;
 }
 .right{
   width:200px;
   background:pink;
 }
 .main{
   width:100%;
   background:tomato;
 }

.main,.left,.right{
   min-height:100px;
 }

(2) 三列均设置左浮动

.left,.main,.right{
    float:left;
}

(3) 清除浮动

.container{       
   zoom:1;
}
.container:after{
   content:"";
   display:block;
   clear:both;
}

(4) 让left和right上移

.left{
     margin-left:-100%;   /*利用margin-left的负值，将left列移动到上一行的开头*/
     width:200px;
     background:skyblue;
}
.right{
     margin-left:-200px;  /*利用margin-left的负值，将right列移动到上一行的末尾*/
     width:200px;
     background:pink;
}

left列和right列已经上移，但是可以看见，此时main已被遮盖。

(5) 解决遮盖问题

给.containter左右内边距，大小分别为left列的宽和right列的宽。

.container{
   padding:0px 200px;
   border:2px solid yellow;
   zoom:1;
}

然后利用相对定位，将left列和right列定位到两侧空白处。

.left{
    position:relative;
    left:-200px;
    margin-left:-100%; 
    width:200px;
    background:skyblue;
}
.right{
    position:relative;
    right:-200px;
    margin-left:-200px;
    width:200px;
    background:pink;
}

遮挡问题已解决，main可见啦。

至此，圣杯布局已完成，中间列宽度自适应。

2. 双飞翼布局：三列布局，左右定宽，中间宽度自适应；中间栏要在浏览器中优先展示渲染；允许任意列的高度最高。

双飞翼布局和圣杯布局基本一样，不同之处在于解决遮盖问题的方式不同。

双飞翼布局在main元素中添加了一个子元素content，并给这个子元素设置margin-left和margin-right，以至于content里的内容不被遮盖。

HTML：

<div class="header">headerdiv>
<div class="container">
   <div class="main">
      <div class="content">contentdiv>
   div>
   <div class="left">leftdiv>
   <div class="right">rightdiv>
div>
<div class="footer">footerdiv>

CSS：

.content{margin:0 200px}

双飞翼布局也完成了，个人感觉比圣杯布局更简洁；完整代码就不上了，很简单的，不熟悉的可以动手试试哦。

云服务器 GPU云服务器 css布局 css布局教程学习css布局 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1496.html

前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

荆兆峰 2019-08-29 17:13 评论0 收藏0
CSS常见布局与居中

摘要：常用于控制页面布局的定位机制普通流相对定位绝对定位和固定定位。左右布局最常用的就是通过浮动左浮或右浮来实现浮动。可以通过设置左右的外边距为值来居中包括图片。这里，就CSS左右布局，左中右布局，水平与垂直居中，进行讨论。 CSS常用于控制页面布局的定位机制：普通流、相对定位、绝对定位和固定定位。还可以使用float属性来让元素浮动。 1.左右布局最常用的就是通过浮动（左浮或右浮）来实...

April 2019-08-30 15:54 评论0 收藏0