一、单列布局

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">header</div>
<div class="container">
<div class="main">main</div> <!--中间栏优先展示渲染,放在前面-->
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>

(1) 基础样式

*{margin:;padding:}
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:;
}
.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:;
}

然后利用相对定位,将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">header</div>
<div class="container">
<div class="main">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>

CSS:

.content{margin:0 200px}

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

CSS常见布局的更多相关文章

  1. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  2. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  3. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  4. 前端进阶系列(二):css常见布局解决方案

    水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...

  5. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  6. CSS常见布局解决方案

    最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...

  7. css常见布局问题

    1.如何实现一个盒子在页面中上下左右居中 方法一:(盒子宽高固定时) .box{ width:400px; height:200px; background:#000; position:absolu ...

  8. 学习微信小程序之css16常见布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

    纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...

随机推荐

  1. [au3]批量输入号码程序

    批量输入号码程序 这个文件可以随时产生一个剪贴板文字的文本文件,以供其他程序读取. 这个程序修改了许多次了,主要是针对网络延迟的问题. 最终找到了解决方案:探测输入的界面的反馈信息,也就是反馈的颜色. ...

  2. 记一次安装VS2015后启动失败的修复过程

    安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...

  3. SVM理解

    https://blog.csdn.net/feilong_csdn/article/details/62427148

  4. Kubernetes-1

    master 节点负责管理整个集群,管理的控制面板,全局的角色和调度 3个组件 API Server : 统一入口 kubectl 客户端管理工具 Etcd 数据库 Scheduler 集群的调度 C ...

  5. struts2 拦截器弊端

    struts2 怎样在action内获得fielderror

  6. 从零开始学 Web 之 CSS3(四)边框图片,过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Facelets应用程序的生命周期

    当客户端(如浏览器)向使用Facelets创建的页面发出新的请求时,会创建一个新的组件树或 javax.faces.component.UIViewRoot将其创建并放入FacesContext. 该 ...

  8. rhel 配置centos源

    1.删除自带的yum包,清除/etc/yum.repos.d下面的文件 rpm -qa|grep yum|xargs rpm -e --nodeps(不检查依赖,直接删除rpm包) 2.安装cento ...

  9. 【翻译】停止学习框架(Stop Learning Frameworks)

    原文地址:https://sizovs.net/2018/12/17/stop-learning-frameworks/.翻译的比较生硬,大家凑合看吧. 我们作为程序员,对技术要时刻保持着激情,每天都 ...

  10. Lucene 7.2.1 自定义TokenFilter

    1.自定义TokenFilter import org.apache.lucene.analysis.TokenFilter; import org.apache.lucene.analysis.To ...