务必下载!! 今日的代码和讲义 以及思维导图:【点击此链接下载 Day10.zip】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1190px;
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;
}
.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>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background: #ccc;
}
.box {
/* margin-left: 1px; */
}
.item {
width: 221px;
height: 168px;
background: orange;
color: #fff;
float: left;
border: 1px solid #000;
margin-right: -1px;
box-sizing: border-box;
}
.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>
</html>
不再向父元素汇报高度
计算总高度
时,就不会计算浮动子元素的高度
,导致了高度坍塌
的问题父元素计算总高度的时候
,把浮动子元素的高度算进去
clear
属性clear
属性是做什么的呢?clear
属性可以指定一个元素是否必须移动
(清除浮动后)到在它之前的浮动元素
下面;clear
的常用取值left
:要求元素的顶部低于之前生成的所有左浮动元素的底部right
:要求元素的顶部低于之前生成的所有右浮动元素的底部both
:要求元素的顶部低于之前生成的所有浮动元素的底部none
:默认值,无特殊要求clear: both
增加很多无意义的空标签
,维护麻烦推荐
;::after伪元素
弹性盒子
是一种用于按行或按列布局元素
的一维布局方法
;膨胀以填充额外的空间
, 收缩以适应更小的空间
;flex布局
(flex layout);移动端
可以说已经完全普及;PC端
也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局
;布局工具只有 floats 和 positioning
。存在很大的局限性
, 并且他们用于布局实在是无奈之举;垂直居中一个块内容
。
所有子项等分可用宽度/高度
,而不管有多少宽度/高度可用
。
多列布局中的所有列采用相同的高度
,即使它们包含的内容量不同
。
Newton
be” and all was light.牛顿
出现吧!于是世界就明亮了起来.caniuse
上查询到具体的兼容性flex container
flex item
受flex container属性的设置来进行控制和布局
;不再严格区分块级元素和行内级元素
;默认情况下是包裹内容的
, 但是可以设置宽度和高度
;flex
: flex container 以 block-level 形式存在inline-flex
: flex container 以 inline-level 形式存在flex-direction
flex-direction
决定了 main axis
的方向,有 4 个取值row
(默认值)、row-reverse
、column
、column-reverse
flex-wrap
nowrap
(默认):单行wrap
:多行wrap-reverse
:多行(对比 wrap,cross start 与 cross end 相反)flex-flow
flex-flow
属性是 flex-direction
和 flex-wrap
的简写。justify-content
flex-start
(默认值):与 main start 对齐flex-end
:与 main end 对齐center
:居中对齐space-between
:
✓ flex items 之间的距离相等
✓ 与 main start、main end两端对齐space-around
:
✓ flex items 之间的距离相等
✓ flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半space-evenly
:
✓ flex items 之间的距离相等
✓ flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离align-item
normal
:在弹性布局中,效果和stretch一样stretch
:当 flex items 在 cross axis 方向的 size 为 auto 时,会 自动拉伸至填充 flex containerflex-start
:与 cross start 对齐flex-end
:与 cross end 对齐 center
:居中对齐baseline
:与基准线对齐align-content
stretch
(默认值):与 align-items 的 stretch 类似flex-start
:与 cross start 对齐flex-end
:与 cross end 对齐center
:居中对齐space-between
:
✓ flex items 之间的距离相等
✓ 与 cross start、cross end两端对齐space-around
:
✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半space-evenly
:
✓ flex items 之间的距离相等
✓ flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离order
任意整数
(正整数、负整数、0),值越小就越排在前面
flex items
auto
(默认值):遵从 flex container 的 align-items 设置stretch
、flex-start
、flex-end
、center
、baseline
,效果跟 align-items
一致flex-grow
任意非负数字(正小数、正整数、0),默认值是 0
有剩余 size 时
,flex-grow 属性才会有效
总和 sum 超过 1
,每个 flex item 扩展的 size 为
flex-shrink
任意非负数字(正小数、正整数、0),默认值是 1
超过了 flex container 的 size,flex-shrink 属性才会有效
size
不能小于 min-width\min-height
flex-basis
auto
(默认值)、具体的宽度数值
(100px)flex属性
<number>
): 它会被当作<flex-grow>
的值。<flex-basis>
的值。<flex-grow>
的值。
<flex-shrink>
的值。
✓ 一个有效的宽度值: 它会被当作 <flex-basis>
的值。
<flex-grow>
的值。 <flex-shrink>
的值。<flex-basis>
的值。