CSS3新增的语法（四）

最新推荐文章于 2024-11-05 15:31:54 发布
最新推荐文章于 2024-11-05 15:31:54 发布
阅读量1.2k 收藏 27
点赞数 26
文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mwm2378/article/details/137355471
版权

CSS3新增的语法（四）【布局】

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(会变成块级元素)
在下~厉飞雨
关注
css3的新增的选择器
ovocc的博客
10-21 1561
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.回顾一下旧的选择器 标签选择器 即是html标签名作为选择器 举例： <p>标签选择器</p> p { color: yellow; } 这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器 类选择器 用class属性调用class类 举例： <p class="one">标签选择器</p> .one { .
css3新语法,CSS3新特性
weixin_42512483的博客
08-03 346
2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码3.动画 animation：动画名称，一个周期花费时间，运动曲线(默认ease)，动画延迟(默认0)，播放次数(默认1)，是否反向播放动画(默认normal)，是否暂停动画(默认running)复制代码4.形状转换 transform:适用于2D或3D转换的元素rotate(30...
css3新语法,CSS3 新特性
weixin_34002071的博客
08-03 198
transition - 过渡通过过渡transition，可以实现简单的动画交互效果。// 语法transition: property duration timing-function delay;复制代码属性值和描述实例-过渡从初始状态过渡到终止状态时速度由快到慢，运动时间2s，1s后开始执行。div{width:80px;height:80px;background:rgb(18, 18...
css的新玩法，语法与规则
青烟小生的博客
07-17 199
css的新玩法，语法与规则 !important 语法： Selector{sRule!important;} 说明： 提升指定样式规则的应用优先权。 IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码： 示例代码： div{color:#f00!important;color:#000;} 在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
css的语法规则
qq_43198727的博客
10-28 2127
1、1css 层叠样式表 或者级联样式表。 1、2 CSS的主要作用 它主要用来给HTML网页来设置外观或者样式。 外观或者样式:HTML网页中的文字的大小、颜色、字体，网页的背景颜色、背景图案！ 1、3 书写CSS的语法规则 H1 {clolor:red;font-size:14px;} 选择器 属性 声明 1、CSS代码是由选择器和一对括号组成。 2、大括号里面是由一条一条的声明语句组成...
CSS3新增的语法（二）
mwm2378的博客
03-31 877
CSS3新增的语法（二）
CSS3新增属性
2302_76678927的博客
06-05 1396
1.1 resize调整盒子大小：resize属性可以控制是否允许用户调节元素大小none ： 不允许调整元素大小both ： 用户可以调节元素的宽高horizontal ： 用户可以调节元素宽度vertical ：用户可以调节元素高度1.2 box-shadow盒子阴影使用box-shadow属性为盒子添加阴影语法：值h-shadow ： 水平阴影的位置，必须填写，可以为负值v-shadow ：垂直阴影的位置，必须填写，可以为负值。
CSS3新增特性（一）
m0_48670609的博客
04-22 1293
CSS3新增内容，包括CSS3新增选择器：子级选择器、兄弟选择器、结构伪类选择器、伪元素选择器、属性选择器；CSS3盒模型；CSS3新增属性：边框圆角、文字阴影、盒子阴影、过渡属性。
CSS3新增的语法（一）
mwm2378的博客
03-30 695
CSS3新增的语法（一）
editplus html5 css3 JQuery 语法文件html5 css3.0 jQueryAPI手册
07-15
EditPlus是一款功能强大的文本编辑器，支持多种编程语言，包括HTML5、CSS3和JavaScript，因此它也是开发人员编写这些语法的重要工具。 **HTML5**是超文本标记语言的第五个版本，它的出现极大地扩展了网页内容的表达...
css3新增颜色表示方式分享
12-13
一、CSS1&2颜色表示方式(W3C标准) 1、Color name 颜色名称方式（用颜色关键字表示对应的颜色。）例如:red(红色)、blue(蓝色)、pink(粉色)优点：方便快捷而且特定颜色比较准确缺点：表示颜色数量有限。不支持透明...
H5C3进阶—HTML5+CSS3新增标签
luolin_forest的博客
06-09 386
CSS3 2D动画
css3 新增的文本属性
tumi
05-23 2191
1、word-wrap  允许对长的不可分割的单词进行分割并换行到下一行2、word-break   规定非中日韩文本的换行规则3、text-wrap   规定文本的换行规则4、text-shadow   向文本添加阴影5、text-overflow   规定当文本溢出包含元素时发生的事情6、text-outline   规定文本的轮廓7、text-justify    规定当 text-alig...
css3新语法,CSS3新特性概述
weixin_30240765的博客
08-03 333
注意：由于CSS3中的部分内容尚未完全定稿，所以本文的部分可能会随时更新。缘起W3C的官方文档于2011/9/29更新了Selectors Level 3。时至今日，已经过去了将近4年的时间，各家浏览器厂商对CSS3的支持程度也越来越高。按理说作为一名前端从业人员不应该等某项新技术普遍被支持后才去学习，但是由于一些个人的原因(半路出家的FE？懒惰？没时间？)，我还尚未对CSS3新增的新特性进行过系...
css边框修饰
weixin_74261199的博客
10-30 823
② 分别设置边框四个方向的宽度。② 分别设置四个方向的边框颜色。② 分别设置四个方向的圆角边框。属性设置四个方向的边框颜色。属性整体设置四个圆角。整体设置上下左右边框。
CSS基础知识六（浮动的高度塌陷问题及解决方案）
2301_80208072的博客
10-30 685
浮动的高度塌陷问题及解决方案，小白必看！
巨好看的登录注册界面源码
bjzhang75的博客
10-31 3363
巨好看的登录注册界面源码
Webserver(3.3)生产者消费者模型
最新发布
学习历程记录和分享
11-05 195
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 304
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值