基础CSS
绝对单位与相对单位
单位长度的类型可以分成 2 种:相对和绝对。
绝对单位与长度的物理单位相关。 例如,in
和 mm
分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值,不过不同屏幕的分辨率会存在差异,这就可能会造成误差。
相对单位长度,比如 em
和 rem
,它们的实际值会依赖其他长度的值而决定。 比如 em
的大小基于元素字体的字体大小。 如果使用它来设置 font-size
值,它的值会跟随父元素的 font-size
值来改变。
Note: 有些单位长度选项是相对视窗大小来改变值的, 这种设定符合响应式网页设计的原则。
样式中的优先级
Important的优先级最高(!important),内联样式>ID选择器>Class选择器的优先级>继承样式。这个还挺重要的,有的时候样式会因为优先级被覆盖。
自定义的 CSS 变量
为创建一个 CSS 变量,你只需要在变量名前添加两个连字符号,并为其赋值即可,例子如下:
<style>
.类名{
--penguin-skin: gray;//自定义变量
}
</style>
创建变量后,CSS 属性可以通过调用变量名来使用它对应的值。
background: var(--penguin-skin);
注意: 备用值不是用于增强浏览器的兼容性,它也不适用于 IE 浏览器。 相反,它是用来让浏览器在找不到你的变量时可以显示一种颜色。
background: var(--penguin-skin, black);
锚链接
一个写在href里,一个写在id里
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
关于表单
我们可以只通过 HTML 来实现发送数据给服务器的表单, 只需要给 form 元素添加 action 属性即可。method可以控制是get还是post。
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>
<fieldset> 标签用于在表单中分组相关元素。<fieldset> 标签会在相关元素周围绘制一个框。
pattern是正则表达式
提交带有选择菜单的select, 每一个 option 需要指定一个 value 属性。 如果没有指定,向服务器默认提交的是 option 内的文本。
img有个属性object-fit,属性值:object-fit: fill / contain / cover / none / scale-down;
fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致,短的那条等比缩放,可能会有留白。
cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致,长的那条等比缩放。可能会有部分区域不可见。
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。
textarea 可以 添加 rows 和 cols 属性,来指定它的初始大小。
<form action="/demo/action_page.php">
<fieldset>
<legend>个人信息:</legend>
<label for="fname">名字:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="new-password">Create a New Password: <input type="password" minlength="8" name="" id="new-password" pattern="[a-z0-5]{8,}"></label>
</fieldset>
</form>
gap 属性以及 row-gap 和 column-gap 子属性用来设置 flex、grid 和多列布局的间隙。 可以将此属性应用到容器元素。
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
:first-of-type 表示一组兄弟元素中其类型的第一个元素
关于单选和多选
要在label里面写单选(radio)和多选(checkbox),id必须和自身的label的for相对应,同一组的多选和同一组单选name值必须相同,要想设为默认,则添加checked
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
媒体查询
/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
.example {background: red;}
}
/* 小设备 (平板电脑和大型手机,600 像素及以上) */
@media only screen and (min-width: 600px) {
.example {background: green;}
}
/* 中型设备(平板电脑,768 像素及以上) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
}
/* 大型设备(笔记本电脑/台式机,992 像素及以上) */
@media only screen and (min-width: 992px) {
.example {background: orange;}
}
/* 超大型设备(大型笔记本电脑和台式机,1200 像素及以上) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
应用视觉设计
使用 text-align 属性创建视觉平衡
text-align: justify;
可以让除最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘。
使用 hr 标签创建水平线
可以用 hr
标签来创建一条宽度撑满父元素的水平线。 这种水平分割线一般用来表示内容主题的改变,或在视觉上将文档分隔成几个部分。
给卡片元素添加 box-shadow
box-shadow
属性的阴影依次由下面这些值描述:
offset-x
阴影的水平偏移量;offset-y
阴影的垂直偏移量;blur-radius
模糊半径;spread-radius
阴影扩展半径;color
其中 blur-radius
和 spread-radius
是可选的。
可以通过逗号分隔每个 box-shadow
元素的属性来添加多个 box-shadow。
它使用了透明度较高的黑色作为阴影:(这是个好看的阴影样式)
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
元素的透明度
CSS 里的 opacity
属性用来设置元素的透明度。
属性值为 1 代表完全不透明。
属性值为 0.5 代表半透明。
属性值为 0 代表完全透明。
透明度会应用到元素内的所有内容,不论是图片,还是文本,或是背景色。
使用 text-transform 属性给文本添加大写效果
CSS 里的 text-transform
属性可以改变英文字母的大小写。这个用的很少,但也算一个很好用的属性,记下来也无妨。
值 | 结果 |
| "transform me" |
| "TRANSFORM ME" |
| "Transform Me" |
元素的相对位置以及行内元素和块级元素
块级元素:<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>等
行内元素:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等
当元素的定位设置为 relative
时,它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。
把元素的位置设置成相对,并不会改变该元素在布局中所占的位置,也不会对其它元素的位置产生影响。
绝对定位的参照物是元素的父元素
绝对定位会将元素从当前的文档流里面移除,周围的元素会忽略它。 绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则(默认是 position: relative;
),浏览器会继续寻找直到默认的 body
标签。
固定定位的参照物是浏览器的窗口
fixed
定位,它是一种特殊的绝对(absolute)定位,将元素相对于浏览器窗口定位。 它也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在,这样也许需要调整其他位置的布局。
但 fixed
和 absolute
的最明显的区别在于,前者定位的元素不会随着屏幕滚动而移动。
创建一个 CSS 线性渐变
background
里的 linear-gradient()
实现线性渐变, 以下是它的语法:
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
第一个参数指定了颜色过渡的方向——它的值是角度,90deg
表示垂直渐变(从左到右),45deg
表示沿对角线渐变(从左下方到右上方)。 其他参数指定了渐变颜色的顺序:(这个实例还行,挺好看的渐变背景色)
还可以把角度换成to right/left/top/bottom
background: linear-gradient(35deg, red, yellow, rgb(204, 204, 255));
CSS Transform
CSS 属性 transform
里面的 scale()
函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍:
p {
transform: scale(2);
}
下面的代码沿着 X 轴倾斜段落元素 -32 度。
p {
transform: skewX(-32deg);
}
伪元素 ::before
和 ::after
(清理浮动还有实现分割线效果还有显示网址效果)
伪元素 ::before
和 ::after
。 伪元素可以在所选元素之前或之后添加一些内容。::before
和 ::after
必须配合 content
来使用。 这个属性通常用来给元素添加内容诸如图片或者文字。content
值可以是空字符串。伪元素的display默认为inline,可以自己改 。我感觉这个有的时候还挺好用的,现在用的不多,可以写一些练练手。
分割线的实现代码如下:
<style>
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
清理浮动
通过attr()属性调用当元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。
a::after{
content:"(" attr(href) ")";
}
p:after{
content:attr(class);
}
<p><a href="https://wx.qq.com/">微信</a></p>
<p class="hello"></p>
CSS 的关键帧和动画
animation 属性控制动画的外观,@keyframes
规则控制动画中各阶段的变化。
animation-name
用来设置动画的名称,也就是我们稍后要在 @keyframes
里用到的名称。
animation-duration
设置动画所花费的时间。
#anim {
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue; //去
}
50% {
background-color: red; //中间(达到能去的最远点)
}
100% {
background-color: yellow;//回
}
}
注意我们不只可以设置开始和结束,而是从 0% 到 100% 间的任意位置都可以设置。
animation-fill-mode
指定了在动画结束时元素的样式: 你可以这样设置:这样使得它会一直保持最后的状态
animation-fill-mode: forwards;
animation-iteration-count
如果想让动画一直运行,可以把值设置成 infinite
。
在 如果要描述的动画是一辆车在指定时间内(animation-duration
)从 A 运动到 B,那么 animation-timing-function
表述的就是车在运动中的加速和减速等过程。默认值是 ease
,动画以低速开始,然后加快,在结束前变慢。 其它常用的值包括 ease-out
:动画以高速开始,以低速结束;ease-in
,动画以低速开始,以高速结束;linear
:动画从头到尾的速度是相同的。
应用无障碍
视觉障碍用户-alt
为视觉障碍用户添加替代图像的文本-img 标签的 alt 属性。搜索引擎也通过它来理解图片内容,并将其加入到搜索结果中。
使用 figure 元素提高图表的可访问性,figcaption 包含在 figure 标签中,figcaption里面是解释图片的,在figure里面的会离边框差不多20px,不会顶格。
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo">
<br>
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
</figure>
tabindex 将键盘焦点添加到元素中
tabindex 属性值为负整数(通常为 -1)的标签也是可以获得焦点的,只是不可以通过键盘操作(如 tab 键)来获得焦点,为0的时候可以通过键盘,给div p之类的加上点击的话会高亮,还可以指定元素的 tab 键焦点顺序, 将它的值设置为大于等于 1 的整数,就可以实现这个功能。
<div tabindex="0">I need keyboard focus!</div>
使用 audio 元素提高音频内容的可访问性
audio
标签支持 controls
属性, 用于显示浏览器默认播放、停止和其他控制,以及支持键盘功能。 这是一个布尔值属性,意味着它不需要一个值,它在标签上存在即开启设置。loop="loops"表示可以无限次循环播放
<audio id="meowClip" controls>
<source src="巴拉巴拉.mp3" type="audio/mpeg">
添加可访问的日期选择器
<input type="date" id="input1" name="input1">
使用自定义 CSS 让元素仅对屏幕阅读器可见
我们想在页面中添加一些只对屏幕阅读器可见的内容,可以用 CSS 来实现。 当信息为视觉格式(例如图表)时,但屏幕阅读器用户需要备用文稿(例如表格)来访问数据,在这种情况下, 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。
举个例子:
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航
HTML 提供 accesskey
属性,用于指定激活元素或者使元素获得焦点的快捷键。 添加 accesskey
属性可以让使用键盘的用户更高效率地导航。
HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。
<button accesskey="b">Important Button</button>
响应式网页设计原则
媒体查询
上面说过。
使图片自适应设备尺寸
用 CSS 来让图片自适应其实很简单。 你只需要给图片添加这些属性:
img {
max-width: 100%;
height: auto;
}
设置 max-width
值为 100%
可确保图片不超出父容器的范围;设置 height
属性为 auto
可以保持图片的原始宽高比。
针对高分辨率屏幕应使用视网膜图片
让图像正确出现在高分辨率显示器(例如 MacBook Pros “Revistina display”)上的最简单方式, 是定义它们的 width
和 height
值为原始值的一半。
使排版根据设备尺寸自如响应
除了使用 em
或 px
设置文本大小,你还可以用视窗单位来做响应式排版。
四个不同的视窗单位分别是:
vw
:如10vw
的意思是视窗宽度的 10%。vh:
如3vh
的意思是视窗高度的 3%。vmin:
如70vmin
的意思是视窗的高度和宽度中较小一个的 70%。vmax:
如100vmax
的意思是视窗的高度和宽度中较大一个的 100%。
CSS弹性盒子(flex)
使用 flex-direction 属性创建一个行
给元素添加 display: flex
属性可以让它变成 flex 容器, 然后可以让元素的项目排列成行或列。
只要给父元素添加 flex-direction
属性,并把属性值设置为 row 或 column,即可横向排列或纵向排列它的所有子元素。flex-direction
的其他可选值还有 row-reverse
和 column-reverse
。
使用 justify-content 属性对齐元素
justify-content: center;
:即 flex 子元素在 flex 容器中居中排列。 其他选择包括:
flex-start
:从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边, 对于列是把项目移至顶部。 如未设置justify-content
的值,那么这就是默认值。flex-end
:从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边, 对于列是把项目移至底部。space-between
:项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如,在行中第一个项目会紧贴着容器左边,最后一个项目会紧贴着容器右边,然后其他项目均匀排布。space-around
:与space-between
相似,但头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。space-evenly
:头尾两个项目不会紧贴容器边缘,所有项目之间的空间均匀排布。
使用 align-items 属性对齐元素
align-items
属性与 justify-content
类似。 justify-content` 属性使 flex 子元素沿主轴排列。 行的主轴是水平线,列的主轴是垂直线。
Flex 容器中,与主轴垂直的叫做 cross axis(交叉轴)。 行的交叉轴是垂直的,列的交叉轴是水平的。
CSS 中的 align-items
属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说,定义的是元素的上下对齐方式; 对列来说,是定义元素的左右对齐方式。
align-items
的可选值包括:
flex-start
:从 flex 容器的起始位置开始对齐项目。 对行来说,把项目移至容器顶部; 对列来说,是把项目移至容器左边。flex-end
:从 flex 容器的终止位置开始对齐项目。 对行来说,把项目移至容器底部; 对列来说,把项目移至容器右边。center
:把项目居中放置。 对行来说,垂直居中(项目距离顶部和底部的距离相等); 对列来说,水平居中(项目距离左边和右边的距离相等)。stretch
:拉伸项目,填满 flex 容器。 例如,排成行的项目从容器顶部拉伸到底部。 如未设置align-items
的值,那么这就是默认值。baseline
:沿基线对齐。 基线是文本相关的概念,可以认为它是字母排列的下端基准线。
使用 flex-wrap 属性包裹一行或一列
使用 flex-wrap
属性可以使项目换行展示。 这意味着多出来的子元素会被移到新的行或列。 换行发生的断点由子元素和容器的大小决定。
nowrap
:默认值,不换行。wrap
:如果排列以行为基准,就将行从上往下排列;如果排列以列为基准,就将列从左往右排列。wrap-reverse
:如果排列以行为基准,就将行从下往上排列;如果排列以列为基准,就将列从右往左排列。
使用 flex-shrink 属性定义 flex 子元素的收缩规则
flex-shrink
属性。 使用之后,如果 flex 容器太小,则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时,所有子元素都会自动压缩。
子元素的 flex-shrink
接受数值作为属性值。 数值越大,则该元素与其他元素相比会被压缩得更厉害。 比如,一个项目的 flex-shrink
属性值为 1
,另一个项目的 flex-shrink
属性值为 3
,那么后者相比前者会受到 3
倍压缩。
使用 flex-grow 属性定义 flex 子元素的增长系数
如果一个项目的 flex-grow
属性值为 1
,另一个项目的 flex-grow
属性值为 3
,那么值为 3
的一个会较另一个扩大 3 倍。
使用 flex-basis 属性设置元素的初始大小
flex-basis
属性定义了在使用 CSS 的 flex-shrink
或 flex-grow
属性对元素进行调整前,元素的初始大小。
flex-basis
属性的单位与其他表示尺寸的属性的单位一致(px
、em
、%
等)。 如果值为 auto
,则项目的尺寸随内容调整。
使用 flex 短方法属性
flex-grow
、flex-shrink
和 flex-basis
属性可以在 flex
中一并设置。
例如,flex: 1 0 10px;
会把项目属性设为 flex-grow: 1;
、flex-shrink: 0;
以及 flex-basis: 10px;
。属性的默认设置是 flex: 0 1 auto;
。
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
display:flex;
background-color: dodgerblue;
flex:2 2 150px;
height: 200px;
}
#box-2 {
display:flex;
background-color: orangered;
flex:1 1 150px;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
在容器大于 300px 时,#box-1 扩大的空间会是 #box-2 扩大空间的两倍;在容器小于 300px 时,前者缩小的空间会是 #box-2 缩小空间的两倍。 300px 是两个盒子的 flex-basis 属性值之和。
用 order 属性重新排列子元素
这个属性接受数字作为参数,可以使用负数。
使用 align-self 属性
这个属性允许你调整单个子元素自己的对齐方式,而不会影响到全部子元素。
align-self
可设置的值与 align-items
的一样,并且它会覆盖 align-items
所设置的值。
CSS网格(grid布局)
创建第一个 CSS 网格
通过将属性 display
的值设为 grid
,HTML 元素就可以变为网格容器。
注意: 在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
使用 grid-template-columns 添加多列
在一个网格容器中使用 grid-template-columns
属性可以添加一些列
.container {
display: grid;
grid-template-columns: 50px 50px;
}
上面的代码会在网格容器中添加两列,宽度均为 50px。 grid-template-columns
属性值的个数表示网格的列数,每个值表示相应的列宽度。
使用 grid-template-rows 添加多行
使用 CSS 网格单位来更改列和行的大小
在 CSS 网格中,可以使用绝对单位(如 px
)或相对单位(如 em
)来定义行或列的大小。 下面的单位也可以使用:
fr
:设置列或行占剩余空间的比例,
auto
:设置列宽或行高自动等于它的内容的宽度或高度,
%
:将列或行调整为它的容器宽度或高度的百分比,:
grid-template-columns: auto 50px 10% 2fr 1fr;
这段代码添加了五个列。 第一列的宽与它的内容宽度相等;第二列宽 50px;第三列宽是它容器的 10%;最后两列,将剩余的宽度平均分成三份,第四列占两份,第五列占一份。
使用 grid-column-gap 创建多列之间的间距
grid-column-gap: 10px;
这会为我们创建的所有列之间都添加 10px 的空白间距。
使用 grid-row-gap 创建多行之间的间距
使用 grid-gap 为网格添加间距
grid-gap
只有一个值,那么这个值表示行与行之间、列与列之间的间距均为这个值。 如果有两个值,那么第一个值表示行间距,第二个值表示列间距。
使用 grid-column 来控制空间大小
网格中,假想的水平线和垂直线被称为线(lines)。 这些线在网格的左上角从 1 开始编号,垂直线向右、水平线向下累加计数。
可以使用 grid-column
属性加上网格线条的编号来定义网格项开始和结束的位置.
grid-column: 1 / 3;
这会让网格项从左侧第一条线开始到第三条线结束,占用两列。
使用 grid-row 来控制空间大小
和设置一个网格项占用多列类似,你也可以设置它占用多行。 你可以使用 grid-row
属性来定义一个网格项开始和结束的水平线。
使用 justify-self 水平对齐项目
你可以使用网格项的 justify-self
属性,设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下,这个属性的值是 stretch
,这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值:
start
:使内容在单元格左侧对齐,
center
:使内容在单元格居中对齐,
end
:使内容在单元格右侧对齐,
使用 align-self 垂直项目
我们可以对网格项使用 align-self
属性来实现
用 justify-items 水平对齐所有项目
可以对网格容器使用 justify-items
使它们一次性沿水平轴对齐。 这个属性能接受我们在之前学到的所有值作为属性值,但与之前不同的是,它会将网格中 所有 的网格项按所设置的方式对齐。
使用 align-items 垂直对齐所有项目
对网格容器使用 align-items
属性可以让网格中所有的网格项沿竖直方向对齐。
将网格划分为区域模板
你可以将网格中的一些单元格组合成一个区域(area),并为该区域指定一个自定义名称。 可以通过给容器加上 grid-template-areas
来实现:(这个是加在父类身上的)
grid-template-areas:
"header header header"
"advert content content"
"advert footer footer";
上面的代码将网格单元格分成四个区域:header
、advert
、content
和 footer
。 每个单词代表一个单元格,每对引号代表一行。
使用 grid-area 属性将项目放置在网格区域中
在为网格添加区域模板后,可以通过引用你所定义的区域的名称,将元素放入相应的区域。 为此,你需要对网格项使用 grid-area
:
.item1 {
grid-area: header;
}
这样,class 为 item1
的网格项就被放到了 header
区域里。 在这个示例中,网格项将占用第一行整行,因为这一整行都被命名为标题区域。
使用 grid-area 创建区域模板
item1 { grid-area: 1/1/2/4; }交叉着看
示例中的网格项将占用第 1 条水平网格线(起始)和第 2 条水平网格线(终止)之间的行,及第 1 条垂直网格线(起始)和第 4 条垂直网格线(终止)之间的列。
使用 repeat 函数减少重复
使用 repeat
方法指定行或列的重复次数,后面加上逗号以及需要重复的值。
以下为添加 100 行网格的例子,每行高度均为 50px:
grid-template-rows: repeat(100, 50px);
你还可以用 repeat 方法重复多个值,并在定义网格结构时与其他值一起使用。 比如:
grid-template-columns: repeat(2, 1fr 50px) 20px;
效果相当于:
grid-template-columns: 1fr 50px 1fr 50px 20px;
注意: 1fr 50px
重复了两次,后面跟着 20px。
使用 minmax 函数限制项目大小
内置函数 minmax
也可用于设置 grid-template-columns
和 grid-template-rows
的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此,你需要指定网格项允许的尺寸范围。 例如:
grid-template-columns: 100px minmax(50px, 200px);
在上面的代码中,我们通过 grid-template-columns
添加了两列,第一列宽度为 100px,第二列宽度最小值是 50px,最大值是 200px。
使用 auto-fill 创建弹性布局
repeat 方法带有一个名为自动填充(auto-fill)的功能。 它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill
和 minmax
来更灵活地布局。
repeat(auto-fill, minmax(60px, 1fr));
上面的代码效果是这样:首先,列的宽度会随容器大小改变。其次,只要容器宽度不足以插入一个宽为 60px 的列,当前行的所有列就都会一直拉伸。 注意: 如果容器宽度不足以将所有网格项放在同一行,余下的网格项将会移至新的一行
使用 auto-fit 建弹性布局(比auto-fill常用)
auto-fit
效果几乎和 auto-fill
一样。 不同点仅在于,当容器的大小大于各网格项之和时,auto-fill
会持续地在一端放入空行或空列,这样就会使所有网格项挤到另一边;而 auto-fit
则不会在一端放入空行或空列,而是会将所有网格项拉伸至合适的大小。
注意: 如果容器宽度不足以将所有网格项放在同一行,余下的网格项将会移至新的一行。
使用媒体查询+grid
将 CSS 网格与使用媒体查询结合使用,如使用媒体查询重新排列网格区域、更改网格尺寸以及重新排列网格项位置,我们可以让制作出的网站更具响应性。
下面的代码表示当网页可视区域的宽不小于 300px 时,列数从 1 变为 2。 并且,广告(advertisement)区域会完全占据左列。
<style>
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"header"
"advert"
"content"
"footer";
}
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">content</div>
<div class="item4">footer</div>
</div>