前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
一、文档流
1、什么是文档流
将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素
2、本质
文档流本质是 nomal flow （普通流、常规流）
3、BFC（Block Formatting Contxt）
块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
4、BFC的规则
- 内部的Box会在垂直方向，一个接一个地放置；
- Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠（取最大值）；
- Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。
二、浮动布局
float: left | right
1、目的
float的目的是让block同行显示（在父级规定的宽度内、不完全脱离文档流）
2、文档流、完全脱离文档流、不完全脱离文档流
1、文档流：子标签在父级标签没有设置高度时，会自动撑开父级 2、完全脱离文档流：子标签不再为父级撑开高度，子标签高于文档流，不占用盒子模型的空间，有一个z-index 3、不完全脱离文档流：这是浮动后的结果，不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度
3、清浮动
（1）原因
在子级中使用浮动布局，若是父级有兄弟标签，会出现布局问题
（2）解决方法
原理：在浮动布局情况下，让父级获得合适的高度
/*方法1. 浮动的父级设置高度*/
super {
height: npx;
} /*方法2. 浮动的父级设置overflow*/
super {
overflow: hidden;
} /*方法3. 浮动的父级兄弟设置clear，一般利用both同时清左右两边的浮动*/
brother {
clear: left | right | both;
} /*方法4. 浮动的父级伪类清浮动，一般利用both同时清左右两边的浮动*/
super:after {
content: "";
display: block;
clear: left | right | both;
}
三、流式布局
1、目的
让布局脱离固定值限制，可以根据页面情况改变相应发生改变
<style type="text/css">
.wrap {
max-width: 1200px;
min-width: 800px;
width: 90%;
height: 600px;
margin: 0 auto;
background-color: orange;
}
</style>
<div class="wrap"></div>
2、常用操作
- 百分比设置 % 参考最近父级
- 窗口比设置 vw | vh
- 字体控制 em | rem ，em最近设置字体大小的父级规定的字体大小，rem为html字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局</title>
<style type="text/css">
html, body {
width: 100%;
margin: 0;
}
.box {
/*百分比流式*/
/*参考最近父级*/
width: 90%;
/*max-width: 1000px;*/
/*min-width: 600px;*/ /*窗口比*/
/*width: 90vw;*/
/*max-width: 1000px;*/
/*min-width: 600px;*/ height: 300px;
background-color: orange;
margin: 0 auto;
}
.b {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
float: left;
} body {
font-size: 30px;
}
/*.sup {
font-size: 20px;
}*/
.txt {
/*1em = 16px*/
/*font-size: 16px;*/
/*font-size: 0.4em;*/
/*总结:em为最近设置字体大小的父级规定的字体大小*/
font-size: 1rem;
/*总结:rem为html字体大小*/
}
html {
font-size: 50px;
}
</style>
</head>
<body>
<!-- 流式布局: -->
<!-- 目的:让布局脱离固定值限制,可以根据页面情况改变相应发生改变 -->
<div class="box">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div> <div class="sup">
<div class="txt">文本</div>
</div>
</body>
</html>
流式布局案例
四、定位布局
1、目的
让目标(要被布局的)标签在指定参考系下任意布局
2、语法
<!-- 基本语法: -->
<!-- 1.通过position设置定位是否开启 -->
<!-- static：静态，未定位（默认值） -->
<!-- relative: 相对定位, 未脱离文档流 -->
<!-- absolute: 绝对定位, 完全脱离文档流 -->
<!-- fixed: 固定定位, 完全脱离文档流 -->
<!-- 2.定位开启后,四个定位方位便会开启,且四个方位均参与布局 -->
<!-- 如果发生冲突,左右取左,上下取上 --> position: static | relative | absolute | fixed
布局方位：left | right | top | bottom
3、相对定位（relative）
未脱离文档流，相对布局方位只改变盒子显示区域，不改变盒子原有位置，
简单的说相当于灵魂出窍，在原有位置仍然占一块区域，margin-top改变会影响兄弟盒子
相对定位主要用于给父级定位，从而辅助子级的绝对定位
（1）开启定位
position relative;
（2）方位布局，方位改变上盒子不会影响下盒子（灵魂出窍），四个方位如果发生冲突，左右取左，上下取上
left:30px;
top:30px;
（3）参考系
相对定位参考系为自身原有位置
（4）案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
.b2 {
background-color: orange;
} /*不做定位操作*/
/*b1,b2均在文档流中,b1的布局会影响到b2*/
/*.b1 {
margin-top: 30px;
margin-bottom: 30px;
}*/ /*固定定位后*/
.b1 {
/*1.未脱离文档流*/
/*BFC规则下margin布局,上盒子依旧会影响下盒子*/
/*margin-top: 30px;
margin-bottom: 30px;*/ /*开启定位*/
position: relative;
/*具有定位方位*/
/*2.方位布局下,上盒子不会影响下盒子*/
left: 30px;
top: 30px;
/*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/ /*margin-top: 30px;*/
/*3.参考系:相对定位参考系为自身原有位置*/
/*right: 30px;*/ /*总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/ /*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/
/*left: -30px;
right: -100px;*/
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b2"></div>
</body>
</html>
相对布局案例
4、绝对定位（absolute）
完全脱离文档流，有一个z-index可以控制两个绝对定位的优先级，不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流层
margin依旧可以影响自身布局，但不会影响兄弟布局，margin改变兄弟标签布局不会改变
（1）开启定位
position:absolute;
（2）定位布局
left:30px;
top:30px;
（3）参考系
最近的已定位的父级，sup(未定位) -> body(未定位) -> html(文档窗口）
（4）案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: red;
}
.b2 {
background-color: orange;
}
.b1 {
/*1.完全脱离文档流*/
position: absolute;
/*总结:不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层*/
/*打开定位方位*/
/*margin-left: 100px;
margin-top: 100px;*/
/*总结:margin依旧可以影响自身布局,但不会影响父级即兄弟布局*/ /*2.参考系:?*/
left: 100px;
right: -100px; /*3.同时存在,左右取左,上下取上*/
} </style>
<style type="text/css">
.sup {
width: 500px;
height: 500px;
background-color: orange;
}
.sub {
width: 200px;
height: 200px;
background-color: red;
} .sup {
/*采用了盒模型布局*/
margin: 0 auto;
/*需求:sub应该参考sup,sup需要定位:相对|绝对|固定*/
/*相对定位好处:父级不会脱离文档流,满足所有的盒模型布局*/
/*position: relative;*/
/*绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位*/
position: absolute;
margin: 100px 100px;
/*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/
/*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/
}
.sub {
/*2.参考坐标系为最近的定位父级*/
position: absolute;
left: 0;
right: 0;
top: 0;
/*父级: sup(未定位) -> body(未定位) -> html(文档窗口)*/ /*3.同时存在,左右取左,上下取上*/
}
</style>
</head>
<body>
<!-- <div class="b1"></div>
<div class="b2"></div> -->
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
绝对定位案例
5、固定定位（fixed）
完全脱离文档流，有一个z-index可以控制两个绝对定位的优先级，不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流层
margin依旧可以影响自身布局，但不会影响兄弟布局，margin改变兄弟标签布局不会改变
（1）开启定位
position:fixed;
（2）定位布局
left:30px;
top:30px;
（3）参考系
页面窗口
（4）案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.sup {
width: 500px;
height: 500px;
background-color: orange;
margin: 0 auto;
}
.sub {
width: 200px;
height: 200px;
background-color: red;
}
.sup {
position: relative;
position: absolute;
}
.sub {
position: fixed;
left: 0;
/*top: 0;*/
bottom: 0;
}
</style>
</head>
<body>
<!-- 固定定位 -->
<!-- 1.完全脱离文档流 -->
<!-- 2.参考系为文档窗口 -->
<!-- 3.左右取左,上下取上 -->
<div class="sup">
<div class="sub"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br> </body>
</html>
固定定位案例
五、flex布局
1、目的
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex可以很好的解决垂直居中问题
2、名词概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
水平为轴（main axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
垂直为交叉轴（cross axis），交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3、容器属性
1. flex-direction 属性 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。 2. flex-wrap 属性 定义，如果一条轴线排不下，如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。 3. flex-flow 属性 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> <flex-wrap>; 4. justify-content 属性 定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around; 5. align-items 属性 定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch; 6. align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
4、项目属性
1. order 属性 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order: <integer>; 2. flex-grow 属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow: <number>; /* default 0 */ 3. flex-shrink 属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: <number>; /* default 1 */ 4. flex-basis 属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）。
flex-basis: <length> | auto; /* default auto */ 5. flex 属性 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: <flex-grow> <flex-shrink> <flex-basis> 6. align-self 属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
5、主要了解
1.将父级display属性设置为flex,则父级成为container,子级成为item
2.container设置item的排列方向flex-direction
3.item对于container的空间占比flex-grow
6、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type="text/css">
.container {
width: 600px;
height: 600px;
border: 1px solid black;
margin: 0 auto;
}
.item {
/*width: 200px;*/
/*height: 200px;*/
/*border-radius: 50%;*/
background-color: orange;
font-size: 80px;
}
/*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/
.container {
display: flex;
}
.item {
/*默认只能一行排列,所有item总宽不允许超出container宽度*/
/*width: 300px;*/
/*默认情况下item可以不规定高度,高度会自适应父级*/
/*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/
}
/*.it1, .it3 {
flex-grow: 1;
}
.it2 {
flex-grow: 3;
background-color: pink
}*/
/*container属性*/
.container {
/*flex-direction: row | row-reverse | column | column-reverse; 方向*/
/*flex-direction: column-reverse;*/ /*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/
/*flex-wrap: wrap;*/ /*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/
/*item为沾满父级区域*/
justify-content: space-around;
}
/*item属性*/
.item {
/*width: 300px;
height: 200px;*/
} .item {
width: 100px;
}
</style>
<!-- 总结 -->
<!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->
<!-- 2.container设置item的排列方向flex-direction -->
<!-- 3.item对于container的空间占比flex-grow -->
</head>
<body>
<div class="container">
<div class="item it1">1</div>
<div class="item it2">2</div>
<div class="item it3">3</div>
</div>
</body>
</html>
flex布局案例
六、响应式布局
当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则
1、目的
设置在不同页面宽度下的布局，满足当前屏幕尺寸时，该样式块起作用，不满足时，则样式块失效
2、语法
/*当页面尺寸小于<integer>宽度时的样式*/
@media only screen and (max-width: <integer>) {
selector { }
} /*当页面尺寸大于<integer1>宽度，小于<integer2>宽度时的样式*/
@media only screen and (min-width: <integer1>) and (max-width: <integer2>) {
selector { }
} /*当页面尺寸大于于<integer3>宽度时的样式*/
@media only screen and (min-width: <integer>) {
selector { }
}
3、原则
（1）采用响应式布局的页面,基本样式块只做共性样式设置，需要根据页面尺寸进行适应变化的样式均有响应式布局处理
（2）要进行响应式布局的页面要处理所有屏幕尺寸下的样式块
4、案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style type="text/css">
/*基本样式块*/
/*.box {
max-width: 1200px;
width: 95%;
margin: 0 auto;
background-color: red!important;
}
.it {
width: 300px;
height: 300px;
font: 900 50px/300px 'STSong';
text-align: center;
float: left;
border-radius: 50%;
background-color: orange;
}
.box:after {
content: "";
display: block;
clear: both;
}*/ html, body {
margin: 0;
}
.it {
height: 300px;
background-color: orange;
font: 900 50px/300px 'STSong';
text-align: center;
border-radius: 50%;
float: left;
}
.box:after {
content: "";
display: block;
clear: both;
}
/*屏幕宽度超出1200px*/
@media only screen and (min-width: 1200px) { .box {
background-color: pink;
}
.it {
width: 25%;
} }
/*屏幕宽度间于600至1200px*/
@media only screen and (min-width: 600px) and (max-width: 1200px) {
.box {
background-color: brown;
}
.it {
width: 30%;
margin: 0 calc(10% / 6);
} }
/*屏幕宽度小于600px*/
@media only screen and (max-width: 600px) {
.box {
background-color: cyan;
}
.it {
width: 80%;
margin-left: 10%;
min-width: 300px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="it">1</div>
<div class="it">2</div>
<div class="it">3</div>
<div class="it">4</div>
<div class="it">5</div>
<div class="it">6</div>
<div class="it">7</div>
<div class="it">8</div>
<div class="it">9</div>
<div class="it">10</div>
<div class="it">11</div>
<div class="it">12</div>
</div>
</body>
</html>
响应式布局案例
前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局的更多相关文章
- Web 前端 UI 组件库文档自动化方案 All In One
Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
- [Web 前端] SuperAgent中文使用文档
cp from : https://blog.csdn.net/gebitan505/article/details/58585846 superagent是nodejs里一个非常方便的客户端请求代理 ...
- MongoDB快速入门（八）- 删除文档
删除文档 MongoDB 的 remove()方法用于从集合中删除文档.remove()方法接受两个参数.一个是标准缺失,第二是justOne标志 deletion criteria : 根据文件(可 ...
- pyautogui 文档（五）：截图及定位功能
截图函数 PyAutoGUI可以截取屏幕截图,将其保存到文件中,并在屏幕中查找图像.如果您有一个小图像,例如需要单击并希望在屏幕上找到它的按钮,这将非常有用.这些功能由PyScreeze模块提供,该模 ...
- VisualC#数据库高级教程文档分享
这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载. 1.项目创建 ...
- 4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介
浮动 # ps:html代码时没有缩进一说的 全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...
- WPF中使用流文档
转载自:http://www.cnblogs.com/zlgcool/archive/2008/11/17/1335456.html WPF面向的是UI展现,而文本显示无疑是UI层中的重要功能之一.W ...
- WPF 流文档
WPF文本显示: WPF面向的是UI展现,而文本显示无疑是UI层中的重要功能之中的一个.WPF提供了XPS (XML 文件规范) 和Flow Document (流文档) 来在不同的场景下展现或者操作 ...
- WPF界面设计技巧（11）-认知流文档 & 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心 流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...
随机推荐
- z-index只能用在定位元素上
弄了很久才突然想到z-index只能用在被定位的元素上. 定位的时候要注意给父级定位 在ie7里有问题的部分
- HBase 入门之数据刷写(Memstore Flush)详细说明
接触过 HBase 的同学应该对 HBase 写数据的过程比较熟悉(不熟悉也没关系).HBase 写数据(比如 put.delete)的时候,都是写 WAL(假设 WAL 没有被关闭) ,然后将数据写 ...
- http常见状态码及其解析
HTTP状态码常见状态码及其解析 状态码 状态码英文名称 中文描述 100 Continue 继续.客户端应继续其请求 101 Switching Protocols 切换协议.服务器根据客户端的请求 ...
- PHP简单导出Excel表格
<?php header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment; ...
- html浮动小问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 125K低频唤醒芯片SI393可替代AS3933，GS3933
2020年即将推出性能最出色的15–150kHz频率范围.3通道低频唤醒接收器,且具备自动天线调谐功能. SI393是15–150kHz频率范围.3通道低频唤醒接收器,且具备自动天线调谐功能,在软硬件 ...
- codeforces round 433 C. Planning 贪心
题目大意: 输入n,k,代表n列航班,初始始发实践为1,2,3分钟以此类推,然后输入n个整数分别代表延迟1分钟第i个航班损失多少钱,然后调整后的始发时间表是这样的,任何一辆航班的始发时间不能在他的初始 ...
- vue生命周期-标注
作者:FlyDragon 出处:http://www.cnblogs.com/fly_dragon/ 关于作者:专注于微软平台项目架构.管理和企业解决方案.如有问题或建议,请多多赐教! 本文版权归作者 ...
- 分布式锁实现（二）：Zookeeper
目录 前言 设计实现 一.基本算法 二.关键点 临时有序节点 监听 三.代码实现 Curator源码分析 一.基本使用 二.源码分析 后记 前言 紧跟上文的:分布式锁实现(一):Redis ,这篇我们 ...
- CleanMyMac x如何关闭自动更新，CleanMyMac关闭自动更新的方法
在众多Mac清理软件中,CleanMyMac x应该是大多数Mac用户的选择,因为它不仅可以帮助我们清理系统垃圾,还可以帮助我们彻底卸载Mac上不需要的应用程序.今天要给大家介绍的是CleanMyMa ...