Bootstrap

A-freecodecamp-响应式网页设计

基础CSS

绝对单位与相对单位

单位长度的类型可以分成 2 种:相对和绝对。

绝对单位与长度的物理单位相关。 例如,inmm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值,不过不同屏幕的分辨率会存在差异,这就可能会造成误差。

相对单位长度,比如 emrem,它们的实际值会依赖其他长度的值而决定。 比如 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-radiusspread-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 属性可以改变英文字母的大小写。这个用的很少,但也算一个很好用的属性,记下来也无妨。

结果

lowercase

"transform me"

uppercase

"TRANSFORM ME"

capitalize

"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)定位,将元素相对于浏览器窗口定位。 它也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在,这样也许需要调整其他位置的布局。

fixedabsolute 的最明显的区别在于,前者定位的元素不会随着屏幕滚动而移动。

创建一个 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”)上的最简单方式, 是定义它们的 widthheight 值为原始值的一半。

使排版根据设备尺寸自如响应

除了使用 empx 设置文本大小,你还可以用视窗单位来做响应式排版。

四个不同的视窗单位分别是:

  • 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-reversecolumn-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-shrinkflex-grow 属性对元素进行调整前,元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致(pxem% 等)。 如果值为 auto,则项目的尺寸随内容调整。

使用 flex 短方法属性

flex-growflex-shrinkflex-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";

上面的代码将网格单元格分成四个区域:headeradvertcontentfooter。 每个单词代表一个单元格,每对引号代表一行。

使用 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-columnsgrid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此,你需要指定网格项允许的尺寸范围。 例如:

grid-template-columns: 100px minmax(50px, 200px);

在上面的代码中,我们通过 grid-template-columns 添加了两列,第一列宽度为 100px,第二列宽度最小值是 50px,最大值是 200px。

使用 auto-fill 创建弹性布局

repeat 方法带有一个名为自动填充(auto-fill)的功能。 它的功能是根据容器的大小,尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fillminmax 来更灵活地布局。

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>

完结撒花

;