当前位置: 首页 > news >正文

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

注意

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

相关文章:

HTML详解连载(8)

HTML详解连载(8) 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一:额外标签发方法二:单伪元素法方法三:双伪元素法方法四:overflow浮动-总结…...

Linux系统之安装OneNav个人书签管理器

Linux系统之安装OneNav个人书签管理器 一、OneNav介绍1.OneNav简介2.OneNav特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查本地yum仓库状态 四、安装httpd服务4.1 安装httpd4.2 启动httpd服务4…...

主程技术分享: 游戏项目帧同步,状态同步如何选

网络游戏开发项目中帧同步,状态同步如何选? 网络游戏的核心技术之一就是玩家的网络同步,主流的网络同步有”帧同步”与”状态同步”。今天我们来分析一下这两种同步模式。同时教大家如何在自己的项目中采用最合适的同步方式。接下来从以下3个方面来阐述: 对啦&…...

ChatGPT-4: 半年的深度使用思考

几个月的时间一直在使用 ChatGpt-4,以口述语音转文字的形式说一下自己的体会。 1、选择版本 大前提:我使用的都是 GPT4 的版本。也就是说至少每个月要付费20$。 因为 3.5 的版本,实际上使用体验是非常差的,主要体现在答非所问上。…...

【健康医疗】Axure用药提醒小程序原型图,健康管理用药助手原型模板

作品概况 页面数量:共 20 页 兼容软件:Axure RP 9/10,不支持低版本 应用领域:健康管理,用药助手 作品申明:页面内容仅用于功能演示,无实际功能 作品特色 本作品为「用药提醒」小程序原型图…...

ERROR in static/js/xxx.js from UglifyJs

老项目用的webpack3,打包的时候遇到**ERROR in static/js/xxx.js from UglifyJs**这个报错, UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集,是前端开发打包的最常用工具之一,只支持ES5,不支持ES6&#x…...

阿里云ECS服务器安装PostgreSQL

1. 概述 PostgreSQL是一个功能强大的开源数据库,它支持丰富的数据类型和自定义类型,其提供了丰富的接口,可以自行扩展其功能,支持使用流行的编程语言编写自定义函数 PostgreSQL数据库有如下优势: PostgreSQL数据库时…...

【核磁共振成像】傅里叶重建

目录 一、傅里叶重建二、填零三、移相四、数据窗函数五、矩形视野六、多线圈数据重建七、图像变形校正八、缩放比例九、基线校准 长TR,长TE,是T2加权像; 短TR,短TE,是T1加权像; 长TR,短TE&#…...

Camunda 工作流节点跳转 - 多实例节点判断和跳转

在多种工作流引擎中,Camunda框架对流程的处理控制更为强大、灵活。 在应对流程节点按业务需要进行自由跨节点跳转的需求时,通过代码自由控制节点的跳转在Camunda中是支持的,并且提供了编码方法,其中多实例的处理上有一些区别要特…...

MySQL不停重启问题

MySQL不停的自动杀掉自动重启 看一下log日志 my.cnf 里配置的 log_error /var/log/mysqld.log vim /var/log/mysqld.log 报的错误只是 [ERROR] Cant start server: Bind on TCP/IP port: Address already in use [ERROR] Do you already have another mysqld server …...

ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例

ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例 核心代码完整代码在线示例 二三维一体化的概念一直都比较火热,虽然大多数都是狭义的概念,但是很多需求方也想要这样的功能。 Openlayers 官方出了一个二三维一体化的工具&…...

国产化-达梦数据库安装2

目录 DM8数据库下载地址 安装一路狂飙next 启动服务 随着国家政府的推广、越来越多的政府项目、在系统部署需要采购国产服务器、数据库等 DM8数据库下载地址 https://eco.dameng.com/download/ 安装一路狂飙next windos安装比较简单直接next即可 仅仅记录几个关键疑问地方k…...

延长OLED透明屏的使用寿命:关键因素与有效方法分享

OLED透明屏作为一项创新的显示技术,具备透明度和高清晰度的特点,在各个领域得到了广泛应用。 然而,为了确保OLED透明屏的持久性和稳定性,延长其使用寿命是至关重要的。根据最新的研究和数据报告, 在这篇文章中&#…...

域名是指哪一部分?

域名是指互联网中用于识别和定位网站的地址。它是由多个部分组成的,每个部分都具有特定的含义和功能。下面是有关域名各个部分的解释。 顶级域名(Top-Level Domain,TLD): 顶级域名是域名的最高级别部分,通常…...

MPP 还是主流架构吗

MPP 架构: MPP 架构的产品: Impala ClickHouse Druid Doris 很多 OLAP 引擎都采用了 MPP 架构 批处理系统 - 使用场景分钟级、小时级以上的任务,目前很多大型互联网公司都大规模运行这样的系统,稳定可靠,低成本。…...

ubuntu查看网速

使用speedomster测试网速 sudo apt-get install speedometer 查询需要测速的网卡 speedometer -r ens33 -t ens33 -r: 指定网卡的接收速度 -t: 指定网卡的发送速度 使用nload测试 sudo apt-get install nload 测速 nload -t 200 -i 1024 -o 128 -U M 参数含义&#xff0…...

【官方中文文档】Mybatis-Spring #使用 MyBatis API

使用 MyBatis API 使用 MyBatis-Spring,你可以继续直接使用 MyBatis 的 API。只需简单地使用 SqlSessionFactoryBean 在 Spring 中创建一个 SqlSessionFactory,然后按你的方式在代码中使用工厂即可。 public class UserDaoImpl implements UserDao {//…...

go gorm belong to也就是多对一的情况

多位员工属于同一个公司,一个公司包含多个人,关系放在多的那一部分 belongs to 会与另一个模型建立了一对一的连接。 这种模型的每一个实例都“属于”另一个模型的一个实例。 例如,您的应用包含 user 和 company,并且每个 user 能…...

亚马逊云科技 云技能孵化营——机器学习心得

亚马逊云科技 云技能孵化营机器学习心得 前言什么是机器学习?机器学习如何解决业务问题?什么时候适合使用机器学习模型?总结 前言 很荣幸参加了本次亚马逊云科技云技能孵化营,再本期的《亚马逊云科技云技能孵化营》中&#xff0c…...

Django实现音乐网站 ⒀

使用Python Django框架制作一个音乐网站, 本篇主要是推荐页-推荐排行榜、推荐歌手功能开发。 目录 推荐页开发 推荐排行榜 单曲表增加播放量 表模型增加播放量字段 执行表操作 模板中显示外键对应值 表模型外键设置 获取外键对应模型值 推荐排行榜视图 推…...

PySide6学习笔记--基础环境的安装配置

PySide6介绍 QT官方发布Qt6.0之后,紧接着于2020年12月10日发布了PySide 6,对应C版的Qt6。从PySide6开始,PySide的命名也会与Qt的大版本号保持一致。需要注意的是使用PySide6开发的程序在默认情况下,不兼容Windows7系统&#xff0c…...

算法通关村第九关——中序遍历与搜索树

1 中序遍历和搜索树原理 二叉搜索树按照中序遍历正好是一个递增序列。其比较规范的定义是: 若它的左子树不为空,则左子树上所有节点的值均小于它的根节点的值;若它的右子树不为空,则右子树所有节点的值均大于它的根节点的值&…...

测试框架pytest教程(5)运行失败用例-rerun failed tests

# content of test_50.py import pytestpytest.mark.parametrize("i", range(50)) def test_num(i):if i in (17, 25):pytest.fail("bad luck") 运行这个文件,2个失败,48个通过。 要运行上次失败的测试用例,可以使用--l…...

【车载开发系列】UDS当中的时间参数

【车载开发系列】UDS当中的时间参数 UDS当中的时间参数 【车载开发系列】UDS当中的时间参数一. 术语定义二. 网络层时间调整参数三. ECU诊断层与会话层参数 一. 术语定义 缩写全称中文说明BSBlock Size块大小STminSeparation time min时间间隙SIService Identifier服务标识符S…...

PDF中的表格怎么转换为Excel?这两个工具一定得收藏!

PDF是一种常见的文件格式,它可以保持文件的原始样式和内容,但是也有一些缺点,比如不易编辑和处理数据。如果你想要将PDF中的表格或数据导出到Excel中,以便进行分析、计算或制作图表,那么你可能需要一个专业的PDF转Exce…...

ssh scp sshpass

ssh命令用于远程连接主机 ssh usernamehostname更多用法参考: ssh常用用法 scp 命令是用于通过 SSH 协议安全地将文件复制到远程系统和从远程系统复制文件到本地的命令 比如: scp /data/log/a.txt root192.168.1.100:/data/log该命令就就将本地的a.t…...

leetcode 1996. 游戏中弱角色的数量(排序的魅力)

题目 题意: 给定n个人的攻击力和防御力,对于一个人来说,如果存在某个人的攻击力和防御力都比他高,那么称这个人为弱角色。统计弱角色的数量 思路: 排序,攻击力按从大到小排序,这样遍历的时候某个数时前边的攻击力都比他…...

从头到尾说一次 Spring 事务管理(器) | 京东云技术团队

事务管理,一个被说烂的也被看烂的话题,还是八股文中的基础股之一。​ 本文会从设计角度,一步步的剖析 Spring 事务管理的设计思路(都会设计事务管理器了,还能玩不转?) 为什么需要事务管理&…...

php 系列题目,包含查看后端源代码

一、弱类型比较问题 原则: 1.字符串和数字比较,字符串回被转换成数字。 "admin" 0(true) admin被转换成数字,由于admin是字符串,转换失败,变成0 int(admin)0,所以比较结果是ture 2.混合字符串转…...

令牌桶C语言代码实现

令牌桶实例 令牌桶三要素 cps 每秒钟传输字节数 burst 令牌桶内最多能传输的字节数,token的最大值 token 令牌的个数 之前是一个令牌(token)对应一个字节,现在将一个token变为一个cps,cps是解码速率,每攒到一个令牌&#xff…...