关于多列布局、CSS3媒体查询、弹性盒、calc函数、transition过渡

最新推荐文章于 2023-01-31 23:42:31 发布

爱敲代码的狼仔

最新推荐文章于 2023-01-31 23:42:31 发布

阅读量332

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_48469083/article/details/119254540

版权

多列布局

CSS3 支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

column-width属性

作用：规定栏目的宽度。
取值
- number 指定栏目宽度。
- auto 自动，由其他属性决定，如 "column-count"。

column-count属性

作用：指定栏目的个数
取值
- auto 由其他属性决定列数，比如 "column-width"。
- 数字表示栏目个数。

column-gap 属性

作用：规定栏目之间的间隔。
取值
- normal 默认是 1em。
- 长度值（px,em）指定的长度值

column-rule 属性

作用：设置栏目边框宽度、样式和颜色规则。
- column-rule-width边框宽度
- column-rule-style 边框样式
  - solid dashed dotted double
- column-rule-color边框颜色
注：column-rule为column-rule-width ，column-rule-style ，column-rule-color;的简写属性

column-span

设置栏目的跨栏合并
- 默认值1
- all 所有

兼容

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

CSS3 媒体查询

概述

media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。 media query(多媒体查询)是对media type的一种增强，是CSS 3的重要内容之一

多媒体查询由【多种媒体】组成，可以包含一个或多个【表达式】，根据条件是否成立文档会在匹配的设备上显示指定样式效果

语法

样式表内引入媒体查询

语法：

@media 媒体类型 and (媒体特性表达式){
   //css代码
 }

媒体类型(media type)

all 所有设备；
screen 用于电脑屏幕(大屏1200以上，992-1200中屏)，平板电脑(768-992之间)，智能手机（768px以下）等；

————————以上较为常用———————
print 用于打印机和打印预览；
speech 应用于屏幕阅读器等发声设备

设备特性(media feature)

width、height视口宽度、高度；（可以配合min,max前缀）
device-width、device-heigh设备宽度、高度（可以配合min,max前缀）
- min-最小值大于等于指定值
- max-最大值小于等于指定值
orientation屏幕朝向
- 横向 landscape
- 竖向 portrait
  - 在PC端当窗口的高度值大于等于宽度时该特性值为portrait否则为landscape

关键字（操作符）

and (与、和)，用于合并媒体类型或多个媒体特性

@media screen and (min-width:600px) and (max-width:1000px){
    .box{
       column-count:3;
    }
 }

not : not 非，不是，用于排除掉某些特定的设备

@media not/only  媒体类型  and (媒体特性表达式) {

}

only: 仅仅、只有，用来指定某种特别的媒体类型

例：

@media screen and (min-width:1000px){
    /* 大于等于1000px */
    .box{
    column-count:4;
    }
}

@media screen and (min-width:600px) and (max-width:1000px){
    /* 大于等于600px,小于等于1000px */
    .box{
    column-count:3;
    }
}

@media screen and (max-width:600px){  
    /* 小于等于600 */
    .box{
    column-count:2;
    }
}

使用link标签的media属性进行媒体查询

作用：针对不同的媒体类型或特性引入指定的样式表

语法：

<link rel="stylesheet" media="媒体类型 and （媒体特性表达式）" href="mystylesheet.css">

例：

<link rel="stylesheet" href="gt1000.css" media="screen and (min-width:1000px)">
<link rel="stylesheet" href="gt600.css" 
        media="screen and (min-width:600px) and (max-width:1000px)">
 <link rel="stylesheet" href="lt600.css"  media="screen and (max-width:600px)">

兼容

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

CSS3 弹性盒

概述

弹性盒子是 CSS3 的一种新的布局模式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。（使页面元素有能力适应不同的屏幕大小）

容器属性

设置为弹性盒

display:flex 块级弹性盒
display:inline-flex 行级弹性盒（相当于行级块）

flex-direction

作用：描述弹性盒主轴方向（项目的排列方向）
取值
- row：横向【默认从左向右】
- row-reverse：与row反向
- column：纵向排列（默认从上向下）
- column-reverse：与column反向

justify-content

作用：项目沿主轴方向的对齐方式
取值
- flex-start：起始点对齐——弹性项目向行头紧挨着填充。这个是默认值。
- flex-end：终点对齐——弹性项目向行尾紧挨着填充。
- center：居中对齐——弹性项目居中紧挨着填充。
- space-between：容器的剩余空间在项目之间
- space-around：项目两侧拥有相等的剩余空间，项目之间是项目与容器之间的2倍
- space-evenly:项目与容器，项目与项目之间拥有相等的空间

注

如果Flex容器没有额外的剩余空间，或者说剩余空间为负值时， justify-content 的值表现形式：

flex-start 会让项目在容器主轴结束点处溢出
flex-end 会让项目在容器主轴起点处溢出
【center 会让项目在容器两端溢出】
space-between 和 flex-start 相同
space-around、space-evenly  和 center 相同

align-items

作用：设置侧轴方向的对齐方式
取值
- flex-start：侧轴起始位置对齐
- flex-end：侧轴末端位置对齐
- center：侧轴居中对齐
- baseline：基线对齐。
- stretch：拉伸占满侧轴——指定项目在侧轴方向的大小为'auto'时有效

flex-wrap

作用：指定弹性盒子的子元素换行方式
取值
- nowrap -不换【默认值】
- wrap 换行（起始点在上）
- wrap-reverse 与 wrap反向（起始点在下）

弹性盒项目属性

order:

作用：用数值来定义项目的排列次序
- 数值越小越靠前
- 数值相等，由结构先后顺序决定
- 默认值0
- 可以为负值。

align-self 属性

用于设置项目自身在侧轴上的对齐方式

取值：

auto：自动——为元素的父元素的'align-items'值，
flex-start：起始位置对齐
flex-end：终点位置对齐
center：居中对齐
baseline：基线对齐。
stretch：拉伸占满侧轴——侧轴大小为auto时有效

注：
- center：
如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度
- baseline
 如弹性盒子元素的行内轴与侧轴为同一条（即字号行高一致时），则该值与'flex-start'等效

flex-grow

作用：增长比率（放大）
取值
- 默认值是 0，表示即使用剩余空间也不扩展
- 不带单位的数值——表示剩余空间的份数
注意：当容器有剩余空间时有效

flex-basis

定义弹性盒项目基准值
取值
- auto 默认值
- 长度值设置指定的宽度百分比值代表父元素的百分比
注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高

flex-shrink

定义项目的收缩比率(缩小)
默认值为1，当容器空间不足时默认收缩
0 表示即使容器空间不足也不收缩
注：容器空间不足时才有效

flex

作用：用于指定弹性子元素如何分配空间。 flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

简写flex

flex为以上属性的简写
取值
- 默认值为 0 1 auto
- none 与 0 0 auto 相同
- auto 与 1 1 auto 相同

兼容性

应用技巧

实现盒子水平垂直居中
- 一种使用定位 top 和 left 50%, marin-left 和margin-top -自己元素的宽高一半
- 二种定位四个方向都为0 margin auto
大图居中

tencent.com

calc函数

概述：

calc 是英文单词 calculate( 计算 ) 的缩写，是 CSS3 的一个新增的功能

calc() 用于动态计算长度值。

语法：

.box{ width: calc(100% - 100px);

说明

任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则—（先乘除后加减，小括号提升运算优先级）
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

transition过渡

通过 CSS3,transition可以在不使用 Flash 动画或 JavaScript 的情况下，为元素从一种样式变换为另一种样式时添加效果。过渡效果通常在用户将鼠标指针浮动到元素上时发生。

transition属性是一个简写属性，用于设置以下四个过渡属性

transition-property 规定设置过渡效果的 CSS 属性的名称。

none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果【默认值】
属性名用于定义应用过渡效果的 CSS 属性名称列表，
- 多个属性名以逗号分隔

transition-duration规定过渡持续的时间（以秒或毫秒计）

0 默认值表示没有过渡效果
秒（s）、毫秒（ms） [1s = 1000ms]
- 多个值以逗号分隔

transition-timing-function 规定速度效果的速度曲线(过渡效果随着时间来改变其速度)

linear 规定以相同速度开始至结束的过渡效果——匀速
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 ——缓动【默认值】
ease-in 规定以慢速开始的过渡效果。——加速
ease-out 规定以慢速结束的过渡效果 —— 减速
ease-in-out 规定以慢速开始和结束的过渡效果 ——先加速后减速
- 多个值以逗号分隔

transition-delay 定义过渡效果延迟时间

规定在过渡效果开始之前需要等待的时间，以秒（s）或毫秒（ms）计
默认值 0 表示不延迟
- 多个值以逗号分隔

简写

transition 属性是一个简写属性，用于设置四个过渡属性：

语法：transition: 参与过渡的属性（省略不写all） 过渡持续的时间 时间函数（可以省略） 过渡延迟的时间（也可以省略不写）;

属性值之间空格隔开
- 顺序：靠后的时间为延迟时间
多组值逗号分隔

例：
.box{
	transition: width 1s liear 1s; 
}
.box2{
	transition: width 1s liear 1s,height 1s ease-in 1s; 
}