HTML 之CSS 布局
概述
position属性
position属性列表
- absolute 属性
- fixed 属性
- relative属性
- static属性
- inherit 属性
display属性
display属性列表
- none 属性
- block 属性
- inline 属性
- inline-block 属性
- flex属性
flex 布局
- 基本概念
- flex 布局子元素的属性
- flex 子元素可用属性
float属性
定义和用法
float属性列表
- left
- right
- none
- inherit
最新公司分配任务也小程序和部分公众号任务，写了好多布局，可是呢，菜鸟就是菜鸟，好多东西都不是很了解，因此特地写篇文章详细学习下css之布局
概述
这里我们详细讨论css布局的position，display，float三种布局的属性，以及每个布局对父标签和子标签的影响，以及父子标签采用不同的布局之间的影响。
position属性
position属性列表
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。该属性只受left和top属性影响 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
absolute 属性
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
这里我们用positon的absolute属性，那么必须关注其父类的属性，因为该属性是与父类有关系。
这里最关键的是相对于 static 定位以外的第一个父元素进行定位。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
.divbg{
position:fixed;
left:100px;
margin-left:100px;
width:300px;
height:300px;
background-color:red;
}
body{
background:blue;
}
</style>
</head>
<body >
<div class="divbg">
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</div>
</body>
</html>
测试结果
这个是父标签的position是fixed的，h2的相对位置是针对div来讲的。
如果把父标签的positon去掉。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
.divbg{
left:100px;
margin-left:100px;
width:300px;
height:300px;
background-color:red;
}
body{
background:blue;
}
</style>
</head>
<body >
<div class="divbg">
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</div>
</body>
</html>
测试结果
由于我们把div的position的属性去掉了，布局也发生变化了。
这时候h2的布局是针对整个窗口来说的。
注意：position的absolute受父类影响，影响的是自身的布局。
position是absolute属性修饰的标签有四个，left,top,bottom,right。要是这四个属性没有设置默认的是auto，不是0。(这里暂时就这么理解吧，说的不准确)
auto就是根据字内容的大小自动适配其大小，内容是包裹的,auto的属性可以默认不写。
四个属性都有值
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
background-color:yellow;
right:30px;
bottom:20px;
left:100px;
top:150px
}
body{
background:blue;
}
</style>
</head>
<body >
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
</div>
</body>
</html>
要是我们去掉right 和bottom属性
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
background-color:yellow;
left:100px;
top:150px
}
body{
background:blue;
}
</style>
</head>
<body >
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
</div>
</body>
</html>
测试结果是
top right bottom left 四个属性是针对父类（第一个不是static属性的父类）来说的。
absolute
fixed 属性
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
其实这个属性比较简单，就是相对于窗口来说的。可以这么理解，父类就是窗口。
<html>
<head>
<style type="text/css">
.three{
position: absolute;
background-color:yellow;
right:30px;
bottom:20px;
left:20px;
top:30px;
}
p.one
{
position:fixed;
left:20px;
top:30px;
}
p.two
{
position:fixed;
top:30px;
right:20px;
}
</style>
</head>
<body>
<div class="three">
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</div>
</body>
</html>
这里的left，bottom，right，top是针对窗口来讲的。
fixed
注意：position的fixed只受窗口影响，影响的是自身的布局。窗口是固定不变的。
relative属性
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。该属性只受left和top属性影响。
基本使用
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:20px;
top:30px;
background:red;
}
body{
background:blue;
}
</style>
</head>
<body>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
</body>
</html>
测试结果
我们发现H2标签的内容距离left 和top分别都有移动，如果去掉left和top属性如下
其实position的relative是针对自身来说的，相对于自身原来的位置做的偏移。
注意，这里position的relative属性是针对自身的，不是针对父类的。而自身标签的边框大小是受width和height影响的。
static属性
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
这是默认值，其实每个标签都是含有position属性的，只是这个属性要是static可以不用添加。但是static属性会导致top，bottom,left,right和z-index 属性不生效
不生效的属性举例
<html>
<head>
<style type="text/css">
. pos_right{
top:30px;
left:30px
}
body{
background:red;
}
</style>
</head>
<body>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>
</html>
该属性就是正常布局，位置是根据父类规定方向进行布局。
inherit 属性
规定应该从父元素继承 position 属性的值。
这个属性感觉用的很少，不过就算是少我们也应该知道其作用吧。
继承么？假设父类的positon是absolute，那么该类属性就是absolute，同理假设父类的positon属性是fixed,那么该类属性就是fixed。
<html>
<head>
<style type="text/css">
.three{
position: fixed;
background-color:yellow;
right:20px;
bottom:20px;
left:20px;
top:20px;
}
p.one
{
padding:0px;
margin:0px;
position: inherit;
left:20px;
top:30px;
background:blue;
}
p.two
{
padding:0px;
margin:0px;
position: inherit;
right:20px;
background:blue;
}
body{
background:red
}
</style>
</head>
<body>
<div class="three">
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</div>
</body>
</html>
这里我们能看出来不单单继承了positon属性，其他属性也继承了。但是我们可以在该属性覆盖父类属性的值。
display属性
display 属性规定元素应该生成的框的类型。
注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
display属性涉及block 和inline两个概念
block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
display属性列表
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
| flex | 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 |
上面属性比较多，我们依次的将上述属性做个简单的demo来测试。
none属性
如果display设置值死none，那么此元素不会被显示。
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
body{background:red}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</html>
就是将元素隐藏，不占用文档空间
block 属性
此元素将显示为块级元素，此元素前后会带有换行符。
<html>
<head>
<style type="text/css">
span
{
display: block
}
body{
background:red
}
</style>
</head>
<body>
<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>
</body>
</html>
声明为block就是可以让元素换行了
block特性
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline属性
默认。此元素会被显示为内联元素，元素前后没有换行符。
这个属性是默认属性，默认元素是依次排列的。
这个可以参考 none属性的例子。不做介绍。这都是常用的比较简单的属性啦。
inline特性
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
inline-block
行内块元素。（CSS2.1 新增的值）
inline-block特性
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
测试代码
<html>
<head>
<style type="text/css">
div {display: inline-block}
.one{
height:100px;
background:red;
padding:0px;
margin:0px;
width:200px;
}
.two{
background:blue;
padding:0px;
margin:0px;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
<p>换行了</p>
</body>
</html>
[这里有篇文章讲解inline-block和float之间的区别]
flex 属性
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
flex布局可以是块布局也可以是行内布局
- 行内布局 display: inline-flex;
- 块布局： display: flex;
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex 布局
基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
概念图
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认水平排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex 布局子元素的属性
- flex-direction 设置主轴和以及方向
- flex-wrap 设置子元素布局换行情况
- flex-flow 该属性是flex-direction 和flex-wrap 缩写
- justify-content 设置子元素在主轴的对其方式
- align-items 定义子元素在交叉轴的对齐方式
- align-content 定义有多跟主轴的对齐方式。
flex-direction属性
他有四个值
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
-
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
还有三个值
- nowrap 不换行（默认)
- wrap 换行，第一行在上方一次向下
- wrap-reverse; 换行，第一行在下方
假设一共有14个元素
nowrap
wrap
wrap-reverse
flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box{
flex-flow:row wrap;
}
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
有五个值
- flex-start
- flex-end
- center
- space-between
-
space-around;
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
该属性的值有五个
- flex-start 交叉轴的起点对齐
- flex-end 交叉轴的终点对齐
- center 交叉轴的中点对齐
- baseline 项目的第一行文字的基线对齐
-
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
主轴是row横向排列，交叉轴是column纵向排列
这里需要注意的是默认值是stretch，会将子元素拉伸，因此，这里想要子元素不变形，那么必须要设置子元素的bounds了。
align-content属性
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
flex 子元素可用属性
flex 子元素可以使用的元素有下列6个
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order属性
order属性定义自身的排列顺序。数值越小，排列越靠前，默认0。
.item{
order:1
}
测试代码
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
order:1;
}
.two{
padding:0px;
margin:0px;
background:red;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item{
flex-grow:1;
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
测试代码
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
}
.two{
padding:0px;
margin:0px;
background:red;
flex-grow:1;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item{
flex-shrink:1;
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
测试代码
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
flex-shrink:0;
}
.two{
padding:0px;
margin:0px;
background:red;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
<div class="two">inline-block 元素two</div>
<div class="two">inline-block 元素two</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item{
flex-basis:320;
}
测试代码
<html>
<head>
<style type="text/css">
.three {display: flex}
.one{
padding:0px;
margin:0px;
background:blue;
flex-basis:30px;
}
.two{
padding:0px;
margin:0px;
background:red;
}
body{
background:yellow;
}
</style>
</head>
<body>
<div class="three">
<div class="one">inline-block 元素one</div>
<div class="two">inline-block 元素two</div>
</div>
</body>
</html>
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{
flex:none
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item{
align-self:auto
}
该属性有以下值
- auto
- flex-start
- flex-end
- center
- baseline
-
stretch
float属性
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
该属性属于自身属性。
| 值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
left属性
元素向左浮动。
测试代码
<html>
<head>
<style type="text/css">
.img
{
float:right;
background:red;
height:30px;
width:50px;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<div class='img'></div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
right属性
元素向右浮动。
用法同left属性
none属性
默认值。元素不浮动，并会显示在其在文本中出现的位置。
任何元素，不写值都默认是不float的。
inherit属性
规定应该从父元素继承 float 属性的值。
position display float之间的关系
position display float 都是用于元素布局的，但是与之有关系的元素各不相同。例如position的absolute受父元素的影响，而positon的relative只与自身有关系
| position | display | float | 父类 | 自身 | 子类 | 备注 |
|---|---|---|---|---|---|---|
| absolute | --- | --- | YES | NO | NO | 根据父类决定自己的位置 |
| fixed | --- | --- | NO | NO | NO | 至于窗口有关 |
| relative | --- | --- | NO | YES | NO | 相对于自己的偏移 |
| static | --- | --- | NO | NO | NO | 默认属性 |
| inherit | --- | --- | YES | YES | NO | 是继承关系，因此与自身或者父类关系不明确 |
| --- | none | --- | NO | YES | NO | 修饰自己是否课件 |
| --- | block | --- | NO | YES | NO | 显示为块 |
| --- | inline | --- | NO | YES | NO | 默认属性 |
| --- | nline-block | --- | NO | YES | NO | |
| --- | flex | --- | NO | YES | YES | 该属性配合一些属性会影响子类的布局以及子类在flex单独布局 |
| --- | --- | left | NO | YES | NO | 向左移动 |
| --- | --- | right | NO | YES | NO | 向右移动 |
| --- | --- | none | NO | NO | NO | 默认属性 |
| --- | --- | inherit | NO | YES | NO | 继承父类的float属性 |
position的默认元素是static，
display的默认元素是inline，
float 的默认元素是none
