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

注意

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

相关推荐
mldong22 分钟前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字25 分钟前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点1 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木1 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的2 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123192 小时前
CSS学习
前端·css·学习
人生在勤,不索何获-白大侠2 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C2 小时前
Content-Type的几种类型
前端·面试
前端Hardy2 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
Tminihu2 小时前
前端大文件上传的时候,采用切片上传的方式,如果断网了,应该如何处理
前端·javascript