ImQi1云笔记

外观

CSS

约 21502 字大约 72 分钟

CSS

CSS引入方式

将CSS作用到HTML主要有四种方式，分别为HTML元素添加内联样式、<style>标签嵌入样式、<link>标签引入外部样式、@import导入外部样式。

内联方式

<div style="color: red"></div>

特点

  • 不需要额外的HTTP请求。
  • 适合HTML电子邮件与富文本编辑器的使用。
  • 内联样式比外部样式具有更高的优先级，可以覆盖外部样式。
  • 可以在不更改直接主CSS样式表的情况下更改样式，直接将规则添加到元素。
  • 适合于动态样式，对于每个元素的样式都不同的情况可以直接将样式作用到单个元素。

不足

  • 页面维护可能会非常棘手
  • 过多添加同样的样式会导致页面复杂

嵌入方式

<style>
    div {
        color: blue;
    }
</style>

特点

  • CSS与HTML一起作为一个文件，不需要额外的HTTP请求
  • 适合于动态样式，对于不同的用户从数据库加载不同样式嵌入到页面

不足

  • 嵌入样式不能被浏览器缓存并重新用于其他页面

链接方式

<link rel="stylesheet" href="Path To stylesheet.css">

特点

  • 可以通过替换CSS文件以改变网站的主题。
  • 只需在单个CSS文件中进行一次更改，所有网站页面都会更新。
  • 多个页面请求的网站速度有所提高，CSS在第一次访问时就被浏览器缓存。

不足

  • 每个链接的CSS文件都需要一个附加的HTTP请求

导入方式

<style>
    @import url("Path To stylesheet.css");
</style>

特点

  • 在不更改HTML标签的情况下添加新的CSS文件

不足

  • 需要额外的HTTP请求

link与@import差异

  • <link>属于HTML提供的标签，@import属于CSS语句，值得注意的是@import导入语句需要写在CSS样式表的开头，否则无法正确导入外部文件。
  • @import是CSS2.1才出现的概念，所以如果浏览器版本较低例如IE4与IE5等，无法正确导入外部样式文件，当然也可以利用这一点来隐藏对于这些旧版本的浏览器的CSS2规则。
  • 当HTML文件被加载时，<link>引用的文件会同时被加载，而@import引用的文件则会等页面全部下载完毕再被加载，所以有时候浏览@import加载CSS的页面时会没有样式，也就是闪烁现象，网速慢的时候就比较明显。
  • 使用<link>标签可以设定rel属性，当rel为stylesheet时表示将样式表立即应用到文档，为alternate stylesheet时表示为备用样式表，不会立即作用到文档，可以通过JavaScript取得<link>标签对象，通过设置disabled来实现样式表的立即切换，可用作切换主题等功能，而@import不属于DOM无法使用JavaScript来直接控制。
  • <link>与@import混用可能会对网页性能有负面影响，在一些低版本IE中<link>与@import混用会导致样式表文件逐个加载，破坏并行下载的方式导致页面加载变慢。此外无论是哪种浏览器，若在<link>中引入的CSS中继续使用@import加载外部CSS，同样会导致顺序加载而不是并行加载，因为浏览器需要先解析<link>引入的CSS发现@import外部CSS后再次引入外部CSS，这样就导致页面加载变慢。

CSS选择器

使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。

id选择器

<div id="s1">id选择器</div>

<style>
    #s1 {
        color: red;
    }
</style>

类选择器

<div class="s2">类选择器1</div>
<div class="s2">类选择器2</div>
<div class="s3">类选择器3</div>

<style>
    .s2{
        color: green;
    }

    /* 可以将多个选择器写在一起 */
    .s2,.s3,#s1{
        font-style:italic;
    }
    </style>

标签选择器

<p>标签选择器1</p>
<p>标签选择器2</p>

<style>
    p{
        color: blue;
    }
</style>

相邻选择器

<div id="s4">相邻选择器 +</div>
<div>相邻选择器</div>
<!-- + 只选择紧邻的兄弟 -->
<div id="s5">相邻选择器 ~</div>
<div class="s6">相邻选择器</div>
<div class="s6">相邻选择器</div>
<div class="s6">相邻选择器</div>
<!-- ~ 选择兄弟以及兄弟的兄弟..... -->

 <style>
    #s4 + div{
        color: #0033ff;
    }
    #s5 ~ .s6{
        color: #FFD700;
    }
</style>

子元素选择器

<div class="s7">
    <div>子元素选择器</div>
    <em>
        <div>子元素选择器不被选择</div>
        <div>子元素选择器不被选择</div>
    </em>
</div>

<style>
    /* 子选择器会选择下一级 */
    .s7 > div{
        color: #E066FF;
    }
</style>

后代选择器

<div class="s8">
    <div>后代选择器</div>
    <em>
        <div>后代选择器</div>
        <div>后代选择器</div>
    </em>
</div>

<style>
    /* 后代选择器会选择全部后代 */
    .s8 div{
        color: #7CFC00;
    }
</style>

通配符选择器

<div class="s9">
    <div>通配符选择器</div>
    <em>通配符选择器</em>
</div>

<style>
    .s9 * {
        color: #3370CC
    }
</style>

属性选择器

<div rel="s10" >属性选择器</div>

<style>
    div[rel="s10"]{
        color: #573CC4
    }
</style>

CSS伪类与伪元素

CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

状态性伪类

是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

  • :link 应用于未被访问过的链接。
  • :hover 应用于鼠标悬停到的元素。
  • :active 应用于被激活的元素。
  • :visited 应用于被访问过的链接，与:link互斥。
  • :focus 应用于拥有键盘输入焦点的元素。

结构性伪类

CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

  • 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元素。
  • :empty 选择的元素里面没有任何内容。
  • :checked 匹配被选中的input元素，这个input元素包括radio和checkbox。
  • :default 匹配默认选中的元素，例如提交按钮总是表单的默认按钮。
  • :disabled 匹配禁用的表单元素。
  • :enabled 匹配没有设置disabled属性的表单元素。
  • :valid 匹配条件验证正确的表单元素。

伪元素

用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。

CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素。

  • ::first-letter 选择元素文本的第一个字。
  • ::first-line 选择元素文本的第一行。
  • ::before 在元素内容的最前面添加新内容。
  • ::after 在元素内容的最后面添加新内容。
  • ::selection 匹配用户被用户选中或者处于高亮状态的部分。
  • ::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。

代码示例

<!DOCTYPE html>
<html lang="zh">

<head>
    <title>CSS选择器</title>
</head>

<body>
    <div id="s1">id选择器</div>

    <div class="s2">类选择器1</div>
    <div class="s2">类选择器2</div>
    <div class="s3">类选择器3</div>

    <p>标签选择器1</p>
    <p>标签选择器2</p>

    <div id="s4">相邻选择器 +</div>
    <div>相邻选择器</div>
    <!-- + 只选择紧邻的兄弟 -->
    <div id="s5">相邻选择器 ~</div>
    <div class="s6">相邻选择器</div>
    <div class="s6">相邻选择器</div>
    <div class="s6">相邻选择器</div>
    <!-- ~ 选择兄弟以及兄弟的兄弟..... -->

    <div class="s7">
        <div>子元素选择器</div>
        <em>
            <div>子元素选择器不被选择</div>
            <div>子元素选择器不被选择</div>
        </em>
    </div>

    <div class="s8">
        <div>后代选择器</div>
        <em>
            <div>后代选择器</div>
            <div>后代选择器</div>
        </em>
    </div>


    <div class="s9">
        <div>通配符选择器</div>
        <em>通配符选择器</em>
    </div>

    <div rel="s10" >属性选择器</div>

    <div >
        <div class="s11">伪类选择器例</div>
    </div>


    <style>
    #s1 {
        color: red;
    }

    .s2{
        color: green;
    }

    .s2,.s3,#s1{
        font-style:italic;
    }

    p{
        color: blue;
    }

    #s4 + div{
        color: #0033ff;
    }
    #s5 ~ .s6{
        color: #FFD700;
    }

    /* 子选择器会选择下一级 */
    .s7 > div{
        color: #E066FF;
    }

    /* 后代选择器会选择全部后代 */
    .s8 div{
        color: #7CFC00;
    }

    .s9 * {
        color: #3370CC;
    }

    div[rel="s10"]{
        color: #573CC4;
    }

    .s11:first-child{
        color: #55AA55;
    }
    </style>

</body>

</html>

CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。

伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

状态性伪类

是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

  • :link 应用于未被访问过的链接。
  • :hover 应用于鼠标悬停到的元素。
  • :active 应用于被激活的元素。
  • :visited 应用于被访问过的链接，与:link互斥。
  • :focus 应用于拥有键盘输入焦点的元素。

结构性伪类

CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

  • 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元素。
  • :empty 选择的元素里面没有任何内容。
  • :checked 匹配被选中的input元素，这个input元素包括radio和checkbox。
  • :default 匹配默认选中的元素，例如提交按钮总是表单的默认按钮。
  • :disabled 匹配禁用的表单元素。
  • :enabled 匹配没有设置disabled属性的表单元素。
  • :valid 匹配条件验证正确的表单元素。

CSS优先级

当样式表比较复杂时，很容易出现多个样式对作用于一个标签的情况，这时就需要注意CSS优先级来决定哪些样式会被作用于该标签，哪些会被覆盖。

选择器的优先级

对于标签自有的属性，选择器的优先级规则为:

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

当如下几个选择器作用于同一个标签时本例显示的颜色为red，可以在浏览器的Elements选中相应元素，在Styles查看样式的覆盖情况并调试。

<div id="i1" class="c1">T1</div>

<style>
    #i1 {
        color: red;
    }
    .c1 {
        color: blue;
    }
    :nth-child(1){
        color: green;
    }
    div {
        color: grey;
    }
</style>

选择符的优先级

选择符是由基本选择器组成，基本分为:

后代选择符: #i1 .c1 .c2
子选择符：#i1 > .c1 > .c2
相邻选择符：.c1 + .c2

计算选择符中 ID选择器的个数a，计算选择符中类选择器、属性选择器以及伪类选择器的个数之和b，计算选择符中标签选择器和伪元素选择器的个数之和c。按a、b、c的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中a、b、c都相等，则按照"就近原则"来判断，此外，拥有!important的属性具有最高的优先级。

<div id="i2" class="c2">
    <div>T2</div>
</div>
<style>
    #i2 div {
        color: red;
    }
    .c2 > div {
        color: green;
    }
    div > div {
        color: blue;
    }
    :nth-child(1){
        color: black;
    }
    div {
        color: grey;
    }
</style>

第一个选择符 a:1 b:0 c:1
第二个选择符 a:0 b:1 c:1
第三个选择符 a:0 b:0 c:2
第四个选择符 a:0 b:1 c:0
第五个选择符 a:0 b:0 c:1
优先级顺序依次为: 1 2 4 3 5

多重样式优先级

外部样式表和内部样式表的优先级由其引入顺序有关，一般认为内部样式优先级大于外部样式，也可以认为其相等，因为如果外部样式放在内部样式的后面引入，则外部样式将覆盖内部样式。

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

继承样式

一般来说对于文字样式的设置都会具有继承性，例如font-family、font-size、font-weight、color等等，当需要继承样式时，最近的祖先样式比其他祖先样式优先级高。

<div style="color: red;">
        <div style="color: blue;">
            <div >T3</div> <!-- 显示蓝色 -->
        </div>
    </div>

代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <title>CSS样式优先级</title>
</head>
<style>
    #i1 {
        color: red;
    }
    .c1 {
        color: blue;
    }
    :nth-child(1){
        color: green;
    }
    div {
        color: grey;
    }

    #i2 div {
        color: red;
    }
    .c2 > div {
        color: green;
    }
    div > div {
        color: blue;
    }
</style>

<body>
    <div id="i1" class="c1">T1</div>
    <br>
    <div id="i2" class="c2">
        <div>T2</div>
    </div>
    <br>
    <div style="color: red;">
        <div style="color: blue;">
            <div style="color: inherit;">T3</div> <!-- 显示蓝色 -->
        </div>
    </div>
</body>

</html>

常用 CSS 属性

CSS背景属性(Background)

  • background：在一个声明中设置所有的背景插件
  • background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动
  • background-color：设置元素的背景颜色
  • background-image：设置元素的背景图像
  • background-position：设置背景图像的开始位置
  • background-repeat：设置是否及如何重复背景图像

CSS边框属性(Border和Outline)

  • border：在一个声明中设置所有的边框属性
  • border-bottom：在一个声明中设置所有的下边框属性
  • border-bottom-color：设置下边框的颜色
  • border-bottom-style：设置下边框的样式
  • border-bottom-width：设置下边框的宽度
  • border-color：设置四条边框的颜色
  • border-left：在一个声明中设置所有的左边框属性
  • border-left-color：设置左边框的颜色
  • border-left-style：设置左边框的样式
  • border-left-width：设置左边框的宽度
  • border-right：在一个声明中设置所有右边框的属性
  • border-right-color：设置右边框的颜色
  • border-right-style：设置右边框的样式
  • border-right-width：设置右边框的宽度
  • border-style：设置四条边框的样式
  • border-top：在一个声明中设置所有上边框的属性
  • border-top-color：设置上边框的颜色
  • border-top-style：设置上边框的样式
  • border-top-width：设置上边框的宽度
  • border-width：设置四条边框的宽度
  • outline：在一个声明中设置所有的轮廓属性
  • outline-color：设置轮廓的颜色
  • outline-style：设置轮廓的样式
  • outline-width：设置轮廓的宽度

CSS文本属性(Text)

  • color：设置文本的颜色
  • direction：规定文本的方向/书写方向
  • letter-spacing：设置字符间距
  • line-height：设置行高
  • text-align：规定文本的水平对齐方式
  • text-decoration：规定添加到文本的装饰效果
  • text-indent：规定文本块首行的缩进
  • text-shadow：规定添加到文本的阴影效果
  • text-transform：控制文本的大小写
  • unicode-bidi：设置文本方向
  • white-space：规定如何处理元素中的空白
  • word-spacing：设置单词间距

CSS字体属性(Font)

  • font：在一个声明中设置所有字体属性
  • font-family：规定文本的字体系列
  • font-size：规定文本的字体尺寸
  • font-size-adjust：为元素规定aspect值
  • font-stretch：收缩或拉伸当前的字体系列
  • font-style：规定文本的字体压实
  • font-variant：规定文本的字体样式
  • font-weight：规定字体的粗细

CSS外边距属性(Margin)

  • margin：在一个声明中设置所有的外边距属性
  • margin-bottom:设置元素的下外边距
  • margin-left:设置元素的左外边距
  • margin-right:设置元素的右外边距
  • margin-top:设置元素的上外边距

CSS内边距属性(Padding)

  • padding:在一个声明中设置所有的内边距属性
  • padding-bottom:设置元素的下内边距
  • padding-left:设置元素的左内边距
  • padding-right:设置元素的右内边距
  • padding-top:设置元素的上内边距

CSS列表属性(List)

  • list-style:在一个声明中设置所有的列表属性
  • list-style-image:将图像设置为列表项标记
  • list-position:设置列表项标记的放置位置
  • list-style-type:设置列表项标记的类型

CSS尺寸属性(Dimension)

  • height:设置元素高度
  • max-height:设置元素的最大高度
  • max-width:设置元素的最大宽度
  • min-height:设置元素的最小高度
  • min-width:设置元素的最小宽度
  • width:设置元素的宽度

CSS定位属性(Positioning)

  • bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移
  • clear:规定元素的哪一侧不允许其他浮动元素
  • clip:剪裁绝对定位元素
  • cursor:规定要显示的光标类型(形状)
  • display:规定元素应该生成的框的类型
  • float:规定框是否应该浮动
  • left:设置定位元素左外边距边界与其包含块左边界之间的偏移
  • overflow:规定当内容溢出元素框时发生的事情
  • position:规定元素定位类型
  • right:设置定位元素右外边距边界与其包含块右边之间的偏移
  • top:设置定位元素上外边距边界与其包含块上边之间的偏移
  • vertical-align:设置元素的垂直对其方式
  • visibility:规定元素是否可见
  • z-index:设置元素的堆叠顺序

CSS表格属性(Table)

  • border-collapse:规定是否合并表格边框
  • border-spacing:规定相邻单元格边框之间的距离
  • caption-side:规定表格标题的位置
  • empty-cells:规定是否显示表格中的空单元格上的边框和背景
  • table-layout:设置用于表格的布局算法

CSS3新特性

CSS3是最新的CSS标准，旨在扩展CSS2.1。

圆角

通过border-radius属性可以给任何元素制作圆角。

  • border-radius: 所有四个边角border-*-*-radius属性的缩写。
  • border-top-left-radius: 定义了左上角的弧度。
  • border-top-right-radius: 定义了右上角的弧度。
  • border-bottom-right-radius: 定义了右下角的弧度。
  • border-bottom-left-radius: 定义了左下角的弧度。
<div id="t1"></div>
<style>
    #t1{
        height: 100px;
        width: 100px;
        background-color: blue;
        border-radius: 10px;
    }
</style>

盒阴影

box-shadow: h-shadow v-shadow blur spread color inset

  • h-shadow: 必需，水平阴影的位置，允许负值。
  • v-shadow: 必需，垂直阴影的位置，允许负值。
  • blur: 可选，模糊距离。
  • spread: 可选，阴影的大小。
  • color: 可选，阴影的颜色。在CSS颜色值寻找颜色值的完整列表。
  • inset: 可选，从外层的阴影改变阴影内侧阴影。
<div id="t2"></div>
<style>
    #t2{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        box-shadow: 5px 5px 5px #aaa;
    }
</style>

背景

CSS3中包含几个新的背景属性，提供更大背景元素控制。

  • background-image: 规定背景图片路径。
  • background-clip: 规定背景的绘制区域。
  • background-origin: 规定背景图片的定位区域。
  • background-size: 规定背景图片的尺寸。
<div id="t3"></div>
<style>
    #t3{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background-image: url(https://blog.touchczy.top/favicon.ico);
        background-size:30px 30px;
        background-repeat:repeat;
        background-origin:content-box;
    }
</style>

渐变

CSS3渐变可以在两个或多个指定的颜色之间显示平稳的过渡。

  • Linear Gradients: 线性渐变，向下/向上/向左/向右/对角方向。
  • Radial Gradients: 径向渐变，由中心定义。
<div id="t4"></div>
<style>
    #t4{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background-image: linear-gradient(to right, red , yellow);
    }
</style>

文本效果

CSS3对文本进行了更多的支持。

  • hanging-punctuation: 规定标点字符是否位于线框之外。
  • punctuation-trim: 规定是否对标点字符进行修剪。
  • text-align-last: 设置如何对齐最后一行或紧挨着强制换行符之前的行。
  • text-emphasis: 向元素的文本应用重点标记以及重点标记的前景色。
  • text-justify: 规定当text-align设置为justify时所使用的对齐方法。
  • text-outline: 规定文本的轮廓。
  • text-overflow: 规定当文本溢出包含元素时发生的事情。
  • text-shadow: 向文本添加阴影。
  • text-wrap: 规定文本的换行规则。
  • word-break: 规定非中日韩文本的换行规则。
  • word-wrap: 允许对长的不可分割的单词进行分割并换行到下一行。
<div id="t5">Text</div>
<style>
    #t5{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        color: #fff;
        text-shadow: -1px 3px 5px #333;
    }
</style>

字体

CSS3可以使用@font-face规则加载所需字体。

  • font-family: 必需，规定字体的名称。
  • src: 必需，定义字体文件的URL。
  • font-stretch: 可选，定义如何拉伸字体，默认是normal。
  • font-style: 可选，定义字体的样式，默认是normal。
  • font-weight: 可选，定义字体的粗细，默认是normal。
  • unicode-range: 可选，定义字体支持的UNICODE字符范围，默认是U+0-10FFFF。
<div id="t6">Text</div>
<style>
    @font-face{
        font-family: ff;
        src: url(https://cdn.jsdelivr.net/gh/WindrunnerMax/Yolov3-Train@2d965d2/keras-yolo3/font/FiraMono-Medium.otf);
    }
    #t6{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        font-family:ff;
    }
</style>

2D转换

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。

  • transform: 适用于2D或3D转换的元素。
  • transform-origin: 允许更改转化元素位置。
<div id="t7"></div>
<style>
    #t7{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        transform:rotate(10deg);
    }
</style>

3D转换

CSS3可以使用3D转换来对元素进行格式化。

  • transform: 向元素应用2D或3D转换。
  • transform-origin: 允许你改变被转换元素的位置。
  • transform-style: 规定被嵌套元素如何在3D空间中显示。
  • perspective: 规定3D元素的透视效果。
  • perspective-origin: 规定3D元素的底部位置。
  • backface-visibility: 定义元素在不面对屏幕时是否可见。
<div id="t8"></div>
<style>
    #t8{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        transform:rotateX(10deg);
    }
</style>

动画

CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。

  • @keyframes: 规定动画。
  • animation: 所有动画属性的简写属性，除了animation-play-state属性。
  • animation-name: 规定@keyframes动画的名称。
  • animation-duration: 规定动画完成一个周期所花费的秒或毫秒，默认是0。
  • animation-timing-function: 规定动画的速度曲线，默认是ease。
  • animation-fill-mode: 规定当动画不播放时，例如当动画完成时，或当动画有一个延迟未开始播放时，要应用到元素的样式。
  • animation-delay: 规定动画何时开始，默认是0。
  • animation-iteration-count: 规定动画被播放的次数，默认是1。
  • animation-direction: 规定动画是否在下一周期逆向地播放，默认是normal。
  • animation-play-state: 规定动画是否正在运行或暂停，默认是running。
<div id="t9"></div>
<style>
    @keyframes animation{
        from {background:red;}
        to {background:yellow;}
    }
    #t9{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        animation:animation 5s ease infinite alternate;
    }
</style>

过渡

CSS3中可以使元素从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

  • transition: 简写属性，用于在一个属性中设置四个过渡属性。
  • transition-property: 规定应用过渡的CSS属性的名称。
  • transition-duration: 定义过渡效果花费的时间，默认是 0。
  • transition-timing-function: 规定过渡效果的时间曲线，默认是ease。
  • transition-delay: 规定过渡效果何时开始，默认是 0。
<div id="t10"></div>
<style>
    #t10{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background: red;
        transition: all .5s;
    }
    #t10:hover{
        height: 100px;
        width: 100px;
        border: 1px solid #eee;
        background: yellow;
        transition: all .5s;
    }
</style>

Flex布局

Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持。

基础

通过指定display: flex来标识一个弹性布局盒子，称为FLEX容器，容器内部的盒子就成为FLEX容器的成员，容器默认两根轴线，水平的主轴与垂直的交叉轴，主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end，容器成员默认按照主轴排列。

容器属性

flex-direction

flex-direction属性决定主轴的方向，取值为row | row-reverse | column | column-reverse。

  • row默认值：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端，容器成员顺序与row顺序相反。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿，容器成员顺序与column顺序相反。
<div id="t1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
    <!--
        3
        2
        1
     -->

<style>
    #t1{
        display: flex;
        flex-direction: column-reverse;
    }
</style>

flex-wrap

flex-wrap属性决定当轴线方向放不下成员时，是否换行，取值为nowrap | wrap | wrap-reverse。

  • nowrap默认：不换行，当空间不足时，会按轴线方向成员大小比例缩小的成员。
  • wrap：距离不够时换行，新起一行排列。
  • wrap-reverse：距离不够时换行，新起的一行在上方。
<div id="t2" style="width: 20px;">
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
    <!--
        45
        6
     -->

<style>
    #t2{
        display: flex;
        flex-wrap: wrap;
    }
</style>

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认row nowrap。

<div id="t3" style="width: 20px;">
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
    <!--
        87
         9
     -->

<style>
    #t3{
        display: flex;
        flex-flow: row-reverse wrap;
    }
</style>

justify-content

justify-content属性定义了成员在主轴上的对齐方式，可以很容易地实现多种布局，取值为flex-start | flex-end | center | space-between | space-around。

  • flex-start默认值：左对齐。
  • flex-end：右对齐。
  • center： 居中对齐。
  • space-between：两端对齐，成员之间的间隔都相等。
  • space-around：每个成员两侧的间隔相等，成员之间的间隔比成员与边框的间隔大一倍。
<div id="t4">
    <div>a</div>
    <div>b</div>
    <div>c</div>
</div>
<!-- abc[水平居中] -->

<style>
    #t4{
        display: flex;
        justify-content: center;
    }
</style>

align-items

align-items属性定义成员在交叉轴上如何对齐，取值为flex-start | flex-end | center | baseline | stretch。

  • stretch默认值：如果成员未设置高度或设为auto，将占满整个容器的高度。
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 成员的第一行文字的基线对齐。
<div id="t5" style="height: 50px;">
    <div>d</div>
    <div>e</div>
    <div>f</div>
</div>
<!-- def[垂直居中] -->

<style>
    #t5{
        display: flex;
        align-items: center;
    }
</style>

align-content

align-content属性定义了多根轴线的对齐方式。如果成员只有一根轴线，该属性不起作用，取值为flex-start | flex-end | center | space-between | space-around | stretch。

  • stretch默认值：轴线占满整个交叉轴。
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
<div id="t6" style="height: 50px;width: 20px;">
    <div>g</div>
    <div>h</div>
    <div>i</div>
</div>
<!--
    g
    hi
    [交叉轴space-between]
-->

<style>
    #t6{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }
</style>

成员属性

order

order属性定义成员的排列顺序，数值越小，排列越靠前，默认为0。

<div class="flexBox">
    <div style="order: 3;">j</div>
    <div style="order: 1;">k</div>
    <div style="order: 2;">l</div>
</div>
<!-- klj -->

<style>
    .flexBox{
        display: flex;
    }
</style>

flex-grow

flex-grow属性定义成员的放大比例，默认为0。

<div class="flexBox">
    <div style="flex-grow: 1;">m</div>
    <div style="flex-grow: 2;">n</div>
    <div style="flex-grow: 3;">o</div>
</div>
<!-- m n o -->

<style>
    .flexBox{
        display: flex;
    }
</style>

flex-shrink

flex-shrink属性定义了成员的缩小比例，默认为1，即如果空间不足，该成员将缩小。

<div class="flexBox" style="width: 100px;">
    <div style="flex-shrink: 1;width: 100px;">p</div>
    <div style="flex-shrink: 2;width: 100px;">q</div>
    <div style="flex-shrink: 3;width: 100px;">r</div>
</div>
<!-- p q r -->

<style>
    .flexBox{
        display: flex;
    }
</style>

flex-basis

flex-basis属性定义了在分配多余空间之前，成员占据的主轴空间main size，浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即成员的本来大小。

<div class="flexBox">
    <div>s</div>
    <div style="flex-basis: 40px;">t</div>
    <div>u</div>
</div>
<!-- s t u -->

<style>
    .flexBox{
        display: flex;
    }
</style>

flex

flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值0 1 auto。后两个属性可选。

<div class="flexBox">
    <div style="flex: 1;">v</div>
    <div style="flex: 1;">w</div>
    <div style="flex: 1;">x</div>
</div>
<!-- v w x -->

<style>
    .flexBox{
        display: flex;
    }
</style>

align-self

align-self属性允许单个成员有与其他成员不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<div class="flexBox" style="height: 50px;">
    <div>y</div>
    <div style="align-self: center;">z</div>
    <div>0</div>
</div>
<!-- y z 0 -->

<style>
    .flexBox{
        display: flex;
    }
</style>

代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>FLEX布局</title>
</head>
<body>
    <div id="t1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <!--
        3
        2
        2
     -->

    <div id="t2" style="width: 20px;">
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <!--
        45
        6
     -->

    <div id="t3" style="width: 20px;">
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <!--
        87
         9
     -->

     <div id="t4">
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </div>
    <!-- abc[水平居中] -->

    <div id="t5" style="height: 50px;">
        <div>d</div>
        <div>e</div>
        <div>f</div>
    </div>
    <!-- def[垂直居中] -->

    <div id="t6" style="height: 50px;width: 20px;">
        <div>g</div>
        <div>h</div>
        <div>i</div>
    </div>
    <!--
        g
        hi
        [交叉轴space-between]
    -->

    <div class="flexBox">
        <div style="order: 3;">j</div>
        <div style="order: 1;">k</div>
        <div style="order: 2;">l</div>
    </div>
    <!-- klj -->

    <div class="flexBox">
        <div style="flex-grow: 1;">m</div>
        <div style="flex-grow: 2;">n</div>
        <div style="flex-grow: 3;">o</div>
    </div>
    <!-- m n o -->

    <div class="flexBox" style="width: 100px;">
        <div style="flex-shrink: 1;width: 100px;">p</div>
        <div style="flex-shrink: 2;width: 100px;">q</div>
        <div style="flex-shrink: 3;width: 100px;">r</div>
    </div>
    <!-- p q r -->

    <div class="flexBox">
        <div>s</div>
        <div style="flex-basis: 40px;">t</div>
        <div>u</div>
    </div>
    <!-- s t u -->

    <div class="flexBox" style="height: 50px;">
        <div>y</div>
        <div style="align-self: center;">z</div>
        <div>0</div>
    </div>
    <!-- y z 0 -->

</body>
<style>
    #t1{
        display: flex;
        flex-direction: column-reverse;
    }

    #t2{
        display: flex;
        flex-wrap: wrap;
    }
    #t3{
        display: flex;
        flex-flow: row-reverse wrap;
    }
    #t4{
        display: flex;
        justify-content: center;
    }
    #t5{
        display: flex;
        align-items: center;
    }

    #t6{
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .flexBox{
        display: flex;
    }
</style>
</html>

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>

CSS常用单位

CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。

绝对长度单位

px 像素

通常而言，一个CSS像素代表屏幕设备的一个像素点，但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素，也就是说有多个屏幕像素点来表示1px，1px = 1in / 96。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t1{
        width: 1px;
    }
</style>

<section>
    <div id="t1"></div>
</section>

in 英寸

1in = 2.54cm = 96px。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t2{
        width: 1in;
    }
</style>

<section>
    <div id="t2"></div>
</section>

cm 厘米

1cm = 10mm = 96px/2.54 ≈ 37.8px。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t3{
        width: 1cm;
    }
</style>

<section>
    <div id="t3"></div>
</section>

mm 毫米

1mm = 0.1cm = 3.78px。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t4{
        width: 1mm;
    }
</style>

<section>
    <div id="t4"></div>
</section>

pt 磅

1pt = 1/72in ≈ 0.0139in = 1/722.54cm = 1/7296px ≈ 1.33px。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t5{
        width: 1pt;
    }
</style>

<section>
    <div id="t5"></div>
</section>

pc 派卡

1pc = 1/6in = 12pt = 1/6*96px = 16px。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t6{
        width: 1pc;
    }
</style>

<section>
    <div id="t6"></div>
</section>

相对长度单位

em

em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size，若用于其他属性，相对于本身元素的font-size，需要注意的是，使用em可能会出现1.2 * 1.2 = 1.44的现象，若父元素font-size属性设置为16px，下一级元素设置为1.2em，经计算实际像素为16px * 1.2 = 19.2px，再下一级元素若继续设置为1.2em则经计算为16px * 1.2 * 1.2 = 23.04px，这是因为父级的基准font-size属性被计算重设为另一个值，在子元素中使用em时需要根据父元素的font-size重新计算子元素的em值。

<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t7 > div{
        background-color: blue;
        font-size: 2em; /* 相对于父元素 2 * 10px = 20px */
        width: 5em; /* 相对于元素本身 5 * 20px = 100px */
    }
</style>

<section class="except">
    <div id="t7">
        <div>文字</div>
    </div>
    <button onclick="emChange()">改变字体大小</button>
</section>

<script type="text/javascript">
    function emChange(){
        document.getElementById("t7").style["font-size"] = "20px";
    }
</script>
<section class="except" style="font-size: 10px;">
    <div style="font-size: 2em"> <!-- 2 * 10px = 20px -->
        <div>Test</div>
        <div style="font-size: 2em"> <!-- 2 * 2 * 10px = 40px -->
            <div>Test</div>
        </div>
    </div>
</section>

rem

rem单位都是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生相应的变化。由于所有元素都是以根元素的font-size为基准进行计算的，也就不存在em的1.2 * 1.2 = 1.44现象。rem不是只对定义字体大小有用，可以使用rem把整个网格系统或者UI样式库基于HTML根元素的字体大小上，这将带来更加可预测的字体大小和比例缩放，实现响应式的布局。

<style>
    html{
        font-size: 15px;
    }

    div{
        height: 30px;
        background-color: blue;
    }

    #t8 > div{
        background-color: blue;
        font-size: 2rem; /* 相对于根元素 2 * 15px = 30px */
        width: 6rem; /* 相对于根元素 6 * 15px = 90px */
    }
</style>

<section class="except">
    <div id="t8">
        <div>文字</div>
    </div>
    <button onclick="remChange()">改变字体大小</button>
</section>

<script type="text/javascript">
    function remChange(){
        document.getElementsByTagName("html")[0].style["font-size"] = "20px";
    }
</script>
<section class="except">
    <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
        <div>Test</div>
        <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
            <div>Test</div>
        </div>
    </div>
</section>

ex

ex是指所用字体中小写x的高度，但不同字体x的高度可能不同，对于很多字体来说1ex ≈ 0.5em，所以很多浏览器在实际应用中取em值一半作为ex值，ex单位在实际中常用于微调。

<style>
    #t9{
        font-size: 1ex;
    }
</style>

<section class="except">
    <div id="t9">文字</div>
    <span style="font-size: 1em">文字</span>
</section>

ch

ch与ex类似，这一单位代表元素所用字体中0这一字形的宽度，更准确地说是0这一字形的预测尺寸，如果无法确定0字形的大小，则必须假定其宽为0.5em高为1em，也就是取em值的一半作为ch值。

<style>
    #t10{
        font-size: 1ch;
    }
</style>

<section class="except">
    <div id="t10">文字</div>
    <span style="font-size: 1em">文字</span>
</section>

百分比单位

百分比值

当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。

  • 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
  • 子元素的top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。
  • 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
  • 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。
  • 设置border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。
<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t11{
        width: 50%;
    }
</style>

<section>
    <div id="t11"></div>
</section>

视口宽度

  • vh: 相对于视窗的高度，1vh等于视窗高度的1%。
  • vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。
  • vmin: vw和vh中的较小值。
  • vmax: vw和vh中的较大值。
<style>
    div{
        height: 30px;
        background-color: blue;
    }

    #t12{
        background-color: #fff;
    }

    #t12 > div:nth-child(1){
        width: 50vh;
    }

    #t12 > div:nth-child(2){
        width: 50vw;
    }

    #t12 > div:nth-child(3){
        width: 50vmax;
    }

    #t12 > div:nth-child(4){
        width: 50vmin;
    }
</style>

<section class="">
    <div id="t12">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</section>

代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>CSS单位</title>
    <style>
        html{
            font-size: 15px;
        }

        section {
            margin: 10px 0;
        }

        div{
            height: 30px;
            background-color: blue;
        }

        .except div{
            height: auto;
            background-color: #fff;
        }

        #t1{
            width: 1px;
        }

        #t2{
            width: 1in;
        }

        #t3{
            width: 1cm;
        }

        #t4{
            width: 1mm;
        }

        #t5{
            width: 1pt;
        }

        #t6{
            width: 1pc;
        }

        #t7{
            background-color: #fff;
            font-size: 10px;
        }

        #t7 > div{
            background-color: blue;
            font-size: 2em; /* 相对于父元素 2 * 10px = 20px */
            width: 5em; /* 相对于元素本身 5 * 20px = 100px */
        }

        #t8 > div{
            background-color: blue;
            font-size: 2rem; /* 相对于根元素 2 * 15px = 30px */
            width: 6rem; /* 相对于根元素 6 * 15px = 90px */
        }

        #t9{
            font-size: 1ex;
        }

        #t10{
            font-size: 1ch;
        }

        #t11{
            width: 50%;
        }

        #t12{
            background-color: #fff;
        }

        #t12 > div:nth-child(1){
            width: 50vh;
        }

        #t12 > div:nth-child(2){
            width: 50vw;
        }

        #t12 > div:nth-child(3){
            width: 50vmax;
        }

        #t12 > div:nth-child(4){
            width: 50vmin;
        }
    </style>
</head>
<body>
    <section>
        <div id="t1"></div>
    </section>

    <section>
        <div id="t2"></div>
    </section>

    <section>
        <div id="t3"></div>
    </section>

    <section>
        <div id="t4"></div>
    </section>

    <section>
        <div id="t5"></div>
    </section>

    <section>
        <div id="t6"></div>
    </section>

    <section class="except">
        <div id="t7">
            <div>文字</div>
        </div>
        <button onclick="emChange()">改变字体大小</button>
    </section>

    <section class="except" style="font-size: 10px;">
        <div style="font-size: 2em"> <!-- 2 * 10px = 20px -->
            <div>Test</div>
            <div style="font-size: 2em"> <!-- 2 * 2 * 10px = 40px -->
                <div>Test</div>
            </div>
        </div>
    </section>

    <section class="except">
        <div id="t8">
            <div>文字</div>
        </div>
        <button onclick="remChange()">改变字体大小</button>
    </section>

    <section class="except">
        <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
            <div>Test</div>
            <div style="font-size: 2rem"> <!-- 2 * 15px = 30px -->
                <div>Test</div>
            </div>
        </div>
    </section>

    <section class="except">
        <div id="t9">文字</div>
        <span style="font-size: 1em">文字</span>
    </section>

    <section class="except">
        <div id="t10">文字</div>
        <span style="font-size: 1em">文字</span>
    </section>

    <section>
        <div id="t11"></div>
    </section>

    <section class="">
        <div id="t12">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>

</body>
<script type="text/javascript">
    function emChange(){
        document.getElementById("t7").style["font-size"] = "20px";
    }

    function remChange(){
        document.getElementsByTagName("html")[0].style["font-size"] = "20px";
    }
</script>
</html>

display的值及作用

display属性可以设置元素的内部和外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现，例如块级或内联元素，元素的内部显示类型可以控制其子元素的布局，例如grid或flex。目前所有浏览器都支持display属性，但是对于属性值的兼容性仍需注意。

外部显示

这些值指定了元素的外部显示类型，实际上就是其在流式布局中的角色，即在流式布局中的表现。

display: none

display: none;是CSS1规范，无兼容性问题，该属性值表示此元素不会被显示，依照词义是真正隐藏元素，使用这个属性，被隐藏的元素不占据任何空间，用户交互操作例如点击事件都不会生效，读屏软件也不会读到元素的内容，这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。

display: block

display: block;是CSS1规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为100%，可以指定宽度和高度，内外边距对于四个方向有效。

display: inline

display: inline;是CSS1规范，无兼容性问题，该属性值表示此元素会被显示为内联元素，元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符，在正常流中，如果有空间，则下一个元素将在同一行上，元素排在一行，封闭后不会自动换行，不能指定高度与宽度，可以使用line-height来指定高度，外边距对于水平方向有效，垂直方向无效，内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

display: inline-block

display: inline-block;是CSS2规范，无兼容性问题，该属性值表示此元素将显示为内联块元素，该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内联框一样，与被替换的元素非常相似，它等效于内联流根inline flow-root，可以指定宽度和高度，内外边距对于四个方向有效元素排在一行，但是在回车后会有空白缝隙。

display: run-in

display: run-in;是CSS2规范，绝大部分浏览器都不兼容，目前这是个实验性属性值，不应该用作生产环境，该属性值表示此元素会根据上下文决定对象是内联对象还是块级对象，如果它后一个元素是block那么它会变成inline并和后一个元素并排，如果它后一个元素是inline那么它会变成block。

内部显示

这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式，需要假定该元素为非替换元素。

display: flow-root

display: flow-root;是CSS3规范，兼容性一般，该属性值表示此元素会生成一个块元素盒子，该元素盒子可建立一个新的块格式化上下文BFC，定义格式化根所在的位置。

display: table

display: table;是CSS2规范，兼容性良好，该属性值表示此元素会作为块级表格来显示，类似<table>，表格前后带有换行符。

display: flex

display: flex;是CSS3规范，目前主流浏览器都已支持，是布局的首选方案，该属性值表示此元素会作为弹性盒子显示，在外部表现为block，内部作为弹性盒子使用，弹性布局可以为盒状模型提供最大的灵活性。在兼容移动端浏览器的方案上，有可能需要使用display:-webkit-box;，也就是内核前缀-box，同样都是弹性盒子，由于各阶段草案命名的原因，其命名从box更改为flex，flex是新的规范属性，此外flex并不能完全替代box，使用这两种方式在实际布局中会存在差异。

display: grid

display: grid;是CSS3规范，目前主流浏览器都已支持，该属性值表示将元素分为一个个网格，然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成行和列，产生单元格，然后指定成员所在的单元格，可以看作是二维布局。

display: inline-table

display: inline-table;是CSS2规范，兼容性良好，该属性值与display: table;在元素内部表现相同，在元素外部显示表现为inline。

display: inline-flex

display: inline-flex;是CSS3规范，目前主流浏览器都已支持，该属性值与display: flex;在元素内部表现相同，在元素外部显示表现为inline。

display: inline-grid

display: inline-grid;是CSS3规范，目前主流浏览器都已支持，该属性值与display: grid;在元素内部表现相同，在元素外部显示表现为inline。

display: list-item

display: list-item;是CSS1规范，无兼容性问题，该属性值表示将元素的外部显示类型变为block盒模型，并将内部显示类型变为多个list-item inline盒模型。

内部表现

table布局模型有着相对复杂的内部结构，因此它们的子元素可能扮演着不同的角色，这一类关键字就是用来定义这些内部显示类型，并且只有在这些特定的布局模型中才有意义。

display: table-row-group

display: table-row-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个行的分组来显示，类似于<tbody>。

display: table-header-group

display: table-header-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个行的分组来显示，类似于<thead>。

display: table-footer-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个行的分组来显示，类似于<tfoot>。

display: table-row

display: table-row;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个表格行显示，类似于<tr>。

display: table-column-group

display: table-column-group;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个或多个列的分组来显示，类似于<colgroup>。

display: table-column

display: table-column;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个单元格列显示，类似于<col>。

display: table-cell

display: table-cell;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个表格单元格显示，类似于<td>和<th>。

display: table-caption

display: table-caption;是CSS2规范，兼容性良好，该属性值表示此元素会作为一个表格标题显示，类似于<caption>。

Position定位

CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。

static

static属性是HTML元素的默认值，即没有定位，遵循正常的文档流对象，对于top、bottom、left、right、z-index属性的设置都被忽略。 文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。 文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

<div class="t1">static</div>
<style>
    div{
        border: 1px solid #eee;
    }
    .t1{
        position: static;
    }
</style>

relative

relative是相对定位，元素的位置是相对其原本位置进行偏移，其不脱离文档流，对于top、bottom、left、right、z-index属性的设置有效，设置偏移属性后会移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块。

<div class="t2">relative</div>
<div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
<style>
    div{
        border: 1px solid #eee;
    }
    .t2{
        position: relative;
        bottom: -10px;
    }
</style>

absolute

absolute是绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html lang="zh">，通常的使用方案是在外层嵌套一层relative相对定位元素作为父元素，再设置绝对定位元素的偏移将会相对于外层的relative元素进行偏移，绝对定位完全脱离文档流与文本流，不占据文档空间，对于top、bottom、left、right、z-index属性的设置有效。

<div class="t3">
    <div class="t4">absolute</div>
</div>
<style>
    div{
        border: 1px solid #eee;
    }
    .t3{
        height: 300px;
        position: relative;
    }
    .t4{
        position: absolute;
        top: 100px;
    }
</style>

fixed

fixed是固定定位，元素的位置相对于浏览器窗口是固定位置，即使是窗口滚动元素也不会移动，注意在<iframe>中的元素使用fixed是相对于<iframe>进行定位的，<iframe>类似于在页面中创建了一个新的浏览器窗口，固定定位完全脱离文档流与文本流，不占据文档空间，对于top、bottom、left、right、z-index属性的设置有效。

<div class="t5">fixed</div>
<style>
    div{
        border: 1px solid #eee;
    }
    .t5{
        position: fixed;
        top: 300px;
    }
</style>

sticky

sticky是粘性定位，元素的位置是基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position: relative，而当页面滚动超出目标区域时sticky的表现类似于position: fixed，它会固定在目标位置，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是top、right、bottom、left其中之一，必须通过指定top、right、bottom、left四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

<div class="t6">sticky</div>
<style>
    div{
        border: 1px solid #eee;
    }
    .t6{
        position: sticky;
        top: 0;
    }
</style>

inherit

inherit是通过继承父元素的position值来进行定位。

<div class="t7">
    <div class="t8">inherit</div>
</div>
<style>
    div{
        border: 1px solid #eee;
    }
    .t7{
        position: relative;
    }
    .t8{
        position: inherit;
        bottom: -10px;
    }
</style>

代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>position</title>
    <style>
        div{
            border: 1px solid #eee;
            margin: 5px 0;
        }
        .t1{
            position: static;
        }
        .t2{
            position: relative;
            bottom: -10px;
        }
        .t3{
            height: 300px;
            position: relative;
        }
        .t4{
            position: absolute;
            top: 100px;
        }
        .t5{
            position: fixed;
            top: 300px;
        }
        .t6{
            position: sticky;
            top: 0;
        }
        .t7{
            position: relative;
        }
        .t8{
            position: inherit;
            bottom: -10px;
        }
    </style>
</head>
<body>
    <div class="t1">static</div>
    <div class="t2">relative</div>
    <div>对比查看效果 元素原本占据空间没有变化 但relative会有偏移</div>
    <div class="t3">
        <div class="t4">absolute</div>
    </div>
    <div class="t5">fixed</div>
    <div class="t6">sticky</div>
    <div class="t7">
        <div class="t8">inherit</div>
    </div>
    <div style="height: 1000px">让浏览器出现滚动条</div>
</body>
</html>

Float浮动

CSS中float属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

实例

  • 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  • 使用float意味着使用块布局，其会在display非块级元素情况下修改display值的计算值。
  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素会脱离文档流但不会脱离文本流，当浮动时其不会影响周围的盒子模型，但是文字会环绕在浮动元素周围，可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层。
  • 文档流，指的是盒子元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
  • 文本流，指的是文字元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
  • 脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Float</title>
    <style>
        body > div{
            border: 1px solid #eee;
            padding: 5px 0;
            margin: 5px 0;
        }
        .t1{
            margin: 0 5px;
            float: left;
            background-color: #EEE;
        }
    </style>
</head>
<body>
    <div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>
    </div>
</body>
</html>

文字环绕效果

可以认为文档流与文字流是分层结构而浮动元素盒子与文字元素处于同一层，当元素浮动时，其脱离文档流不脱离文本流，所以浮动元素的渲染与文字的渲染是一并渲染的，浮动元素会将文字元素挤开，呈现文字环绕浮动元素的效果。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Float</title>
    <style>
        body > div{
            border: 1px solid #eee;
            padding: 5px 0;
            margin: 5px 0;
        }
        .t1{
            margin: 0 5px;
            float: left;
            background-color: #EEE;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="t1">Float</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
    </div>
</body>
</html>

虽然float最初的设计就是用来实现文字环绕效果的，在某些使用float的布局下若是不想触发文字环绕效果，可以通过触发BFC来避免文字环绕。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Float</title>
    <style>
        body > div{
            border: 1px solid #eee;
            padding: 5px 0;
            margin: 5px 0;
        }
        .t1{
            margin: 0 5px;
            float: left;
            background-color: #EEE;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="t1">Float</div>
        <div style="overflow: auto;">
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
            <div>123</div>
        </div>
    </div>
</body>
</html>

清除浮动

使用浮动可能会导致一些负面影响，由于脱离文档流，无法撑起父元素导致背景以及边框无法正常显示、与其他元素重叠、下层浮动依旧会在上层浮动元素的基础上进行浮动等问题，此时就需要清除浮动。

使用clear属性

通过CSS的clear: both;清除浮动。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Float</title>
    <style>
        .container{
            border: 1px solid #eee;
            padding: 5px 0;
            margin: 5px 0;
        }
        .t1{
            margin: 0 5px;
            float: left;
            background-color: #EEE;
            height: 100px;
            width: 100px;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>

        <!-- 此处不清除浮动会产生负面效果 -->

    </div>


    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>

        <!-- 清除浮动 -->
        <div class="clear"></div>

    </div>


    <!-- 若是在此处清除浮动也是可以的 但是会无法撑起容器高度 -->

    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>

        <!-- 清除浮动 -->
        <div class="clear"></div>

    </div>
</body>
</html>

配合::after与clear属性

通过使用伪元素::after配合clear属性进行浮动清除。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Float</title>
    <style>
        .container{
            border: 1px solid #eee;
            padding: 5px 0;
            margin: 5px 0;
        }
        .t1{
            margin: 0 5px;
            float: left;
            background-color: #EEE;
            height: 100px;
            width: 100px;
        }
        .container::after{
            clear: both;
            content:"";
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>
    </div>

    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>
    </div>

</body>
</html>

触发BFC

触发浮动容器的BFC来清除浮动。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>Float</title>
    <style>
        .container{
            border: 1px solid #eee;
            padding: 5px 0;
            margin: 5px 0;
            overflow: auto; /* 触发BFC */
        }
        /* BFC 块级格式化上下文 https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87.md */
        .t1{
            margin: 0 5px;
            float: left;
            background-color: #EEE;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>
    </div>

    <div class="container">
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div class="t1">Float</div>
        <div style="height: 10px;background-color: blue;"></div>
    </div>

</body>
</html>

Table布局

<table>最常用的也是最正确的使用方法是制作表格，由于其对占据的空间有着划分的作用，便可以使用<table>来布局。

示例

实现一个简单的布局，将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用，如果布局复杂，可以在单元格中再嵌套表格，单元格中的元素或者嵌套的表格用align和valign设置对齐方式。要注意的是，在HTML5标准中，<table>的align、bgcolor、cellpadding、cellspacing、frame、rules、summary、width属性皆已不再支持，由CSS设置相关属性来呈现效果。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>TABLE布局</title>
</head>
<body>

<table style="width: 100%;">
  <tr>
    <td style="width: 200px;">导航栏</td>
    <td>内容</th>
  </tr>
</table>

</body>
</html>

问题

使用<table>来布局绝对不是一个好的解决方案，对于布局方案首选Flex布局，稍微复杂的布局可以选择Grid布局方案，<table>本身是为呈现表格化的数据而设计的，如果使用<table>来呈现数据表格是完全没有问题的。

  • <table>要比其它html标记占更多的字节，代码的复杂度会大大提升。
  • <table>会阻塞浏览器渲染引擎的渲染顺序，<table>是整体载入后才开始显示的，没有加载完毕前，<table>为一片空白，而<div>等标签可以逐行渲染，一边加载一边显示。
  • <table>经常需要多个关口，因为<table>可以影响在它们之前已经进入的DOM元素的显示的元素。假设因为表格最后一个单元格的内容过宽而导致纵列大小完全改变，这会造成浏览器的回流从而引发渲染性能问题。
  • <table>里显示图片时有可能需要你把单个、有逻辑性的图片切成多个图，这个主要看需求，<table>中进行单元格合并操作也是可行的方案。
  • <table>会影响其单元格内部的某些布局属性的生效。
  • <table>的各种属性逐渐不受支持，需要使用CSS控制显示相应效果。
  • <table>的语义是数据表格，使用<table>来布局不利于SEO。
  • 若布局较为复杂，则可能造成多层<table>嵌套，代码嵌套过多表现的过于复杂。

display

倘若需要类似于表格的布局，可以使用display: table;来呈现，display的table属性值只是声明了某些元素在浏览器中的样式，其并不包含语义，他的属性基本能够对应<table>系列标签，并且还能将缺少的表格元素会被浏览器以匿名方式创建，CSS2.1规范中写道：CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

  • table类似<table>：此元素会作为块级表格来显示，表格前后带有换行符。
  • inline-table类似<table>：此元素会作为内联表格来显示，表格前后没有换行符。
  • table-header-group类似<thead>：此元素会作为一个或多个行的分组来显示。
  • table-footer-group类似<tfoot>：此元素会作为一个或多个行的分组来显示。
  • table-row类似<tr>：此元素会作为一个表格行显示。
  • table-row-group类似<tbody>：此元素会作为一个或多个行的分组来显示。
  • table-column类似<col>：此元素会作为一个单元格列显示。
  • table-column-group类似<colgroup>：此元素会作为一个或多个列的分组来显示。
  • table-cell类似<td>和<th>：此元素会作为一个表格单元格显示。
  • table-caption类似<caption>：此元素会作为一个表格标题显示。

响应式布局的实现

响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。

使用媒体查询

通过使用CSS媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。

使用link链接

<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="example.css">-->
<link rel="stylesheet" href="example.css" media="all and (max-width:600px)"/>

直接在CSS中使用

<!--
@media mediatype and|not|only (media feature){
    /* css样式 */
}
-->
<div id="t1"></div>
<style>
    @media screen and (min-width:600px){
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: red;
            transition: all .5s;
        }
    }
    @media screen and (max-width:600px) {
        #t1{
            height: 100px;
            width: 100px;
            border: 1px solid #eee;
            background: yellow;
            transition: all .5s;
        }
    }
</style>

使用@import导入

/* @import url("example.css") mediatype and|not|only (media feature); */
@import url("example.css") all and (max-width:600px);

媒体类型

  • all: 用于所有设备。
  • print: 用于打印机和打印预览。
  • screen: 用于电脑屏幕，平板电脑，智能手机等。
  • speech: 应用于屏幕阅读器等发声设备。

逻辑操作符

  • and: 表示且，当所有的条件满足的时候返回true。
  • not: 是用来排除某种制定的媒体类型。
  • only: 用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
  • ,: 逗号用于将多个媒体查询合并为一个规则，逗号分隔效果等同于or逻辑操作符。

媒体功能

  • aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的比率。
  • color: 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0。
  • color-index: 定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0。
  • device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的比率。
  • device-height: 定义输出设备的屏幕可见高度。
  • device-width: 定义输出设备的屏幕可见宽度。
  • grid: 用来查询输出设备是否使用栅格或点阵。
  • height: 定义输出设备中的页面可见区域高度。
  • max-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
  • max-color: 定义输出设备每一组彩色原件的最大个数。
  • max-color-index: 定义在输出设备的彩色查询表中的最大条目数。
  • max-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最大比率。
  • max-device-height: 定义输出设备的屏幕可见的最大高度。
  • max-device-width: 定义输出设备的屏幕最大可见宽度。
  • max-height: 定义输出设备中的页面最大可见区域高度。
  • max-monochrome: 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
  • max-resolution: 定义设备的最大分辨率。
  • max-width: 定义输出设备中的页面最大可见区域宽度。
  • min-aspect-ratio: 定义输出设备中的页面可见区域宽度与高度的最小比率。
  • min-color: 定义输出设备每一组彩色原件的最小个数。
  • min-color-index: 定义在输出设备的彩色查询表中的最小条目数。
  • min-device-aspect-ratio: 定义输出设备的屏幕可见宽度与高度的最小比率。
  • min-device-width: 定义输出设备的屏幕最小可见宽度。
  • min-device-height: 定义输出设备的屏幕的最小可见高度。
  • min-height: 定义输出设备中的页面最小可见区域高度。
  • min-monochrome: 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
  • min-resolution: 定义设备的最小分辨率。
  • min-width: 定义输出设备中的页面最小可见区域宽度。
  • monochrome: 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0。
  • orientation: 定义输出设备中的页面可见区域高度是否大于或等于宽度。
  • resolution: 定义设备的分辨率。
  • scan: 定义电视类设备的扫描工序。
  • width: 定义输出设备中的页面可见区域宽度。

单位

百分比

当度量单位设置为百分比时，即可使浏览器组件宽高随着浏览器的大小相应变化。

  • 子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。
  • 子元素的top和bottom如果设置百分比，则相对于直接非static定位的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位父元素的宽度。
  • 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
  • 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。
  • 设置border-radius为百分比，则是相对于自身的宽度，还有translate、background-size等都是相对于自身的。

em单位

em是相对长度单位，相对于当前对象内文本的字体尺寸，若未设置则相对于浏览器默认字体尺寸16px，em是会继承父元素的字体的尺寸，使用时需要重新计算子元素的em值避免1.2*1.2=1.44的现象，使用em可以使元素根据字体大小的动态调整来制作响应式布局。

rem单位

rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生相应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变根元素的font-size即可。

vh vw vmin vmax

  • vh: 相对于视窗的高度，1vh等于视窗高度的1%。
  • vw: 相对于视窗的宽度，1vw等于视窗宽度的1%。
  • vmin: vw和vh中的较小值。
  • vmax: vw和vh中的较大值。

缩放比例

通过动态地控制网页视图的缩放比例来制作响应式布局。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

自适应布局

自适应布局一般是通过检测User-Agent来判断当前访问的设备是PC端还是平板或者是手机，或者是通过检测窗口分辨率而请求服务器，从而服务端重定向或者返回不同的页面，需要开发多个页面来适应不同的设备，通常自适应布局与响应式布局并不是单独使用的，可以通过开发一套PC端页面与一套移动端页面来实现自适应布局，而两套页面都实现对于不同范围分辨率的响应式布局，可以避免过大的CSS样式表又可以获得较好的浏览体验。

版权归属：棋

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

2026 © 棋