CSS3新增的语法(四)

CSS3新增的语法(四)【布局】

    • 14. 多列布局
    • 15.伸缩盒模型
      • 1. 伸缩盒模型简介
      • 2. 伸缩容器、伸缩项目
      • 3. 主轴与侧轴
      • 4. 主轴方向
      • 5. 主轴换行方式
      • 6. flex-flow
      • 7. 主轴对齐方式
      • 8. 侧轴对齐方式
        • 8.1 一行的情况
        • 8.2 多行的情况
      • 9.flex 实现水平垂直居中
      • 10. 伸缩性
        • 1. flex-basis
        • 2. flex-grow(伸)
        • 3. flex-shrink(缩)
      • 11. flex复合属性
      • 12. 项目排序
      • 13. 单独对齐
    • 16. 响应式布局(媒体查询)
      • 1.1 媒体类型
      • 1.2 媒体特性
      • 1.3 运算符
      • 1.4 常用阈值
      • 1.5 结合外部样式的用法
    • 17. BFC
      • 1. 什么是BFC
      • 2. 开启了BFC能解决什么问题
      • 3. 如何开启BFC

14. 多列布局

  • 作用:专门用于实现类似于报纸的布局。
  • 例如:

在这里插入图片描述

  • 常用属性如下:
    • column-count :指定列数,值是数字。
    • column-width :指定列宽,值是长度。(图片的width:100%;依据列宽)
    • columns :同时指定列宽和列数,复合属性;值没有数量和顺序要求。
    • column-gap :设置列边距,值是长度。
    • column-rule-style :设置列与列之间边框的风格,值与border-style 一致。
    • column-rule-width :设置列与列之间边框的宽度,值是长度。
    • column-rule-color :设置列与列之间边框的颜色。
    • coumn-rule :设置列边框,复合属性。
    • ------以上属性加在父元素身上------
    • column-span 指定是否跨列;值: none,all。(加在需要横跨列的元素身上,例如文章标题)
  • 应用场景
    • 文章
    • 瀑布流布局

15.伸缩盒模型

1. 伸缩盒模型简介

  • 2009 年,W3C 提出了一种新的盒子模型 —— Flexible Box (伸缩盒模型,又称:弹性盒 子)。
  • 它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺序 …
  • 截止目前,除了在部分IE浏览器不支持,其他浏览器均已全部支持。
  • 伸缩盒模型的出现,逐渐演变出了一套新的布局方案 —— flex 布局。
  1. 传统布局是指:基于传统盒状模型,主要靠: display 属性 + position 属性 + float 属性。
  2. flex 布局目前在移动端应用比较广泛,因为传统布局不能很好的呈现在移动设备上。

2. 伸缩容器、伸缩项目

  • 伸缩容器: 开启了 flex 的元素,就是:伸缩容器。
    1. 给元素设置:display:flex 或 display:inline-flex ,该元素就变为了伸缩容器。
    2. display:inline-flex 很少使用,因为可以给多个伸缩容器的父容器,也设置为伸缩容器。(不独占一行)
    3. 一个元素可以同时是:伸缩容器、伸缩项目。
  • 伸缩项目:伸缩容器所有子元素自动成为了:伸缩项目。
    1. 仅伸缩容器的子元素成为了伸缩项目,孙子元素、重孙子元素等后代,不是伸缩项目。
    2. 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会“块状化”。

3. 主轴与侧轴

  • 主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边 是终点)。
  • 侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边 是终点)。

4. 主轴方向

  • 属性名:flex-direction
  • 常用值如下
    1. row :主轴方向水平从左到右 —— 默认
    2. row-reverse :主轴方向水平从右到左。
    3. column :主轴方向垂直从上到下。
    4. column-reverse :主轴方向垂直从下到上。
      在这里插入图片描述

!!!注意:改变了主轴的方向,侧轴方向也随之改变。

5. 主轴换行方式

  • 属性名:flex-wrap
  • 常用值如下:
    1. nowrap :默认值,不换行。
      在这里插入图片描述
    2. wrap :自动换行,伸缩容器不够自动换行。
      在这里插入图片描述
    3. wrap-reverse :反向换行。
      在这里插入图片描述

6. flex-flow

  • flex-flow 是一个复合属性,复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。

flex-flow: row wrap;

7. 主轴对齐方式

  • 属性名:justify-content
  • 常用值如下:
    1. flex-start :主轴起点对齐。—— 默认值
    2. flex-end :主轴终点对齐。
    3. center :居中对齐
    4. space-between :均匀分布,两端对齐(最常用)。
    5. space-around :均匀分布,两端距离是中间距离的一半。
    6. space-evenly :均匀分布,两端距离与中间距离一致。
      在这里插入图片描述

8. 侧轴对齐方式

8.1 一行的情况
  • 所需属性:align-items
  • 常用值如下:
    1. stretch :如果伸缩项目未设置高度,将占满整个容器的高度。—— (默认值)
    2. flex-start :侧轴的起点对齐
    3. flex-end :侧轴的终点对齐。
    4. center :侧轴的中点对齐。
    5. baseline : 伸缩项目的第一行文字的基线对齐。
      在这里插入图片描述
8.2 多行的情况
  • 所需属性:align-content
  • 常用值如下:
    1. stretch :stretch :占满整个侧轴(未设置高度)。—— 默认值
      在这里插入图片描述

    2. flex-start :与侧轴的起点对齐。
      在这里插入图片描述

    3. flex-end :与侧轴的终点对齐。
      在这里插入图片描述

    4. center :与侧轴的中点对齐。
      在这里插入图片描述

    5. space-between :与侧轴两端对齐,中间平均分布。
      在这里插入图片描述

    6. space-around :伸缩项目间的距离相等,比距边缘大一倍。
      在这里插入图片描述
      在这里插入图片描述

    7. space-evenly : 在侧轴上完全平分。
      在这里插入图片描述

9.flex 实现水平垂直居中

  • 方法一:父容器开启flex 布局,随后使用 justify-content 和align-items 实现水平垂直居中
.outer {width: 400px;height: 400px;background-color: #888;display: flex;justify-content: center;align-items: center;
}
.inner {width: 100px;height: 100px;background-color: orange;
}
  • 方法二:父容器开启flex 布局,随后子元素margin: auto

.outer {width: 400px;height: 400px;background-color: #888;display: flex;
}
.inner {width: 100px;height: 100px;background-color: orange;margin: auto;
}

10. 伸缩性

1. flex-basis
  • 概念:flex-basis 设置的是主轴方向的基准长度,会让宽度或高度失效。

-备注:主轴横向:宽度失效;主轴纵向:高度失效

  • 作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值auto,即:伸缩项目的宽或高。
2. flex-grow(伸)
  • 概念:flex-grow 定义伸缩项目的放大比例,默认为0,即:auto ,即:伸缩项目纵使主轴存在剩余空间,也不拉伸(放大)。
  • 规则:
    1. 若所有伸缩项目的flex-grow 值都为1,则:它们将等分剩余空间(如果有空间的话)。
    2. 若三个伸缩项目的flex-grow 值分别为:1、2、3,则:分别瓜分到:1/6 、2/6、3/6。
3. flex-shrink(缩)
  • 概念:flex-shrink 定义了项目的压缩比例,默认为1,即:如果空间不足,该项目将会缩小。

改为0,则不会被挤压

11. flex复合属性

flex 是复合属性,复合了: flex-grow 、 flex-shrink 、flex-basis 三个属性,默认值为 0 1 auto。

1. 如果写 flex:1 1 auto ,则可简写为: flex:auto
2. 如果写 flex:1 1 0 ,则可简写为: flex:1
3. 如果写 flex:0 0 auto ,则可简写为:flex:none
4. 如果写 flex:0 1 auto ,则可简写为: flex:0 auto —— 即 flex 初始值。

12. 项目排序

  • order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

13. 单独对齐

  • 通过align-self 属性,可以单独调整某个伸缩项目的对齐方式
  • 默认值为 auto,表示继承父元素的 align-items 属性。

16. 响应式布局(媒体查询)

1.1 媒体类型

在这里插入图片描述
完整列表请参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

1.2 媒体特性

在这里插入图片描述

1.3 运算符

在这里插入图片描述

1.4 常用阈值

在实际开发中,会将屏幕划分成几个区间,例如:

在这里插入图片描述

1.5 结合外部样式的用法

用法一:

<link rel="stylesheet" media="具体的媒体查询" href="mystylesheet.css">

用法二:

@media screen and (max-width:768px) {/*CSS-Code;*/}
@media screen and (min-width:768px) and (max-width:1200px) {/*CSS-Code;*/}

17. BFC

1. 什么是BFC

  • W3C 上对 BFC 的定义:
    在这里插入图片描述
  • MDN 上对 BFC 的描述:
    在这里插入图片描述
  • 更加通俗的描述:
    1. BFC 是 Block Formatting Context (块级格式上下文),可以理解成元素的一个“特异功能”。
    2. 该 “特异功能”,在默认的情况下处于关闭状态;当元素满足了某些条件后,该“特异功能”被激活。
    3. 所谓激活“特异功能”,专业点说就是:该元素创建了 BFC (又称:开启了 BFC )。

2. 开启了BFC能解决什么问题

  • 元素开启BFC 后,其子元素不会再产生margin 塌陷问题。
  • 元素开启BFC 后,自己不会被其他浮动元素所覆盖。
  • 元素开启BFC 后,就算其子元素浮动,元素自身高度也不会塌陷。

3. 如何开启BFC

  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格:table 、thead 、tbody 、tfoot 、th 、td、tr、caption
  • overflow 的值不为 visible 的块元素
  • 伸缩项目
  • 多列容器
  • column-span 为 all 的元素(即使该元素没有包裹在多列容器中)
  • display 的值,设置为flow-root(会变成块级元素)

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

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

相关文章

Maven依赖冲突解决

Maven项目运行过程中&#xff0c;如果报以下错误&#xff0c; 极有可能是依赖冲突造成的。 Caused by:java.lang.NoSuchMethodError Caused by: java.lang.ClassNotFoundException 依赖冲突原理 依赖冲突指的就是我们在引入不同的依赖时&#xff0c;不同的依赖又引入了相同…

如何动态往Spring容器注册/移除bean?

几个关键点需要知道 本文不谈原理&#xff0c;直接上实战。 几个关键点&#xff1a;如何拿到Spring上下文来创建bean或移除bean&#xff1f;如何准备构建bean所需的BeanDefinition&#xff1f; 第一问&#xff1a;可注入bean工厂org.springframework.beans.factory.support.…

2024年150道高频Java面试题(二十)

39. 说一下 HashMap 的实现原理&#xff1f; HashMap 是 Java 中使用非常普遍的一种基于散列的映射数据结构&#xff0c;主要用于存储键值对。它允许使用任何非空对象作为键和值&#xff0c;主要实现原理如下&#xff1a; 数组 链表 红黑树&#xff1a;HashMap 内部主要由一…

【leetcode C++】滑动窗口

1. LCR 008. 长度最小的子数组 题目 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 题目…

CentOS7.x离线安装MySQL8

CentOS7.x离线安装MySQL8 1. 准备阶段 # 进入主目录 cd /env/# 创建用户与组 groupadd mysql useradd -r -g mysql -s /bin/false mysql# 下载安装文件 wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.12-linux-glibc2.12-x86_64.tar.xz# 解压并创建相关目录…

2024年阿里云服务器租用价格表_1个月一年3年5年和1小时费.

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…

“梦该醒了,少年”

顺序表 1、数据结构相关概念2、顺序表2.1、顺序表的概念及结构2.2、顺序表分类2.3、动态顺序表的实现 3、ps:源码 1、数据结构相关概念 数据结构是由“数据”和“结构”两词组合⽽来。 什么是数据&#xff1f; 常⻅的数值1、2、3、4…、教务系统⾥保存的⽤⼾信息&#xff08…

将 Elasticsearch 向量数据库引入到数据上的 Azure OpenAI 服务(预览)

作者&#xff1a;来自 Elastic Aditya Tripathi Microsoft 和 Elastic 很高兴地宣布&#xff0c;全球下载次数最多的向量数据库 Elasticsearch 是公共预览版中 Azure OpenAI Service On Your Data 官方支持的向量存储和检索增强搜索技术。 这项突破性的功能使你能够利用 GPT-4 …

docker-compose运行springinitializr用来创建springboot2

前言 spring initializr官方的地址是: https://start.spring.io/ &#xff0c;这是一个用来创建springboot脚手架的一个工具&#xff0c;但是目前这个工具已经更新到springboot3&#xff0c;而我还没学springboot3&#xff0c;目前还想继续创建springboot2&#xff0c;我就想能…

vue处理后端返回的日志

vue处理后端返回的日志&#xff0c;并保持日志内容最新&#xff08;滚动到最新内容&#xff09; 1、后端返回的日志格式如下所示&#xff0c;该如何处理成正常的文本换行 2、在获取日志的接口中做如下处理&#xff0c;把返回的/n替换成换行标签&#xff0c;并根据任务状态判断…

在Windows的Docker上部署Mysql服务

在我们做一些和数据库相关的测试时&#xff0c;往往需要快速部署一个数据库作为数据源。如果开发环境是Windows&#xff0c;且开发的代码不依赖于系统&#xff0c;即不用在linux上做开发&#xff0c;则可以将全套环境都部署在Windows上。 本地安装数据库会污染操作系统环境&…

算法设计与分析实验报告python实现(串匹配问题、采用分治法求解最大连续子序列和问题、用分治策略求众数问题、最近点对问题)

一、 实验目的 1&#xff0e;加深学生对算法设计方法的基本思想、基本步骤、基本方法的理解与掌握&#xff1b; 2&#xff0e;提高学生利用课堂所学知识解决实际问题的能力&#xff1b; 3&#xff0e;提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 1、串匹配问…

Vue2电商前台项目(一):项目前的初始化及搭建

一、项目初始化 创建项目&#xff1a;sudo vue create app 1.项目配置 &#xff08;1&#xff09;浏览器自动打开 在package.json文件中&#xff0c;serve后面加上 --open "scripts": {"serve": "vue-cli-service serve --open","buil…

Android compose 使用指纹验证

基于compose进行指纹验证 点击按钮进行验证 Button(onClick {var passed falseval biometic BiometricPrompt.Builder(applicationContext).setTitle("使用指纹解锁App").setSubtitle("证明你是手机的主人").setNegativeButton("取消验证",…

JAVA 中 queue.add()和queue.offer()的区别

JAVA 中 queue.add()和queue.offer()的区别 queue.add()和queue.offer()都是向队列中插入元素的方法,但它们在队列已满时的行为有所不同。 queue.add() 如果队列未满,则将指定的元素插入到队列的尾部。 如果队列已满,则抛出IllegalStateException异常,也就是说,此方法不允许插…

Linux常见命令简介

Linux运行级别 六种运行级别&#xff1a; 0、关机 1、单用户&#xff08;可用来找回密码&#xff09; 2、多用户无网络 3、多用户有网络&#xff08;多用于工作环境&#xff09; 4、预留 5、图形界面&#xff08;多用于学习环境&#xff09; 6、重…

Qt5.14.2 P2P聊天系统开发实战,跨平台通话零距离

在日益发达的互联网时代&#xff0c;即时通讯已经成为人与人之间沟通的重要渠道之一。无论是办公场合还是生活闲聊&#xff0c;一款优秀的聊天软件都能为我们提供高效、便捷的沟通体验。今天&#xff0c;我们就来一探Qt5构建P2P聊天系统的奥秘&#xff0c;亲手打造一款跨平台的…

【leetcode面试经典150题】4.删除有序数组中的重复项 II(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…

2024.3.14力扣每日一题——合并后数组中的最大元素

2024.3.14 题目来源我的题解方法一 贪心倒序遍历 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2789 我的题解 方法一 贪心倒序遍历 个人思想&#xff1a;要想满足条件的基础上得到最大值&#xff0c;则需要贪心倒序遍历&#xff0c;从右往左只要满足条件就相加&#…

我与C++的爱恋:类与对象(一)

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;我与C的爱恋 ​C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&…