ImQi1云笔记

外观

Grid布局

目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成行和列，产生单元格，然后指定成员所在的单元格，可以看作是二维布局。

基础

通过指定display: grid;指定容器使用Grid布局，Grid布局中采用网格布局的区域，称为容器，容器内部采用网格定位的子元素，称为成员。容器中水平区域称为行，垂直区域称为列，可以将其看作二位数组。划分网格的线就称为网格线，正常情况下n行有n + 1根水平网格线，m列有m + 1根垂直网格线。注意当容器设置为Grid布局以后，容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

容器属性

grid-template-rows grid-template-columns属性

grid-template-rows属性定义每一行的行高，设定为多少行就设置多少个值，取值可以为固定像素，也可以为百分比，grid-template-columns属性定义每一列的列宽，设定为多少列就设置多少个值，取值可以为固定像素，也可以为百分比。

<div id="t1">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>
<!--
    0 1 2
    3 4 5
    6 7 8
 -->

<style>
    #t1{
        display: grid;
        grid-template-rows: 30px 30px 30px;
        grid-template-columns: 30px 30px 30px;
    }
</style>

repeat函数

repeat()函数可以简化重复的值，其可以自动重复设定的规则。

<div id="t2">
    <div>9</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
</div>
<!-- 9 ab cd e -->

<style>
   #t2{
        display: grid;
        grid-template-columns: repeat(3,30px 10px); /* 设定为重复3次 30px 10px 规则 */
    }
</style>

auto-fill关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充，当容器不足容纳成员时会自适应换行。

<div id="t3" style="width: 60px;">
    <div>f</div>
    <div>g</div>
    <div>h</div>
</div>
<!--
    f g
    h
-->

<style>
   #t3{
        display: grid;
        grid-template-columns: repeat(auto-fill,30px);
    }
</style>

fr关键字

为表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

<div id="t4">
    <div>i</div>
    <div>j</div>
    <div>k</div>
</div>
<!--
    i j  k
-->

<style>
   #t4{
        display: grid;
        grid-template-columns: 1fr 2fr 3fr;
    }
</style>

minmax函数

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值，当距离不够时会从最大值自动减少长度或宽度到设定最小值为止。

minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )。

<div id="t5">
    <div>l</div>
    <div>m</div>
    <div>n</div>
</div>
<!--
    l m  n
-->

<style>
   #t5{
        display: grid;
        grid-template-columns: 30px minmax(30px,100px) 30px;
    }
</style>

auto关键字

auto关键字表示由浏览器自己决定长度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

<div id="t6">
    <div>o</div>
    <div>p</div>
    <div>q</div>
</div>
<!--
    o p     q
-->

<style>
   #t6{
        display: grid;
        grid-template-columns: 10px auto 30px;
    }
</style>

grid-row-gap属性

grid-row-gap属性设置行与行的间隔，即行间距。

<div id="t7">
    <div>r</div>
    <div>s</div>
    <div>t</div>
</div>
<!--
    r

    s

    t
-->

<style>
   #t7{
        display: grid;
        grid-template-rows: 30px 30px 30px;
        grid-row-gap: 10px;
    }
</style>

grid-column-gap属性

grid-column-gap属性设置列与列的间隔，即列间距。

<div id="t8">
    <div>u</div>
    <div>v</div>
    <div>w</div>
</div>
<!--
    u  v  w
-->

<style>
   #t8{
        display: grid;
        grid-template-columns: repeat(3,30px);
        grid-column-gap: 10px;
    }
</style>

grid-gap属性

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。

<div id="t9">
    <div>x</div>
    <div>y</div>
    <div>z</div>
    <div>A</div>
</div>
<!--
    x  y

    z  A
-->

<style>
  #t9{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
        grid-gap: 10px 10px;
    }
</style>

grid-template-areas属性

网格布局允许指定区域area，一个区域由单个或多个单元格组成，grid-template-areas属性用于定义区域。区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为{areaName}-start，终止网格线自动命名为{areaName}-end。

<div id="t10">
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</div>
<!--
    B C
    D E
-->

<style>
  #t10{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
        /* 先划分出4个单元格，然后将其定名为a到d的4个区域，分别对应这4个单元格。*/
        grid-template-areas: 'a b' 'c d';
    }
</style>

grid-auto-flow属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列，通过设置grid-auto-flow可以更改为先列后行，grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense，这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

<div id="t11">
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>I</div>
</div>
<!--
    F H
    G I
-->

<style>
   #t11{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
        grid-auto-flow: column;
    }
</style>

justify-items属性

justify-items属性设置成员中内容的水平位置，取值为start | end | center | stretch。

  • stretch默认值：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
<div id="t12">
    <div>J</div>
</div>
<!--
    J
-->

<style>
    #t12{
        display: grid;
        justify-items: center;
    }
</style>

align-items属性

align-items属性设置成员中内容的垂直位置，取值为start | end | center | stretch。

  • stretch默认值：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
<div id="t13" style="height: 50px">
    <div>K</div>
</div>
<!--
    K
-->

<style>
    #t13{
        display: grid;
        align-items: center;
    }
</style>

place-items属性

place-items属性是align-items属性和justify-items属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等。

<div id="t14" style="height: 50px">
    <div>L</div>
</div>
<!--
    L
-->

<style>
    #t14{
        display: grid;
        place-items: center center;
    }
</style>

justify-content属性

justify-content属性是整个内容区域在容器里面的水平位置，也就是成员的水平分布，取值为start | end | center | stretch | space-around | space-between | space-evenly。

<div id="t15">
    <div>M</div>
    <div>N</div>
</div>
<!--
    M   N
-->

<style>
    #t15{
        display: grid;
        grid-template-columns: repeat(2,30px);
        justify-content: space-around;
    }
</style>

align-content属性

align-content属性是整个内容区域在容器里面的垂直位置，也就是成员的垂直分布，取值为start | end | center | stretch | space-around | space-between | space-evenly。

<div id="t16" style="height: 50px;">
    <div>O</div>
    <div>P</div>
</div>
<!--
    O P
-->

<style>
    #t16{
        display: grid;
        grid-template-columns: repeat(2,30px);
        align-content: center;
    }
</style>

place-content属性

place-content属性是align-content属性和justify-content属性的合并简写形式，如果省略第二个值，则浏览器认为与第一个值相等。

<div id="t17" style="height: 50px;">
    <div>Q</div>
    <div>R</div>
</div>
<!--
    Q   R
-->

<style>
    #t17{
        display: grid;
        grid-template-columns: repeat(2,30px);
        place-content: center space-around;
    }
</style>

grid-auto-columns grid-auto-rows属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

<div id="t18">
    <div style="grid-row-start: 2;grid-column-start: 2;">S</div>
</div>
<!--

     S
-->

<style>
    #t18{
        display: grid;
        grid-template-columns: repeat(1,30px);
        grid-template-rows: repeat(1,30px);
        grid-auto-rows: 100px;
        grid-auto-columns: 100px;
    }
</style>

项目属性

grid-column-start grid-column-end属性

grid-column-start属性指定左边框所在的垂直网格线，grid-column-end属性指定右边框所在的垂直网格线。

<div class="gridBox">
    <div style="grid-row-start: 2;grid-column-start: 2;">T</div>
</div>
<!--

     T
-->

<style>
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
    }
</style>

grid-row-start grid-row-end属性

grid-row-start属性指定上边框所在的水平网格线，grid-row-end属性指定下边框所在的水平网格线。

<div class="gridBox">
    <div style="grid-row-start: 2;">U</div>
</div>
<!--

    U
-->

<style>
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
    }
</style>

还可以给轴线命名来指定位置。

<div class="gridBox" style="">
    <div style="grid-column-start: c2;grid-row-start: r2;">V</div>
</div>
<!--

      V
-->

<style>
    .gridBox{
        display: grid;
        grid-template-columns:[c1] 30px [c2] 30px [c3]; /* 指定列并为轴线命名 */
        grid-template-rows:[r1] 30px [r2] 30px [r3]; /* 指定行并为轴线命名 */
    }
</style>

grid-column grid-row属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

<div class="gridBox">
    <div style="grid-column: 2 / 3;grid-row: 2 / 3;">W</div>
</div>
<!--

      W
-->

<style>
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
    }
</style>

grid-area属性

grid-area属性指定项目放在grid-template-areas指定的区域，还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

<div class="gridBox" style="grid-template-areas: 'a b' 'c d';">
    <div style="grid-area: b;">X</div>
    <div style="grid-area: 2 / 2 / 3 / 3;">Y</div>
</div>
<!--
      X
      Y
-->

<style>
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
    }
</style>

justify-self align-self place-self属性

justify-self属性设置单元格内容的水平位置，跟justify-items属性的用法完全一致，但只作用于单个项目，取值为start | end | center | stretch;。 align-self属性设置单元格内容的垂直位置，跟align-items属性的用法完全一致，也是只作用于单个项目，取值为start | end | center | stretch;。

  • stretch默认值：拉伸，占满单元格的整个宽度。
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。

place-self属性是align-self属性和justify-self属性的合并简写形式。

<div class="gridBox">
    <div style="place-self: center end;">Z</div>
</div>
<!--
    Z
-->

<style>
    .gridBox{
        display: grid;
        grid-template-columns: repeat(2,30px);
        grid-template-rows: repeat(2,30px);
    }
</style>

多列布局

CSS3可以将文本内容设计成像报纸一样的多列布局。

  • column-count: 指定元素应该被分割的列数。
  • column-fill: 指定如何填充列。
  • column-gap: 指定列与列之间的间隙。
  • column-rule: 所有column-rule-*属性的简写。
  • column-rule-color: 指定两列间边框的颜色。
  • column-rule-style: 指定两列间边框的样式。
  • column-rule-width: 指定两列间边框的厚度。
  • column-span: 指定元素要跨越多少列。
  • column-width: 指定列的宽度。
  • columns: 设置column-width和column-count的简写。
<div id="t11">多列布局示例</div>
<style>
    #t11{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        column-count: 3;
        column-gap: 20px;
    }
</style>

用户界面

CSS3中增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

  • appearance: 允许使一个元素的外观像一个标准的用户界面元素。
  • box-sizing: 允许以适应区域而用某种方式定义某些元素。
  • icon: 为创作者提供了将元素设置为图标等价物的能力。
  • nav-down: 指定在何处使用箭头向下导航键时进行导航。
  • nav-index: 指定一个元素的Tab的顺序。
  • nav-left: 指定在何处使用左侧的箭头导航键进行导航。
  • nav-right: 指定在何处使用右侧的箭头导航键进行导航。
  • nav-up: 指定在何处使用箭头向上导航键时进行导航。
  • outline-offset: 外轮廓修饰并绘制超出边框的边缘。
  • resize: 指定一个元素是否是由用户调整大小。
<div id="t12"></div>
<style>
    #t12{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        resize:both;
        overflow:auto;
    }
</style>

滤镜

CSS3的filter属性可支持对于网页进行各种滤镜效果。 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

<div id="t13"></div>
<style>
    #t13{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        filter: blur(3px);
        background-color: blue;
    }
</style>

选择器

  • element1~element2: 选择同级前面有element1元素的全部element2元素
  • [attribute^=value]: 选择attribute属性中以value开头的元素
  • [attribute$=value]: 选择attribute属性中以value结尾的元素
  • [attribute*=value]: 选择attribute属性中包含value字符串的元素
  • div:first-child: 选择属于其父元素的第一个子元素的每个div元素
  • div:last-child: 选择属于其父元素最后一个子元素的每个div元素
  • div:nth-child(n): 选择属于其父元素的第n个子元素的每个div元素
  • div:nth-last-child(n): 同上，从这个元素的最后一个子元素开始算
  • div:nth-of-type(n): 选择属于其父元素第n个div元素的每个div元素
  • div:nth-last-of-type(n): 同上，但是从最后一个子元素开始计数
  • div:first-of-type: 选择属于其父元素的首个div元素的每个div元素
  • div:last-of-type: 选择属于其父元素的最后div元素的每个div元素
  • div:only-child: 选择属于其父元素的唯一子元素的每个div元素
  • div:only-of-type: 选择属于其父元素唯一的div元素的每个div元素
  • :root: 选择文档的根元素
  • :empty: 选择的元素里面没有任何内容
  • :checked: 匹配被选中的input元素，这个input元素包括radio和checkbox
  • :default: 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮
  • :disabled: 匹配禁用的表单元素
  • :enabled: 匹配没有设置disabled属性的表单元素
  • :valid: 匹配条件验证正确的表单元素

媒体查询

可以针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。

<div id="t14"></div>
<style>
    @media screen and (min-width:600px){
        #t14{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        }
    }
    @media screen and (max-width:600px) {
        #t14{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        }
    }
</style>

代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>CSS3新特性</title>
    <style>
        div{
            margin: 10px 0;
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
        }
        #t1{
            border-radius: 10px;
            background-color: blue;
        }
        #t2{
            box-shadow: 5px 5px 5px #aaa;
        }
        #t3{
            border: 1px solid #eee;
            background-image: url(https://blog.touchczy.top/favicon.ico);
            background-size:30px 30px;
            background-repeat:repeat;
            background-origin:content-box;
        }
        #t4{
            background-image: linear-gradient(to right, red , yellow);
        }
        #t5{
            color: #fff;
            text-shadow: -1px 3px 5px #333;
        }
        @font-face{
            font-family: ff;
            src: url(https://cdn.jsdelivr.net/gh/WindrunnerMax/Yolov3-Train@2d965d2/keras-yolo3/font/FiraMono-Medium.otf);
        }
        #t6{
            font-family:ff;
        }
        #t7{
            transform:rotate(10deg);
        }
        #t8{
            transform:rotateX(10deg);
        }
        @keyframes animation{
            from {background:red;}
            to {background:yellow;}
        }
        #t9{
            animation:animation 5s ease infinite alternate;
        }
        #t10{
            background: red;
            transition: all .5s;
        }
        #t10:hover{
            background: yellow;
            transition: all .5s;
        }
        #t11{
            column-count: 3;
            column-gap: 20px;
        }
        #t12{
            resize:both;
            overflow:auto;
        }
        #t13{
            filter: blur(3px);
            background-color: blue;
        }
        @media screen and (min-width:600px){
            #t14{
                height: 100px;
                width: 100px;
                border: 1px solid #eee;
                background: red;
                transition: all .5s;
            }
        }
        @media screen and (max-width:600px) {
            #t14{
                height: 100px;
                width: 100px;
                border: 1px solid #eee;
                background: yellow;
                transition: all .5s;
            }
        }
    </style>
</head>
<body>
    <div id="t1">圆角</div>
    <div id="t2">盒阴影</div>
    <div id="t3">背景</div>
    <div id="t4">渐变</div>
    <div id="t5">文本效果</div>
    <div id="t6">FONT</div>
    <div id="t7">2D转换</div>
    <div id="t8">3D转换</div>
    <div id="t9">动画</div>
    <div id="t10">过渡</div>
    <div id="t11">多列布局示例</div>
    <div id="t12">用户界面</div>
    <div id="t13">滤镜</div>
    <div id="t14">媒体查询</div>

</body>
</html>

许可证：署名 4.0 国际 (CC-BY-4.0)

2026 © 棋