静海网站建设制作,工程建设教育网首页,360浏览器有些网页打不开是什么原因,网站源代码免费下载HTML详解连载#xff08;8#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一#xff1a;额外标签发方法二#xff1a;单伪元素法方法三#xff1a;双伪元素法方法四#xff1a;overflow浮动-总结… HTML详解连载8 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一额外标签发方法二单伪元素法方法三双伪元素法方法四overflow浮动-总结特点清除浮动拓展Flex-认识Flex-组成组成部分主轴默认在水平方向侧轴/交叉轴默认在垂直方向 Flex布局属性名属性值 侧轴对齐方式属性名属性值 修改主轴方向属性名属性值 弹性伸缩比作用属性名属性值 弹性盒子换行属性名属性值 行对齐方式属性名属性值注意 专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程纯手敲的代码自己跟着黑马课程学习的并加入一些自己的理解对代码和笔记 进行适当修改。希望能对大家能有所帮助同时也是请大家对我进行监督对我写的代码进行建议互相学习。
开始喽 浮动-产品区域布局
清除浮动
场景
浮动元素会脱标如果父级没有高度子级无法撑开父级高度
解决方法
清除浮动带来的影响
清除浮动
方法一额外标签发
在父元素内容的最后添加一个块级元素设置CSS属性clearboth
方法二单伪元素法
.clearfix::after {
content:””;
display:block;
clear:both;
}方法三双伪元素法 .clearfix::before,.clearfix::after {content: ;display: table;}.clearfix::after {clear: both;}方法四overflow
父元素添加CSS属性 overflowhidden
浮动-总结
浮动属性floatleft表示左浮动right表示右浮动
特点
浮动后的盒子顶对齐 浮动后的盒子具备行内块特点 父级宽度不够浮动的子级会换行 浮动后的盒子脱标
清除浮动
子级浮动父级没有高度子级无法撑开父级高度影响布局效果 双伪元素法
拓展
浮动本质作用是实现图文混排效果 Flex-认识
flex布局也叫弹性布局是浏览器提倡的布局模型非常适合结构化布局提供了强大的空间分布和对齐能力。 flex模型不会产生浮动布局中脱标现象布局网页更简单更灵活
Flex-组成
设置方式给父元素设置displayflex子元素可以自动挤压或拉伸
组成部分
弹性容器 弹性盒子
主轴默认在水平方向
侧轴/交叉轴默认在垂直方向
flex——沿着主轴方向排列
Flex布局
属性名
justify-content
属性值
属性效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列空白间距均分在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等 侧轴对齐方式
属性名
属性效果align-items当前弹性容器内所有弹性盒子的侧轴对齐方式给弹性容器设置align-self单独控制某个弹性盒子的侧轴对齐方式给弹性盒子设置
属性值
属性效果stretch弹性盒子沿着侧轴线被拉甚至铺满容器弹性盒子没有设置侧轴方向尺寸 则默认拉伸center弹性盒子沿侧轴居中排列flex-start弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列
修改主轴方向
主轴默认在水平方向侧轴默认在垂直方向
属性名
flex-direction
属性值
属性效果row水平方向从左向右默认column垂直方向从上到下row-reverse水平方向从右向左column-reverse垂直方向从下到上
弹性伸缩比
作用
控制弹性盒子的主轴方向的尺寸
属性名
flex
属性值
整数数字表示占用父级剩余尺寸的份数
弹性盒子换行
弹性盒子可以自动挤压或拉伸默认情况下所有弹性盒子都在一行显示
属性名
flex-wrap
属性值
属性效果wrap黄行nowrap不换行默认
行对齐方式
属性名
align-content
属性值
属性效果flex-start默认值弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴剧中排列space-between弹性盒子沿主轴均匀排列空白间距均匀分布在弹性盒子之间space-around弹性盒子沿主轴均匀排列空白间距均匀分布在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列弹性盒子与容器之间间距相等
注意
行对其方式堆单行弹性盒子不生效
