目录
1_浮动 float
1.1_认识
-
可指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它
-
最初只用于在一段文本内浮动图像, 实现文字环绕的效果
-
早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具
-
-
绝对定位、浮动都会让元素脱离标准流,以达到灵活布局的效果
-
常用取值
none:不浮动,默认值
left:向左浮动
right:向右浮动
1.2_浮动规则
浮动规则一
-
元素一旦浮动后, 脱离标准流,朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
-
层叠大小比较:普通元素<浮动元素<定位元素
浮动规则二:如果元素是向左(右)浮动,浮动元素的左(右)边界不能超出包含块的左(右)边界
浮动规则三:浮动元素之间不能层叠
如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动,直到有充足的空间为止
浮动规则四:浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
比如行内级元素、inline-block元素、块级元素的文字内容
浮动规则五: 行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐
1.3_案例练习
案例一:百度搜索的页码
<style>
/* 样式的重置 */
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
}
/* 全局设置 */
body {
background-color: #f2f2f2;
}
/* 内容样式 */
ul > li {
float: left;
margin-left: 12px;
}
ul > li > a {
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
/* text-align: center;水平方向居中 */
line-height: 36px;
/* line-height 与height 值相等,垂直方向居中 */
border-radius: 6px;
background-color: #fff;
color: #3951b3;
font-size: 14px;
}
ul > li > a:hover, ul > li.active > a {
background-color: blue;
color: #fff;
}
ul > li.next > a {
width: 80px;
}
</style>
<body>
<!-- 结构: HTML -->
<ul>
<li class="item"><a href="#">1</a></li>
<li class="item"><a href="#">2</a></li>
<li class="item"><a href="#">3</a></li>
<li class="item"><a href="#">4</a></li>
<li class="item active"><a href="#">5</a></li>
<li class="item"><a href="#">6</a></li>
<li class="item"><a href="#">7</a></li>
<li class="item"><a href="#">8</a></li>
<li class="item"><a href="#">9</a></li>
<li class="item"><a href="#">10</a></li>
<li class="item next"><a href="#">下一页 ></a></li>
</ul>
</body>
案例二:京东5列布局
<style>
/* 公共的class */
.content {
width: 1190px;
/* 1190= 230*5+10*4 */
margin: 0 auto;
background-color: orange;
height: 800px;
}
/* 布局样式 */
.item {
width: 230px;
height: 322px;
background-color: purple;
color: #fff;
/* 浮动 */
float: left;
/* 让每个 .item 向左浮动10px */
margin-right: 10px;
/* margin: 0 5px; */
}
.box {
/* margin: 0 -5px; */
/* 3.方案三: 设置负的的margin(没有兼容性) */
/* 1190=1200+(-10) || 1200=230*5+10*5 */
margin-right: -10px;
}
/* 1.有可能存在兼容性 */
/* .item:nth-child(5n) {
margin-right: 0;
} */
/* 2.麻烦一点点 */
/* .item.last-item {
margin-right: 0;
} */
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</div>
</body>
案例三:京东三列布局
<style>
.content {
width: 1190px;
/* 1190=290*4+10*3 */
margin: 0 auto;
background-color: #f00;
height: 1000px;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
margin-bottom: 10px;
float: left;
margin-right: 10px;
}
.item.left {
height: 370px;
/* 370=180*2+10 || margin-bottom: 10px; */
}
.item.right {
height: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
</div>
</div>
</body>
案例四:考拉边框布局【难但是少见】
<style>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background: #ccc;
}
.box {
/* margin-left: 1px; */
}
.item {
width: 221px;
/* 221*5=1105 */
height: 168px;
background: orange;
color: #fff;
float: left;
border: 1px solid #000;
margin-right: -1px;
/* margin-right让每个item向左移1px,达到边框重叠故宽度减少,所以1105-4=1101,多出来的1px向左移1px,不在父容器范围内*/
box-sizing: border-box;
/* 元素的总高度和宽度包含内边距和边框(padding 与 border) : */
}
.item.first {
width: 220px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
1.4_浮动的问题 – 高度塌陷
- 浮动元素脱离了标准流,变成脱标元素,不再向父元素汇报高度
父元素计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题
-
解决父元素高度坍塌问题的过程,一般叫做清浮动(清理浮动、清除浮动)用clear属性
-
清浮动的目的是: 让父元素计算总高度的时候,把浮动子元素的高度算进去
1.5_clear属性
-
clear 可指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
-
clear的常用取值
left:要求元素的顶部低于之前生成的所有左浮动元素的底部
right:要求元素的顶部低于之前生成的所有右浮动元素的底部
both:要求元素的顶部低于之前生成的所有浮动元素的底部
none:默认值,无特殊要求
1.6_清除浮动的方法
- 方法一: 给父元素设置固定高度
扩展性不好(不推荐)
-
方法二: 在父元素最后增加一个空的块级子元素,并且让它设置clear: both
会增加很多无意义的空标签,维护麻烦
违反了结构与样式分离的原则(不推荐)
-
方法三: 给父元素添加一个伪元素
推荐、编写好后可以轻松实现清除浮动;
<style>
.content {
width: 1190px;
margin: 0 auto;
background: #f00;
}
.wrapper {
margin-right: -10px;
}
.item {
width: 290px;
background-color: purple;
margin-bottom: 10px;
float: left;
margin-right: 10px;
}
.item.left {
height: 370px;
}
.item.right {
height: 180px;
}
/* 其他的内容 */
.other {
height: 100px;
background: #0f0;
}
.line {
/* height: 10px; */
/* background: blue; */
clear: both;
}
/* 清除浮动--最终的解决方案(给父元素添加一个伪元素) */
.clear_fix::after {
content: "";
/*伪元素必须要有content*/
clear: both;
display: block;
/* 浏览器兼容 */
visibility: hidden;
height: 0;
}
.clear_fix {
/* IE6/7 */
*zoom: 1;
}
</style>
</head>
<body>
<!-- 因为所有的后代item元素都是浮动的, 脱离标准流 -->
<!-- 不会向父元素汇报高度, 那么content元素压根就没有高度 -->
<div class="content">
<div class="wrapper clear_fix">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<!-- <div class="line"></div> -->
</div>
</div>
</body>
1.7_布局方案总结
定位方案 | 应用场景 |
---|---|
normal flow(标准流) | 垂直布局 |
absolute positioning(绝对定位) | 层叠布局 |
float(浮动 | 水平布局 |
2_ display: flex
2.1_认识flexbox
- 英译中为弹性盒子
弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
-
是目前web开发中使用最多的布局方案:
flex 布局(Flexible 布局,弹性布局);
目前特别在移动端可以说已经完全普及;
在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
-
为什么需要flex布局
长久以来,CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 float和 positioning。
但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举
2.2_flex布局的重要概念
- 两个重要的概念:
开启了 flex 布局的元素叫 flex container
flex container 里面的直接子元素叫做 flex item
- 当flex container中的子元素变成了flex item时, 具备特点:
flex item的布局将受flex container属性的设置来进行控制和布局;
flex item不再严格区分块级元素和行内级元素;
flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
- 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
flex: flex container 以 block-level 形式存在
inline-flex: flex container 以 inline-level 形式存在
2.3_flex布局的模型
2.4_flex相关的CSS属性
flex container【父元素】
设置display:flex;
flex-direction:flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布
-
flex-direction 决定了 main axis 的方向,有 4 个取值
-
row(默认值,水平从左到右)、row-reverse(水平从右到左)、
-
column(垂直从上到下)、column-reverse(垂直从下到上)
flex-wrap:决定了 flex container 是单行还是多行
-
nowrap(默认):单行
-
wrap:多行
-
wrap-reverse:多行(对比 wrap,cross start 与 cross end 相
flex-flow: 是 flex-direction 和 flex-wrap 的简写, 任何顺序, 并且都可以省略;
justify-content
align-items(交叉轴方向)
- 当在normal或者stretch情况下,flex items的高度未设置或者为auto是,item会自动在垂直方向拉伸填充,相反的,如果height为一个确定值,不会被拉伸
- center 用的最多
align-content
前提要设置 flex-wrap: wrap;
flex items【子元素】
- flex-grow(拉伸)
- flex-grow 决定了 flex items 如何扩展
可以设置任意非负数字(正小数、正整数、0)默认值是 0;
当 flex container 在 main axis 方向上有剩余 size 时,flex-grow 属性才会有效
-
如果所有 flex items 的 flex-grow 总和 sum 超过 1: 每个 flex item 扩展的 size 为flex container 的剩余 size *( 对应flex-grow/ sum)
-
flex items 扩展后的最终 size 不能超过 max-width\max-height
- flex-shrink(缩小)
- flex-shrink 决定了 flex items 如何收缩
可以设置任意非负数字(正小数、正整数、0)默认值是 1;
当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效
-
如果所有 flex items 的 flex-shrink 总和超过 1,每个 flex item 收缩的 size为 flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
-
flex items 收缩后的最终 size 不能小于 min-width\min-heigh
- flex-basis【极少用】
- flex-basis 用来设置 flex items 在 main axis 方向上的 base size。
auto(默认值)、具体的宽度数值(100px)
- 决定 flex items 最终 base size 的因素,从优先级高到低
max-width\max-height\min-width\min-height ;
flex-basis ;
width\height ;
内容本身 。
- flex
flex是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个,2个或3个值
- 单值语法: 值必须为以下其中之一:
一个无单位数(): 它会被当作的值。
一个有效的宽度(width)值: 它会被当作 的值。
关键字none,auto或initial.
- 双值语法: 第一个值必须为一个无单位数,并且它会被当作 的值。
第二个值必须为以下之一:
✓ 一个无单位数:它会被当作 的值。
✓ 一个有效的宽度值: 它会被当作 的值。
- 三值语法:
第一个值必须为一个无单位数,并且它会被当作 的值。
第二个值必须为一个无单位数,并且它会被当作 的值。
第三个值必须为一个有效的宽度值, 并且它会被当作 的值
/* flex-grow flex-shrink flex-basis */
/* none: 0 0 auto */
/* auto: 1 1 auto */
flex: 1 1 10px;
- order
- align-self
2.5_解决一个案例
<style>
.container {
width: 500px;
background-color: orange;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 110px;
height: 140px;
/* margin-right: 20px; */
}
.container > i {
width: 110px;
}
/* .item:nth-child(4n) {
margin-right: 0;
} */
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item3">3</div>
<!-- 添加span/i的个数是列数减2 -->
<i></i><i></i>
</div>
<script src="./js/itemRandomColor.js"></script>
</body>
3_区别float与flex
float和flex在视觉上直观的区别就是:
float元素宽高和元素之间的间距都是固定的,随着页面缩小,元素会换行。(可以设置为 不换行)。
flex布局的元素宽高和元素之间的间距是变化的,随着页面缩小,父类空白空间减少,元素能分配到的空间也减少,元素的间距也减少。