2-css-4

news2024/11/23 8:34:51

一 标准流

标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。

在这里插入图片描述

二 浮动

1 认识

作用:让块元素水平排列。

属性名:float

属性值

  • left:左对齐
  • right:右对齐

特点:

  • 浮动后的盒子对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标不占用标准流的位置

2 清除浮动

场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)

解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

在父元素内容的最后添加一个块级元素,设置 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

3 总结

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

  • 特点

    1. 浮动后的盒子顶对齐
    2. 浮动后的盒子具备行内块特点
    3. 父级宽度不够,浮动的子级会换行
    4. 浮动后的盒子脱标
  • 清除浮动:子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果

    1. 双伪元素法
  • 拓展:浮动本质作用是实现图文混排效果

在这里插入图片描述

三 Flex 布局

1 什么是弹性布局

主要解决某个元素中内部子元素的布局方式,为布局提供的非常大的灵活性和操控性
设置了display:flex的元素本身不是弹性布局
它的儿子们是弹性布局

2 弹性布局的专业术语

  1. 弹性容器
    当一个元素设置了display:flex
    这个元素内部的子元素就按照弹性布局方式排列
    这个元素叫做弹性容器
  2. 弹性项目
    当一个元素设置了display:flex
    这个元素内部的子元素就按照弹性布局方式排列
    这些子元素,叫做弹性项目
  3. 主轴
    项目的排列方向,称为主轴
    x轴,主轴起点在左侧,主轴终点在右侧
    x轴,主轴起点在右侧,主轴终点在左侧
    y轴,主轴起点在顶部,主轴终点在底部
    y轴,主轴起点在底部,主轴终点在顶部
  4. 交叉轴
    永远与主轴垂直相交的一根轴
    主轴可以设置,交叉轴不能设置,只会自动根据主轴方向改变

3 语法

display:
flex 经常用于让块级元素变为弹性容器
inline-flex; 经常用于让行内元素变为弹性容器
特点:

  1. 当元素变为弹性容器之后,这个容器的text-align失效,内部项目不会执行水平对齐
  2. 弹性项目,可以设置宽高
  3. 项目的浮动,clear:both都失效
  4. 总结:之前所有学习过的对齐方式,对于弹性项目都失效。弹性项目的对齐,取决于主轴、交叉轴

4 样式属性

容器的样式

所有项目都要用

  1. 主轴方向(4根主轴)
    flex-direction:row; 默认值,主轴为x轴,主轴起点在左侧
    row-reverse 主轴为x,主轴起点在右侧
    column 主轴为y轴,主轴起点在顶部
    column-reverse 主轴为y轴,主轴起点在底部
  2. 项目换行
    flex-wrap:nowrap;默认值,主轴方向空间不够也不换行,项目压缩
    wrap 主轴方向空间不够时,项目自动换行
    wrap-reverse; 交叉轴终点对齐,主轴方向空间不够时,反方向换行
  3. 上面两个属性的缩写方式
    flex-flow:direction wrap;
  4. 定义项目在主轴上的对齐方式
    justify-content:
    flex-start 默认值,主轴起点对齐
    center; 主轴的中心对齐
    flex-end 主轴的终点对齐
    space-around 每个项目的间隙相同
    space-between 两端对齐
  5. 交叉轴上对齐方式 (2根)
    align-items
    flex-start 默认值。在交叉轴起点对齐
    center 交叉轴中间对齐
    flex-end 交叉轴终点对齐
    baseline 每个项目中的文本,基线要对齐
    stretch 项目在交叉轴方向上没有定义尺寸,项目将充满交叉轴

项目的样式

某一个项目使用

  1. 给某个项目单独设置交叉轴上的对齐方式
    align-self
    flex-start 默认值。在交叉轴起点对齐
    center 交叉轴中间对齐
    flex-end 交叉轴终点对齐
    baseline 每个项目中的文本,基线要对齐
    stretch 项目在交叉轴方向上没有定义尺寸,项目将充满交叉轴
    auto 使用容器定义的align-items的值
  2. 项目在主轴上的排列顺序 order
    取值为无单位整数
    定义项目的排列顺序,值越小,越靠近主轴起点,默认值为0
  3. flex-grow
    当主轴有多余的区域,项目是否放大,放大比例是多少
    默认值为0,不放大
    把多余的区域,按照比例分配,加上原始的尺寸,就是每个项目的实际尺寸
  4. flex-shrink
    当弹性布局设置主轴不可换行,当主轴空间不够,项目们会自动收缩主轴方向上的尺寸
    flex-shrink用来设置项目收缩时的大小
    把整个主轴方向压缩的尺寸分为n份,设置每个项目具体被压缩几份
    flex-shrink:取值为数字,默认值为1,取值为0是不许压缩
  5. flex-basis
    设置某个项目在主轴上占据的基本尺寸,通常取值为%
    flex-basis优先级大于项目自己定义的尺寸
    一般不给图片设置此尺寸
  6. flex-grow flex-shrink flex-basis的缩写
    项目具体被压缩几份
    flex-shrink:取值为数字,默认值为1,取值为0是不许压缩
  7. flex-basis
    设置某个项目在主轴上占据的基本尺寸,通常取值为%
    flex-basis优先级大于项目自己定义的尺寸
    一般不给图片设置此尺寸
  8. flex-grow flex-shrink flex-basis的缩写
    flex:0 0 20%;

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

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

相关文章

跳槽过去,刚工作三天就被裁是一种怎样的体验

前言 还有谁?刚上三天班就被公司公司的工作不适合我,叫我先提升一下。 后面我也向公司那边讨要了一个说法,我只能说他们那边的说辞让我有些不服气。 现在之所以把这件事在csdn上记录一下,一是记录一下自己的成长轨迹&#xff0…

2023计算机组成原理【5-7】

第五章 中央处理器 1.指令周期的概念,与时钟周期、机器周期的区别。 指令周期是执行一条指令所需的时间,包括多个子阶段的时间总和时钟周期是计算机系统中的基本时间单位,由时钟信号控制,用于同步处理器和其他组件的操…

Collectors.toMap使用详解

这里写目录标题 一、使用规则二、源码及方法三、代码示例1.将list转成以id为key的map&#xff0c;value是id对应的Dept对象2.假如id存在重复值&#xff0c;则会报错Duplicate key xxx, 解决方案是3.想获得一个id和name对应的Map<Integer, String>4.把Dept集合按照group分…

5年软件测试工作经验,高不成低不就,真的只能转行了吗?

迷茫感&#xff0c;从哪里来&#xff1f; 不知不觉在软件测试行业&#xff0c;野蛮生长了5年之久。这一路上拥有了非常多的感受。有迷茫&#xff0c;有踩过坑&#xff0c;有付出有收获&#xff0c; 有坚持&#xff01; 我一直都在软件测试行业奋战&#xff0c; 毕业时一起入职…

制作自定义pfx证书(数字签名)

目录 生成server.key 生成server.crt 生成server.pfx 结果 exe文件签名 生成server.key openssl genrsa -des3 -out server.key 2048 Generating RSA private key, 2048 bit long modulus (2 p

单独生成 main.exe, pyinstaller × pyecharts 打包报错找不到文件 map_filename.json 一次搞定!

报错&#xff1a; FileNotFoundError: [Errno 2] No such file or directory: ‘C:\Users\xxx\AppData\Local\Temp_MEI3455\pyecharts\datasets\map_filename.json’ pyecharts 打包成 exe 的时候找不到 map_filename.json 文件。先找到这个文件,一般在本机 Python 安装目录下…

一文掌握linux系统管理命令

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

SuperMap GIS基础产品移动GIS FAQ集锦(3)

SuperMap GIS基础产品移动GIS FAQ集锦&#xff08;3&#xff09; 【iMobile】网络分析中设置权值字段&#xff0c;如何添加多个权值字段&#xff1f; 【解决办法】通过权值字段集合类&#xff08;WeightFieldInfos&#xff09;设置&#xff0c;该类是权值字段信息对象&#x…

回波3DFFT处理(测距、测速、测角)

回波3DFFT处理&#xff08;测距、测速、测角&#xff09; 1、测距、测速2、测角3、3DFFT处理4、MATLAB程序 本文主要针对TI 毫米波雷达的测距、测速、测角的基本方法——3DFFT处理进行简单介绍&#xff0c;并提供MATLAB处理程序&#xff0c;分析3DFFT处理结果。 1、测距、测速…

高等数学下拾遗+与matlab结合

如何学好高等数学 高等数学是数学的一门重要分支&#xff0c;包括微积分、线性代数、常微分方程等内容&#xff0c;它是许多理工科专业的基础课程。以下是一些学好高等数学的建议&#xff1a; 扎实的基础知识&#xff1a;高等数学的内容很多&#xff0c;包括初等数学的一些基…

Postgresql源码(107)analyze行采样流程分析(pg_class中reltuples行数评估是哪里来的准确吗)

总结 pg_class中reltuples行数评估是哪里来的&#xff1f; 行数评估发生在acquire_sample_rows采样函数中&#xff0c;算作采样的副产品之一。 总行数评估totalrows即&#xff1a;扫到页面中live元组的数量 / 扫到多少页面 * 总页面&#xff0c;向上取整。 pg_class中reltu…

十九、socket套接字编程——udp

文章目录 一、socket套接字编程接口&#xff08;一&#xff09;socket头文件&#xff08;二&#xff09;socket 常见API&#xff08;套接字编程接口&#xff09;1. 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器 )2.绑定网络信息 (TCP/UDP, 服务器 )3.开始监听 socket (TCP…

【安装教程】KingFunsion3.6-Windows版本的安装教程

哈喽&#xff01;大家好&#xff0c;我是雷工&#xff01; 由于项目需要今天学习认识KingFunsion3.6及记录Windows版本的安装教程。 一、KingFunsion介绍 1、KingFunsion是什么&#xff1f; KingFunsion是一款面向工程师的管控一体化全组态平台&#xff0c;是一套面向制造企…

Flutter进阶-Future、FutureBuilder、StreamBuilder详解

一、时间循环 Event Loop机制 程序之所以卡说白了就是没有时间更新UI界面刷新屏幕导致 常见的卡顿主要是两种&#xff1a; 1.很大的计算量CPU忙不过来 2.等待&#xff0c;等服务器的响应、等用户的输入、等文件的读取...等等 在多线程的机制里每当遇到需要等的东西就开启一…

管理类联考——逻辑——知识篇——分析推理——二、匹配——haimian

匹配 题型识别 题干一般提供3-5个对象和2~3个维度的信息&#xff0c;并描述某对象及信息间的条件关系&#xff0c;要求将信息进行匹配。要从一个一个条件出发&#xff0c;通过逻辑推理&#xff0c;得出正确答案。 思维导图 解题技巧 注意选项的模式&#xff0c;如果已经将关…

Unity | HDRP高清渲染管线学习笔记:HDRP光照系统(二)

目录 一、光源类型和模式 1. Light组件 1.1 General&#xff08;通用设置&#xff09; 1.1.1 LightLayer&#xff08;光照层&#xff09; 1.2 Emission&#xff08;发光设置&#xff09; 1.3 Shadows&#xff08;阴影&#xff09; 二、Light Layer&#xff08;光源分层&…

【C/C++实战项目】扫雷游戏

目录 项目分析 外部头文件 初始化 打印 扫雷游戏函数 main函数 项目分析 游戏需要自定义地图的大小、埋雷的数量通过输入坐标进行扫雷&#xff0c;输入的坐标是埋雷的地方&#xff0c;则游戏失败输入的坐标未埋雷&#xff0c;则该坐标显示周围8个坐标总共的雷数游戏初始…

Ant Design Vue实现表格双击编辑、添加新行、文字提示

早上刚上班&#xff0c;产品就朝我工位走了过来&#xff0c;一看大事不好&#xff0c;肯定又是来提需求的&#xff01; 产品&#xff1a;做一个表格&#xff0c;要实现双击编辑的功能 我&#xff1a;做不了 产品&#xff1a;老板提的 我&#xff1a;好的&#xff0c;可以做 老板…

什么是测试开发工程师?

目录 前言&#xff1a; SDET是做啥的&#xff1f; 为什么需要测试开发&#xff1f; SDET的角色和职责 技术和软技能 非技术能力&#xff1a; 沟通能力 时间管理和组织能力 良好的工作态度 热情 日常工作 事业进阶 总结 前言&#xff1a; 测试开发工程师 (Software …

AIDL中 Binder 的具体流转过程(源码讲解)

前言 本篇文章承接上篇 Binder对象的流转&#xff08;系统服务的调用过程、AIDL的使用过程&#xff09; 上一篇简单笼统地说明了流转的大致方向与手段&#xff0c;此篇文章我们将深入代码层面&#xff0c;看看 Binder 到底是怎么实现的。 一、一个简单的AIDL示例 客户端&…