CSS3 多媒体查询、网格布局

一、CSS3多媒体查询:

CSS3 多媒体查询继承了CSS2多媒体类型的所有思想,取代了查找设备的类型。CSS3根据设置自适应显示。

多媒体查询语法:

@media not|only mediatype and (expressions)

{

CSS 代码...;

}

not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

all: 所有设备,这个应该经常看到。

CSS3多媒体类型:

二、CSS3网格布局:

网格式一组相交的水平线和垂直线,它定义了网格的列和行。CSS提供了一个基于网格的布局系统,带有行和列。

网格布局有一个父元素以及一个或多个子元素组成。

当元素将display属性设置为grid或inline-grid后,它就变成一个网格容器。这个元素的所有直系子元素将成为网格元素。示例:

<style>

.grid-container {

display: inline-grid;

grid-template-columns: auto auto auto;

background-color: #2196F3;

padding: 10px;

}

.grid-item {

background-color: rgba(255, 255, 255, 0.8);

border: 1px solid rgba(0, 0, 0, 0.8);

padding: 20px;

font-size: 30px;

text-align: center;

}

</style>

<h1>display: inline-grid</h1>

通过grid-template-columns和grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。示例:

<style>

.grid-container {

display: grid;

grid-template-columns: auto auto auto auto;

grid-gap: 10px;

background-color: #2196F3;

padding: 10px;

}

.grid-container > div {

background-color: rgba(255, 255, 255, 0.8);

text-align: center;

padding: 20px 0;

font-size: 30px;

}

</style>

fr单位:轨道可以使用任何长度单位来定义,fr单位用来创建网格轨道。一个fr单位代表网格容器中科用空间的一个等份。示例:

一个网格单元是在一个网格元素中最小的单位。

网格元素可以向行或者列的方向扩展单元,创建网格区域。网格区域的形状应该是一个矩形。

网格元素的垂直线方向称为列,网格元素的水平方向称为行,两个网格单元之间的网格横向或者纵向间距称为网格间距,通过grid-column-gap、grid-row-gap、grid-gap来调整间隙大小。

CSS网格属性:

|------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------|
| 属性 | 描述 |
| ++column-gap++ | 指定列之间的间隙 |
| ++gap++ | row-gap 和 column-gap 的简写属性 |
| ++grid++ | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性 |
| ++grid-area++ | 指定网格元素的名称,或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性 |
| ++grid-auto-columns++ | 指的默认的列尺寸 |
| ++grid-auto-flow++ | 指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。 |
| ++grid-auto-rows++ | 指的默认的行尺寸 |
| ++grid-column++ | grid-column-start 和 grid-column-end 的简写属性 |
| ++grid-column-end++ | 指定网格元素列的结束位置 |
| ++grid-column-gap++ | 指定网格元素的间距大小 |
| ++grid-column-start++ | 指定网格元素列的开始位置 |
| ++grid-gap++ | grid-row-gap 和 grid-column-gap 的简写属性 |
| ++grid-row++ | grid-row-start 和 grid-row-end 的简写属性 |
| ++grid-row-end++ | 指定网格元素行的结束位置 |
| ++grid-row-gap++ | 指定网格元素的行间距 |
| ++grid-row-start++ | 指定网格元素行的开始位置 |
| ++grid-template++ | grid-template-rows, grid-template-columns 和 grid-areas 的简写属性 |
| ++grid-template-areas++ | 指定如何显示行和列,使用命名的网格元素 |
| ++grid-template-columns++ | 指定列的大小,以及网格布局中设置列的数量 |
| ++grid-template-rows++ | 指定网格布局中行的大小 |
| ++row-gap++ | 指定两个行之间的间距erer |

相关推荐
开心工作室_kaic13 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿32 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript