一文入门CSS3

短命女 2023-08-17 15:19 158阅读 0赞

# 2.CSS3 #

官方文档：[http://www.w3school.com.cn/cssref/index.asp][http_www.w3school.com.cn_cssref_index.asp]

## 2.1.CSS基础 ##

基础简单过下，事先说明下：诸如引入、注释、案例就不一一演示了，有个工作1年左右的人都可以熟练掌握，所以基础部分就简单归纳一下**W3C的常用属性列表**了

### 2.1.1.文本属性（font、text） ###

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#font][http_www.w3school.com.cn_cssref_index.asp_font] or [http://www.w3school.com.cn/cssref/index.asp\#text][http_www.w3school.com.cn_cssref_index.asp_text]

1.  **`color`：文字的颜色**
    
     *  eg：`color:red;`、`color: #000;`、`color: rgb(0,0,0);`
2.  **`font-size`：文字的大小**
    
     *  eg：`font-size:12px;`
3.  **`font-family`：文字的字体**
    
     *  eg：使用微软雅黑字体：`font-family:'Microsoft Yahei';`
4.  **`font-style`：字体是否倾斜**
    
     *  eg：字体不倾斜：`font-style:normal;`
     *  PS：**一般对`i`、`em`这些会导致字体倾斜的标签设置**
5.  **`font-weight`：文字是否加粗**
    
     *  eg：字体加粗：`font-weight:bold;`、字体不加粗：`font-weight:normal;`
6.  `**line-height**`：文字的行高
    
     *  eg：`line-height:24px;`
7.  `2~6汇总设置`：**`font`：同时设置文字的几个属性**
    
     *  需按顺序写：**`font：是否加粗 字号/行高 字体;`**
     *  eg：`font:normal 12px/36px 'Microsoft Yahei';`
8.  **`text-align`：文字水平对齐方式**
    
     *  eg：水平居中：`text-align:center`
9.  **`list-style-type`：设置列表项标记符号**
    
     *  去除符号：`list-style-type:none;`
     *  PS：**一般都是去除标记用的多**
10. **`text-decoration`：文字下划线**
    
     *  eg：去除文字下划线：`text-decoration:none;`
     *  PS：**一般都是去除`a`的下划线**
11. `text-indent`：文字首行缩进
    
     *  eg：首行缩进2个字符：`text-indent:2em;`
12. `text-transform`：控制文本的大小写
    
     *  `none`：定义带有小写字母和大写字母的标准的文本(默认)
     *  `capitalize`：单词中首字母大写
     *  `uppercase`：单词大写
     *  `lowercase`：单词小写

### 2.1.2.背景相关（background） ###

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#background][http_www.w3school.com.cn_cssref_index.asp_background]

1.  **`background`**：汇总`2~6`
    
     *  参考顺序：**`background: 颜色 url(背景图) no-repeat 定位 fixed`**
     *  eg：`background:url(雪碧图) no-repeat left -3.025rem;`
2.  **`background-color`：设置元素的背景颜色**
3.  **`background-image`：设置元素的背景图像**
4.  **`background-repeat`：设置是否及如何重复背景图像**
5.  **`background-position`：设置背景图像的开始位置**
    
     *  垂直居中 + 水平居中：`background-position: center center;`
6.  `background-attachment`：设置背景图像是否固定或者随着页面的其余部分滚动

### 2.1.3.盒模型系（box） ###

**普通盒子`宽 | 高` = `width | height` \+ `padding` \+ `border`**

#### 1.尺寸属性（width、height） ####

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#dimension][http_www.w3school.com.cn_cssref_index.asp_dimension]

1.  **`width`：宽度**
2.  **`height`：高度**
3.  **`max-width`：最大宽度**
4.  **`max-height`：最大高度**
5.  **`min-height`：最小高度**
6.  **`min-width`：最小宽度**

#### 2.边框属性（border） ####

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#border][http_www.w3school.com.cn_cssref_index.asp_border]

1.  **`border`**：2~4汇总
    
     *  **参考顺序：`border:width style color;`**
     *  eg：`border:10px solid red;`
2.  **`border-width`：设置四条边框的宽度**
3.  **`border-style`：设置四条边框的样式**
    
     *  `solid`：实线、`dashed`：虚线、`dotted`：点线
4.  **`border-color`：设置四条边框的颜色**

PS：**指定边框样式：`border-[top|left|right|bottom]:width style color;`**

*  eg：`border-top: #00c1de .2rem solid;`

#### 3.浮动、溢出、定位（float、overflow、position） ####

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#positioning][http_www.w3school.com.cn_cssref_index.asp_positioning]

##### 3.1.浮动 #####

浮动本身没什么知识点，清除浮动倒是可以说下：

1.  **`float: none;`：不浮动(默认值)**
2.  **`float: left;`：左浮动**
3.  **`float: right;`：右浮动**
4.  **`clear: both;`**：清除所有浮动
    
     *  PS：可选择：`[left | right | both |none]`

以前清除浮动都是在浮动div下添加一个div.clear的空白div，现在基本上都是用`淘宝的伪元素大法`：

> PS：有利于SEO

/* 清除浮动的样式 */
    .clearfix::before,
    .clearfix::after {
      content: '';
      display: table;
    }
    
    .clearfix::after {
      clear: both;
    }
    
    /* 兼容IE */
    .clearfix {
      zoom: 1;
    }

##### 3.2.溢出 #####

**overflow：元素溢出**

1.  visible：超出box也继续显示(默认值)
2.  hidden：多余内容不可见
    
     *  PS：还可以`清除浮动`、`解决margin-top塌陷问题`
     *  扩展：[https://www.cnblogs.com/Likebard/p/5899512.html][https_www.cnblogs.com_Likebard_p_5899512.html]
3.  scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.  auto：显示滚动条

**PS：如果只只对一个方向可以使用`overflow-x` | `overflow-y`**

*  eg：移动端主体内容部分：`main{position:absolute;left:0;right:0;top:2.5rem;bottom:2.5rem;overflow-x:hidden;overflow-y:auto;}`

##### 3.3.定位 #####

1.  **`position`：定位**
    
     *  **`absolute`：绝对定位**
     *  **`fixed`：固定定位**
     *  **`relative`：相对定位**
     *  **`static`：没有定位(默认值)**
2.  偏移（配合`position`使用）
    
     *  **`top`**：距离上方的距离
     *  **`left`**：距离左方的距离
     *  **`right`**：距离右方的距离
     *  **`bottom`**：距离下方的距离
3.  层级：`z-index`
    
     *  默认为0，可以为负值

**PS：绝对定位和固定定位的块元素和行内元素会自动转化为`行内块`元素**

![1.叠放顺序.jpg][1._.jpg]

来个经常使用的案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>定位案例</title>
        <link rel="stylesheet" href="https://at.alicdn.com/t/font_1148101_h5fe3ssorlk.css">
        <style>
            header {
                width: 100px;
                margin: 0 auto;
                text-align: center;
            }
            /* 字体图标 */
            header a.icon-guoxue {
                /* 去除下划线 */
                text-decoration: none;
                color: #1a8236;
                font-size: 100px;
                /* 父类元素设置相对|绝对定位 */
                position: relative;
            }
            header span {
                position: absolute;
                top: 15px;
                right: -5px;
                /* 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素 */
                width: 30px;
                height: 30px;
                font-size: 16px;
                /* 居中显示 */
                line-height: 30px;
                color: white;
                background-color: red;
                /* 变成圆 */
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        
        <header>
            <a href="#" class="iconfont icon-guoxue"><span>99</span></a>
        </header>
    </body>
    </html>

效果：

![2.定位案例.png][2._.png]

#### 4.内外边距（margin、padding） ####

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#padding][http_www.w3school.com.cn_cssref_index.asp_padding]

1.  **`padding`：汇总属性**
    
     *  **参考顺序：`padding：上 右 下 左;`**
     *  PS：**三个值：`padding: 上 左右 下;`**
2.  **`padding-bottom`：设置元素的下内边距**
3.  **`padding-left`：设置元素的左内边距**
4.  **`padding-right`：设置元素的右内边距**
5.  **`padding-top`：设置元素的上内边距**

官方文档：[http://www.w3school.com.cn/cssref/index.asp\#margin][http_www.w3school.com.cn_cssref_index.asp_margin]

1.  **`margin`：汇总属性**
    
     *  **eg：水平居中：`margin:x auto;`**
     *  **参考顺序：`margin：上 右 下 左;`**、**三个值：`margin: 上 左右 下;`**
2.  **`margin-bottom`：设置元素的下外边距**
3.  **`margin-left`：设置元素的左外边距**
4.  **`margin-right`：设置元素的右外边距**
5.  **`margin-top`：设置元素的上外边距**

**PS：有时候有`margin-top`塌陷和`外边距合并`的问题，so ==> 尽量用`padding`**

> 重现：在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败  
> 解决：外部盒子设置一个边框，并且在外部盒子里设置`overflow:hidden`，最后使用伪元素`.clearfix:before{content: '';display:table;}`

### 2.1.4.扩展与补充 ###

#### 1.块元素、内联元素、内联块元素 ####

1.  **块元素：支持所有样式**
    
     *  PS：如果没有设置宽度，默认的宽度为父级宽度100%（不管设不设宽度，都独占一行）
2.  **内联元素：不支持`width`、`height`、`margin`和`padding`**
    
     *  子元素是内联元素，则父元素可用text-align属性设置子元素水平对齐方式
     *  小问题：代码换行，盒子之间会产生间距
     *  PS：宽高由内容决定，自己设置是不生效的
3.  **内联块(行内块)：支持所有样式**
    
     *  子元素是内联元素，则父元素可用text-align属性设置子元素水平对齐方式
     *  小问题：代码换行，盒子之间会产生间距
     *  PS：如果没有设置宽高，宽高由内容决定

用代码表示一下：

1.  `display:inline`：内联元素(默认)
    
     *  元素前后没有换行符
2.  `display:block`：块级元素
    
     *  元素前后会带有换行符
3.  `display:inline-block`：行内块元素

**隐藏：`display:none`此元素不会显示也不占空间，`visibility:hidden;`元素是否可见且占空间**

> PS：加过渡动画的时候，visibility有动画效果，而display没有

#### 2.内联元素或内联块元素间隙的解决方案 ####

以前是只要不去换行就没事了（去掉内联元素之间的换行），现在get到一个新skill：

*  **将内联元素的父级设置font-size为0，内联元素自身再设置font-size**

#### 3.其他属性 ####

1.  **鼠标显示为手：`cursor:pointer;`**
2.  **文字不换行：`white-space: nowrap;`**（`normal`是默认值）
    
     *  PS：参考[http://www.w3school.com.cn/cssref/pr\_text\_white-space.asp][http_www.w3school.com.cn_cssref_pr_text_white-space.asp]
3.  设置表格的边框合并：`border-collapse:collapse;`（现在基本上用不到了）

--------------------

## 2.2.选择器系 ##

### 2.2.1.常用选择器 ###

**选择器参考手册**：[http://www.w3school.com.cn/cssref/css\_selectors.asp][http_www.w3school.com.cn_cssref_css_selectors.asp]

1.  标签选择器
    
     *  eg：`p{color:red;}`
2.  ID选择器
    
     *  eg：`#footer{color:#a7a8a9;}`
3.  类选择器
    
     *  eg：`.copyright {text-align: center;}`
4.  **层级选择器**：父元素下的子元素（`空格间隔`）
    
     *  eg：`.copyright a{color: #a7a8a9;}`：设置copyright类下的a标签颜色
5.  **组选择器**：同时生效（逗号间隔）
    
     *  eg：`em,i {font-style: normal;}`：去除em和i的斜体样式
6.  **`伪类|伪元素`选择器**：两个:就是伪元素
    
     *  eg：伪类：`nav li:hover {color: #000;}`
     *  eg：伪元素：`.clearfix::after {content:'';display:table;clear:both;}`：清除浮动

#### 扩展：伪类与伪元素 ####

1.  **`:伪类`（一种选择器）eg:`:hover`、`a:active`、`a:visited`**
2.  **`::伪元素`（通过CSS实现的页面元素）eg：`::before`、`::after`**

/* 常用伪类 */
    a:link {color: #FF0000}     /* 未访问的链接 */
    a:visited {color: #00FF00}  /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}   /* 选定的链接 */

### 2.2.2.C3新增系 ###

#### 1.属性选择器 ####

参考文档：[http://www.w3school.com.cn/css/css\_syntax\_attribute\_selector.asp][http_www.w3school.com.cn_css_css_syntax_attribute_selector.asp]

以前就有的：**`表单`用的比较多些**

*  **`[属性名] {}`**：匹配对应的属性即可
 *  **`[属性名=值] {}`**：匹配属性名是某值
 *  几乎不用：`[属性名|=值]`（属性名以某值开头）和`[属性名~=值]`（属性名包含某值）

CSS3新增：**结合`爬虫`有大用**

*  **`[属性名^=值] {}`**：以值开头
    
     *  eg：`a[src^="https"]`：选择src属性以`https`开头的每个`<a>`元素
 *  `[属性名$=值] {}`：以值结束
    
     *  eg：`a[src$=".pdf"]`：选择src属性以`.pdf`结尾的所有`<a>`元素
 *  `[属性名*=值] {}`：包含某值
    
     *  eg：`a[src*="baidu.com"]`：选择src属性包含`baidu.com`子串的每个`<a>`元素

来个简单案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            input[type="password"] {
                background-color: yellow;
            }
            // name以user开头的表单（eg：用户相关字段）
            input[name^="user"] {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <input type="hidden" name="id"><br/>
        <input type="text" name="user_name"><br/>
        <input type="text" name="user_age"><br/>
        <input type="password" name="pass">
    </body>
    </html>

效果：

![3.属性选择器.png][3._.png]

#### 2.结构性伪类选择器 ####

**结构性伪类选择器：`n`可以是`数值`也可以是`表达式`**(eg：`2n+1`)

1.  **`:nth-child(n) {}`**：选中父元素中正数第n个子元素
    
     *  最特殊：**`:first-child {}`：选中父元素中第一个子元素**
2.  `:nth-last-child(n) {}`：选中父元素中倒数第n个子元素
    
     *  最特殊：**`:last-child {}`：选中父元素中最后一个子元素**
3.  **`:nth-of-type(n){}`**：选中父元素中`特定`正数第n个子元素
    
     *  PS：和上面的区别等会看个案例
4.  `:nth-last-child(n) {}`：选中父元素`特定`元素中倒数第n个子元素

这个看一个必须来个案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>结构性伪类选择器</title>
        <style>
            /* 本意先找到bloginfo类下的第一个div，对它第二个span设置样式 */
    
            /* 浏览器会这么找：先去bloginfo类下的第一个div中找第二个元素，然后看看是不是span，如果是则生效 */
            /* PS：这边父类下第二个元素不是span，所以不生效 */
            .bloginfo div:first-child span:nth-child(2) {
                color: red;
            }
    
            /* 如果需要达到这个效果可以这么用： */
            .bloginfo div:first-child span:nth-child(4) {
                color: red;
            }
    
            /* 本意先找到bloginfo类下的第二个div，对它第二个span设置样式 */
    
            /* 浏览器会这么找：先去bloginfo类下的第二个div中找所有的span，然后给第二个span设置样式 */
            .bloginfo div:last-child span:nth-of-type(2) {
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="bloginfo">
            <div>
                <span>逆天</span>
                <i>this is test</i>
                <time>2019-04-14</time>
                <span>【Web】</span>
            </div>
            
            <div>
                <span>逆天</span>
                <i>this is test</i>
                <time>2019-04-14</time>
                <span>【Web】</span>
            </div>
        </div>
    </body>
    </html>

输出图示：

![4.结构性伪类选择器.png][4._.png]

#### 3.其他选择器 ####

*  `:target`：被锚链接指向的时候会触发该选择器
 *  `::selection`：当被鼠标选中的时候的样式
 *  `::first-line`：选中第一行
 *  `::first-letter`：选中第一个字符

### 2.2.3.CSS权重（推荐） ###

这个官方文档我倒是没找到，但是流传比较多的是这么个顺序（已验）

1.  `!important`（**权重值：`10000`**）加在样式属性值后
    
     *  eg：`display: block!important;`
2.  `内联`样式（**权重值：`1000`**）
    
     *  eg：`style="xx"`
3.  `ID`选择器（**权重值：`100`**）
    
     *  eg：`#content{xx}`
4.  `类`，`伪类`和`属性`选择器（**权重值：`10`**）
    
     *  eg：`.clearfix`、`:hover`、`input[type="text"]`
     *  PS：属性选择器参考：[http://www.w3school.com.cn/css/css\_syntax\_attribute\_selector.asp][http_www.w3school.com.cn_css_css_syntax_attribute_selector.asp]
5.  `标签`选择器和`伪元素`选择器（权重值：1）
    
     *  eg：`div`、`p`、`:before`
6.  `通用`选择器（\*）、`子`选择器（>）、`相邻`选择器（+）、`同胞`选择器（~）的（**权重值：0**）
    
     *  子选择器参考：[http://www.w3school.com.cn/css/css\_selector\_child.asp][http_www.w3school.com.cn_css_css_selector_child.asp]
     *  相邻选择器参考：[http://www.w3school.com.cn/css/css\_selector\_adjacent\_sibling.asp][http_www.w3school.com.cn_css_css_selector_adjacent_sibling.asp]

PS：这个平时用不到，但是对于修改模版样式不生效的时候经常会用到

> **你有没有发现有些样式修改了并不生效？这时候CSS权重的重要性就来了**

## 2.3.新增属性 ##

### 2.3.1.背景 ###

#### 1.透明背景 ####

1.  **`opacity`**：设置元素整体透明度
2.  **`rgba`**：设置带透明色的颜色
    
     *  PS：rgba是只设置背景色透明

来个区分案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>透明背景</title>
        <style>
            div {
                width: 200px;
                height: 100px;
                color: green;
                border: 1px solid black;
            }
    
            div:nth-child(1) {
                background-color: black;
                /* 设置整个div的透明色 */
                opacity: 0.2;
            }
    
            div:nth-child(2) {
                /* 只设置背景色的透明度 */
                background-color: rgba(0, 0, 0, 0.2);
            }
        </style>
    </head>
    <body>
        <div>
            <h2>我是一个测试文字</h2>
        </div>
        <div>
            <h2>我是一个测试文字</h2>
        </div>
    </body>
    </html>

效果：

![5.透明背景.png][5._.png]

#### 2.背景尺寸 ####

官方案例：[http://www.w3school.com.cn/tiy/c.asp?f=css\_background-size][http_www.w3school.com.cn_tiy_c.asp_f_css_background-size]

**`background-size`：规定背景图片的尺寸**

*  **`background-size:30% 40%;`**：可以是数值或百分比
    
     *  PS：先宽后高
 *  **`contain`**：等比缩放，直至宽或者高和盒子相同
    
     *  PS：盒子有空闲空间
 *  `cover`：等比缩放，并填充慢容器
    
     *  PS：图像可能显示不完整

看个案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>背景尺寸</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: url(http://github.lesschina.com/html5/images/logo.gif) no-repeat;
                border: 1px solid black;
            }
    
            div:nth-child(1) {
                /* 宽 高 */
                background-size: 100% 50%;
            }
    
            div:nth-child(2) {
                /* 等比缩放，直至宽或者高和盒子相同 */
                background-size: contain;
            }
    
            div:nth-child(3) {
                /* 等比缩放，并填充慢容器 */
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

效果图：

![5.背景图尺寸.png][5._.png 1]

#### 3.双背景 ####

**CSS3可以设置两个背景图：`background-image:url(xxx),url(xxx);`**（叠加显示）

看个案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>两个背景图</title>
        <style>
            div {
                width: 260px;
                height: 462px;
                /* 三句合为一句写 */
                background: url(https://github.lesschina.com/html5/images/logo.gif) no-repeat center center, url(https://github.lesschina.com/html5/images/banner/b02.jpg) no-repeat center;
                /* background-image: url(https://github.lesschina.com/html5/images/logo.gif), url(https://github.lesschina.com/html5/images/banner/b02.jpg); */
                /* background-repeat: no-repeat; */
                /* 垂直居中 + 水平居中 */
                /* background-position: center center; */
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

效果：

![6.双背景.png][6._.png]

#### 3.不常用 ####

1.  `background-origin`：设置背景图片的定位区域：
    
     *  `padding-box`：以内边距(`padding`)左上角为起点进行定位（默认值）
     *  `border-box`：以边框(`border`)左上角为起点进行定位
     *  `content-box`：以内容区域(`content`)左上角为起点
2.  `background-clip`：规定背景的绘制区域
    
     *  `border-box`：背景图片在整个容器中显示
     *  `padding-box`：背景图片在内边距+正文区域显示
     *  `content-box`：背景图片只在正文区域显示

### 2.3.2.边框 ###

#### 知识点 ####

1.  **`border-radius`：边框圆角**
2.  **`border-image`：边框图片**（eg：`border-image:url(border.png) 20 round;`）
    
     *  **设置边框图片：`border-image-source: url("xx");`**
     *  **边框图片裁切：`border-image-slice: 数值;`**
        
         *  PS：`不需要带单位`
     *  `border-image-repeat`: 设置边框图片的平铺方式（如何重复图像边框）
        
         *  `stretch`：拉伸（默认）
         *  **`round`：环绕的方式重复显示**
         *  `repeat`：重复显示
            
             *  一般都使用round，repeat的方式很多时候都有点小问题
     *  **图像边框宽度：`border-image-width: 数值;`**
3.  **`box-shadow: 水平阴影的位置 垂直阴影的位置 [模糊距离] [阴影的尺寸] [阴影的颜色] [内|外阴影];`**
    
     *  PS：`text-shadow`：设置文本阴影
     *  eg：`box-shadow: 0px 0px 10px #fff;`（水平阴影位置，垂直阴影位置，模糊距离，颜色）
     *  文档：[http://www.w3school.com.cn/cssref/pr\_box-shadow.asp][http_www.w3school.com.cn_cssref_pr_box-shadow.asp]
4.  颜色渐变：**这个和PS里面的颜色渐变一样**
    
     *  **线性渐变：`linear-gradient`**
        
         *  可以通过方向和角度：`to [ right | top | bottom | left ]` or `0deg：从下向上渐变]，90deg：从左向右`
         *  eg：从右下到左上、从蓝色渐变到红色`linear-gradient(to left top, blue, red);`
         *  参考文档：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient][https_developer.mozilla.org_zh-CN_docs_Web_CSS_linear-gradient]
     *  径向渐变：`radial-gradient`
        
         *  参考文档：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient][https_developer.mozilla.org_zh-CN_docs_Web_CSS_radial-gradient]
     *  **PS：渐变其实是一种图片，一般都是设置`background-image`**

#### 1.圆角与渐变 ####

这个比较简单，简单说下常用的两种即可：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>圆角案例</title>
        <style>
            /* 椭圆矩形 */
            div:first-child {
                width: 200px;
                height: 200px;
                background: black;
                border-radius: 10px;
            }
            /* 设置图片大小，并显示为圆 */
            div img {
                /* 半径是长度的50%==>圆 */
                border-radius: 50%;
                width: 200px;
                height: 200px;
            }
            div:last-child i {
                display: block;
                width: 200px;
                height: 200px;
                padding: 5px;
                border-radius: 50%;
                /* 设置一个渐变色 */
                background: linear-gradient(to top right, rgba(0, 153, 255, .9), rgba(42, 228, 197, .7));
            }
        </style>
    </head>
    <body>
        <div></div><br />
        <div><img src="https://github.lesschina.com/html5/images/avatar.jpg"></div><br />
        <div><i><img src="https://github.lesschina.com/html5/images/avatar.jpg"></i></div>
    </body>
    
    </html>

图示：

![8.圆边.png][8._.png]

#### 2.中国风边框图片案例 ####

我先用PS来简单扩充一下裁切的概念：（**类比Padding和margin的设置方法，然后不算单位**）

![7.边框裁剪示意图.jpg][7._.jpg]

看个简单案例：（平时设置网站风格的时候用的比较多，以前是设置背景图片，现在省事也省带宽了）

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>边框图片</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                border: 50px solid black;
                font-family: '钟齐流江毛笔草体';
                font-size: 30px;
                line-height: 300px;
                /* 竖排显示(从左往右方向) */
                writing-mode: vertical-lr;
                text-align: center;
                float: left;
            }
            div:nth-child(2) {
                /* 设置边框图片 */
                border-image-source: url(../images/1.png);
            }
            div:nth-child(3) {
                border-image: url(../images/1.png) 54 80 62 68;
                /* border-image-source: url(../images/1.png); */
                /* 设置边框图片的裁切 */
                /* border-image-slice: 54 80 62 68; */
            }
        </style>
    </head>
    <body>
        <div>微信公众号 逸鹏说道</div>
        <div>微信公众号 逸鹏说道</div>
        <div>微信公众号 逸鹏说道</div>
    </body>
    </html>

图示：

![7.边框图片demo.jpg][7._demo.jpg]

#### 3.边框图片平铺方式 ####

平铺方式简单说下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>边框图片2</title>
        <style>
            div {
                width: 250px;
                height: 250px;
                margin-right: 20px;
                border: 50px solid black;
                font-size: 25px;
                line-height: 300px;
                /* 竖排显示(从左往右方向) */
                writing-mode: vertical-lr;
                text-align: center;
                float: left;
            }
            div:first-child {
                border-image: url(../images/2.png);
            }
            div:nth-child(2) {
                /* 裁切20就可以把四个角的爱心完美扣下了 */
                border-image: url(../images/2.png) 20;
            }
            div:nth-child(3) {
                /* 设置边框图片的平铺方式 */
                border-image: url(../images/2.png) 20 repeat;
            }
            div:last-child {
                /* 推荐方式 */
                border-image: url(../images/2.png) 20 round;
            }
        </style>
    </head>
    <body>
        <div>只设置了边框图片</div>
        <div>设置边框图片和裁切</div>
        <div>边框平铺方式为重复</div>
        <div>边框平铺方式为环绕</div>
    </body>
    </html>

图示：

![7.边框图片重复.png][7._.png]

课后拓展：

[CSS3 border-image 彻底明白][CSS3 border-image]

--------------------

### 2.3.3.过渡（重点） ###

#### 1.知识点 ####

**我的理解：如果一个元素设置了`transition`，那么它属性改变的时候就会呈现出动画状态**

**`transition: property duration timing-function delay`**

1.  `transition-property`：设置过渡的属性
    
     *  eg：width height background-color
2.  `transition-duration`：设置过渡的时间
    
     *  eg：1s 500ms
3.  `transition-timing-function`：设置过渡的运动方式
    
     *  常用：`linear`(匀速). `ease`(缓冲运动)
4.  `transition-delay`：设置动画的延迟
    
     *  PS：一般用不到

**PS：一般都这么用：`transition: all 500ms ease;`**

#### 2.简单案例 ####

看个例子：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>过渡动画</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                margin: 0 auto;
                background-color: black;
                /* 设置了transition，那div任何属性的改动都会有过渡动画 */
                transition: all 1s ease;
            }
    
            div:hover {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

图示：

![9.过渡动画.gif][9._.gif]

#### 4.特殊案例 ####

只有一个属性是没有过渡动画的：**`display:none` ==》 `display:block`**

看个区分案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>特殊案例</title>
        <style>
            div {
                width: 300px;
                height: 300px;
                margin: 0 auto;
                background-color: black;
                /* 设置了transition，那div任何属性的改动都会有过渡动画 */
                transition: all 500ms ease;
            }
            /* 第一个盒子使用visibility的方式显示和隐藏 */
            div:first-child {
                visibility: hidden;
            }
            body:hover div:first-child {
                visibility: visible;
                background-color: yellow;
            }
            /* 第二个盒子使用display的方式显示和隐藏 */
            div:last-child {
                display: none;
            }
            body:hover div:last-child {
                display: block;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div>visibility</div>
        <div>display</div>
    </body>
    </html>

图示：(**`visibility`和`display`的区别不用说了吧？无非是一个占空间一个不占**）

![9.隐藏和显示.gif][9._.gif 1]

### 2.3.4.transform转换 ###

**经验：如果多个变换一起用的，那么顺序为：**`从后往前执行`\*\*

> `transform`一定要加初始值\*\*（不然在边角的时候有小问题）

#### 1.2D转换 ####

1.  **位移**
    
     *  **`transform: translate(x轴,y轴);`**
        
         *  eg：`transform: translate(100px,100px);`
     *  PS：相对自身位置发生的位置改变
2.  **缩放**
    
     *  **`transform: scale(x,y);`**
        
         *  eg：`transform: scale(0.5,1);`
     *  PS：倍数关系
3.  旋转
    
     *  `transform: rotate(60deg);`
     *  PS：`deg`是角度
4.  倾斜
    
     *  `transform: skew(x轴,y轴);`
     *  eg：`transform: skew(30deg,30deg);`

看个案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>2d变换</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                float: left;
                border: 1px solid black;
                background-color: yellow;
                /* 添加一个过渡动画 */
                transition: all 1s ease;
            }
            /* x轴平移50px，y轴平移100px */
            div:first-child:hover {
                background-color: green;
                /* 逗号别忘记了 */
                transform: translate(50px, 100px);
            }
            /* x轴放大1.1倍，y轴放大2倍 */
            div:nth-child(2):hover {
                transform: scale(1.1, 2)
            }
            /* 旋转90度 */
            div:last-child:hover {
                transform: rotate(90deg)
            }
    
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

图示：（PS：**CSS3样式都不会改变盒模型**，这个案例就可以看出了）

![10.2d变换.gif][10.2d_.gif]

#### 2.3D转换 ####

1.  位移
    
     *  transform: translateX() translateY() translateZ()
2.  缩放
    
     *  transform: scaleX(0.5) scaleY(1) scaleZ(1);
3.  旋转
    
     *  transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
4.  倾斜
    
     *  transform: skewX(30deg) skewY(30deg);

这两个是视觉更好体验的参数：（`推荐`）

1.  **`transform-style:preserve-3d`**：允许子元素呈现3d视图
2.  **`perspective`：设置透视距离**
    
     *  eg：`transform: perspective(800px);`
     *  PS：一般都是600px~1000px

其他参数：

*  `tranform-origin`：设置变形的中心点
 *  `backface-visibility`：设置盒子背面是否可见

演示案例：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>3d变换</title>
        <style>
            .grandfather {
                width: 300px;
                height: 300px;
                margin: 300px auto;
                background-color: rgba(255, 0, 0, 0.3);
                /* 允许子元素呈现3d视图 */
                transform-style: preserve-3d;
            }
            .parent {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 255, 0, 0.3);
                /* 设置初始值 */
                transform: perspective(0) translateZ(0);
                /* 允许子元素呈现3d视图 */
                transform-style: preserve-3d;
                /* 设置一个补间动画 */
                transition: all 1s ease;
            }
            .child {
                width: 100%;
                height: 50%;
                background-color: rgba(0, 255, 255, 0.3);
                /* 设置初始值 */
                transform: perspective(0) translateZ(0);
                /* 设置一个补间动画 */
                transition: all 1s ease;
            }
            .parent:hover {
                /* z轴移动200px（铺面而来） */
                transform: perspective(800px) translateZ(200px);
            }
            .child:hover {
                /* z轴移动200px（铺面而来） */
                transform: perspective(800px) translateZ(100px);
            }
        </style>
    </head>
    <body>
        <div class="grandfather">
            <div class="parent">
                <div class="child"></div>
            </div>
        </div>
    </body>
    </html>

图示：

![10.3d变换][10.3d]

PS：更多复杂功能，如果感兴趣可以看看**`WebGL`**

--------------------

### 2.3.5.动画 ###

animation基本上不太用，复杂的动画我一般使用：`Animate.css`，简单的动画`transition`\+`transform`就够了，如果是滚动动画之类的我一般用`scrollreveal.js`

**`animation:动画名称 动画时间 动画曲线 延迟时间 播放次数 是否反向运动 动画停留在哪一帧;`**

*  eg：`animation: move_search 1s linear 0.5s forwards;`(动画名称 动画时间 动画曲线 延迟时间 停留在最后一帧)

1.  `@keyframes`：定义关键帧动画
2.  `animation-name`：动画名称
3.  `animation-duration`：动画时间
4.  `animation-timing-function`：动画曲线
    
     *  `linear`(匀速)、`ease`(缓冲)、`steps`(做帧动画的`步数`)
5.  `animation-delay`：动画延迟
6.  `animation-iteration-count`：动画播放次数
    
     *  n(指定次数)、infinite(循环)
7.  `animation-direction`：动画结束后是否反向还原
    
     *  normal、alternate(反向)
8.  `animation-play-state`：动画状态
    
     *  paused(停止)、running(运动)
9.  `animation-fill-mode`：动画前后的状态
    
     *  none(缺省)、**forwards**(结束时停留在最后一帧)
     *  backwards(开始时停留在定义的开始帧)、both(前后都应用)

**PS：如果设置动画集使用的是百分比，那么这个百分比是指相对整个动画的执行时间**

简单看个案例就收工吧：

这次先看效果：

![11.动画.gif][11._.gif]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>animate动画</title>
        <style>
            body {
                width: 100%;
                height: 100%;
                background-color: rgb(22, 186, 157);
            }
    
            header {
                width: 50%;
                margin: 100px auto;
            }
    
            .search {
                height: 50px;
                border: 1px solid white;
                /* 水平阴影位置，垂直阴影位置，模糊距离，颜色 */
                box-shadow: 0px 0px 10px #fff;
    
                /* 为动画准备的相对定位 */
                position: relative;
                /* animation:动画名称 动画时间 动画曲线 停留在最后一帧 */
                animation: move_search 1s linear forwards;
            }
    
            /* 最简单的移动，也可以百分百来设置进度 */
            @keyframes move_search {
                from {
                    left: -200%;
                }
    
                to {
                    left: 0;
                }
            }
    
            .search div {
                color: white;
                padding-left: 10px;
                /* 为了居中 */
                line-height: 50px;
    
                /* 为了动画而设置 */
                width: 0;
                height: 50px;
                overflow: hidden;
    
                /* animation:动画名称 动画时间 8帧显示完 停留在最后一帧 延迟1s显示 */
                animation: show_font 1.5s steps(8) forwards 1s;
            }
    
            @keyframes show_font {
                0% {
                    width: 0;
                }
    
                50% {
                    width: 75px;
                }
    
                100% {
                    width: 130px;
                }
            }
        </style>
    </head>
    
    <body>
        <header>
            <div class="search">
                <div>公众号：逸鹏说道</div>
            </div>
        </header>
    </body>
    
    </html>

## 2.4.布局相关 ##

### 2.4.1.弹性布局 ###

这个基本上用的前端框架都包含了（eg：`bootstrap`），这边简单看下即可

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>弹性</title>
        <style media="screen">
            ul {
                display: flex;
            }
            ul li {
                list-style: none;
                border: 1px solid black;
                background-color: yellow;
            }
            ul li:first-child {
                /* 权重为1 */
                flex: 1;
            }
            ul li:nth-child(2) {
                /* 权重为2 */
                flex: 2;
                /* 一般都配合min-宽高来使用 */
                min-width: 100px;
            }
            ul li:last-child {
                /* 权重为2 */
                flex: 2;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
    </html>

### 2.4.2.响应式布局（推荐） ###

**个人理解：规定一个最大或者最小的边界值，超过这个值就对指定元素设置指定样式**

不难，看下demo里面的code片段就结束吧：

/* 屏幕小于等于1200px使用如下CSS（非宽屏） */
    @media screen and (max-width: 1200px) {
      main {
        width: 95%;
      }
    
      /* 文章宽屏显示 */
      main article,
      .copyright {
        width: 100%;
      }
    
      /* 侧边栏隐藏 */
      main aside {
        display: none;
      }
    
      /* 页脚宽屏显示 */
      .copyright {
        width: 100%;
        min-width: auto;
      }
    }

**注意一下：响应式看起来加载的东西少了（eg：移动端）但其实和PC端请求页面大小一样（该加载的还是要加载，只是隐藏而已）**

最后再提一下移动端的`meta`，一般都这么设置：**`宽度为屏幕宽度，且不允许用户缩放`**

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

## 插件扩展 ##

### 通过`Autoprefixer`自动给添加不同浏览器CSS3前缀 ###

有些CSS3在谷歌浏览器、火狐、IE的老版本中可能不是标准名称，这时候可以通过`Autoprefixer`快速来兼容旧浏览器，之前写过文章，可以看看：

> [介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer（附其他前端开发插件）][CSS3_Autoprefixer]

### 通过`cssrem`自动转换px到rem ###

这个移动布局用的比较多，使用的时候有一点需要注意一下：**需先设置默认root字体大小!**（一般设置为20px）

![12.默认字体大小.jpg][12._.jpg]

PS：移动布局一般按照这个尺寸的双倍来设计：

![12.尺寸.jpg][12._.jpg 1]

### 案例小小说明 ###

开始之前先说下我准备的案例：[https://github.com/lotapp/h5blog/][https_github.com_lotapp_h5blog]

> 这次是真费了一番功法去准备了一个博客的案例，从`设计`（布局是仿几个模版的）到`PC页面`、再到`响应式`移动端布局（本来是准备直接出移动页面的，后来一想，算了彻底点吧，含`iPad`和`iPhone`）、再到`移动端`H5页面、最后再到`小程序`页面（在H5的基础上简单改了下）算是都弄了个demo

最后贴下效果图（前端真的没啥，忘了W3C查一下，我这边整理一下也是为了以后方便）

**PC端演示**：[https://github.lesschina.com/html5/][https_github.lesschina.com_html5]

> 这个动态演示的gif太大，大家自己访问吧，这边就贴一个静态图

![PC效果图.jpg][PC_.jpg]

ipad布局：GIF渲染的时候有点小问题，可以直接访问查看效果  
![ipad.gif][]

iPhone：GIF渲染的时候有点小问题，可以直接访问查看效果  
![mobil.gif][]

**移动端演示**：[http://github.lesschina.com/html5/mobil/][http_github.lesschina.com_html5_mobil]  
![m.gif][]

**微信端演示**：[https://github.com/lotapp/H5Blog/tree/master/wechat][https_github.com_lotapp_H5Blog_tree_master_wechat]  
![wechat.gif][]

**注意下图片有时候会有黑边框的问题，设置一下`display:block`就可以了**

> PS：本质就是行内块间隙问题（后面会说的）

**小程序方面注意点：**

*  **微信的a标签（`navigator`）是块级元素，而a标签本来是行内元素**
 *  **微信的img标签（`image`）在css中设置`width:100%`是有点小问题的，还需要设置`mode="widthFix"`（或者直接设置这个）**

其他的没什么好说的了，一切尽在代码中了~ [https://github.com/lotapp/H5Blog/tree/master/mobil][https_github.com_lotapp_H5Blog_tree_master_mobil]

(完)

转载于:https://www.cnblogs.com/dotnetcrazy/p/10748103.html

[http_www.w3school.com.cn_cssref_index.asp]: http://www.w3school.com.cn/cssref/index.asp
[http_www.w3school.com.cn_cssref_index.asp_font]: http://www.w3school.com.cn/cssref/index.asp#font
[http_www.w3school.com.cn_cssref_index.asp_text]: http://www.w3school.com.cn/cssref/index.asp#text
[http_www.w3school.com.cn_cssref_index.asp_background]: http://www.w3school.com.cn/cssref/index.asp#background
[http_www.w3school.com.cn_cssref_index.asp_dimension]: http://www.w3school.com.cn/cssref/index.asp#dimension
[http_www.w3school.com.cn_cssref_index.asp_border]: http://www.w3school.com.cn/cssref/index.asp#border
[http_www.w3school.com.cn_cssref_index.asp_positioning]: http://www.w3school.com.cn/cssref/index.asp#positioning
[https_www.cnblogs.com_Likebard_p_5899512.html]: https://www.cnblogs.com/Likebard/p/5899512.html
[1._.jpg]: /images/20230810/37b4f9d4fc1444f7b0b1bed3009f402f.png
[2._.png]: /images/20230810/e5d4f706c4f34b5f90b0caa4b7fdf913.png
[http_www.w3school.com.cn_cssref_index.asp_padding]: http://www.w3school.com.cn/cssref/index.asp#padding
[http_www.w3school.com.cn_cssref_index.asp_margin]: http://www.w3school.com.cn/cssref/index.asp#margin
[http_www.w3school.com.cn_cssref_pr_text_white-space.asp]: http://www.w3school.com.cn/cssref/pr_text_white-space.asp
[http_www.w3school.com.cn_cssref_css_selectors.asp]: http://www.w3school.com.cn/cssref/css_selectors.asp
[http_www.w3school.com.cn_css_css_syntax_attribute_selector.asp]: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp
[3._.png]: /images/20230810/65fdd737063f480dab042b9e87adc4bf.png
[4._.png]: /images/20230810/55d0fbbf37d348a9807d81416d136be1.png
[http_www.w3school.com.cn_css_css_selector_child.asp]: http://www.w3school.com.cn/css/css_selector_child.asp
[http_www.w3school.com.cn_css_css_selector_adjacent_sibling.asp]: http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
[5._.png]: /images/20230810/236c701fd4594e8a95c048ca867646e1.png
[http_www.w3school.com.cn_tiy_c.asp_f_css_background-size]: http://www.w3school.com.cn/tiy/c.asp?f=css_background-size
[5._.png 1]: /images/20230810/21f17fce48fe40dfa90582226f59845b.png
[6._.png]: /images/20230810/2bcc13db2f514dd194c87ac8f640224d.png
[http_www.w3school.com.cn_cssref_pr_box-shadow.asp]: http://www.w3school.com.cn/cssref/pr_box-shadow.asp
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_linear-gradient]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
[https_developer.mozilla.org_zh-CN_docs_Web_CSS_radial-gradient]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient
[8._.png]: /images/20230810/57d2106c97ea4e1b803d958d008d6186.png
[7._.jpg]: /images/20230810/db957cf664354c8e9729e2e1ed31408f.png
[7._demo.jpg]: /images/20230810/23a03f09cfc14ef9bfc4e03bf5dad9df.png
[7._.png]: /images/20230810/1c331fb92ade41dcb235993ddf09f754.png
[CSS3 border-image]: https://segmentfault.com/a/1190000010969367
[9._.gif]: /images/20230810/c95a8f81607847df96470e1c31964a87.png
[9._.gif 1]: /images/20230810/73c60f14501c41c9b86f963f8db85064.png
[10.2d_.gif]: /images/20230810/1bb82bc9f12c40f89c8d6ddd26990429.png
[10.3d]: /images/20230810/a12663943de541beb4bca5a60c50c7f4.png
[11._.gif]: /images/20230810/3cc37e2724214c2281feb2d077abcd33.png
[CSS3_Autoprefixer]: https://mp.weixin.qq.com/s/Ks7e7TPF2AujQIVbAqu_Rw
[12._.jpg]: /images/20230810/9373b7497bc44ac3ba1b574dc4f917e0.png
[12._.jpg 1]: /images/20230810/077591d4bb5e43368711f73a7dd5ee6c.png
[https_github.com_lotapp_h5blog]: https://github.com/lotapp/h5blog/
[https_github.lesschina.com_html5]: https://github.lesschina.com/html5/
[PC_.jpg]: /images/20230810/1d0788db77bd49169af485085d1a4aef.png
[ipad.gif]: /images/20230810/b94b5385569a44fb8e04ec5b06a066a9.png
[mobil.gif]: /images/20230810/86f5c303ccd342d39bad5dee5787a496.png
[http_github.lesschina.com_html5_mobil]: http://github.lesschina.com/html5/mobil/
[m.gif]: /images/20230810/8be28a0051004581a06e99cb32d86cd7.png
[https_github.com_lotapp_H5Blog_tree_master_wechat]: https://github.com/lotapp/H5Blog/tree/master/wechat
[wechat.gif]: /images/20230810/cf5a24e04c5f4c3789fdf399c3134eb2.png
[https_github.com_lotapp_H5Blog_tree_master_mobil]: https://github.com/lotapp/H5Blog/tree/master/mobil