css布局
初步处理
margin：auto；###
#main {
width: 600px;
margin: 0 auto;
}
- 设置块级元素的width防止它撑满整个容积，设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
- ?当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。
max-width
#main {
max-width: 600px;
margin: 0 auto;
}
- max-width 替代 width 可以使浏览器更好地处理小窗口的情况。
box-sizing
？当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
position布局
position属性
-
static
非positioned 位于其正常位置 ，即刚好有空的地方，文档流 从上往下 从左往右，一排排。 -
relative
- 在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
- 相对位置 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
- absolute
- 绝对位置 生成绝对定位的元素，相对于positioned的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规。
- 不为元素预留位置，因此右边可有其他元素，可以对页面进行布局
- 注意：记住一个“positioned”元素是指 position 值不是 static 的元素。
- static
[外链图片转存失败(img-bK9u39Bt-1564059150347)(./md2.png)] - absolute
[外链图片转存失败(img-TQtL7Eld-1564059150348)(./md3.png)]
- fixed
- 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- 一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
- position is static by default 默认
position步骤
-
static时默认属性
-
relative默认位于文档流正常位置，设置"left", “top”, “right” 以及 “bottom” 进行偏移。
-
fixed相对浏览器窗口固定，偏移同上
-
absolute 需要将其相对元素改为positioned，一般是
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
} -
fixed和absolute脱离文档流 通过position+margin-left布局
浮动布局 float
float元素特征
被设置float的元素会脱离文档流
- 当子元素都是float是父元素没有高度，结构坍塌。当有非float元素是结构高度按元素高度来算，文字把父级元素撑起来。
- 包裹性 div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。设置了float的div盒子将文字包裹，文字环绕图片，图片被包裹。
[外链图片转存失败(img-8QLEbGlQ-1564059150348)(./md13.png)] - 清空性 个元素紧紧挨在一起，无空隙
文字环绕图片
-
先写与图片，再写文字。
[外链图片转存失败(img-aTT3A83I-1564059150348)(./md10.png)]
当浮动的图片超过容积的尺寸会溢出，此时.clearfix { overflow: auto; }
清除浮动
脱离文档流
文档流就是在元素排版过程中，元素会自动从左向右，从上往下的流式排列。脱离文档流就是元素打乱排版。
造成脱离文档流的方式：浮动和定位
- 浮动元素，即float:left/right
- 绝对定位元素，即position:absolute/fixed
- 块容器，即display:table-cell/table-caption/inline-block
- 设置了除visible外的overflow值的块盒子，即overflow:hidden/scroll/auto
BFC特性：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
- 创建了BFC的元素中，子浮动元素也会参与高度计算//
[外链图片转存失败(img-THGMdUYH-1564059150349)(./md9.jpg)] - 与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素相互覆盖
- 创建了BFC的元素不会与它们的子元素margin重叠
-
因为子浮动元素也会参与高度计算, 所以借此可以得到以下方法:
.fix { overflow:hidden; zoom:1; } .clearfix { overflow: auto; }
方法不错，但是可能内容会被裁减掉，可以偶尔用用
- clear法
-
为父元素添加
overflow:hidden/auto
这样父元素就有高度了 ，父元素的高度便不会被破坏；
2. 浮动父元素
3.父元素底部加上<div style="clear:both;"></div>虽然不错，但是违反语义化;
4. clear fix
-
所以就想到了通过CSS来添加子元素，不修改HTML代码 —— :after选择符
.clearfix:after { content: " "; //content可以任意发挥 display: block; line-height: 0; //height: 0也行 clear: both; } .clearfix { zoom: 1; }
这个方法最佳, 推荐这个方法
浮动布局
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}
100%比宽度并列布局
百分比是一种相对于包含块的计量单位。相对于父容器的比例。
-
把一个页面分为n等分
每次页面分割外面要加.container包装起来.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { position: relative; min-height: 1px; float: left; } .col-1 { width: 10%; } ...... .col-10 { width: 10%; }
- float+百分比
inline-block布局
inline-block+盒子尺寸
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}
注意
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙。去掉空隙的方法最简单将HTML中的空格去掉。
flexbox布局
flex模型
[外链图片转存失败(img-zCuqVaVW-1564059150349)(./flex_terms.png)]
主轴是main axis x轴
flex模型步骤
-
指定元素的布局为flexible
确定哪些元素需要设置成柔性的盒子。给这些元素的父元素display设置一个特定值。这些元素自动分成宽相等的n列，并且列的高度都是一样。
注意：假如你想设置行内元素为 flexible box，也可以置 display 属性的值为 inline-flex。section { display:flex } -
列还是行
flex-direction:指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row （一列一列） 从左到右。
column(一行一行)/ column-reverse/row-reverse -
换行
flex-wrap(包 / 缠绕)指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。 wrap被打断为多行。给 flex项添加一个最小宽度。.父容器{ flex-wrap: wrap } .flex-item{ flex: 200px;/*对应于flex-direction:row;*/ } -
flex-diretion 和 flex-wrap的缩写flex-flow.
flex-direction: row; flex-wrap: wrap; | | flex-flow: row wrap; -
flex项的动态尺寸
article { flex: 1;/*400结果也是一样*这是一个比例值，数值相等表示每个元素所用空间大小相等，占用的空间是在设置 padding 和 margin 之后剩余的空间/ }第三个flex项占用可用空间是其他的2倍。
article:nth-of-type(3) { flex: 2; }指定每个flex项的flex的最小值，即每个flex 项将首先给出200px的可用空间，然后，剩余的可用空间将根据分配的比例共享
article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; }
- item属性
| 属性 | 意义 |
|---|---|
| flex-grow | 弹性盒子的扩展比率（flex-grow: number/initial/inherit）默认值是0 |
| flex-shrink | 一般用于溢出容器的 flex 项,指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。 |
| flex-basis | flex 元素在主轴方向上的初始大小 ,box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高 |
注意
- 每个flex项的flex-grow都需要一个值，才能显示出每个元素直接的比例，默认值是0，当有文字时，盒子会被撑开。
-
水平和垂直居中
//父容器属性 align-items- align-items
控制flex项在交叉轴上的位置； 垂直
- 默认值是stretch,使得所有的flex项沿着交叉轴方向拉伸以填充父容器。IF父容器在cross轴上固定高度（heigth），ALL flex项都会he最长的flex项一样高。
- align-items
各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行各行平分，以扩大它们的侧轴尺寸。
[外链图片转存失败(img-cRk8oJvC-1564059150349)(./stretch.png)]
3. center使得这些项保持原来的高度的基础上，居中。
各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
[外链图片转存失败(img-9bkpwL9u-1564059150349)(./center.jpg)]
5. 设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值
flex-end
[外链图片转存失败(img-V3R0YPad-1564059150350)(./flex-end.jpg)]
button:first-child {
align-self: flex-end;//于父容器底端挨着
}
5.space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半.
[外链图片转存失败(img-TzjhQAvL-1564059150350)(./水平stretch.jpg)]
- justify-content
- 控制 flex 项在主轴上的位置。
- 默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。
- center 在 justify-content 里也是可用的，可以让 flex 项在主轴居中。
- space-around使所有 flex 项沿着主轴均匀地分布，在任意一端都会留有一点空间。
-
flex项排序
弹性盒子可以改变 flex 项的布局位置，而不会影响到源顺序（即 dom 树里元素的顺序）。
[外链图片转存失败(img-cTvkCLTP-1564059150350)(./md8.png)]button:first-child { order: 1;//flex项 } //次项出现在主轴的末尾
- 所有 flex 项默认的 order 值是 0。
- order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
- 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。
- 第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。
- order可以是负值，排在0的前面。
-
flex嵌套
父容器 display：flex; flex-flow:row wrap;//行还是列 是否换行flex-dirction flex-wrap 居中对齐 align-items：center//justify-content：space-around flex项 动态尺寸 flex ：1 200px；//每个flex项的比例，以及主轴方向每项的最小长度；
column
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3; //列数
column-gap: 1em; //
}
[外链图片转存失败(img-JRk03RzN-1564059150350)(./md11.png)]
css布局模型
2.1 布局模型
在网页中，元素有三种布局模型：
流动模型（Flow） 默认的
-
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
-
（每一个便签都显示着自己本来默认的那个宽高）
-
在流动模型下，行内元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
浮动模型 (Float)
层模型（Layer）
层模型有三种形式：
- 相对定位(position: relative)
正常的文档流中，相对于以前的位置移动，偏移前的位置保留不动。在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。 - 绝对定位(position: absolute)
- 被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除
- 我们可以通过z-index来设置它们的堆叠顺序 。
- 绝对定位使元素脱离文档流，不占空间，仍在文档流中的其他元素将忽略该元素并填补他原先的空间。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。
- 浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了
- 固定定位(position: fixed)
- 相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。
! ! ! 相对定位可以和绝对定位混着使用 原则是：只要父div定义了定位属性，子div就会跟着父div的位置去再定位相对定位可以和绝对定位混着使用 原则是：只要父div定义了定位属性，子div就会跟着父div的位置去再定位
2.2 z-index
- z-index可以改变元素相互覆盖的顺序，默认为0，可正可负。
- z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
只对定位元素有效
z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。
<div style="width:200px;height:200px;z-index:30">//大 理应在上面，但未定位，在下面。
</div>
<div style="position:relative; top:-50px; width:100px;height:100px;z-index:10;"><div>
第一个div未设置position的3个属性，未定位，不起作用。
父子关系
-
如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方
<div style="position:relative;width:200px;height:200px;z-index:10;">//大，但有儿子，儿子在上面 <div style="position:relative;width:100px;height:100px;z-index:-5;"><div> </div> -
如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效
<div style="position:relative;width:200px;height:200px;"> <div style="position:relative;width:100px;height:100px;z-index:-5;"><div>//小 但是爸爸使用默认值 在下面 </div>
兄弟关系
-
如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
<div style="position:relative;top:50px;width:200px;height:200px;"> //position给了relative，absolution，或者fixed 就是定位了z-index使用了默认值。 </div> <div style=" width:100px;height:100px;"><div> -
如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
<div style="width:200px;height:200px;">//未定位，未使用z-indenx ，把其当作默认值，在上面 </div> <div style="position:relative; top:-50px; width:100px;height:100px;z-index:-5;"><div>
网页布局的方式
网页实质是块于块之间的位置，分为三种关系：相邻，嵌套，重叠。
网页布局常用方式
1. 一列布局
一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等；
2. 两列布局
-
常用float来实现。
-
设置左左浮动，左右浮动，需要确定父级元素的宽度
父级元素没有设置高度，则需要设置overflow:hidden来清除浮动产生的影响 -
对于自己相邻元素清除浮动产生的影响用：clear：both;
<div class="main"> <div class="left">left</div> <div class="right">right</div> </div> .main{ width: 400px; background: red; overflow: hidden;//清除浮动 } .left{ background: yellow; float: left; } .right{ background: green; float: left; }
3.三列布局
两侧定宽中间自适应
- 可以左左右设置浮动。然后中间设置margin调整间距。
- 也可以都设置成左浮动，设置margin，调整间距。同样注意清除浮动的影响！
- 或着为父级元素设置relative属性，再为子元素设置absolute属性，再分别定位，调间距。
4.布局混合
在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。
.top{
height: 100px;
background: teal;
}
.footer{
height: 100px;
background: wheat;
}
.main{
width: 100%;
background: red;
overflow: hidden;//父元素
}
.left{
background: yellow;
float: left;
width: 50%;
}
.right{
background: green;
float: right;
width: 50%;
}
5.拓展（如等分布局）
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
body{margin: 0;}
.parent{
border: 1px solid red;
overflow: hidden;
margin-right: -10px;
}
.child {
width: calc(25% - 10px);
height: 100px;
background: green;
float: left;
margin-right: 10px;
}
对齐方式
水平居中
(1). 行内元素的水平居中
如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素
[外链图片转存失败(img-CWQiyGoj-1564059150351)(./md14.png)]
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
<style>
.parent{
text-align: center;
}
.child{
display: inline-block;
}
</style>
IF 只需要文本在块元素居中，只需要
.child{
text-align: center;
}
(2）块状元素的水平居中（定宽）
当被设置元素为定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。
.child{
width: 200px;
margin: 0 auto;
}
(3)块状元素的水平居中（不定定宽）
如网页上的分页导航，
可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。
当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为 行内元素 显示或行内块元素）
垂直居中
-
子元素是行内元素，高度是由其内容撑开的
.wrap{
width:200px ;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span{
background: red;
}
2.子元素是块级元素但是子元素高度没有设定 ，无法计算出padding和margin来调整，通过给父元素设定display:table-cell;vertical-align:middle来解决.wrap{ width:200px ; height: 300px; border: 2px solid #ccc;
display: table-cell;
vertical-align: middle;
}
.non-height{
background: green;
}
3. 子元素是块级元素且高度已经设定
计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2
.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
}
.div1{
width:100px ;
height: 100px;
margin-top: 100px;
background: darkblue;
}
水平垂直居中
- 水平对齐+行高
text-align + line-height实现单行文本水平垂直居中 - 水平+垂直对齐
-
text-align + vertical-align 在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素
<style> .parent{ display: table-cell; text-align: center; vertical-align: middle; } .child{ display: inline-block; } </style> -
若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle
<style> .parent{ text-align: center; line-height: 100px; font-size: 0; } .child{ vertical-align: middle; } </style>
-
相对+绝对定位
使用absolute，利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto<style> .parent{ position: relative; } .child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 50px; width: 80px; margin: auto;// } </style>
七种实现左侧固定，右侧自适应两栏布局的方法
一 双inline-block
这种方法是通过width: calc(100% - 140px)来动态计算右侧盒子的宽度。
-
因此需要知道右侧盒子距离左边的距离（margin-left），以及左侧盒子具体的宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
-
作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。
-
div消除空格,需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。
.wrapper { padding: 15px 20px; border: 1px dashed #ff6c60; box-sizing: content-box;//width只包含子元素，不包括border和padding font-size: 0; } .left { width: 120px; border: 5px solid #ddd; } .right { margin-left: 20px; border: 5px solid #ddd; width: calc(100% - 140px);//left-width+margin=140px } .wrapper .left, .wrapper .right { display: inline-block; vertical-align: top; font-size: 14px; box-sizing: border-box; }
缺点
-
需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing
-
需要消除空格字符的影响
-
需要设置vertical-align: top满足顶端对齐。
二 双float
.wrapper {
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: auto;//父元素需要清除浮动
}
.left {
width: 120px;
border: 5px solid #ddd;
}
.right {
margin-left: 20px;
border: 5px solid #ddd;
width: calc(100% - 140px);
}
.wrapper .left,
.wrapper .right {
float: left;
box-sizing: border-box;
}
缺点:
-
需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing。
-
父元素需要清除浮动。
三 float+margin-left
-
为了让右侧盒子和左侧盒子保持距离，需要为左侧盒子留出足够的距离。这个距离的大小为左侧盒子的宽度以及两个盒子之间的距离之和。然后将该值设置为右侧盒子的margin-left。
.wrapper-float {overflow: hidden; // 清除浮动，使得父元素的高度可以包含浮动子元素
}.wrapper-float .left { float: left; } .wrapper-float .right { margin-left: 150px;//距离浮动元素20px }
缺点：
-
需要清除浮动
-
需要计算右侧盒子的margin-left
清除浮动时，在父元素中添加属性
四 absolute+margin-left
左侧盒子使用绝对定位（在文档流中不占空间） ，让右侧的盒子不能无视它
.wrapper-absolute .left {
position: absolute;
}
.wrapper-absolute .right {
margin-left: 150px;
}
缺点:
-
使用了绝对定位，若是用在某个div中，需要更改父容器的position。
-
没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。
五、float+BFC
.wrapper {
padding: 15px 20px;
border: 1px dashed #ff6c60;
box-sizing: content-box;
overflow: auto;//清楚浮动
}
.left {
width:120px;
border: 5px solid #ddd;
float: left;
margin-right: 20px;
}
.right {
margin-left: 0;
overflow: auto;//形成BFC
border: 5px solid #ddd;
}
利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。
六、flex
.wrapper-flex {
display: flex;
align-items: flex-start;//两列自动对齐
}
.wrapper-flex .left {
flex: 0 0 auto;
}
.wrapper-flex .right {
flex: 1 1 auto;
}
七、grid
(block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素。)
给第二个元素中加入 overflow: hidden，触发bfc,则可以形成两列布局。
圣杯布局 & 双飞翼布局
左右两端固定宽度，中间部分自适应。
负边距布局
[外链图片转存失败(img-vhbTWzQB-1564059150352)(./圣杯布局.png)]
左（200px）右（200px），中间自适应，三部分保持高度一致
-
html代码中 middle部分首先要放在container的最前部分，最先渲染，然后是left,right。三部分装在一个container容器中
<div class="container"> <div class="middle"> <h4>middle</h4> <p></p> </div> <div class="left"> <h4>left</h4> <p></p> </div> <div class="right"> <h4>right</h4> <p></p> </div> </div> -
三部分都float，中间部分占据100%宽度。
-
负边距布局
- 让左边的盒子上去
需要设置其左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。 - 让右边的盒子上去
需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-200px;}。这样右盒子才可以在一行的最右边显示出自己。
-
利用父元素的内边距，将三个元素往中间挤。使用相对定位是的左右不分占据内边距，不会吧=把中间部分的文字覆盖。
-
想要高度保持一致，给三部分分别都加上min-height。
* { margin: 0; padding: 0; } body{ min-width:700px ;//页面缩小造成结构坍塌 } header, footer { border: 1px solid #333; background: #aaa; text-align: center; } footer{ clear:both;//好习惯 } .container { overflow: hidden;//清除浮动，让父元素可以抱着子元素 padding: 0 200px; } .middle,.left, .right { min-height: 200px;//三部分等高度分布 float :left; position: relative; } .middle { width: 100%; background: deeppink; } .left { width: 200px; margin-left: -100%; background: blue; left: -200px; } .right { width: 200px ; margin-left: -200px; background: rgb(204, 255, 20); right: -200px; }
[外链图片转存失败(img-vDG99qRm-1564059150352)(./双飞翼布局.png)]
三部分main为主要部分，sub和extra相当于鸟的翅膀。三部分各被一个容器抱着，main下面还有一个mian-inner容器。
<header><h4>内容区</h4></header>
<div class="main">
<div class="main-inner">
<h4>main</h4>
Lorem ipsum dolor sit amet
</div>
</div>
<div class="sub">
<h4>sub</h4>
Lorem ipsum, dolor sit amet
</div>
<div class="extra">
<h4>extra </h4>
Lorem ipsum, dolor sit
</div>
<footer><h4>内容区</h4></footer>
大致思想和圣杯布局一样，只是中间部分被覆盖利用的是min-inner的margin是sub和exrea的宽度
.main,.sub,
.extra {
float :left;
min-height: 200px;
}
.main {
width: 100%;
background: deeppink;
}
.sub {
width: 200px;
margin-left: -100%;//左边
background: blue;
}
.extra {
width: 200px ;
margin-left: -200px;//右边
background: rgb(204, 255, 20);
}
.main .main-inner {
margin:0 200px;//
min-height: 200px;
background: darkgoldenrod;
word-break: break-all;
}
BFC(Block Formatting Contex)
块级格式化上下文
自适应布局
触发bfc
- float的值不为none。
- overflow的值为auto,scroll或hidden。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
-
BFC 可以阻止元素被浮动元素覆盖
[外链图片转存失败(img-UcjoVvOA-1564059150353)(./md1.jpg)]普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。自适应布局
[外链图片转存失败(img-cBgdWBmi-1564059150353)(./7.23.png)]
将两部分设置一个间距
-
如果给普通元素设置margin-left=间距+浮动元素width
-
可以给浮动元素设置margin-right和padding-right撑开间距
.float-left { float: left; margin-right: 20px; } .bfc-content { overflow: hidden; background-color: #beceeb; }
三栏网页自适应布局
1 绝对定位法
html顺序左-中-右
左右采用绝对定位
中间自适应，用margin撑开间距。但中间元素受浏览器宽度影响。
.left,.right{
position:relative;
top:0;
width:200px;
}
.left{
left:0 ;
}
.right{
right:0;
}
2 margin负值法
html顺序中-左-右
左margin-left：-100%；右margin-left：-（右元素的width ）
中间元素自适应，用margin / padding+relative确定
左中右均float：left；
圣杯和双翼布局
2 自身浮动法
html顺序左-右-中
.left,.right{
width:140px;
height:100%
}
.left{
float:left;
}
.right{
float:right;
}
.main{
margin:0 210px;//各部分有10px间距
}
- 中间部分主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。
flex实现右侧固定，左侧自适应两栏布局
#left{
flex:1;//自适应
background: red;
}
#right{
background:green;
width: 200px;//默认分配空间为200px，下同
height :600px;
}
flex实现左侧固定，右侧自适应两栏布局
.container {
display: flex;
}
/*项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的*/
/*align-items: stretch;*/
.left {
/* height: auto; */
background: rebeccapurple;
flex: 0 200px;//空间分配比例为0，最小宽度为200px；实际其宽度为200px；
}
.right {
flex: 0 200px;
background: red;
}
.main {
height: 500px;//align-items: stretch使得所有flex项和最高的那一项对齐。
background: greenyellow;
/*空白区域分配比例为1,左中右三部分分配比例为010，中间得到剩余部分*/
flex :1 ;
}
flex特点
- 每一列可以自动对齐，align-items: stretch默认。 flex 项目撑满 flex 容器
- flex项的尺寸是动态尺寸，当你未设置width时，宽度由里面的内容撑开，其他项默认是等宽排列
[外链图片转存失败(img-7NgISSgW-1564059150354)(./flex宽度.jpg)] - 自适应时不会存在莫元素在文档流中不存在，不需解决覆盖问题。
float特点
- block 忽略float元素的存在，但是文字不会忽略float元素，例如，下图右侧未设置margin-left,但如果两列之间需要间隔 仍需要margin，最好加在浮动元素上。
[外链图片转存失败(img-8wnkNuZd-1564059150354)(./float.jpg)]
position
display: flex;
}
/项目拉伸对齐，也就是所左边的高度为拉伸到和右边等高，默认是拉伸的/
/align-items: stretch;/
.left {
/* height: auto; */
background: rebeccapurple;
flex: 0 200px;//空间分配比例为0，最小宽度为200px；实际其宽度为200px；
}
.right {
flex: 0 200px;
background: red;
}
.main {
height: 500px;//align-items: stretch使得所有flex项和最高的那一项对齐。
background: greenyellow;
/*空白区域分配比例为1,左中右三部分分配比例为010，中间得到剩余部分*/
flex :1 ;
}
flex特点
- 每一列可以自动对齐，align-items: stretch默认。 flex 项目撑满 flex 容器
- flex项的尺寸是动态尺寸，当你未设置width时，宽度由里面的内容撑开，其他项默认是等宽排列
[外链图片转存中…(img-7NgISSgW-1564059150354)] - 自适应时不会存在莫元素在文档流中不存在，不需解决覆盖问题。
float特点
- block 忽略float元素的存在，但是文字不会忽略float元素，例如，下图右侧未设置margin-left,但如果两列之间需要间隔 仍需要margin，最好加在浮动元素上。
[外链图片转存中…(img-8wnkNuZd-1564059150354)]
position
- 用于自适应页面时，只有fixed absolute才能破话block元素，是其他元素可也和他们在一行。relative不能
扫一扫
1999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
