HTML/CSS 学习笔记

HTML/CSS遗忘知识点

第一站

快速编写多个英文字体使用： lorem

还可以指定其单词数目，需要多少个单词数目就在lorem后面写几，例如5个单词数目： lorem5 ，依次类推

快速生成代码

例如：

div.article>(h$.title${标题$}>a+span)*2

生成效果：

    <div class="article">
        <h1 class="title1">标题1<a href=""></a><span></span></h1>
        <h2 class="title2">标题2<a href=""></a><span></span></h2>
    </div>

一些HTML标签

标签名	标签作用
table	该标签以表的形式表示, 用于制作一个表格
th（table head）	该标签表示表中的标题行(表格第一行)中的单元格
thead	表示表格中的标题行(表格第一行)
tbody	用于表示表格的内容区
tfoot	用于表示表格中表尾行(最后一行)
tr（table row）	用于表示一行
td（table ）	用域表示列单元格
headr	头标签, 用来指定文章的头部
footer	该元素代表其最近的祖先分割内容或分割根元素的脚。脚踏通常包含有关其部分的信息，如谁写的，相关文档的链接，版权数据等
caption	用来表示文章的标题
link	用来引入别的文件
strong	该要素对其内容具有很强的重要性、严肃性或紧迫性 (该标签中的内容将会被默认加粗)
label	该标签表示用户界面中的标题。标题可以与特定的表单控制（称为元素标记的控制）关联，或者使用属性，也可以将表单控制置于元素本身中 (常与字体和单/复选框联用)
iframe	此标签可用于嵌入别的网页
object	此标签可用于嵌入 flash 或者别的资源文件, 同embed
embed	此标签可用于嵌入 flash 或者别的资源文件, 同object
map	该元素用于定义一张雪碧图伤的某位置区域, 进行对该区域样式设置和 area 标签联用
area	用于指定雪碧图上的某位置
br	该标签可以换行, 为但标签
ol	有序列表 (该标签的默认样式为文字前面会添加"1. , 2. …")
ul	无序列表 (该标签的默认样式为文字前面会添加" · ")
audio	用来指定音频文件
video	用来指定视频文件
select	与 option 标签联用, 表示下拉选择框 (行块级元素)
option	与 select 和 option 标签联用, 表示下拉选择项 (块级元素)
optgroup	与 select 标签联用, 用于给数据分组
aside	该标签表示页面的一部分，该部分包含与元素周围的内容有切线相关的内容，并且可以被视为与该内容分开的内容。此类部分通常以印刷排版中的侧边栏表示
nav	该标签表示链接到其他页面或页面内部分的页面的一部分：带有导航链接的部分 (通常用域导航栏)
article	该元素表示文档、页面、应用程序或站点中的完整或自成一体的组成 (通常用域表示一篇文章)
section	该元素表示文档或应用程序的通用部分。在此上下文中，一节是内容的主题分组，通常表示章节
fieldset	表示对数据进行分组显示
legend	与 fieldset 联用, 表示分组的组标题
abbr	用来表示缩写或者首字母缩略词
em	表示其内容的压力重点
i	该标签以替代的声音或情绪表示文本的跨度
del	该标签表示从文档中删除 (该标签默认样式为文字中间会有横划线)
pre	该标签中的内容将会以该标签中编辑的样式展示, 不会存在空格合并的现象 (该标签为块级元素)
dl	该标签表示由零个或多个名称值组（描述列表）组成的关联列表 (与 dd 和 dt 连用)
dd	该标签表示描述列表（元素）中术语描述组的术语或名称的一部分 (与 dd 和 dt 连用)
dt	该标签表示描述列表（元素）中术语描述组的一部分的描述、定义或值 (与 dd 和 dt 连用)
textaeria	文本域, 用来编写文字类似与输入框 (为行级元素)

对应部分标签的演示代码

    <!-- table、thead、tbody、tfoot、tr、td 标签的演示
            border-collapse 设置表格折叠样式; 默认样式为：separate,表示分离, collapse：表示合并
            colspan 属性用于设置表格跨越的列数
            rowspan 属性用于设置表格跨越的行数
    -->
        <table style="border-collapse: collapse;">
            <thead>
                <!-- thead标题行: --><!-- thead标题行: --><tr><th>标题列1</th><th>标题列2</th><th>标题列3</th><th>标题行4</th></tr>
            </thead>
            <tbody>
                <!-- tbody行1: --> <tr><td colspan="2">列1</td><td>列2</td><td>列3</td></tr>
                <!-- tbody行2: --> <tr><td rowspan="2">列1</td><td>列2</td><td>列3</td><td>列4</td></tr>
                <!-- tbody行3: --> <tr><td>列2</td><td>列3</td><td>列4</td></tr>
            </tbody>
            <tfoot>
                <!-- tfoot行1: -->  <tr><td colspan="4">列1</td></tr>
            </tfoot>
        </table>

    <!-- label标签的演示 -->
        <!-- 方式一: 
            for属性为label添加关联内容, for属性值为需要关联对象的id 
        -->
            <input id="check" type="checkbox">
            <label for="check">按钮</label>
        <!-- 方式二 -->
            <label>
                <input type="checkbox">
                <span>按钮</span>
            </label>

    <!-- iframe标签的使用 -->
        <iframe name="myframe" src="http://www.taobao.com"></iframe>
        <!-- 于a标签联合使用, 将会根据a标签的链接从而改变嵌入的网页 -->
            <a href="http://www.baidu.com" target="myframe">百度</a>
            <a href="http://www.taobao.com" target="myframe">淘宝</a>
            <a href="http://www.douyu.com" target="myframe">斗鱼</a>

    <!-- 嵌入flash或则别的资源 
            data为资源地址
            type为嵌入的类型（MIME格式）
    -->
        <object data="" type="">
            <!-- 设置参数 quality 属性为播放的质量 -->
            <param name="quality" value="hight">
        </object>

    <!-- 与object类似 quality 属性为播放的质量 -->
        <embed quality="hight" src="" type="">

        <!-- 适配浏览器的写法 -->
            <object data="" type="">
                <param name="" value="">
                <embed quality="hight" src="" type="">
            </object>

    <!-- map、area 标签的使用 -->
        <map name="imageMap">
            <!-- 圆形：coords参数一：x坐标，参数二：y坐标，参数三：圆的半径 -->
            <area shape="circle" coords="213,256,36" href="http://www.taobao.com" target="_blank">
            <!-- 矩形：参数一二：矩形的左上角坐标，参数三四：矩形的右下角坐标 -->
            <area shape="rect" coords="213,100,213,200" href="http://www.baidu.com" target="_blank">
            <!-- 多边形：依次描述每个点的坐标 -->
            <area shape="poly" coords="100,200,300,500,250,100" href="http://www.jd.com" target="_blank">
        </map>
        <img id="imageMap" src="img/image.png" alt="">

    <!-- select 和 option 标签的演示:
            selected属性为默认选中状态
            multiple表示可以多项选择
    -->
        <select name="" id="" multiple>
            <option value="">Apple</option>
            <option selected value="">Orange</option>
            <option value="">Banana</option>
        </select>

    <!-- optgroup 标签的演示 
            label为分组的组名
    -->
        <select multiple>
            <optgroup label="分类一">
                <option value="">01</option>
                <option value="">02</option>
                <option value="">03</option>
            </optgroup>
            <optgroup label="分类二">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </optgroup>
        </select>

    <!-- fieldset 标签的演示 -->
        <fieldset>
            <legend>账号信息：</legend>
            <label>
                <span>男</span>
                <input name="sex" type="radio">
            </label>
            <label>
                <span>女</span>
                <input name="sex" type="radio">
            </label>
        </fieldset>
        <fieldset>
            <legend>身份信息：</legend>
            <label>
                <span>姓名</span>
                <input name="uname" type="text">
            </label>
            <label>
                <span>身份证号码</span>
                <input name="idnum" type="number">
            </label>
        </fieldset>

    <!-- abbr标签演示(万维网缩写) title属性值为缩写的全写 -->
        <abbr title="World Wide Webp">WWW</abbr>

    <!-- em标签演示(强调猫这个主题) -->
        <p><em>Cats</em> are cute animals.</p>

    <!-- i标签的演示(常用来替代字体图标) 引入文字图标时需把引入字体的类添加的i标签上 -->
        <i class="iconfont "></i>

    <!-- dl、dt、dd 的演示 -->
        <dl>
            <dt>作者: </dt>
            <dd>DaHui</dd>
        </dl>

    <!-- textaeria标签演示 
            cols 可以设置列, 
            rows 可以设置行数
    -->
        <textarea name="" id="" cols="30" rows="10">
            你好! 
        </textarea>

CSS元素样式冲突时,采用的解决办法

属性值计算过程：

1. 确定声明值；声明值
2. 层叠冲突；解决冲突
3. 使用继承；使用继承
4. 使用默认值

给属性值进行强制继承需要将属性值设置为 inherit
给属性值进行强制使用默认值需要将属性值设置为 initial

元素选择器

选中 class=“box” 下的 class=“box1” 的子元素：.box .box1

选中 class=“box” 下的直系子元素即其为父子关系，而非子孙关系，box为box1的父亲元素 class=“box1” 的元素：.box > .box1

选中 class=“box” 下的 class=“box1” 兄弟元素 box+box1

选中 class=“link” href=“http://www.baidu.com” 的元素 .link[href="http://www.baidu.com"]

选中同时有src和alt属性的img元素 img[src][alt]

表示选中 class=“box” 后面的所有兄弟div元素 .box~div

伪类选择器

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接
a:first-letter 选中元素的首字母
p:first-line 伪元素用于向文本的首行设置特殊样式
p:before 伪元素可以在元素的内容前面插入新内容
p:after 伪元素可以在元素的内容之后插入新内容

"first-line" 伪元素只能用于块级元素。

可以给每个属性值设置为 inherit 设置此属性值后，该属性此属性将会继承父级元素可以继承的此属性值。
当给元素属性值设置为 initial 时，该元素属性值将会使用初始值

行级元素 、 块级元素 和行块级元素

行级元素:

• display属性值为inline的元素
• 与其他行级元素并排排列
• 不能设置宽高，默认的宽度就是文字的宽度
• 除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素, 可替换元素, 例如: img、audio、video…都是行级元素

块级元素

• display属性值为block的元素
• 可设置其宽高
• 块级元素独占一行
• 所有的容器级标签，都是块级元素，以及p标签

行块级元素

• display属性值为inline-block的元素
• 拥有 行级元素 和块级元素的性质
• 块级元素可以与块级元素后或行级元素一行排列
• 块级元素可以设置宽高

特殊符号的写法

符号	意义
<	左尖括号
>	右尖括号
 	空格

第二站

浮动

为元素设置 float: left/right; 即可为元素添加浮动

浮动的元素将会在自己存在的容器中以设定的 左浮动/右浮动 来 靠上靠左/靠上靠右 进行浮动

浮动元素的特性

当父元素宽高未设置时浮动的元素将会造成父元素的高度塌陷，即父元素高度为0。

当上面的元素设置为浮动时，下面有别的元素时，下面的元素会向上移动其上面元素的位置，浮动元素将会覆盖下面上来的元素，当下面元素含有文字时，文字不会被覆盖，而会环绕在浮动元素的周围

为元素设置浮动属性后，该元素将会默认变成块级元素

浮动元素带来的问题

此时要清除浮动，为父元素添加如下属性(class=“clearfix”，此css样式的名字可以更改，即clearfix可以更改为其他合法的变量值)：

    .clearfix::after {
        content: "";
        display: block;
        /* 清除浮动 */
        clear: both;
    }

同时也可以在浮动元素的下面，即弟弟元素（非浮动）设置属性clear: both; 也可以达到清除浮动的效果，从而达到解决高度坍塌问题

clear 有三个属性值: left、right、both; 即清除左浮动, 清除右浮动, 清除左浮动和右浮动

第三站

给元素设置定位

使用 position 属性来给元素设置定位效果

设置过 position 非 static 的值后, 该元素将会变成一个块级元素

定位选择

取值:

• static(默认值)
  • 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
• relative
  • 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute
  • 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
• fixed
  • 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

使用 position 来使元素居中显示

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;

CSS 的一些样式

属性名	属性值	属性意义
box-sizing	border-box / content-box	将元素设置为边框盒(盒子包含边框部分)/内容盒
@charset	编码格式: 例如: “utf-8”	为 css 文件设置对应编码格式
background-clip	content-box/border-box/padding-box	为背景色设置背景覆盖范围
word-break	normal/break-all/keep-all	设置文字的截断方式
overflow	visible(默认值)/hidden/scroll/auto	设置文字或内部元素超出父元素范围时显示方式
text-overflow	ellipsis	设置单行文本超出父元素范围时显示方式

第四站

svg的绘制

    <svg style="background: grey;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
        <!-- fill为填充色；stroke为描边颜色；stroke-width调节边框宽度；x="100" y="100"设置位置 -->
        <rect width="100" height="100" x="100" y="100" fill="red" stroke="#ef3" stroke-width="20" />
        <!-- cx="300" cy="300" r="50"分别为圆心x和y坐标以及圆半径 -->
        <circle cx="300" cy="300" r="50" fill="blue" stroke="whitesmoke" stroke-width="2"/>
        <!-- 椭圆：rx、ry为椭圆最长半径和最短半径 -->
        <ellipse rx="80" ry="50" cx="350" cy="400" fill="aliceblue" />
        <!-- 直线，两个端点位置 -->
        <line x1="0" x2="100" y1="0" y2="100" stroke="cadetblue" />
        <!-- 折线points为多组坐标 -->
        <polyline points="100,10, 200,30, 150,20, 300,80, 400,300" stroke="blueviolet" fill="transparent" />
        <!-- 多边形 -->
        <polygon points="200,30, 250,40, 200,50" fill="beige" />
        <!-- path绘制路径
            <path> 标签用来定义路径。

            下面的命令可用于路径数据：

            M = moveto
            L = lineto
            H = horizontal lineto
            V = vertical lineto
            C = curveto
            S = smooth curveto
            Q = quadratic Belzier curve
            T = smooth quadratic Belzier curveto
            A = elliptical Arc
                A半径1，半径2；顺时针旋转角度：小弧{0}大弧{1}；顺时针{1}逆时针{0}；终点坐标
            Z = closepath
        -->
        <path d="M30 40 L150 40 L150 200 L30 200 Z" fill="none" stroke="lightcyan" />
        <!-- 用path画圆弧 -->
        <path d="M100 400 A100 100 1 0 1 450 450" fill="#008c8c" stroke="green" stroke-width="3" />
    </svg>

有关 CSS

在 css 文件顶部书写 @charset 为 css 文件设置对应编码格式

@charset “utf-8”;

为背景色设置背景覆盖范围

background-clip: ;
值为:
content-box 时为覆盖内容区, 而不覆盖边框
border-box 时覆盖边框部分, 不覆盖 padding 部分
padding-box 时覆盖paddign部分, 不覆盖 margin 部分

为文字截断方式进行设置

word-break: ;
值为:
normal 英文单词将会在单词之间进行截断, 一个单词之间将不会被分开
break-all 时将会使一个英文单词之间被截断
keep-all 时一个英文单词之间将不会被截断, 单词与单词之间将会被截断

文字或内部元素超出父元素范围时

overflow: ;
值为:
visible 时默认值, 超出部分可见
hidden 时, 超出部分将会隐藏不显示
scroll 时, 超出部分将会以滚动条的方式出现
auto 时, 会根据是否超出, 来设置是否开启滚动条

单行文本超出父元素范围时

text-overflow: ;
值为:
ellipsis 时, 将会使超出部分以"···"进行显示 (要结合 word-break: keep-all; overflow: hidden; 进行使用)

    /* text-indent：表示首航文本缩进
    line-height：表示行高；设置行高为容器高度，可以让单行文本垂直居中；行高可以设置为数字，表示为该文字的多少倍大小
    letter-space：表示文字间隙
    text-align：表示文字排列方式，默认为靠左排列 */

自定义字体

    @font-face {
        font-family: 'iconfont';  /* 为自定义的字体起名字 */
        /* 指向字体文件的位置 */
        src: url('//at.alicdn.com/t/font_2373422_dux9m3ye2jo.eot');
        src: url('//at.alicdn.com/t/font_2373422_dux9m3ye2jo.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_2373422_dux9m3ye2jo.woff2') format('woff2'),
        url('//at.alicdn.com/t/font_2373422_dux9m3ye2jo.woff') format('woff'),
        url('//at.alicdn.com/t/font_2373422_dux9m3ye2jo.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_2373422_dux9m3ye2jo.svg#iconfont') format('svg');
    }

    /* 只需要在对应盒子上添加 class="iconfont" 即可使用此自定义字体样式 */
    .iconfont {
        /* 引用自定义的文字 */
        font-family: "iconfont";
        /* 设置不斜体 */
        font-style: normal;
    }

有关HTML标签

    <!-- 语义化容器元素 
            header：通常表示页头，也可以用于表示文章的头部
            footer：通常用于表示页脚，也可以用于表示文章的尾部
            article：通常用于表示整篇文章
            section：通常用于表示文章的章节
            aside：通常用于表示侧边栏
    -->

第五站

CSS 高级运用

渐变色

渐变的使用需要用到 background-image: ; 来设定

• linear-gradient() 为线性渐变
• repeating-linear-gradient() 平铺渐变
• radial-gradient() 径向渐变

    /* 设置渐变色
        需要使用此属性来设置：background-image: ;
            linear-gradient(red, blue)为线性渐变;默认从上向下渐变，
                设置
                    to right
                    to left
                    to top
                    to bottom
                    45deg，45为度数方向
                    1turn，1turn表示一圈
                    可以改变渐变方向

                    设置渐变的长度使用颜色后面加像素进行，表示从某个像素开始进行渐变
                    
            repeating-linear-gradient()可以进行平铺的渐变

            radial-gradient()径向渐变

    */

    background-image: linear-gradient(to right, red, yellow, blue);
    background-image: linear-gradient(30deg, red, yellow, blue);
    background-image: linear-gradient(.3turn, red, yellow, blue);
    background-image: linear-gradient(.3turn, red, yellow 20px, blue);

    /* 此时表示从50像素开始进行渐变到100结束 */
    background-image: repeating-linear-gradient(green 50px, blue 100px);

    /* 此时中心为红色，蓝色向四周扩散 */
    background-image: radial-gradient(red, blue);

    /* 指定径向渐变渐变范围的大小 */
    background-image: radial-gradient(100px 100px, red, blue);

    /* 指定中心渐变的形状 
        circle 表示正圆
        ellipse 表示椭圆
    */
    background-image: radial-gradient(ellipse, red, blue);

    /* 指定渐变原点的位置使用 at */
    background-image: radial-gradient(ellipse at 100px 100px, red, blue);
    background-image: radial-gradient(ellipse at center center, red, blue);

    /* 指定离的最近的边 at 用来指定距离*/
    background-image: radial-gradient(closest-side at 100px 100px, red, blue);

    /* 指定离的最远的边 */
    background-image: radial-gradient(farthest-side at 100px 100px, red, blue);

    /* 指定离的最近的角 */
    background-image: radial-gradient(closest-corner at 100px 100px, red, blue);

    /* 指定离的最远的角 */
    background-image: radial-gradient(farthest-corner at 100px 100px, red, blue);
    

过度效果

过度效果的使用需要用到 transition 属性进行设置

• transition-property 设置为哪些属性添加过度效果
• transition-delay 设置延迟时间
• transition-duration 设置持续时间可以为 s 和 ms
• transition-timing-function 为过度效果使用过渡函数

    /* 设置过度效果 使高度变化时间设置为3秒 */
    transition: height 3s;

    /* all表示有任一属性发生变化时 */
    transition: all 3s;

    /* 设置为哪些属性添加过度效果 */
    transition-property: width, height;
    
    /* 设置延迟时间 */
    transition-delay: 1s;
    
    /* 设置持续时间 可以为s和ms， 可以分别为每个属性设置过渡时间*/
    transition-duration: 100ms， 200ms;
    
    /* 时序函数
        ease为默认值，表示先慢速开始，先加速，在减速
        ease-in加速运动
        ease-out减速运动
        ease-in-out先加速，再减速
        cubic-bezier(0.075, 0.82, 0.165, 1)贝塞尔曲线进行调整速度（https://cubic-bezier.com/#.17,.67,.83,.67）
        step()表示分步执行，参数一表示所要分成的步数，参数二表示是开始时执行还是结束时执行；默认值为end
    */
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-timing-function: steps(3, start);

    /* transition 可以同时设置过度相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */
    transition: all 2s 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

动画效果

为元素设置动画效果需要使用 animation 属性来设定

• animation-name 设置对当前元素生效的关键帧名字
• animation-duration 指定动画持续时间
• animation-delay 设置延迟时间
• animation-timing-function 设置动画函数
• animation-iteration-count 设置动画执行次数
• animation-direction 指定动画执行的方向
• animation-play-state 设置动画的暂停和播放
• animation-fill-mode 动画的填充模式

    /* animation-name设置对当前元素生效的关键帧名字 */
    animation-name: test;
    /* animation-duration指定动画持续时间 */
    animation-duration: 3s;

    /* animation-delay设置延迟时间 */
    animation-delay: 2s;

    /* animation-timing-function设置动画函数 */
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);

    /* animation-iteration-count设置动画执行次数
        infinite表示无限次
    */
    animation-iteration-count: infinite;

    /* animation-direction
        指定动画执行的方向
        normal（默认值）表示正常执行，即从from到to
        reverse表示倒置执行，从to到from
        alternate表示从from到to，重复执行动画时，方向执行
        alternate-reverse表示从to到from，重复执行动画时，方向执行
    */
    animation-direction: alternate;

    /* animation-play-state设置动画的暂停和播放
        running（默认值）进行动画的执行
        paused表示暂停动画效果
    */
    animation-play-state: paused;

    /* animation-fill-mode
        动画的填充模式
            none默认值，动画执行完毕，元素回到原来位置
            forward动画执行完毕，元素回到结束位置
            backwards动画延迟等待时，元素就会处于开始位置
            both结合了forward和backwards
    */
    animation-fill-mode: backwards;

关键帧

    /* 设置动画效果，必须先要设置关键帧，关键帧设置了动画执行的每一步骤，可以设置多个关键帧的动作 */
    @keyframes test {
        /* from表示开始位置也可以用0% */
        from {
            height: 0px;
        }

        /* to表示结束位置，也可以使用100%或30%来指定结束位置
            30% {

            }
            */
        to {
            height: 300px;
        }

    }

变形效果

设置元素变形效果需要使用 transform 属性来设定

    /* transform用来设置元素的变形效果
        平移：
            translateX，向X轴平Z移，其值可以是像素也可以是百分比（百分比是相对于自身进行计算）
            translateY，向Y轴平移，其值可以是像素也可以是百分比（百分比是相对于自身进行计算）
            translateZ，向Z轴平移，其值可以是像素也可以是百分比（百分比是相对于自身进行计算）
    */
    transform: translateX(50%);

    /* 通过旋转可以使元素沿着x、y或者z轴进行旋转（deg表示度数、turn表示圈数）,设置了prespective之后才啊能看出来更逼真的效果
        rotateX表示沿着x轴进行旋转
        rotateY表示沿着y轴进行旋转
        rotateZ表示沿着z轴进行旋转
    */
    transform: rotateZ(.5turn);
    transform: rotateX(.5turn);
    transform: rotateY(.5turn);

    transform: rotateX(45deg) translateX(50%);

    /* transform: scale()
    对元素进行缩放的元素
        scaleX(2)表示对元素进行X轴的缩放
        scaleY(2)表示对元素进行Y轴的缩放
        scale(2)表示对元素进行X轴和Y轴的缩放
        */
    transform: scale(2);

    /* 指定放大的中心点 */
    transform-origin: 10px 10px;

    /* 设置背面隐藏 */
    backface-visibility: hidden;
    /* 设置背景图全覆盖 */
    background-size: cover;

为整个网页设置视距

    html {
            /* 设置当前网页的视距为800px（人眼距离网页的距离），此时才能看出transformZ设置的值 */
            perspective: 800px;
        }

另一种居中效果的设定

    /* 当盒子的宽度和高度不确定时设置居中的属性 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

第六站

弹性盒

为元素设置为弹性盒，可以达到 float 的效果，而不会产生高度塌陷问题
给父元素设置为弹性盒，其子元素将会变成弹性元素，从而子元素将会产生浮动效果

• 弹性盒中 (父元素中)

  • display: flex; 设置父元素为弹性盒
  • flex-direction 设置弹性元素在弹性盒中的排列方向
  • flex-wrap 设置弹性元素在弹性盒中是否换行显示
  • flex-flow 可以同时设置弹性元素在弹性盒中排列方式以及是否换行
  • justify-content 设置弹性元素在弹性盒中分配模式
  • align-items 设置弹性元素在弹性盒中沿辅轴对齐方式
  • flex-basis 元素基础长度
  • flex 可以设置弹性元素的所有的样式

• 弹性元素 (将要设置的弹性元素)

  • flex-grow 给子元素设置生长方式
  • flex-shrink 指定子元素收缩系数
  • order 指定弹性元素的排列顺序
  • align-self 用来为弹性元素设定，覆盖 align-item 属性

在父元素中设置

    /* 给元素设置为弹性盒，为解决 float 高度塌陷的问题（在父元素中设置）
        设置的是父元素，其子元素会变成弹性元素
        不会产生高度塌陷
        值为 flex 时为块级元素
        值为 inline-flex 时为行级元素
    */
    display: flex;

    /* flex-direction 设置弹性元素的排列方向（在父元素中设置）
        row 默认值，横向排列，从左到右
        row-reverse ，横向排列，从右到左
        column ，纵向排列，从上到下
        column-reverse ，纵向排列，从下到上
    */
    flex-direction: row;

    /* flex-wrap 设置元素是否换行
        默认值 nowrap 不换行
        wrap 换行，沿着辅轴换行
        wrap-reverse 换行，沿着辅轴反方向换行
    */
    flex-wrap: wrap-reverse;

    /* 同时设置排列方式以及是否换行 */
    flex-flow: row wrap;

    /* justify-content 设置元素分配模式
        flex-start 沿着主轴起边依次排列
        flex-end 沿着主轴终边依次排列
        center 元素居中排列
        space-around 空白分配到元素两侧
        space-between 空白分配到元素之间
        space-evenly 空白分配到元素单侧
    */
    justify-content: center;

    /* align-items 设置元素沿辅轴对齐方式
        stretch 默认值，将元素的长度设置为相同的值
        flex-start 元素不会拉伸，沿着辅轴起边对齐
        flex-start 元素不会拉伸，沿着辅轴终边对齐
        center 居中对齐
        base-line 基线对齐

        将元素在弹性盒内居中
            align-items: center;
            justify-content: center;
    */
    align-items: center;

    /* align-content: ;跟justify-content类似 */
    align-content: center;

    /* flex-basis 元素基础长度，
        如果主轴时横轴，则指定的是元素在主轴上的基础宽度 
        如果主轴时纵轴，则指定的是元素在主轴上的基础高度
        默认值auto参考自身的高度或宽度
        如果传递了一个具体的值，则以改值为准 
    */
    flex-basis: 100px;

    /* flex可以设置弹性元素的所有的样式
        参数一：增长
        参数二：缩减
        参数三：基础

        initial == flex：0 1 auto；
        auto == flex：1 1 auto；
        none == flex：0 0 auto；// 弹性元素没有弹性
    */
    flex: auto;

在子元素设置

    /* flex-grow 给子元素设置生长方式
        默认值为0
        其数值会根据所填写的值进行把剩余空间按比例分配
        flex-shrink 指定子元素收缩系数
        默认值为1
            当父元素的宽高不足以放下子元素时，子元素会按比例缩放直到父元素的空间放满子元素
        值为0时不收缩
    */
    flex-grow: 3;
    flex-shrink: 0;

    /* order 指定弹性元素的排列顺序 */
    order: 1;
    
    /* align-self 用来为子元素设定，覆盖 align-item 属性 */
    align-self: start;

元素在弹性盒内的居中方式

    /* 将元素在弹性盒内居中 */
    align-items: center;
    justify-content: center;

LESS 语法

基础语法

    // 嵌套，为 box 下的 box2 元素设置样式
    .box {
        color: blue;
        font-size: 12px;
        .box2 {
            color: white;
            font-size: 15px;
        }
    }

    // 变量声明
    @a: 100px;
    @c:box5;
        // 使用声明的变量
        .box3 {
            height: @a;
        }

        // 作为类名，或者一部分值使用时必须以@{变量名}的形式使用
        .@{c} {
            height: @a;
            background-image: url("@{c}/img.jpg");
        }

    // 选择器
    .box1 {
        color: white;
        // 可能是子元素，也可能是孙子元素
        .box2 {
            color: #33c000;
        }
        // 直系子元素，非孙子元素
        >.box3 {
            color: antiquewhite;
        }
        // &: 表示外层的父元素
        &:hover {
            color: aqua;
        }
    }

    // 使用了box1的属性，同时也为自己新增加了属性
        .box1 {
            font-size: 14px;
            color: aquamarine;
        }

        // :extend()扩展，对当前选择器进行扩展指定选择器的样式
        .box2:extend(.box1) {
            background-color: red;
        }

    // mixin混合
        .p1 {
            color: black;
        }

        .p2 {
            // 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
            .p1();
            background-color: #fcA;
        }

    // 使用类选择器时，可以在后面加一个括号，这时我们实际上创建了一个mixin（加括号时不会在css中生成）
        .p4() {
            margin: 0 10px;
            padding: 0;
        }

        .p5 {
            // 引用时也可以省略括号
            .p4;
        }

    // 函数式使用规则
        // 生命传入参数
        .test(@w) {
            width: @w;
            height: @w;
        }
        // 使用传参进行设置样式
        .test02 {
            .test(300px);
        }

        // 多个参数的设定
        .test03(@a, @b, @c) {
            width: @a;
            height: @b;
            background-color: @c;
        }
        // 指定系数进行传参
        .test05 {
            .test03(@a: 100px, @c: #aca, @b: 400px)
        }

        // 设置参数默认值
        .test06(@a: blue, @b: #cdc) {
            color: @a;
            background-color: @b;
        }
        // 默认参数的使用
        .test07 {
            .test06();
        }