网站镜像 cdn,ukidc做电影网站,南京溧水网站建设,微信电商小程序有哪些标准流 标准流也叫文档流#xff0c;指的是标签在页面中默认的派不规则#xff0c;例如#xff1a;块元素独占一行#xff0c;行内元素可以一行显示多个。 但是很多的网页布局都是块元素在一行中显示的#xff0c;这时候就需要浮动和 Flex 布局#xff0c;浮动只需要了解…标准流 标准流也叫文档流指的是标签在页面中默认的派不规则例如块元素独占一行行内元素可以一行显示多个。 但是很多的网页布局都是块元素在一行中显示的这时候就需要浮动和 Flex 布局浮动只需要了解即可
浮动
可以让块元素水平排列 给块元素加上 float属性可以使得块元素往左边或者往右边浮动使得两个块元素可以出现在一行里面。 浮动后的格子会脱离标准流的控制不再占用标准流的范围。
浮动-产品区域布局 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;height: 0;}li {list-style: none;}.product {width: 1226px;height: 628px;background-color: greenyellow;margin: 50px auto;}.left {width: 234px;height: 628px;background-color: aqua;float: left;}.right {width: 978px;height: 628px;background-color: grey;float: right;}.right li {width: 234px;height: 300px;margin-right: 14px;margin-bottom: 14px;background-color: orange;float: left;}.right li:nth-child(4n) {margin-right: 0;}/style
/head
bodydiv classproductdiv classleft/divdiv classrightli/lili/lili/lili/lili/lili/lili/lili/li/div/div
/body
/html清除浮动
浮动元素脱标的情况如果父级没有高度子级无法撑开父级的高度可能导致页面布局的错乱 方法一额外标签法
在父元素内容的最后添加一个块级元素设置 CSS 属性 clear:both
方法二单伪元素法
.clearfix::after {content: ;display: block;clear: both;
}方法三双伪元素法
.clearfix::before,
.clearfix::after {content: ;display: table;
}
.clearfix::after {clear:both;
}代码解释 .clearfix::before 和 .clearfix::after分别使用伪元素 ::before 和 ::after。 content: ;添加了一个空内容这样伪元素才能生效并占据空间。 display: table;将伪元素的 display 属性设置为 table使其表现得像一个表格元素。 .clearfix::after在第二个伪元素后应用了 clear: both;使其清除浮动。 方法四overflow
父元素添加属性overflow:hidden
Flex 布局 Flex 布局又叫弹性布局它使用 flexbox 使得容器有了弹性更加适应设备的不同宽度而不用再去依赖传统的块状布局和浮动定位作为在 CSS3 中新增的规范目前大部分的主流浏览器已经支持是浏览器提倡的布局方式 非常适合结构化布局提供了空间分布和对其能力它不会有浮动布局中的脱标、坍塌等现象布局网页更简单更灵活。 Flex - 组成
设置方式给父元素设置 display:flex子元素可以自动挤压或者拉伸 组成部分 弹性容器父级容器弹性盒子当父级容器设置为 display:flex 的时候子级自动变为 flexbox弹性盒子。主轴默认在水平方向是子级弹性盒子排列的轴所以一开始设置的时候弹性盒子默认是水平排列的。侧轴 / 交叉轴默在垂直方向后面可以根据需要改变主轴和侧轴。 示意图
Flex - 布局属性
这里展示一些 flex 布局有关的属性后面会进行详细的讲解
属性描述display: flex创建 flex 容器justify-content主轴对齐方式align-items侧轴对齐方式align-self修改某个盒子的侧轴对齐方式flex-direction修改主轴方向flex弹性伸缩比flex-wrap弹性盒子换行align-content行对齐方式
主轴对齐方式(justify-content)
属性名justify-content 可以改变主轴上的对齐方式
属性值效果flex-start默认值弹性盒子从起点依次排列flex-end盒子从终点开始依次排列center弹性盒子从主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距在盒子中间space-around弹性盒子沿主轴均匀排列空白间距在盒子两侧space-evenly弹性盒子演主轴均匀排列弹性盒子与容器之间间距相等
需要重点关注的是后面的几个这里先来演示一下 space-around 和 space-evenly 的区别
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {/* 设置 flex 布局 */display: flex;width: 500px;background-color: yellow;// justify-content: space-evenly;justify-content: space-around;}li {list-style: none;width: 30px;height: 100px;background-color: red;}/style
/head
bodydivli/lili/lili/lili/lili/lili/li/div
/body
/htmlaround evenly
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style.box {display: flex;/* justify-content: center;justify-content: space-around;justify-content: space-between; */justify-content: space-evenly;height: 300px;border: solid 2px black;}.box div {width: 200px;height: 200px;background-color: yellow;}
/style
bodydiv classboxdiv1/divdiv2/divdiv3/div/div
/body
/html侧轴对齐方式(align-items / align-self)
属性名 align-items当前弹性容器内所有盒子的侧轴对齐方式 align-self单独控制某个弹性盒子的侧轴对齐方式 这两个属性值是相同的只不过 align-self 属性是设置在子级的
属性值效果stretch盒子沿侧轴被拉伸到铺满整个容器如果没有设置盒子在侧轴方向尺寸则会默认拉伸center弹性盒子沿侧轴居中排列flex-start弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列
这里就不具体演示了效果和描述的一样
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {display: flex;justify-content: space-evenly;height: 300px;align-items: flex-end;}.box div {width: 200px;height: 200px;background-color: yellow;}/style
/head
bodydiv classboxdiv1/divdiv2/divdiv3/div/div
/body
/html可以清晰的看到是从底部开始排列的
修改主轴方向flex-direction 主轴就是弹性盒子排列的轴我们可以通过设置主轴方向来做到水平排列和数值排列 属性名flex-direction
属性值效果row水平方向从左到右column竖直方向从上到下row-reverse水平方向从右到左column-reverse垂直方向从下到上
只需要记忆垂直方向从上向下的 column 即可这时候主轴的方向就变为垂直了
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {display: flex;width: 300px;height: 600px;background-color: blue;}div li {list-style: none;width: 90px;height: 100px;background-color: yellow;}/style
/head
bodydivli/lili/lili/li/div
/body
/html看这段代码主轴是横轴页面效果是这样的 这时候我们加上 flex-direction:column 属性 主轴就变为竖直方向了。
弹性伸缩比
可以用来控制弹性盒子在主轴方向的尺寸比如主轴为水平方向控制的就是这个盒子的宽度。 属性名flex 属性值整数数字表示占用父级剩余尺寸的份数 默认的情况下每一个盒子是占一份的剩余尺寸是原本的尺寸减去 内容宽度和高度 Flex 项目的内容决定了其在主轴上的大小。比如文字、图像或者内部元素的宽度和高度。 盒子模型属性 padding、border、margin 等属性也会影响 Flex 项目在主轴方向上的实际大小。 设置的宽度和高度属性 如果明确设置了 Flex 项目的宽度和高度属性那么这些属性值也会决定项目在主轴上的尺寸。 比如下面这段代码我们给不同的盒子设置不同的值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {display: flex;width: 300px;height: 150px;background-color: blue;justify-content: space-between;}div li:nth-child(1) {flex: 2;margin: 10px;list-style: none;width: 90px;height: 100px;background-color: yellow;}div li:nth-child(2) {flex: 1;margin: 10px;list-style: none;width: 90px;height: 100px;background-color: yellow;}div li:nth-child(3) {flex: 1;margin: 10px;list-style: none;width: 90px;height: 100px;background-color: yellow;}/style
/head
bodydivli/lili/lili/li/div
/body
/html弹性换行
弹性盒子会自动挤压和拉伸默认情况下所有的盒子都在一行显示如果盒子的宽度过大会被挤压到适合的大小 属性名flex-wrap
属性值效果wrap换行nowarp不换行默认情况
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.flex-container {display: flex;flex-wrap: wrap; /* 设置项目换行 */width: 300px; /* 设置容器宽度 */border: 2px solid #ccc;}.flex-item {width: 80px;height: 80px;background-color: #f0f0f0;margin: 5px;display: flex;justify-content: center;align-items: center;}/style
/head
bodydiv classflex-containerdiv classflex-item1/divdiv classflex-item2/divdiv classflex-item3/divdiv classflex-item4/divdiv classflex-item5/divdiv classflex-item6/div/div/body
/html显示效果
行对齐方式
可以控制每行之间的对齐方式需要设施flex-wrap: wrap 属性名align-content
属性值效果flex-start默认值弹性盒子从起点依次排列flex-end盒子从终点开始依次排列center弹性盒子从主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距在盒子中间space-around弹性盒子沿主轴均匀排列空白间距在盒子两侧space-evenly弹性盒子演主轴均匀排列弹性盒子与容器之间间距相等
和主轴的对齐方式相同
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.flex-container {display: flex;flex-wrap: wrap;height: 300px; /* 设置容器高度 */width: 300px;align-content: space-between; /* 设置轴线分布方式 */border: 2px solid #ccc;}.flex-item {width: 80px;height: 80px;background-color: #f0f0f0;margin: 5px;display: flex;justify-content: center;align-items: center;}/style
/head
bodydiv classflex-containerdiv classflex-item1/divdiv classflex-item2/divdiv classflex-item3/divdiv classflex-item4/divdiv classflex-item5/divdiv classflex-item6/div/div
/body
/html
