HTML详解连载(8)

HTML详解连载(8)

  • 专栏链接 [link](http://t.csdn.cn/xF0H3)
    • 下面进行专栏介绍
  • 开始喽
    • 浮动-产品区域布局
      • 场景
    • 解决方法
    • 清除浮动
      • 方法一:额外标签发
      • 方法二:单伪元素法
      • 方法三:双伪元素法
      • 方法四:overflow
      • 浮动-总结
      • 特点
      • 清除浮动
      • 拓展
      • Flex-认识
      • Flex-组成
        • 组成部分:
        • 主轴:默认在水平方向
        • 侧轴/交叉轴:默认在垂直方向
      • Flex布局
        • 属性名
        • 属性值
      • 侧轴对齐方式
        • 属性名
        • 属性值
      • 修改主轴方向
        • 属性名
        • 属性值
      • 弹性伸缩比
        • 作用
        • 属性名
        • 属性值
      • 弹性盒子换行
        • 属性名
        • 属性值
      • 行对齐方式
        • 属性名
        • 属性值
        • 注意

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

在这里插入图片描述

浮动-产品区域布局

清除浮动

场景

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

解决方法

清除浮动(带来的影响)

清除浮动

方法一:额外标签发

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

方法二:单伪元素法

.clearfix::after {
content:””;
display:block;
clear:both;
}

方法三:双伪元素法

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

注意

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44422.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序商品如何指定打印机

有些商家,可能有多个仓库。不同的仓库,存放不同的商品。当客户下单时,小程序如何自动按照仓库拆分订单,如何让打印机自动打印对应仓库的订单呢?下面就来介绍一下吧。 1. 设置订单分发模式。进入管理员后台&#xff0c…

不花一分钱,利用免费电脑软件将视频MV变成歌曲音频MP3

教程 1.点击下载电脑软件下载地址,点击下载,安装。(没有利益关系,没有打广告,只是单纯教学) 2.安装完成后,点击格式工厂 3.然后如图所示依次,点击【音频】->【-MP3】 3.然后点击…

[机缘参悟-100] :今早的感悟:儒释道代表了不同的人生观、思维模式决定了人的行为模式、创业到处是陷阱、梦想与欺骗其实很容易辨认

目录 一、关于儒释道 二、关于成长性思维与固定性思维 三、关于创业 四、关于梦想与忽悠 一、关于儒释道 儒:逆势而为,修身齐家治国平天下 佛:万法皆空,众生皆苦,普度众生。 道:顺势无为,天…

低代码系列——初步认识低代码

低代码系列目录 一、初步认识低代码 二、低代码是什么 三、低代码平台的概念和分类 01.无代码开发平台 02.低代码应用平台(LCAP) 03.多重体验开发平台(MXDP) 04.智能业务流程管理套件(iBPMS) 四、低代码的能力指标 五、低代码平台jnpf 表单 报表 流程 权限 一、初步认识低代码 …

【剖析STL】vector

vector的介绍及使用 1.1 vector的介绍 cplusplus.com/reference/vector/vector/ vector是表示可变大小数组的序列容器。就像数组一样,vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素 进行访问,和数组一样高效。但是…

STM32开关输入控制220V灯泡亮灭源代码(附带PROTEUSd电路图)

//main.c文件 /* USER CODE BEGIN Header */ /********************************************************************************* file : main.c* brief : Main program body************************************************************************…

md文本学习

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

中间件的介绍

1.1 什么是中间件 中间件是介于应用系统和系统软件之间的一类软件,他使用系统软件所提供的基础服务,衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的。 例如MySQL就可以看作是具备中间件特性的一种技术&#x…

【Ubuntu】简洁高效企业级日志平台后起之秀Graylog

简介 Graylog 是一个用于集中式日志管理的开源平台。在现代数据驱动的环境中,我们需要处理来自各种设备、应用程序和操作系统的大量数据。Graylog提供了一种方法来聚合、组织和理解所有这些数据。它的核心功能包括流式标记、实时搜索、仪表板可视化、告警触发、内容…

IDEA开发项目时一直出现http404错误的解决方法

系列文章目录 安装cv2库时出现错误的一般解决方法_cv2库安装失败 SQL> conn sys/root as sysdbaERROR:ORA-12560: TNS: 协议适配器错误的解决方案 虚拟机启动时出现“已启用侧通道缓解”的解决方法 Hypervisor launch failed; Processor does not pr…

Component name “Home“ should always be multi-word

错误 解决方案 在根目录找到eslintrc.js文件,配置关闭名称的校验,在该文件中,找到rules进行配置,如下代码: rules: {vue/multi-word-component-names: off, // 关闭名称校验}

VScode替换cmd powershell为git bash 终端,并设置为默认

效果图 步骤 1. 解决VScode缺少git bash的问题_failed to start bash - is git-bash.exe on the syst_Rudon滨海渔村的博客-CSDN博客效果解决步骤找到git安装目录下的/bin/bash.exe,复制其绝对路径,例如D:\Program Files\Git\bin\bash.exe把路径的右斜…

.netcore grpc身份验证和授权

一、鉴权和授权(grpc专栏结束后会开启鉴权授权专栏欢迎大家关注) 权限认证这里使用IdentityServer4配合JWT进行认证通过AddAuthentication和AddAuthorization方法进行鉴权授权注入;通过UseAuthentication和UseAuthorization启用鉴权授权增加…

搭建私有镜像仓库Harbor

目录 系统环境: 安装Docker-Compose 下载并安装Harber 启动Harbor!!! 系统环境: Centos7.9Docker-ce:24 安装Docker-Compose curl -L "https://github.com/docker/compose/releases/download/v2.20…

Android音视频剪辑器自定义View实战!

Android音视频剪辑器自定义View实战! - 掘金 /*** Created by zhouxuming on 2023/3/30** descr 音视频剪辑器*/ public class AudioViewEditor extends View {//进度文本显示格式-数字格式public static final int HINT_FORMAT_NUMBER 0;//进度文本显示格式-时间…

[PyTorch][chapter 52][迁移学习]

前言: 迁移学习(Transfer Learning)是一种机器学习方法,它通过将一个领域中的知识和经验迁移到另一个相关领域中,来加速和改进新领域的学习和解决问题的能力。 这里面主要结合前面ResNet18 例子,详细讲解一…

linux:Temporary failure in name resolutionCouldn’t resolve host

所有域名无法正常解析。 ping www.baidu.com 等域名提示 Temporary failure in name resolution错误。 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 一、ubuntu/debian(emporary failure i…

云原生反模式

通过了解这些反模式并遵循云原生最佳实践,您可以设计、构建和运营更加强大、可扩展和成本效益高的云原生应用程序。 1.单体架构:在云上运行一个大而紧密耦合的应用程序,妨碍了可扩展性和敏捷性。2.忽略成本优化:云服务可能昂贵&am…

发布一个开源的新闻api(整理后就开源)

目录 说明: 基础说明 其他说明: 通用接口: 登录: 注册: 更改密码(需要token) 更换头像(需要token) 获取用户列表(需要token): 上传文件(5000端口): 获取文件(5000端口)源码文件,db文件均不能获取: 验证token(需要token): 获取系统时间: 文件…

AlexNet阅读笔记

ImageNet classification with deep convolutional neural networks 原文链接:https://dl.acm.org/doi/abs/10.1145/3065386 中文翻译:https://blog.csdn.net/qq_38473254/article/details/132307508 使用深度卷积神经网络进行 ImageNet 分类 摘要 大…