ccs之经典布局（三）（等分，等高布局）
接上篇ccs之经典布局（二）（两栏，三栏布局）
七、等分布局
等分布局是指一行被分为若干列，每一列的宽度是相同的值。两列之间有若干的距离。
1、float+padding+background-clip
使用float让元素在一行内显示，使用padding来实现元素之间的距离，使用background-clip使元素padding部分不显示背景。
2、float+margin+calc
使用calc()函数来计算元素的宽度，使用margin实现元素之间的间距
3、还可以增加结构来实现兼容，不推荐
4、table
元素被设置为table后，内容撑开宽度，兼容性的问题。还有table-cell元素无法设置margin,padding.
5、flex+~选择器 很好用，就是有兼容性的问题，多用于移动端布局
6、grid 很好用，就是有兼容性的问题，多用于移动端布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等分布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
overflow: hidden;
} .container {
/* margin-left: -20px; 第1种方法
overflow: hidden;
border: 1px solid greenyellow; */ /* overflow: hidden; 第2种方法
margin-right: -20px;
border: 1px solid greenyellow; */ /* display: flex; 第5种方法 */ /* display: grid; 第6种方法
grid-template-columns: repeat(4,1fr);
grid-gap: 20px; */ } .container div {
height: 300px; /* float: left; 第1种方法
width: 25%;
padding-left: 20px;
box-sizing: border-box;
background-clip: content-box; */ /* float: left; 第2种方法
width: calc(25% - 20px); 记得空格
margin-right: 20px; */ /* flex:1; 第5种方法 */
} /* .div1 ~ div{ 第5种方法
margin-left: 20px;
} */ .div1 {
background: greenyellow;
} .div2 {
background: palevioletred;
} .div3 {
background: orange;
} .div4 {
background: blueviolet;
}
</style>
</head> <body>
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body> </html>
八、等高布局
1、display:table-cell
table布局天然就具有等高的特点，display设置为table-cell此元素会作为一个表格单元格来显示，类似于<td>.
2、flex 弹性盒子布局，默认值就是自带等高布局的特点。(flex-direction和align-item)
3、padding与margin相互抵消
它是假等高，设置父容器的overflow属性为hidden,给每列设置比较大的底内边距，然后用数值相似的负外边距消除这个高度（用到的点有：background会填充padding,不会填充margin,margin有坍塌性，可以设置成负值。overflow：hidden;让容器产生BFC，清浮动。同时截取内容适应填充框，将超出的部分隐藏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局</title>
<style>
*{
margin: 0;
padding:0;
font-size: 12px;
}
.container{ /* display: table; 第1种方法 */
/* display:flex; 第2种方法 */
overflow: hidden;
}
.left,.right{
width: 200px;
/* display:table-cell; 第1种方法 */ /* padding-bottom: 999em; 第3种方法
margin-bottom: -999em;
float: left; */
} .left{
background: greenyellow;
}
.right{
background: palevioletred;
}
</style>
</head>
<body>
<div class="container">
<div class="left">测试文字</div>
<div class="right"> 咱们应当在一起，否则就太伤天害理啦。 你好哇，李银河。请你不要吃我，我给你唱一支好听的歌！一想到你，我这张丑脸上就泛起微笑</div>
</div>
</body>
</html>
九、全屏布局
全屏布局指的就是HTML页面铺满整个浏览器窗口，且没有滚动条，可以跟随浏览器大小的变化而变化。它在实际的工作中经常用到，下面展示几种方式进行全屏布局的实现。
1、float+clac()这一种方法
2、position+overflow来实现
3、inline-block+calc来实现
4、用absolute来实现
html:
<div class="parent">
<div class="top">top</div>
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="footer">footer</div>
</div>
css1:
<style>
*{
margin:0;
padding:0;
}
html,body,.parent{
height: 100%;
}
.top,.footer{
height: 50px;
background: grey;
}
.container{
overflow: hidden;
height: calc(100% - 100px);
background: papayawhip; }
.left{
width: 100px;
float: left;
height: 100%;
background: palevioletred;
}
.right{
overflow: auto;
height: 100%;
background: greenyellow;
}
.inner{
height: 10000px;
}
</style>
css2:
<style>
*{
margin:0;
padding:0;
}
.top,.footer{
height: 50px;
position: fixed;
/* 有position宽度就不能自适应等于所有后代元素的和，自适应的原因是因为下面的left和right的设置 */
left: 0;
right: 0;
background: rgb(161, 158, 158);
}
.top{
top:0;
}
.footer{
bottom: 0;
}
.container{
/* height: 100%; */
background: papayawhip;
position: fixed;
left:0;
right: 0;
top:50px;
bottom:50px;
overflow: auto;
}
.left{
width: 100px;
background: palevioletred;
height: 100%;
position: fixed;
left: 0;
top:50px;
bottom: 50px;
}
.right{
/* height: 1oo%; */
height: 1000px;
background: greenyellow;
margin-left: 100px;
}
</style>
css3:
<style>
* {
padding: 0;
margin: 0;
}
body, html,.parent {
height: 100%;
}
.top, .footer {
height: 50px;
background: gray;
}
.container {
height: calc(100% - 100px);
background: orange;
font-size: 0;
}
.left,
.right {
display: inline-block;
vertical-align: top;
font-size: 16px;
}
.left {
width: 100px;
height: 100%;
background: palevioletred;
}
.right {
width: calc(100% - 100px);
height: 100%;
overflow: auto;
background: greenyellow;
}
.inner {
height: 1000px;
}
</style>
css4:
<style>
* {
padding: 0;
margin: 0;
}
body, html,.parent {
height: 100%;
}
.top,.footer,.container{
position: absolute;
left: 0;
right: 0;
}
.top,.footer{
height: 50px;
background: gray;
}
.top{
top:0;
}
.footer{
bottom: 0;
}
.container{
top:50px;
bottom:50px;
background: orange;
}
.left,.right{
position: absolute;
top: 0;
bottom: 0;
}
.left{
width: 100px;
background: palevioletred;
}
.right{
left: 100px;
right: 0;
overflow: auto;
background: greenyellow;
}
.inner{
height: 1000px;
}
</style>
5、可以通过增加结构来提高兼容性利用float+absolute
html:
<div class="parent">
<div class="top">top</div>
<div class="content">
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
</div>
<div class="footer">footer</div>
</div>
css:
<style>
*{
margin:0;
padding:0;
}
html,body,.parent{
height: 100%;
}
.top,.footer{
position: absolute;
height: 50px;
left: 0;
right: 0;
background: grey;
}
.top{
top:0;
}
.footer{
bottom: 0;
}
.content{
height: 100%;
overflow: hidden;
background: blue;
}
.container{
overflow: hidden;
height: 100%;
margin:50px 0;
background: orange;
}
.left{
width: 100px;
float: left;
height: 100%;
background: palevioletred;
}
.right{
overflow: auto;
height: 100%;
background: greenyellow;
}
.inner{
height: 1000px;
}
</style>
aaarticlea/png;base64,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AAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdIpYfUwaWgAAAAAoCeF0ilh9TBpaAAAAACgJ4XSKWH1MGloAAAAAKAnhdJf/vKXT0r3C6uHSUMDAAAAAD0plN5426h6Q1g9TBoaAAAAAOhJofTqbaLqDWH1MGloAAAAAKAnhdK73hRVbwirh0lDAwAAAAA9KZROCauHSUMDAAAAAD0plE4Jq4dJQwMAAAAAPSmUTgmrh0lDAwAAAAA9KZROCauHSUMDAAAAAD0plM58ffk/ivFqLyp7cuIAAAAASUVORK5CYII=" alt="" />
ccs之经典布局（三）（等分，等高布局）的更多相关文章
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- 三列等高 css实现
实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden; 关键点就是三列div 同时margin-botto ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
- CSS等高布局的7种方式
前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...
- ccs之经典布局（二）（两栏，三栏布局）
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
随机推荐
- Note 2 for <Pratical Programming : An Introduction to Computer Science Using Python 3>
Book Imformation : <Pratical Programming : An Introduction to Computer Science Using Python 3> ...
- Cortex-M3 操作模式与特权等级
Cortex-M3支持2个模式(Handler模式.线程模式)和2个特权等级(特权级.非特权级). 当处理器处在线程模式时,既可以使用特权级,也可以使用非特权级. 当处理器处在Handler模式时,总 ...
- LC 539. Minimum Time Difference
Given a list of 24-hour clock time points in "Hour:Minutes" format, find the minimum minut ...
- 阶段3 3.SpringMVC·_05.文件上传_1 文件上传之上传原理分析和搭建环境
分成几个部分 里面可能就包含文件上传的值 提交方式要改成post 第三个就是提供一个input file的文件选择域 新建项目 新建一个项目 当前项目没有父工程 跳过联网下载 改成02 构建 编译和目 ...
- Eclipse使用高版本的jdk编译低版本的class文件的方法
如题,在这两天使用eclipse工具编译代码时,编译出来的class文件拿UE工具查看,版本为1.8版本的,而本地使用的tomcat版本是1.6的,运行中报错Unsupported major.min ...
- fiddler的使用：抓包定位、模拟弱网
一.fiddler抓包定位 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(cookie,htm ...
- LeetCode.1103-向人们分发糖果(Distribute Candies to People)
这是小川的第393次更新,第425篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第256题(顺位题号是1103).我们通过以下方式向一排n = num_people个人分 ...
- Win10无线网络配置VMware的nat网络
1.在windows上用运行cmd,用ipconfig /all查看可用网络的dns服务器 2.配置VMnet8,其dns与本地的dns服务器相同 3.打开VMware Workstation 的编辑 ...
- linux下使用URLOS搭建nextcloud私有云盘系统
Nextcloud是一个免费专业的私有云存储网盘开源项目,可以让你简单快速地在个人/公司电脑.服务器甚至是树莓派等设备上架设一套属于自己或团队专属的云同步网盘,从而实现跨平台跨设备文件同步.共享.版本 ...
- 【计算机视觉】【神经网络与深度学习】论文阅读笔记：You Only Look Once: Unified, Real-Time Object Detection
尊重原创,转载请注明:http://blog.csdn.net/tangwei2014 这是继RCNN,fast-RCNN 和 faster-RCNN之后,rbg(Ross Girshick)大神挂名 ...