奇舞学院学习笔记之CSS一页通

最新推荐文章于 2024-04-29 19:50:43 发布

sundaxiao

最新推荐文章于 2024-04-29 19:50:43 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/sunxiaofre/article/details/69808017

CSS 专栏收录该内容

10 篇文章

订阅专栏

CSS概念与简单选择器

版本

CSS Level 1
CSS Level 2（CSS2.1规范）
CSS Level 3
- Color Module Level 3
- Selectors Level 3
- Media Queries
- Fonts Level 3

CSS规则

CSS就是：在页面中选中一个或多个元素，给他们定义样式，如颜色、字体、大小等。
选择器–声明块–声明–属性–值
代码风格：可以放在一行／多行。推荐多行。
使用CSS：外链／嵌入／内联
<link rel="stylesheet" href=" test.css"> link表示一个链接，把外部的资源引入到当前的页面，链接进来。rel 是relationship关系的缩写，代表引进的东西与当前页面的关系。
CSS注释：/* 此处是CSS注释 */
选择器
- 通配选择器：匹配所有元素。*{}
- 标签选择器：匹配所有该元素。p{}
- id选择器：匹配指定id的元素。#idName{}
- 类选择器：可以给一个元素指定多个class，也可以给不同元素指定同一个class。.className{}
- 属性选择器：给具有特定属性的元素设置样式。
- input[disabled]{}
- [for~="height"]{}表示包含有height的for属性的元素，这些是以空格分开的几个值，这几个值当中其中有一项是height，而不是指字符串中包含height这个串。
- a[href^="#"] 选中的是href以#号开头的a标签。
- <a href="#balabala"> 以#号开头的href的a标签表示页面内的跳转。
- [class*="icon-"] *=号表示只要包含此字符串即可，不管有没有空格，不管在什么位置。
- 可以用逗号同时将多个选择器定义同一个CSS样式。[class~="icon"],[class*="icon-"]={}
- 伪类选择器（pseudo-classes）
  - 基于DOM之外的信息去选择元素。比如根据用户和网页的交互状态。如未访问过的链接与访问过的链接。元素：某种状态{}
  - a:link{} 未访问过的链接
  - a:visited{} 已访问过的链接
  - a:hover{} 鼠标移到链接上的样式
  - a:active{} 鼠标在链接上按下时的样式
  - a:focus{} 获得焦点时的样式
  - 注意：当鼠标按下时也是获得焦点时的状态。即当active时同时会有focus时的样式。
  - 可以用键盘上tab键切换页面上的焦点。
  - 选择器组合（选中的总是后面的元素，不是前面进行限定的元素）
  - 直接组合EF。如：p.warning{}，E[foo="abc"]{]，E#myId{}，#myId.warning{}，.warning[foo="abc"]。在组合时标签总是放在前面的。
  - 后代选择器。如：article p{}。不管是儿子、孙子还是重孙子，都可以。
  - 亲子选择器。如：article > p{}。只会选择亲儿子。
  - 同时为一组选择器定义样式。如：body, h1, h2, ul, ol{}，[type="checkbox"],[type="radio"]{}。

文本样式

`font-family` 字体。

使用逗号分隔的字体族名称。
初始值由浏览器设置决定，可继承。
一套字体设计的时候是以字体族的形式设计的。

字体匹配算法

浏览器现获取一个系统字体列表
对于元素中的每一个字符，使用font-family属性及其它属性进行匹配，如果能匹配就暂定该字体
如果步骤2没有匹配上，选择下一个可选的font-family 执行步骤2
如果匹配到一个字体，但是字体中没有该字符，继续对下一个可选的font-family执行步骤2
如果没有匹配到字体，使用浏览器默认字体。

通用字体族

Serif 衬线体（末端粗细有装饰）
- Goergia
- 宋体
Sans-Serif 无衬线体（线条简单一致）
- Arial
- Helvetica
- 黑体
- 微软雅黑
Cursive 手写体
- Caffisch Script
- 楷体
Fantasy 梦幻字体
- Comic Sans MS
- Papyrus
- Eapfinoj
Monospace 等宽字体（展示代码时用这个）
- Consolas
- Courier
- 中文字体

`font-family`使用注意

英文字体放在中文字体前面
最后总是添加通用字体族

`font-size`字体大小

定义文字的大小，可使用px、百分数、em等做单位。
取值
- 绝对值：xx-small | x-small | small | medium | large | x-large | xx-large。
- 相对值：larger | smaller。
- 长度：em。长度单位em：一般是相对于元素font-size的计算值的；用在font-size属性上时，是相对于父元素的font-size计算值。
- 百分数，相对于父元素计算值。
初识值为medium（由浏览器设置决定，一般为16px），可继承。
注意其中的倍数关系，em与px，父子。

`font-style` 斜体正体

定义文字以斜体还是正常方式显示。
取值：normal正常 | italic真斜体 | oblique伪斜体用算法实现倾斜。
初始值：normal，可继承。

`font-weight` 粗细

定义文字的粗细程度。
取值：normal | bold | bolder | lighter | 100 | 200 | … 900。
初始值：normal，可继承。
取值含义：
- 100 - Thin
- 200 - Extra Light
- 300 - Light
- 400 - Normal
- 500 - Medium
- 600 - Semi Bold
- 700 - Bold
- 800 - Extra Bold
- 900 - Black
- normal - 400
- bold - 700
- bolder - 比继承值粗
- lighter - 比继承值细

`line-height` 行高

元素所属的line box所占的高度。这一行所占的高度，包括字和间距。
初识值：normal（具体值由浏览器决定），可继承。
取值：<长度>|<数字>|<百分比>。使用长度em时，可能会因为继承出现排版错位问题，因为使用计算值需要乘。使用数字一般不会出现错位问题，因为使用计算值不会乘上数字。
行高font-height建议都写数字，不加单位。
段落文字一般取值 1.4～1.8
注意其中的倍数关系，父子。
小技巧：当给单行文字设置高度时，一般用line-height来设定高度。如导航栏。

`font`缩写

font可以同时指定字体的斜体、粗细、大小、行高、字体族。
font:bold 14px/1.7 Helvetica, sans-serif;

Web Fonts

Web Fonts就是把字体文件放到服务器上，通过在CSS中引用字体文件，让浏览器使用服务器上的字体。


<h1>In the evening one may praise the day.</h1>
<style>
    @font-face{
        font-family: 'Lobster';
        font-style: normal;
        font-weight: 400;
        src: local('Lobster'),
        local('Lobster-Regular'),
        url(//lib.baomitu.com/fonts/lobster/lobster-v18-latin-regular.woff2)
        format('woff2'),
        url(//lib.baomitu.com/fonts/lobster/lobster-v18-latin-regular.woff)
        format('woff');
    }
    h1{
        font-family: 'Lobster', cursive;
    }
</style>

`text-align`

定义文本在容器内的对齐方式。
取值：left | right | center | justify。
初始值由HTML的dir属性(表示文字书写的方向)决定，可继承。

`letter-spacing` 字符间距

单个字符之间的间距

`word-spacing` 单词间距

英文单词之间的间距

`text-indent` 文本缩进

指定文本缩进，之影响第一行，首行缩进。
取值：normal | <length> | <percentage>
初始值为0，可继承。

`text-decoration` 文本线

定义了文本的一些装饰效果，如下划线、删除线等。
初始值为none无装饰，可继承。
其他值：underline | line-through | overline。

`white-space` 空白符

指定空白符如何处理。
取值：normal | nowrap不换行 | pre html中怎么写就怎么展示。

`word-break` 单词拆分

指定是否允许在单词中间换行。
取值：normal | break-all | keep-all。

浮动

定位模式（Positioning schemes）

常规流（Normal Flow）
浮动（Float）
绝对定位（Absolute Positioning）

常规流（Normal Flow）

除了根元素、浮动元素和绝对定位元素外，其他元素都在常规流之内（in-flow）。
而根元素、浮动和绝对定位的元素会脱离常规流（out of flow）。
常规流中的盒子，属于块级格式化上下文或行级格式化上下文。

块级格式化上下文（Block Formatting Context，BFC）

盒子在容器（包含块）内从上到下一个接一个的放置。
两个兄弟盒子之间的竖直距离由margin属性决定。
同一个BFC内垂直margin会合并。
盒子的左外边缘挨着容器（包含块）的左边。

行级格式上下文（Inline Formatting Context）

盒子一个接一个水平放置。
盒子之间的水平margin，border和padding都有效。
同一行的盒子所在的矩形区域叫行盒（Line box）。
当一个行盒放不下上下文内所有盒子时，会被分到多个垂直堆叠的行盒里。
行盒内的水平分布由text-align属性决定。
如果一个行级块无法分割（单词，inline-block），该元素会被作为一个整体来决定放在某一个行盒。

浮动（float）

浮动元素从常规流中脱离，被漂浮在容器（包含块）左边或右边。
浮动盒会一直飘到其外边缘挨到容器边缘或另外的浮动盒。
浮动元素不会影响其后面的流内块级盒。
但是浮动元素后面的行级盒子会变短以避开浮动元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        img{
            width: 300px;
            height: 200px;
            float: left;
        }
        p{
            font-size: 14px;
            line-height: 1.8;
            border: 5px solid red;
        }
        span{
            border: 3px solid blue;
        }
    </style>
</head>
<body>
<section>
    <img src="xd.png" alt="熊顿说">
    <img src="xd.png" alt="熊顿说">
    <span>浮动元素从常规流中脱离，被漂浮在容器（包含块）左边或右边。
        浮动盒会一直飘到其外边缘挨到容器边缘或另外的浮动盒。
        浮动元素不会影响其后面的流内块级盒。
        但是浮动元素后面的行级盒子会变短以避开浮动元素。
    </span>
    <p>浮动元素从常规流中脱离，被漂浮在容器（包含块）左边或右边。
        浮动盒会一直飘到其外边缘挨到容器边缘或另外的浮动盒。
        浮动元素不会影响其后面的流内块级盒。
        但是浮动元素后面的行级盒子会变短以避开浮动元素。
    </p>
</section>
</body>
</html>

这里写图片描述

层叠、继承和CSS单位

选择器的特异度（Specificity）

简单选择器的特异度级别
- Level 0:*
- Level 1:标签选择器、伪元素
- Level 2:类、伪类、属性
- Level 3:id选择器
- Level 4:内联
样式覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠、继承和CSS单位</title>
    <style>
        .btn{
            display: inline-block;
            padding: .36em .8em;
            margin-right: .5em;
            line-height: 1.5;
            text-align: center;
            cursor: pointer;
            border-radius: .3em;
            border: none;
            background: #e6e6e6;
            color: #333;
        }
        .btn-primary{
            color: #FFFFFF;
            background: #218dee;
        }
    </style>
</head>
<body>
<button class="btn btn-primary">提交</button>
<button class="btn">取消</button>
</body>
</html>

这里写图片描述

`important`

在属性的值后面加上!important，则该属性的样式就不会被覆盖。除非想覆盖它的那个属性也加上!important。（谨慎使用！）
当你在写会嵌入到第三方网站的组件时，如微博、QQ，可以使用!important。其他时候使用时会导致组件无法扩展。

`Cascading`

CSS为什么叫CSS：样式是层叠的。
CSS样式的来源：
- 页面开发者
- 用户设置
  - 用户样式：浏览器可以指定一个本地CSS文件，打开所有页面时自动加载。
- 浏览器预设样式
  - Mozilla Firefox 预设样式
  - Google Chrome 预设样式
  - Internet Explorer 预设样式
哪条声明起作用？
- 找出匹配到的该属性的所有声明
- 根据规则来源，优先级从低到高：
  - 浏览器预设
  - 用户设置
  - 网页样式
  - 含!important的网页样式
  - 含!important的用户设置样式
- 同一来源中，按照特异度排序，越特殊优先级越高
- 特异度一样时，按照样式书写顺序，后面的优先级高

默认值策略（Defaulting）

继承
- 某些属性会自动继承其父元素的计算值，除非显式指定一个值。
- 显示继承：box-sizing:inherit;。因为只有一部分属性会自动继承，如与文字相关的大部分属性是可以继承的；有一些属性是不继承的，如box-sizing。
初始值
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以显式重置为初始值，如background-color:initial

CSS求值过程

由 DOM树 & 样式规则
经：filtering（对应用到该页面的规则用以下条件进行筛选：选择器匹配、属性有效、符合当前media等）
得：声明值（Declared Values，一个元素的某属性可能由0到多个声明值。如：p{font-size:16px}和p.text{font-size:1.2em}）
经：cascading（按照来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值）
得：层叠值（Cascaded Value，在层叠过程中，赢得优先级比赛的那个值。如 1.2em）
经：defaulting（当层叠值为空时，使用继承或初始值）
得：指定值（Specified Value，经过cascading和defaulting之后，保证指定值一定不为空）
经：resolving（将一些相对值或者关键字转化成绝对值。如em转为px，相对路径转为绝对路径）
得：计算值（Computed Value，一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值。如60%。继承是继承的计算值）
经：formatting（将计算值进一步转换。如关键字、百分比等都转为绝对值）
得：使用值（Used Value，进行实际布局时使用的值，不会再有相对值或关键字。如400.2px）
经：constraining（将小数像素值转为整数）
得：实际值（渲染时实际生效的值。如400px）

各种类型的值

关键值：（不需要加引号）font-size:inatial, box-sizing:inherit, color:red
字符串：（需要加引号）content:"abc"
URL：background-image:url(/resources/img/xiong.png)
长度：font-size:2em, height:100px, width:100px
百分比：width:50%, font-size:150%
整数：z-index:9
浮点数：line-height:1.8
颜色：color:#fff, color:rgb(0,0,100)
时间：transition-duration:0.3s
角度：transform:rorateX(deg)
函数：content:attr(title), height:calc(100vh-100px)

长度单位

绝对单位
- px：像素，对应显示器的一个像素点
- in：英寸
- cm：厘米
- mm：毫米
- pt：磅（1pt=1/72英寸）
- pc：1pc=12pt
相对单位
- em：相对于该单位的一个font-size大小的值。（常用）
- rem：相对于根元素root即html的font-size。（手机上用）
- vh：浏览器窗口高度的1%。（做全屏的布局时用）
- vw：浏览器窗口宽度的1%（做全屏的布局时用）
- vmin：vh和vw中的较小者
- vmax：vh和vw中的较大者

颜色

关键字：147种颜色的关键字。如red
Hex：十六进制的指定方法，如#十六进制的数
- RGB&RGB
  - RGB：rgb(255,0,0)，从0到255的数值范围内。
  - RGBA比RGB增加了透明度。一个元素可以是半透明的，但是其中的元素不是半透明的。rgba(0,0,0,0.1)，其中最后一位表示透明度，取值范围是0-1。
HSL&HSLA
- HSL：使用Hue（色相是色彩的基本属性，就是平常所说的颜色的名称，如红色、黄色等。取值范围是0-360）、Saturation（饱和度是指色彩的纯度，值越高色彩越纯，越低则逐渐变灰。取值范围是0-100%）、Lightness（亮度，越高颜色越亮。取值范围是0-100%）三个数字来表示颜色。

盒模型

width：
- 指定的是content box的宽度，不包含padding、border、margin的宽度，仅仅包含content的宽度。
- 百分数是指相对于父容器（包含块）的content box的宽度。
height：
- 指定content box高度。
- 百分数是相对于父容器（包含块）的content box的高度。
- 只有当包含块的高度不依赖该元素时，百分比高度才生效。
padding：
- 内边距：内容距离盒子的距离
- padding-top、padding-right、padding-bottom、padding-left
- 缩写：padding:上右下左、padding:上下左右
margin
- 外边距：一个盒子距离另外一个盒子的距离，不能超过这个数
- margin-top、margin-right、margin-bottom、margin-left
- 缩写：margin
- margin折叠：margin的真正含义是：在这个盒子外多远的距离内不能再摆放其他的盒子！
- margin可以为负值吗？可以的。负值意味着两个盒子有重叠，即允许这个盒子和其他的盒子重叠多少
box-sizing（CSS3新增）
- 改变盒模型的计算方式
- 取值：border-box | content-box
- 初始值：content-box
border
- 边框的三个要素：
  - border-width：<length>|thin|medium|thick
  - border-style:none|solid|dashed|dotted|double
  - border-color:<color>
- 边框的四个方向：
  - border-top、border-right、border-bottom、border-left
  - 小技巧常用：用border做一个三角形：先设置四个方向的border颜色，再将border里面的content置为0，最后设置其他方向的border的透明度为0，此时就可以得到一个三角形，可以通过设置得到不同方向不同角度的三角形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用CSS制作三角形</title>
    <style>
        .triangle{
            border-width: 50px;
            border-style: solid;
            border-color: #aa120c #bbb #ccc #ddd;

            width: 0px;
            height: 100px;
            transition: all 5s ease-in;
            margin: 1em auto;
        }
    </style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

这里写图片描述

min-width&max-width（有用）
- 可以通过设置article的min-width和max-width来做文字的布局，特别是响应式的布局时比较有用。
min-height&max-height（有用）
- 可以通过设置这两项，再加上overflow:hidden就可以实现有用的效果。
- 当内容溢出时，用overflow来控制溢出的内容如何展示：auto|hidden|inherit|initial|overlay|scroll|visible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置文字区域</title>
    <style>
        article{
            border: 1px solid red;
            max-width: 40em;
            max-height: 6em;
            overflow: scroll;
        }
    </style>
</head>
<body>
<article>
    <p>当地时间4月9日，陈坚在芝加哥登上美联航编号为3411的航班，计划飞往路易斯维尔。</p>
    <p>但飞机起飞前，美联航声称有4位工作人员需要登机，
        以客机“超员”为由要求4名乘客下机。
        美联航与乘客协商无果之后，“随机”选取陈坚等4名乘客，
        要求他们下飞机。
    </p>
    <p>　目击者泰勒·布里奇斯表示，陈坚拒绝下飞机并表明自己是医生，明天上午还要看病人，
        他还曾说过类似“之所以选我，就因为我是中国人”的话。</p>
    <p>陈坚与机组协商无果后，多名警察登机，强行将陈坚从其靠窗的座位上拽了出来。
        拉拽过程中，陈坚一度大声呼叫，随后躺倒在地上被拖拽出去。
    </p>
</article>
</body>
</html>

这里写图片描述

overflow
- 溢出控制
- 取值： visible|hidden|scroll|auto
  - （auto是滚动条按需出现消失）

视觉格式化模版–浏览器是怎么排版的？

视口（Viewport）
- 浏览器的可视区域
- 用户通过视口查看网页内容（透过窗户看风景）
块级元素（Block-level Elements）
- 块级元素与盒子是两个不同的概念，元素是HTML中一个个的标签；盒子是在排版的时候，浏览器放置东西时的方式。
- 会被格式化成块状的元素，一块一块的，另起一行。
- 例如：p、div、section等
- 将display设置为block、list-item、table使元素变为块状
行级元素／内联元素（Inline-level Elements）
- 不会为其内容生成块级框
- 让其内容分布在多行中，只是让内容分布在几行里，不是方方正正的一块，而是一行一行的
- display设置为inline、inline-block、inline-table使元素变为行级元素
盒子的生成
- 每个块级元素生成一个主块级盒（principal block-level box）
- 每个行级元素生成一个行级盒子，行级盒分布于多行，盒子比较逆天。
- 并不是一个元素产生一个盒子，有的元素会生成多个盒子
Box Model - revisited
- margin：行级盒的margin-top和margin-bottom不会产生效果。但是行级盒的margin-left和margin-right会有效果。
- padding：行级盒的padding-top和padding-bottom不影响布局，不会影响元素的摆放。
块级盒子中的字盒子的生成
- 块级盒子中可以包含多个子块级盒子
- 也可以包含多个行级盒子
- 不在行级元素里面的盒子，会生成匿名行级盒。
- 块级盒子中不能同时包含块级和行级盒子。遇到这种会生成匿名块级盒子来包裹行级盒。（要留意这一点！）

<div>
    <h1>块级元素中的块级元素</h1>
    <span>块级元素中的行级元素</span>
</div>

这里写图片描述

行级盒子内的字盒子的生成
- 行级盒子内可以包含行级盒子
- 行级盒子包含一个块级盒子时，会把块级盒子拆成两个行级盒子，这两个盒子又会被匿名块级盒子包含

<span>
    <em>（行级元素中的行级元素）</em>
    <p>（行级元素中的块级元素）陈坚与机组协商无果后，多名警察登机，强行将陈坚从其靠窗的座位上拽了出来。
    拉拽过程中，陈坚一度大声呼叫，随后躺倒在地上被拖拽出去。</p>
    <strong>（行级元素中的行级元素）</strong>
</span>

这里写图片描述

display属性
- block生成块级盒
- inline生成行级盒
- inline-block生成行级盒（不会换行），为其内容生成块级盒（可以设置width、height、margin、border、padding）
- none在排版时将元素忽略（不展示此元素）
visibility（相当于是透明的）
- 控制元素展示（明明在那里，但是对你不可见）
- 取值：visible|hidden|collapse
- 初始值为visible
Generated Content
- 控制元素。这个元素在CSS中多产生一个盒子，用来存放指定的内容
- ::before和::after
- content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Generated content</title>
    <style>
        a::before{
            content: '\1993'
        }
        a:after{
            content: '('attr(href)')';
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击访问</a>
</body>
</html>

这里写图片描述

定位与堆叠

定位模式（Positioning schemeschemes）

常规流（Normal Flow）
浮动（Float）
绝对定位（Absolute Positioning）

`position`

static：非定位，默认值
relative：相对定位（相对自己）（仍在常规流内排版）
absolute：绝对定位，相对非static祖先元素定位
fixed：相对于视口绝对定位

`position:relative`

在常规流里面布局
相对于自己本应该在的位置进行偏移
position:relative
使用top、left、bottom、right设置偏移长度
流内其他元素当它没有偏移一样布局（自己有个坑，出去串个门儿），所以它不会对其他元素造成布局上的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relative</title>
    <style>
        figure{
            width: 512px;
        }
        figure img{
            display: block;
        }
        figcaption{
            position: relative;
            top: -28px;
            background: rgba(0,0,0,0.3);
            color: #FFFFFF;
            font-size: 14px;
            line-height: 2;
            /*因为font-size为12px，line-height为2，故figcaption占的高度是28px*/
            padding: 0 1em;
        }

    </style>
</head>
<body>
<figure>
    <img src="xd.png" alt="熊顿" width="512px">
    <figcaption>熊顿一直在</figcaption>
</figure>
<p>愿用我的微笑，拂去你所有的忧虑</p>
</body>
</html>

这里写图片描述

`position:absolute`

脱离正常流
相对于最近的非static祖先的padding box定位
不会对流内元素布局造成影响（自己没坑，所在处可能别人也在，发生重叠）
可以有margin，但不会折叠
自动计算
- 这些值都可以不指定：top,left,right,bottom,width,height（它的auto的值就是它本该呆的地方）不设定就是auto，它会带在本该呆的地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute</title>
    <style>
        figure{
            width: 512px;
            position: relative;
        }
        figure img{
            display: block;
        }
        figcaption{
            position: absolute;
            /*设置position:absolute时，一定要先弄清其父级是谁*/
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,0.3);
            color: #FFFFFF;
            font-size: 14px;
            line-height: 2;
            padding: 0 1em;
            box-sizing: border-box;
            right: 0;
            left: 0;
        }
        .absP{
            position: absolute;
        }
    </style>
</head>
<body>
<figure>
    <img src="xd.png" alt="熊顿" width="512px">
    <figcaption>熊顿一直在</figcaption>
</figure>
<div>愿用我的微笑，拂去你所有的忧虑</div>
<div class="absP">啦啦啦</div>
<div>愿用我的微笑，拂去你所有的忧虑</div>
<div>愿用我的微笑，拂去你所有的忧虑</div>

</body>
</html>

这里写图片描述

`position:fixed`

相对于Viewport定位
不会随页面滚动发生位置变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
    <style>
        nav{
            position: fixed;
            line-height: 2;
            background: rgba(0, 0, 0, 0.3);
        }
        nav a{
            padding: 0 1em;
            color: rgba(255, 255, 255, 0.7);
        }
        nav a:hover{
            color: #fff;
        }
        .go-top{
            position: fixed;
            right: 1em;
            bottom: 1em;
            color: #FFFFFF;
        }
        body{
            margin: 0;
            font-size: 14px;
        }
        a{
            color: #FFFFFF;
            text-decoration: none;
        }
        section{
            height: 66.6667vh;
            color: #FFFFFF;
            text-align: center;
            font-size: 5em;
            line-height: 66vh;
        }
        section:nth-child(1){
            background: #f44336;
        }
        section:nth-child(2){
            background: #3f51b5;
        }
        section:nth-child(3){
            background: #ffffc0;
        }
        section:nth-child(4){
            background: #c6eece;
        }
        section:nth-child(5){
            background: #c9cdbf;
        }


    </style>
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">导航1</a>
        <a href="#">导航2</a>
    </nav>
    <main>
        <section>1</section>
        <section>2</section>
        <section>3</section>
        <section>4</section>
        <section>5</section>
    </main>
    <a href="#" class="go-top">返回顶部</a>

</body>
</html>

这里写图片描述

`z-index`堆叠层次

为定位元素（设置了position的元素）指定七仔z轴的上下等级
用一个整数表示，数值越大，越靠近用户
初始值为auto，可以为负数、0、正数
z-index大的一定在上面吗？不一定！要看父级！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        [class^="box-"]{
            position: absolute;
            width: 200px;
            line-height: 200px;
            text-align: center;
            color: #FFFFFF;
        }
        .box-a{
            background: #f44336;
        }
        .box-b{
            top: 100px;
            left: 100px;
            z-index: -1;
            background: #0097a7;
        }
        .box-c{
            top: 150px;
            left: 150px;
            z-index: 1;
            background: #4caf50;
        }

    </style>
</head>
<body>
<div class="box-a">Box a</div>
<div class="box-b">Box b</div>
<div class="box-c">Box c</div>

</body>
</html>

这里写图片描述

堆叠上下文
- 将同类的打包，整体有个上下文。
- Root元素
- z-index值不为auto的定位元素
- 设置了某些CSS3属性的元素，如opacity、transform、animation等。
绘制顺序（在每一个堆叠上下文中，从下到上）
- 形成该上下文的元素的border和background
- z-index为负值的子堆叠上下文
- 常规流内的块级元素非浮动子元素
- 非定位的浮动元素
- 常规流内非定位行级元素
- z-index为0的子元素或子堆叠上下文
- z-index为正数的子堆叠上下文

排版细节

CSS details

行级格式化上下文（Inline Formatting Context）

Font Metrics
- 注意：baseline基线；ascender line上线；descender line下线；mean line均线；
- line-height行高：两行的base-line间的间距
- vertical-align一行内元素垂直对齐
  - 定义盒子所处的行盒（line box）的垂直对齐关系
  - 取值：baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>
  - 百分比相对于元素自身的行高
  - 初始值baseline
  - 注意一个小问题：图片底部露出的红色打底，因为对齐的是baseline，而baseline与text-bottom之间还有一段距离，即为露出来的红色打底。
  - 浏览器在布局时，先根据struct（类似于支柱的东西）确定baseline等线。
  - vertical-align: middle;
  - vertical-align: text-bottom;

`lists style` 列表

display:list-item会生成两个盒子：Principle Block Box和Marker Box
Marker Box的内容（就是那个小圆点）和位置可以通过list-style系列属性指定
list-style-position:inside|outside;
list-style-type：none|disc实心|circle空心|square方块|decimal数字|lower-roman罗马字符|upper-roman|lower-greek希腊字符|lower-latin拉丁字符|upper-latin|armenian|georgian|lower-alpha|upper-alpha等。
list-style-image:url(http://...)
list-style：可以是list-style-type、list-style-position和list-style-image三个属性的简写

`background`属性

可以是以下几个属性的简写：background-color,background-image,background-repeat,background-position
background-size:宽度,高度;：调整背景图大小。或者：background-size:contain;。或者：background-size:cover;

CSS Sprites ：

将小图片合并成一张图，从而减少页面请求的次数，加快页面的加载速度。

`border-radius`：圆角

border-radius:5px
- 可以指定四个方向
- 可以使用百分数

`box-shadow`：阴影（可以用一个元素创造出来各种各样的小图标）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style>
        #exam-one{ border-radius: 10px; }
        #exam-two{ border-radius: 10px; border: 3px solid red; }
        #exam-three{ border-radius: 5px 20px; box-shadow: 13px 13px 50px 6px #00f, -13px -13px 46px 2px #f00;}
        #exam-four{ border-radius: 10px/30px; }
        #exam-five{ border-radius: 30px/10px; }
        #exam-six{ border-radius: 50%; }
        #exam-seven{ width: 200px; border-radius: 50%; }
        #exam-eight{ width: 200px; }
        div{
            background: #bada55;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #000;
            font-size: 24px;
            float: left;
            margin: 1em;
        }
    </style>
</head>
<body>
<div id="exam-one">1</div>
<div id="exam-two">2</div>
<div id="exam-three">3</div>
<div id="exam-four">4</div>
<div id="exam-five">5</div>
<div id="exam-six">6</div>
<div id="exam-seven">7</div>
<div id="exam-eight">8</div>
</body>
</html>

这里写图片描述

布局（又）

布局方法

float
position
inline-block
table
flex
grid

局中

水平居中

行级元素：text-align:center
块级元素：margin:auto

垂直居中

单行文字：line-height。
行级盒子：vertical-align:middle。如小图标和文字的对齐。
绝对定位：top:50%; left:50%;。

`float-based layout` 布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float-based layout</title>
    <style>
        main{
            font-size: 14px;
            padding-left: 10em;
        }
        article{
            float: left;
            width: 100%;
            background: coral;
            min-height: 20em;
        }
        aside{
            width: 10em;
            float: left;
            margin-left: -10em;
            position: relative;
            left: -100%;
            background: lightblue;
            min-height: 20em;
        }
    </style>
</head>
<body>
<main>
    <article>
        这里是正文
    </article>
    <aside>这里是侧边栏</aside>
</main>
</body>
</html>

这里写图片描述

`position` 布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position</title>
    <style>
        main{
            font-size: 14px;
            position: relative;

        }
        article{
            margin-left: 10em;
            background: #c4e3f3;
        }
        aside{
            top: 0;
            left: 0;
            bottom: 0;
            /*height: 100%; 与bottom:0 的效果一样，设置显示的高度*/
            width: 10em;
            background: #e6e6e6;
            position: absolute;
        }
    </style>
</head>
<body>
<main>
    <article>
        这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
        这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
        这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容
    </article>
    <aside>这里是侧边栏</aside>
</main>
</body>
</html>

这里写图片描述

`table layout` 布局方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table layout</title>
    <style>
        table{
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        th, td{
            border: 1px solid gray;
            padding: 1em;
        }
        tr> :first-child{
            width: 8em;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>项目名称</th>
        <th>项目分类</th>
        <th>项目负责人</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>基于深度学习的图像分类</th>
        <td>深度学习</td>
        <td>张某某</td>
    </tr>
    <tr>
        <th>基于机器学习算法的图像分类</th>
        <td>机器学习</td>
        <td>孙某某</td>
    </tr>
    <tr>
        <th>基于深度学习的图像分类</th>
        <td>深度学习</td>
        <td>刘某某</td>
    </tr>
    </tbody>
</table>
</body>
</html>

这里写图片描述

`fixed table layout` 布局

注意！！不要使用表格标签进行布局！！要尽量使用语义化。
可以用display:table来进行布局，使其表现的像表格一样
- display:table—<table>
- display:table-cell—<td>
- display:tabel-row—<tr>
- display:table-column—<col>
- display:table-column-group—<colgroup>
- display:table-footer-group—<tfoot>
- display:table-header-group—<thead>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed table layout</title>
    <style>
        table{
            width: 100%;
            /*给每个单元格固定宽度*/
            table-layout: fixed;
            border-collapse: collapse;
        }
        th, td{
            border: 1px solid #789;
            padding: 1em;
        }
        tr > th{
            /*给每个单元格固定宽度*/
            width: 8em;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>项目名称</th>
        <th>项目分类</th>
        <th>项目负责人</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>基于深度学习的图像分类</th>
        <td>深度学习（这个比较长，看看单元格的宽度是否有相应调整）</td>
        <td>张某某</td>
    </tr>
    <tr>
        <th>基于机器学习算法的图像分类</th>
        <td>机器学习</td>
        <td>孙某某</td>
    </tr>
    <tr>
        <th>基于深度学习的图像分类</th>
        <td>深度学习</td>
        <td>刘某某</td>
    </tr>
    </tbody>
</table>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:table布局方式</title>
    <style>
        nav{
            width: 100%;
            display: table;
            border-collapse: collapse;
            font-size: 14px;
            line-height: 3;
        }
        nav a{
            display: table-cell;
            border: 1px solid white;
            background: hsl(160, 27%, 60%);
            color: rgba(255,255,255,0.9);
            text-align: center;
            text-decoration: none;
        }
        nav a:hover{
            background: hsl(181, 27%, 55%);
            color: #000;
        }
    </style>
</head>
<body>
<nav>
    <a href="#">HTML</a>
    <a href="#">CS</a>
    <a href="#">JAVASCRIPT</a>
    <a href="#">REACT</a>
</nav>
</body>
</html>

这里写图片描述

注意小常识
- 背景色填充的包括content、padding和border，而margin的设置会影响其实际的高度。
- absolute绝对定位脱离了常规流，在任何时候都不会参与长度的计算

`Flexbox` 真正为解决布局问题而生的规范

Flexbox可控制子元素：
- 水平或垂直排成一行
- 控制子元素对齐方式
- 控制子元素的宽度／高度
- 控制子元素的显示顺序
- 控制子元素是否折行
使用方式：display:flex
- 将元素变为Flexbox
- 子元素在容器内水平（默认）或垂直摆放
flex-direction
- 子元素排列方向
- 取值：row（默认按行排列）|row-reverse|column|column-reverse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexbox布局规范</title>
    <style>
        ul{
            /*Flexbox默认从左向右摆放*/
            display: flex;
            padding: 0;
            background: lightcyan;
            flex-direction: column-reverse;
        }
        li{
            list-style: none;
            padding: 1em;
            background: lightsteelblue;
        }
    </style>
</head>
<body>
<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>
</body>
</html>

这里写图片描述

主轴与侧轴：
- 主轴永远是子元素流动、摆放的方向
flex-grow 弹性
- 定义每一个子元素在盒子内的弹性
- 拓展盒子剩余空间的能力
- 取值：数字
flex-shrink 收缩
- 元素收缩的能力
- 当空间不够时，是否收缩
- 取值：数字，默认为1。当flex-shrink: 0;时，不收缩，不管够不够住，他都站原先那么多空，不让开。
flex-wrap 折行
- 元素在主轴方向摆放时，是否换行
- 取值：nowrap|wrap|wrap-reverse
justify-content 主轴方向摆放
- 子元素沿主轴方向的摆放
- 取值：flex-start|flex-end|center|space-between|space-around

这里写图片描述

align-items 侧轴方向摆放
- 在侧轴方向的对齐方式
- 取值：flex-start|flex-end|center|baseline|stretch
- 默认值：stretch

这里写图片描述

align-self
- 在某个子元素上设置对齐方式。
align-content
- 多行内容在容器内侧轴方向的对齐
- 取值：flex-start|flex-end|center|space-between|space-around|stretch

这里写图片描述

order
- 指定摆放时的顺序，从小到大
- 取值：数字，默认为0

动画

2D

transform属性：变换
- 对元素进行平移、旋转、缩放
- transform不会对其他元素布局产生影响
- 取值：none|<transform-list>
- 如：transform: rotate(-45deg) translate(100px, 0); 注意！书写的谁许很重要，顺序不同，结果可能不同
transform-list
指定某一坐标轴变换
- translateX
- translateY
- scaleX
- scaleY
transform-origin 旋转原点
- transform-origin: x, y;

3D Transform

perspective 视点
- 指定进行3D渲染时，人眼距离Z平面的距离
- 不会影响元素本身的渲染
- 只会影响子元素的3D效果
- 放在要变换的元素的父级身上
- translate3d()
- translateZ()
- rotate3d()
- rotateX()
- rotateY()

`translation` 过渡（有用！）

指定一个样式状态到另一个状态时如何过渡，即两个状态之间的过渡
动画的意义：告诉用户发生了什么
指定过渡：
- 什么属性发生变化时需要过渡
- 过渡持续多长时间
- 速度变化是什么样
- 是否有延迟
transition-property
transition-duration
transition-timing-function
transition-delay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D transform</title>
    <style>
        div{
            padding: 1em;
            border: 1px solid lightgray;
        }
        p{
            transform: rotateY(20deg);
            margin: 0;
            line-height: 4;
            width: 8em;
            text-align: center;
            background: lightgreen;
        }
        .contain-3d{
            perspective: 10em;
        }
        .box{
            transition: all 2s ease-in;
            width: 200px;
            height: 200px;
            margin: 1em auto;
            border-width: 50px;
            border-style: solid;
            border-top-color: #f33;
            border-right-color: #fa2;
            border-bottom-color: #644;
            border-left-color: #266;
        }
        .box:hover{
            width: 0;
            height: 0;
        }
        .box1{
            height: 100px;
            width: 100px;
            background: lightcoral;
            transition: width 1s ease 1s, height 1s ease;
        }
        .box1:hover{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="contain-2d">
    <p>2D Transform</p>
</div>
<div class="contain-3d">
    <p>3D Transform</p>
</div>
<div class="box"></div>
</body>
<div class="box1"></div>
</html>

这里写图片描述

`animation` 动画

animation可以实现更复杂的样式变化效果，多个状态的连续的变化
定义关键帧
指定动画行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation动画</title>
    <style>
        @keyframes down{
            from{
                margin-top: 0;
                opacity: 1;
                /*opacity：透明度， 当opacity为1时就是完全不透明。*/
            }
            50%{
                margin-top: 0.5em;
                opacity: 0.3;
            }
            to{
                margin-top: 0;
                opacity: 1;
            }
        }
        .scroll-down{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -0.5em;
            font: normal normal 36px/1 Helvetica;
            color: #f55;
            animation: down 1.5s ease infinite;
        }
    </style>
</head>
<body>
<i class="scroll-down">↓ 喜欢我就点我吧！</i>
</body>
</html>

这里写图片描述

复杂动画效果：盛开的花朵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation复杂例子</title>
    <style>
        .box{
            position: relative;
            height: 200px;
            width: 200px;
            margin: 2px 0 0 80px;
        }
        .box .leaf{
            position: absolute;
        }
        .leaf{
            margin-top: 200px;
            width: 100px;
            height: 150px;
            border-radius: 150px 0;
            background:
                linear-gradient( 45deg, rgb(255, 229, 229) 10%, rgb(255, 134, 161) 30%, rgb(255, 249, 24) 100% );
            opacity: 0.5;
            transform: rotate(45deg);
            transform-origin: top right;
        }
        .leaf:nth-child(2){
            animation: show-2 6s ease-in-out 1;
        }
        .leaf:nth-child(3){
            animation: show-3 6s ease-in-out 1;
        }
        .leaf:nth-child(4){
            animation: show-4 6s ease-in-out 1;
        }
        .leaf:nth-child(5){
            animation: show-5 6s ease-in-out 1;
        }
        .leaf:nth-child(6){
            animation: show-6 6s ease-in-out 1;
        }
        .leaf:nth-child(7){
            animation: show-7 6s ease-in-out 1;
        }
        .leaf:nth-child(8){
            animation: show-8 6s ease-in-out 1;
        }

        @keyframes show-2{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(71deg);
            }
        }
        @keyframes show-3{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(96deg);
            }
        }
        @keyframes show-4{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(123deg);
            }
        }
        @keyframes show-5{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(149deg);
            }
        }
        @keyframes show-6{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(175deg);
            }
        }
        @keyframes show-7{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(200deg);
            }
        }
        @keyframes show-8{
            0%{
                transform: rotate(45deg);
            }
            100%{
                transform: rotate(220deg);
            }
        }

    </style>
</head>
<body>
<div class="box">
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
    <div class="leaf"></div>
</div>
</body>
</html>

这里写图片描述

高级选择器

Advanced Selector

`:target` 伪类

表示元素被hash匹配时的状态
比如 URL 是/post/a#headTopic 时，name 为headTopic的元素处于被target的状态
可以实现简单的内容的切换（高亮显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器 target</title>
    <style>
        p:target{
            background: red;
            color: #FFFFFF;
        }
        a{
            font-size: 24px;
            width: 20%;
            height: 40px;
            text-align: center;
            display: inline-block;
            text-decoration: none;
            color: #b6c1d3;
            background: #bee6b9;
        }
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
<a href="#p1">One</a>
<a href="#p2">Two</a>
<a href="#p3">Three</a>
<a href="#p4">Four</a>
<p id="p1">此处是第一段</p>
<p id="p2">此处是第二段</p>
<p id="p3">此处是第三段</p>
<p id="p4">此处是第四段</p>
</body>
</html>

这里写图片描述

`:lang` 伪类

元素匹配上指定语言时的状态
浏览器通过lang属性获得语言信息

`:nth-child()` 结构性伪类（与元素出现的位置有关）

通过：:nth-child(an+b)选中某些子元素
例如：:nth-child(7n)选中第7、14、21 … 个子元素
其中a可以为负数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器 nth-child()</title>
    <style>
        li:nth-child(odd){
            background: lightgray;
        }
        li:nth-child(even){
            background: lightblue;
        }
    </style>
</head>
<body>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>
</body>
</html>

这里写图片描述

`nth-of-type` 伪类：第n个这种类型的

nth-child() 与 nth-of-type 的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器 nth-of-type</title>
    <style>
        article :nth-child(3n+1){
            color: #cc0804;
        }
        article :nth-of-type(3n+1){
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<article>
    <h2>这是标题</h2>
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
    <p>Paragraph four</p>
</article>
</body>
</html>

这里写图片描述

`:first-child`/`:last-child` 伪类

`:not()` 伪类

排除匹配的元素
比如：img:not([alt]){}, button:not(:last-child){}

其他选择器伪类

:nth-last-child()
:nth-last-of-type()
:first-of-type
:last-of-type
:only-child
:only-of-type

`:empty` 伪类

伪元素

伪类与伪元素的区别

伪类是在HTML中真实存在的元素
伪元素在HTML中是根本就没有的元素，是在CSS中虚拟出来的元素。
伪元素一般用两个冒号开头::。如：p::first-line{}。

`::first-line` 伪元素

p::first-line{}

`::first-letter` 伪元素

兄弟选择器

相邻兄弟选择器 E+F
通用兄弟选择器 E~F
注意！这两种兄弟选择器选择的都是在其下面的兄弟，不管上面的兄弟。（只选弟弟）

`:checked~F`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素：兄弟选择器</title>
    <style>
        h2 + p {
            color: #e8c;
        }
        h2 ~ p {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p>The first paragraph</p>
<h2>The h2 title</h2>
<p>The second paragraph</p>
<p>The third paragraph</p>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用checkbox实现开关效果</title>
    <style>
        .toggle{
            width: 80px;
            height: 26px;
            background: #333;
            margin: 20px auto;
            position: relative;
            border-radius: 50px;
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.5),
                        0 1px 0 rgba(255,255,255,0.2);
        }

        /* OFF 选项 */
        .toggle:after{
            content: 'OFF';
            color: #fff;
            position: absolute;
            right: 10px;
            z-index: 0;
            font: 12px/26px Arial, sans-serif;
            font-weight: bold;
            text-shadow: 1px 1px 0 rgba(255, 255, 255, .15);
        }

        /* ON 选项 */
        .toggle:before{
            content: 'ON';
            color: #f66;
            position: absolute;
            left: 10px;
            z-index: 0;
            font: 12px/26px Arial, sans-serif;
            font-weight: bold;
        }

        /* 白色的遮板就是 label */
        .toggle label{
            display: block;
            width: 34px;
            height: 20px;
            cursor: pointer;
            position: absolute;
            top: 3px;
            left: 3px;
            z-index: 1;
            background: #fcfff6;
            background: linear-gradient(top, #fcfff6 0%, #dfe5d7 40%, #b3bead 100%);
            border-radius: 50%;
            transition: all 0.4s ease;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
        }
        .toggle input[type=checkbox]{
            visibility: hidden;
        }
        .toggle input:checked + label {
            left: 43px;
        }

    </style>
</head>
<body>
<div class="toggle">
    <!--用 label 中的 for 属性 将其 input 的值关联起来； 点 input 时， label 的值也会发生变化-->
    <input type="checkbox" checked id="t">
    <label for="t"></label>
</div>
</body>
</html>

这里写图片描述

响应式设计

Responsive Web Design 响应式页面设计

响应式设计的含义

同一个页面可以适应不同屏幕大小设备的设计方案

`viewport`

PC页面宽度：980px
<meta name="viewport" content="width=device-width, initial-scale=1.0">

响应式的图片

大图随容器自动缩放，保持高宽比
实现方式：给所有图片添加：max-width:100%

背景图片

background-size:cover：图片会覆盖容器，铺满，图片可能被裁切掉，
background-size:contain：若图片很重要，不希望被裁切，用这个，图片会完整显示

保持高宽比（做视频时常用小技巧）

padding 的百分比是相对于父元素
可以用于：保持高宽比
当不写图片宽度高度时，可以先用一个容器将图片包裹起来，然后给定容器的padding-top:百分比 的形式，构造出一个与图片同样宽高比的容器，这样可以避免页面在加载图片时发生抖动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保持高宽比的盒子</title>
    <style>
        div{
            height: 0;
            /*padding-top: 百分数； --->  绘制一个保持宽高比的盒子。*/
            padding-top: 10%;
            background: #f66;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

这里写图片描述

两栏：自适应布局

float 与 BFC
绝对定位
模拟table
flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两栏：自适应布局</title>
    <style>
        form{
            margin-right: 4em;
            position: relative;
        }
        form input{
            width: 100%;
            font-size: inherit;
            line-height: 1.4;
        }
        form button{
            position: absolute;
            left: 100%;
            top: 0;
            width: 4em;
            font-size: inherit;
        }
    </style>
</head>
<body>
<form action="">
    <input type="search">
    <button>搜索</button>
</form>
</body>
</html>

这里写图片描述

导航栏布局

第一种实现方式

display:table;
display:table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏布局</title>
    <style>
        body{
            margin: 0;
        }
        ul{
            /* display:table; 重要！*/
            display: table;
            width: 100%;
            background: #afafaf;
        }
        ul a{
            /* display: table-cell; 重要！*/
            display: table-cell;
            overflow: scroll;
            text-decoration: none;
            color: white;
            padding: 0 1em;
            font: normal 14px/2 Helvetica, sans-serif;
        }
        ul a:not(:first-child){
            border-left: 1px solid rgba(255,255,255,0.7);
        }
        ul a:hover{
            color: red;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <a href="#">Home</a>
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JavaScript</a>
        <a href="#">HTTP</a>
        <a href="#">Others</a>
    </ul>
</nav>
</body>
</html>

这里写图片描述

第二种实现方式

display: flex;
flex: 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏布局方式二</title>
    <style>
        body{
            margin: 0;
        }
        nav{
            display: flex;
            width: 100%;
            background: #aae595;
        }
        nav a{
            flex: 1;
            text-decoration: none;
            color: white;
            padding: 0 1em;
            font: normal 14px/2 Helvetica, sans-serif;
        }
        nav a:not(:first-child){
            border-left: 1px solid rgba(255,255,255,0.6);
        }
    </style>
</head>
<body>
<nav>
    <a href="#">Home</a>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>
    <a href="#">HTTP</a>
    <a href="#">Others</a>
</nav>
</body>
</html>

这里写图片描述

网格布局，自动换行

方式一：inline-block + justify
方式二：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            text-align: justify;
        }
        li{
            display: inline-block;
            /*width: 30%;*/
            width: 4em;
            height: 0;
            padding-top: 20%;
            background: lightcyan;
            text-align: center;
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

这里写图片描述

`media query`

针对不同的屏幕，应用不同的样式
方式一：屏幕宽度<=480px时才会生效

<link rel="stylesheet" href="media.css" media="screen and (max-width: 480px)">

方式二：屏幕宽度>=480px时才会生效

@media screen and (min-width: 480px){.selector{...} }

可以查询的`media`

width
height
device-width
device-height
device-pixel-ratio
orientation

字体设置

兼容性

浏览器兼容性

CSS中的兼容性问题

浏览器不支持该特性
某些特定条件下触发浏览器bug

浏览器特性支持

了解浏览器支持情况
- caniuse.com（http://caniuse.com/ ）
- MDN CSS Reference（https://developer.mozilla.org/en-US/docs/Web/CSS/Reference）
- Codrops CSS Reference（https://tympanus.net/codrops/css_reference/）
- QuirksMode.org CSS（https://www.quirksmode.org/css/）

你需要兼容哪些浏览器

根据用户群体决定
- 面向普通用户：IE8+、Chrome、Firefox
- 企业级铲平：IE9+、Chrome、Firefox
了解浏览器市场份额
- 日志分析
- 百度统计、NetMarketShare

这里写图片描述

浏览器不支持时怎么办？

如果低版本浏览器没有这个特性可以接受吗？
- border-radius不支持时，没有圆角
- box-shadow不支持时，没有阴影
可以使用效果稍微差一点的替代方案吗？
- min-height:100vh 用min-height:800px 代替
可以使用一些替代方案吗？
- opacity:0.5 在IE下用filter:alpha(opacity=50)
可以使用JavaScript让浏览器支持吗？
- 使用html5shim.js让IE6～8支持新标签
- 使用DD_belatePNG.js让IE6只吃半透明png图片
更换实现方式

不同浏览器使用不同的样式

@supports
- @ 代表：查询
- 但是：@supports的兼容性不好
- 举例：

.container{
            display: flex;
        }
        @supports(display: grid){
            .container{
                display: grid;
                grid-template: repeat(4,1fr)/50px 100px;
            }
        }

层叠
- 同一个属性，后面书写的值会覆盖前面书写的值
- 如：p{font-size:16; font-size:14;}，会取后者。
- 对当前浏览器来说无效的属性和属性值会被忽略
- 如：对于IE来说认识display但不认识flex，p{display:table; display:flex;}，会取前者。
条件注释
- 浏览器hack原理-条件注释
- 目的：
  - 提供一致、合理的开发基础
  - 应对变化
  - 提升效率
浏览器怪癖
- IE 6
  - IE 6 不支持两个或多个类选择器直接组合，只会解析最后一个。
  - 解决办法：处理好选择器优先级
  - IE 6 不支持父子选择器和兄弟选择器
  - 解决办法：避免使用，用后代选择器替代
  - IE 6 不支持属性选择器（任何一种都不支持）
  - 解决办法：用class选择器替代
  - IE 6 不支持某些伪类
    - 非链接不能使用:hover, :active
    - 解决办法：使用a嵌套需要hover的元素
  - IE 6 不支持first-child伪类
- IE 7
  - 当属性前面有星号*时，IE6和IE7会忽略星号
  - IE 6-7 不支持伪元素
    - 不支持:before :after／:focus
    - 解决办法：改变实现方式，或在HTML中添加标签；／使用JavaScript。
- IE 8
  - IE6-8不支持 :root选择器

这里写图片描述

CSS3 选择器兼容性
- CSS3中的大部分选择器，兼容性是IE 9+
- 例如：:target, :empty, :nth-child, :nth-of-type, :checked, :disabled 无法在IE6-8 用
- 移动端支持绝大多数CSS3选择器
- 浏览器前缀
  - 浏览器厂商为了实验新特性，在属性名前加前缀
  - Chrome/Safari/Opera：-webkit-
  - Microsoft：-ms-
  - Mozilla/Firefox：-moz-
IE 模式
- 浏览器模式 Browser Mode
  - 切换渲染引擎、JavaScript引擎和HTTP请求的UserAgent
  - 兼容模式相当于使用IE7的引擎
- 文档模式
  - 切换文档模式，即渲染引擎和JavaScript引擎
  - 浏览器模式指定之后，会自动切换文档模式
控制IE模式（<=10）
- DocType 有无控制是否进入怪异模式
- meta标签控制进入哪种文档模式

 <!--使用IE7模式渲染-->
    <meta http-equiv="x-ua-compatible" content="IE=7">
    <!--使用最新引擎-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>控制IE模式</title>

测试兼容性

对于IE浏览器可以用F12切换浏览器模式
虚拟机
BrowserStack

工程化

CSS reset

设置HTMl标签的默认样式
使其在各个浏览器表现基本一致
让默认样式归零

normalize.css

设置HTML标签的默认演示
使其在各个浏览器表现基本一致
保留标签的默认样式

CSS模块

可复用的CSS代码段
与模块在HTML中的位置无关
一般与使用的HTML标签无关

CSS模块原则

面向对象（OOCSS）
- 结构和皮肤分离
  - .btn, .btn-primary, .btn-info, .btn-danger
- 容器和内容分离
单一职责原则（SRP）
- 尽可能细地拆分可独立复用的组件
- 通过组合方式使用多个组件
- 比如将布局和其他样式拆分
开闭原则
Don’t Repeat Yourself（DRY）
- 对扩展开放
- 对修改关闭

命名 Naming

基于功能
- 它是用来干什么的？
- .botton/ .form/ .list/ .external-link/ .tab-item/ .nav
基于内容
- 元素里面放的是什么内容？
- .news/ .user-info/ .help/ .contact-me
基于视觉
- 看起来是什么样的？
- .round-image/ .nowrap

命名原则

优先使用基于功能的命名
- 样式与内容无关
中小型网站可以基于内容去命名（如个人简历、个人博客）
大型网站可以基于视觉去命名
- 不要使用太具体的样式
- 如：不要用#left, #right 用#main, #aside
功能VS视觉VS具体样式
- good vs bad
- .warning vs .orange
- .btn-primary vs .btn-blue
- .size-large vs .width-200
- .form-inline
- nav-stacked

CSS命名规范

BEM
- Block：可以独立出来的一个个块
- Element：Block里面的元素
- Modifier：修饰，对抽象出来的基本样式的扩展
- 写法：一般 Block：tab；Element：tab__item；Modifier：tab--primary；

编写简洁易维护的CSS

CSS预处理（在大型项目中是必要的）
- less
- Sass
- Stylus
- PostCSS

`import`

/* app.css */
@import 'variables.css';
@import 'common.css';
@import 'modules/button.css';
@import 'modules/form.css'

Plugins

AutoPrefixer
StyleLint

奇舞学院学习笔记之CSS一页通

CSS概念与简单选择器

版本

CSS规则

文本样式

font-family 字体。

字体匹配算法

通用字体族

font-family使用注意

font-size字体大小

font-style 斜体正体

font-weight 粗细

line-height 行高

font缩写

Web Fonts

text-align

letter-spacing 字符间距

word-spacing 单词间距

text-indent 文本缩进

text-decoration 文本线

white-space 空白符

word-break 单词拆分

浮动

定位模式（Positioning schemes）

常规流（Normal Flow）

块级格式化上下文（Block Formatting Context，BFC）

行级格式上下文（Inline Formatting Context）

浮动（float）

层叠、继承和CSS单位

选择器的特异度（Specificity）

important

Cascading

默认值策略（Defaulting）

CSS求值过程

各种类型的值

长度单位

颜色

盒模型

视觉格式化模版–浏览器是怎么排版的？

定位与堆叠

定位模式（Positioning schemeschemes）

position

position:relative

position:absolute

position:fixed

z-index堆叠层次

排版细节

CSS details

行级格式化上下文（Inline Formatting Context）

lists style 列表

background属性

CSS Sprites ：

border-radius：圆角

box-shadow：阴影（可以用一个元素创造出来各种各样的小图标）

布局（又）

布局方法

局中

水平居中

垂直居中

float-based layout 布局方式

position 布局方式

table layout 布局方式

fixed table layout 布局

Flexbox 真正为解决布局问题而生的规范

动画

2D

3D Transform

translation 过渡（有用！）

animation 动画

高级选择器

Advanced Selector

:target 伪类

:lang 伪类

:nth-child() 结构性伪类（与元素出现的位置有关）

nth-of-type 伪类：第n个这种类型的

:first-child/:last-child 伪类

:not() 伪类

其他选择器 伪类

:empty 伪类

伪元素

`font-family` 字体。

`font-family`使用注意

`font-size`字体大小

`font-style` 斜体正体

`font-weight` 粗细

`line-height` 行高

`font`缩写

`text-align`

`letter-spacing` 字符间距

`word-spacing` 单词间距

`text-indent` 文本缩进

`text-decoration` 文本线

`white-space` 空白符

`word-break` 单词拆分

`important`

`Cascading`

`position`

`position:relative`

`position:absolute`

`position:fixed`

`z-index`堆叠层次

`lists style` 列表

`background`属性

`border-radius`：圆角

`box-shadow`：阴影（可以用一个元素创造出来各种各样的小图标）

`float-based layout` 布局方式

`position` 布局方式

`table layout` 布局方式

`fixed table layout` 布局

`Flexbox` 真正为解决布局问题而生的规范

`translation` 过渡（有用！）

`animation` 动画

`:target` 伪类

`:lang` 伪类

`:nth-child()` 结构性伪类（与元素出现的位置有关）

`nth-of-type` 伪类：第n个这种类型的

`:first-child`/`:last-child` 伪类

`:not()` 伪类

其他选择器伪类

`:empty` 伪类

`::first-line` 伪元素

`::first-letter` 伪元素

`:checked~F`

`viewport`

`media query`

可以查询的`media`

`import`