HTML详解连载(8)

HTML详解连载(8)

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记

进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

浮动-产品区域布局

清除浮动

场景

浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度

解决方法

清除浮动(带来的影响)

清除浮动

方法一:额外标签发

在父元素内容的最后添加一个块级元素,设置CSS属性clear:both

方法二:单伪元素法

html 复制代码
.clearfix::after {
content:"";
display:block;
clear:both;
}

方法三:双伪元素法

html 复制代码
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
        .clearfix::after {
            clear: both;
        }

方法四:overflow

父元素添加CSS属性 overflow:hidden

浮动-总结

浮动属性float,left表示左浮动,right表示右浮动

特点

浮动后的盒子顶对齐

浮动后的盒子具备行内块特点

父级宽度不够,浮动的子级会换行

浮动后的盒子脱标

清除浮动

子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果

双伪元素法

拓展

浮动本质作用是实现图文混排效果

Flex-认识

flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。

flex模型不会产生浮动布局中脱标现象,布局网页更简单,更灵活

Flex-组成

设置方式:给父元素设置display:flex,子元素可以自动挤压或拉伸

组成部分:

弹性容器

弹性盒子

主轴:默认在水平方向

侧轴/交叉轴:默认在垂直方向

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 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等

注意

行对其方式堆单行弹性盒子不生效

相关推荐
翻滚吧键盘22 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
超级土豆粉34 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。40 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html