CSS 个人笔记

CSS介绍

• ​ HTML主要用于描述网页的结构和内容

• ​ CSS美化网页,给网页化妆

• ​ 所以需要先有HTML结构, 再写CSS样式

• ​ CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式（美化网页）。CSS 早已被所有主流浏览器采用，它允许你轻松控制以下样式：

  • 颜色 color

  • 背景 background

  • 字体 font

  • 浮动 float

  • 位置 position

  • 显示 display

  • 边框 border

  • 内边距 padding

  • 外边距 margin

  • 行高 line-height

  • 装饰 text-decoration

  • 过渡 transtion

  • 变化 transform

  • 动画 animation

  页面样式的属性有几百个，但常用的不过几十个

• CSS需要学习两大内容(CSS选择器, CSS属性)

• CSS选择器用于选择目标标签使用,一个网页可以有很多很多标签,给某个或者某些标签设置样式,就需要用到选择器

• CSS属性就是用什么工具化妆

CSS的书写位置

• 嵌入式也可以叫内嵌式, 就是把css代码写style标签中
• style标签也属于HTML标签,所以style可以出现在网页的任何地方,出现任意次, 建议style标签写在head标签中
• 嵌入式仅能控制当前页面的样式

	<style>
        div {
            color: red;
            background: skyblue;
        }

        p {
            color: orange;
            background: lightgreen;
        }
	</style>

• 外链式可以控制多个页面的样式

  外链式的意思就是把css样式写在一个单独的css文件中
  通过link标签引入css文件样式表带当前页面中

<link rel="stylesheet" href="css文件所在路径">

• 行内式通过HTML标签的全局属性style设置的, 仅能控制当前标签的样式 行内式在JS中使用的比较多

<p style="color:red;">pppppppppp</p>

• 输入样式表（不常用）

  将一个css文件，通过 @import关键字导入到另外一个css中。

    <!-- 通过style标签中,使用@import关键字引入外链式css文件 -->
    <style>
        /* 注意: @import引入的时候要写在前面 */
        @import url(./css/01.css);

        h2 {
            border: 5px solid blue;
        }
    </style>

CSS三大特性

1. 层叠性, 同一个元素被同一个选择器选中, 设置CSS属性,如果CSS属性是相同的,那么后面设置的属性值会覆盖前面设置的属性值; 如果是不同的CSS属性,那么会叠加生效

2. 继承性, 某些CSS样式,是可以被继承的, text-开头, font-开头, line-开头以及color属性 子承父业 如果子元素有自己的属性,那么将使用自己的属性值 不继承父元素的属性;

3. 优先级, 不同的选择器,选中同一个元素, 优先级高选择器设置的样式会覆盖优先级低的

   • 基本选择器的优先级

     • 继承的 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < style行内式

       !important在CSS中的作用, 它主要是用来提升属性的权重(简单理解就是优先级)。其属性的权重值无穷大！

     • !important语法格式

       css属性:css属性值 !important;

       使用!important一定要注意以下几点

       1. !important它是提升的属性的权重，而不是提升选择器的优先级！
       2. !important它只能提升作用于自己身上的属性，并不能提升继承过来属性的权重！

   • 复合选择器我们不叫优先级了,我们称之为权重

     • 复合选择器的权重计算： (0 0 0 0)

       从左到右：

       第一个0表示!important的个数

       第二个0表示id选择器的个数

       第三个0表示类选择器或伪类的个数

       第四个0表示标签选择器的个数

     • 比较方法：从左往右：如果第一个0大，表示这个选择器的权重高，那么使用这个选择器的样式，后面不用比较，如果第一个0相等，那么继续比较第二个0，如果第二个0大，那么就是这个选择器的权重高，使用他的样式，如果相等，继续往下比较，依次类推

       如果优先级相同,那么则考虑层叠性

CSS三大模块

• "盒子模型(内容width,height+边框border+内填充padding+外边距margin)"

  所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的"内容(width,height)"、"内边距(padding)"、"边框(border)"和"外边距(margin)"组成。

• "浮动(float)"

• "定位(position)"

其余的都是细节。要求这三部分，无论如何也要学的非常精通。

CSS基本选择器

		/* 标签选择器,选择所有相同标签名的标签, 选择器名就是标签名 */
        p {
            color: red;
        }

        /* 类选择器,选择具有这个类名的单个或者多个标签, 选择器名是 .class属性值 */
        .one {
            background-color: skyblue;
        }

        /* 多类名选择器, 一个标签的class属性值可以设置多个类名,没给类名可以使用"空格"隔开  */
        .two {
            border: 5px solid orange;
        }

        /* id选择器, 选择具有这个id属性值的标签, id属性值需要唯一, 选择器名 #id属性值 */
        #three {
            color: green;
        }
		/* 通配符选择器 选择页面所有标签, 选择器名是* */
        * {
            border: 5px solid blue;
        }

类和id的命名规则

​ 1. 可以有数字、字母、下划线_、短横线-​

​ 2.不能以数字开头

​ 3.不能使用单个短横线

​ 4.不能使用短横线+数字开头

• 建议:

  ​ 1.命名建议使用有意义的名字;

  ​ 2.尽量使用驼峰命名法。

• 当有多个单词组成的一个词的时候，第一个单词的首字母小写，后面每个单词的首字母大写 如：userName userPwd heightSchoolStudent

颜色取值方式

<style>
    .div1 {
        /* 颜色取值方式一: 英文颜色单词 */
        color: red;
        /* color: pink; */
    }

    .div2 {
        /* 颜色取值方式二: rgb(0~255,0~255,0~255) */
        /* color: rgb(255, 255, 255); */
        /* color: rgb(0, 0, 0); */
        color: rgb(255, 0, 0);
    }

    .div3 {
        /* 颜色取值方式三: rgba(0~255,0~255,0~255, 0~1) */
        /* 最后一个a表示alpha透明度的意思, 取值0表示完全透明, 取值1表示完全不透明度 */
        /* color: rgba(255, 0, 0, 1); */
        /* color: rgba(255, 0, 0, 0); */
        /* color: rgba(255, 0, 0, 0.5); */
        /* color: rgba(255, 0, 0, 0.22); */

        /* 在CSS中,如果取值是小数的时候,可以省略0 */
        color: rgba(255, 0, 0, .22);
    }

    .div4 {
        /* 颜色取值方式四: #+六位或者三位0~9a到f之间的组成的字符 */
        /* color: #ff0000; */
        /* color: #f00; */
        /* color: #00ff00; */
        /* color: #0f0; */
        color: #a6e22e;
    }
</style>

尺寸属性

• css的width属性设置元素的宽度,取值 数值+css单位 或者 百分比
• css的height属性设置元素的高度, 取值 数值+css单位 或者 百分比
• 百分比一半是相对父元素而言
• css单位最常见的px(像素), em, rem, vw,vh等

文本相关属性

• ❤color ( 文本颜色 ) 取值颜色值 英文颜色单词, rgb, rgba, 十六进制

• ❤text-align ( 文本水平对齐方式 ) 取值 left center right

• ❤line-height (行高) 设置行与行之间垂直的间隔距离 取值数字不带单位(几倍行高), 也可以数值带单位

  设置行高, 不带单位,表示多少倍行高

  line-height: 1;
  line-height: 2;
  line-height: 3;
  

• ❤text-indent ( 首行缩进文本 )

• ❤text-decoration ( 文本装饰线 ) 取值:

  • ❤underline下划线

  • ❤none没有线,去掉修饰线

  • overline上划线

  • line-through删除线

• word-spacing ( 单词的间距 )

• letter-spacing ( 字母或者字符的间距)

• text-transform ( 文本转换 , 转成英文字母的大小写)

  取值:

  • uppercase转成大写字母

  • lowercase转成小写字母

  • capitalize首字母大写

• text-indent（设置首行缩进）

/* 设置首行缩进 */
text-indent: 32px;
/* text-indent: 48px; */
/* text-indent: 60px; */

/* css单位em   1em就等于当前1个字体大小 */
text-indent: 2em;

将文本溢出的部分以省略号替代

• 单行文字出现省略号

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .div1 {
        background: pink;
        width: 150px;
        /* 强制代码一行显示 */
        white-space: nowrap;
        /* 溢出部分内容隐藏 */
        overflow: hidden;
        /* 溢出部分内容使用省略号代码 */
        text-overflow: ellipsis;
    }
</style>
<body>
    <h2>❤单行文字出现省略号</h2>
    <div class="div1">Skechers斯凯奇男鞋运动鞋旗舰店秋冬季缓震健步鞋休闲透气网面跑步鞋220035 【时尚款】全黑 42</div>
</body>

• 多行文字出现省略号

<style>
    .div2 {
        background: pink;
        width: 150px;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 纯英文换行 */
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* 这里是超出几行省略 */
        -webkit-line-clamp: 3;
    }
</style>
<body>
    <h2>多行文字出现省略号</h2>
    <div class="div2">Skechers斯凯奇男鞋运动鞋旗舰店秋冬季缓震健步鞋休闲透气网面跑步鞋220035 【时尚款】全黑 42</div>
</body>

font字体属性

• font-size设置字体大小,默认谷歌浏览器的字体大小是"16px"

  建议字体大小使用"偶数",因为偶数兼容性比较好

  font-size: 16px;
  font-size: 30px;
  font-size: 40px;
  

• font-weight设置字体是否加粗, 取值 bold加粗,也可以用700表示 normal不加粗,也可以400表示;

  font-weight: bold;
  font-weight: 700;
  

• font-style设置字体是否倾斜, 取值 italic斜体 , normal不倾斜

  font-style: italic;
  

• font-family设置字体名称; 取值字体名称, 默认是微软雅黑

  font-family: "宋体";
  font-family: "SimSun";
  font-family: "\5B8B\4F53";
  

  注：可以同时设置多个字体, 从左到右依次匹配,谁能用就用谁 如果都不能使用,将使用浏览器默认字体

  font-family: "宋体", "楷体", "黑体";

font简写属性

• font简写属性,是可以使用font属性可以所有跟字体相关的属性以及行高

• font简写属性,一定要设置字体大小和字体名称,并且顺序不能调换

  font: 36px "宋体";
  

• 其他font-weight,font-style需要放在前面, 并且font-weight,font-style的取值可以互换位置

  font: bold italic 36px "宋体";
  
  font: italic bold 36px "宋体"; 
  

• 在字体大小通过/后面设置的就是行高的值

  font: italic bold 36px/200px "宋体";
  
  font: bold italic 36px/200px "宋体";
  

CSS复合选择器(派生选择器)

复合选择器是由"两个"或"多个基础选择器"，通过"不同的方式"组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

后代选择器

• 后代选择器就是选中子孙后代(需要标签是嵌套关系)

  选择器1 选择器2 选择器3...{

  ​ }

子元素选择器

• 子元素选择器只能选中子代(只能找到亲儿子,不能孙子后代)

  选择器1 > 选择器2 > 选择器3...{

  ​ }

兄弟选择器

• 兄弟选择器需要标签是同级关系(兄弟关系)

  选择器1 + 选择器2 + 选择器3 ...{

  ​ }

并集选择器

• 并集选择器也可以叫分组选择器,意思就是把多个选择器放在同一组,他们具有相同样式,分组选择器一般用于提取公共样式

  选择器1, 选择器2, 选择器3...{

  }

交集选择器

• 交集选择器，是p标签而且这个p标签又具有.one类名, 同时成立

  p.one {
      background-color: orange;
  }
  

CSS3同胞选择器

同胞选择器（E~F），用于选"择某元素后面"的"所有同胞元素"。也就是说，"E和F是同辈元素"，且"F在E元素的后面"，它们之间可以有，也可以没有其他同胞元素。

同胞元素其实就是兄弟元素

CSS3属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

CSS属性选择器参考文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

attr=>attribute属性的意思
value就是属性值的意思

• 第一部分语法:

  • [attr] 表示带有以 attr 命名的属性的元素。

  • ❤[attr="value"] 表示带有以 attr 命名的属性，且属性值为 value 的元素。

  • [attr^="value"] 表示带有以 attr 命名的属性，且属性值是以 value开头的元素。

  • [attr$="value"] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

  • [attr*="value"] 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

    /* 是p标签并且要具有title属性 */
    p[title] {
        border: 2px solid blue;
    }
    
    /* 是p标签并且要具有title属性,而且属性值要为"c" */
    p[title="c"] {
        font-size: 30px;
    }
    
    /* 是p标签并且要具有title属性,而且属性值要以a开头 */
    p[title^="a"] {
        background-color: orange;
    }
    
    /* 是p标签并且要具有title属性,而且属性值要以c结尾 */
    p[title$="c"] {
        font-style: italic;
    }
    
    /* 是p标签并且要具有title属性,而且属性值含有b */
    p[title*="b"] {
        font-weight: bold;
    }
    

• 第二部分语法:

  [attr~="value"] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

  [attr|="value"] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀。

  span[class~="one"] {
      color: red;
  }
  
  span[class|="user"] {
      background-color: skyblue;
  }
  
  input[type="password"] {
      background-color: lightgreen;
  }
  

伪选择器

• 概念：在 CSS 中允许使用伪类来添加一些选择器的特殊效果。

• 语法：CSS选择器:伪类

• 什么是伪类选择器？

  伪类选择器:给页面上的元素设置样式，必须满足一定的条件，我们的伪类选择器设置的样式才会显示。

div:hover {
    width: 300px;
    background: skyblue;
}

链接伪类选择器(锚伪类)

通过超级链接的不同状态，对其设置不同的样式！

• :link 未访问的状态 超级链接没有被访问
• :visited 访问过后状态 超级链接已经被访问
• :hover 鼠标放上状态 鼠标放在超级链接上面，但是并没有将鼠标的左键按下去
• :active 激活状态 鼠标左键已经按下去了，但是并没有将鼠标的左键弹出

伪类选择器都是带有冒号“:”

• 链接伪类选择器有4个状态,书写的时候,有顺序要求, 爱很准则(先有爱(love) 后面恨(hate) )

a:link {
    color: black;
}

a:visited {
    color: green;
}

a:hover {
    color: orange;
}

a:active {
    color: blue;
}

hover伪类选择器

:link和:visited只对a标签有效,:hover和:active对任何都有效

重点记住:hover

:hover鼠标移上元素以后的样式

div {
    width: 100px;
    height: 100px;
    background: pink;
}

div:link {
    background: red;
}

div:visited {
    background: green;
}

div:hover {
    background: purple;
}

div:active {
    background: orange;
}

p {
    width: 120px;
    height: 120px;
    background: skyblue;
}

p:hover {
    width: 300px;
}

p:active {
    height: 400px;
}

表单伪类

:focus 获取焦点以后的样式

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            background-color: pink;
        }
        textarea:focus {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" />
    <textarea>123abc456789</textarea>
</body>

</html>

CSS3结构伪类选择器

以下的E表示element元素的意思

E:first-child 匹配父元素中的第一个子元素E

.box div:first-child {
        border: 3px solid blue;
    }

E:last-child 匹配父元素中最后一个子元素E

.box div:last-child {
        background-color: orange;
    }

E:nth-child(n) 匹配父元素中的第n个子元素E(常用)

.box div:nth-child(2) {
        font-size: 30px;
    }

1. 结构伪类选择器就是选择第n个
2. nth-child从所有子级开始算的，可以不是同一种类型标签
3. n可以是数字，关键字和公式
4. n如果是数字，就是选择第n个
5. 常见的关键词 even 偶数 odd 奇数
6. 但是 第0个元素或者超出了元素的个数会被忽略 )
7. 常见的公式如下 ( 如果n是公式，则从0开始计算）
   公式 取值
   2n 偶数
   2n+1 奇数
   5n 5的倍数 5 10 15 ...
   n+5 从第5个开始（包含第五个）到最后
   -n+5 前5个（包含第5个）...

/* 使用关键字 odd表示奇数 even表示偶数 */
ul li:nth-child(odd) {
    background-color: pink;
}

ul li:nth-child(even) {
    background-color: skyblue;
}

/* 如果n是公式，则从0开始计算 */
/* 2n就是的2的倍数 */
ul li:nth-child(2n) {
    background-color: lightgreen;
}

/* 3n就是的3的倍数 */
ul li:nth-child(3n) {
    background-color: lightgreen;
}

/* 从第5个元素开始,包括第5个 */
ul li:nth-child(n + 5) {
    background-color: lightgreen;
}

/* 找到前4个元素,包括第4个 */
ul li:nth-child(-n + 4) {
    background-color: lightgreen;
}

nth-of-type选择器

• 使用:first-child, :last-child以及:nth-child需要看HTMML结构所在位置
• :nth-of-type(n)可以直接指定类型E的第n个

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* E:first-of-type 指定类型E的第一个 */
        .box div:first-of-type {
            color: red;
        }

        /* E:last-of-type 指定类型E的最后一个 */
        .box div:last-of-type {
            color: blue;
        }

        /* E:nth-of-type(n) 指定类型E的第n个 */
        .box div:nth-of-type(3) {
            color: orange;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>span</span>
        <span>span</span>
        <div>div1</div>
        <div>div2</div>
        <span>span</span>
        <span>span</span>
        <div>div3</div>
        <div>div4</div>
        <div>div5</div>
        <span>span</span>
        <span>span</span>
    </div>
</body>

</html>

列表样式属性

列表样式属性主要给无序列表和有序列表使用
列表样式属性可以给ul,ol,li这三个标签设置都可以

• 列表样式类型 list-style-type取值disc实心圆(默认值) square正方形 circle空心圆 none没有列表项目符号

/* list-style-type: disc; */
/* list-style-type: square; */
list-style-type: circle;
/* list-style-type: none; */

• 列表项目符号出现的位置 取值 inside里面 outside外面(默认值)

list-style-position: inside;
/* list-style-position: outside; */

• 使用图片替换列表项目符号 取值 url(图片所在路径)

/* list-style-image: url(./images/cc_cat.png); */
/* list-style-image: url(./images/3.jpg); */
list-style-image: url(./images/li01.jpg);

• list-style简写属性,可以设置列表相关样式, 多个属性值之间使用空格隔开, 没有顺序要求 也可以省略某个或者某些属性值

/* list-style: circle; */
/* list-style: inside; */
/* list-style: url(./images/sina.png); */
list-style: inside circle url(./images/sina.png);

• 一般我们在使用列表项目符号样式的时候,都是去掉列表项目符号

• 所以,大家只需要记 list-style-type:none; 或者 list-style:none;

元素的显示方式

定义:HTML标签默认情况下在展示的时候会出现一些独占一行，或者多个HTML标签都在一行上显示的现象，因此我们根据元素的显示方式不同,将元素分为"块级元素","行内元素","行内块元素"。

元素显示方式的分类

• 块级元素：多个同名元素默认情况都会独占一行，且宽高属性可以起作用,宽度默认是父元素的100%

  块级元素显示方式： display:block;

  特点：

  ​ 1.独占一行

  ​ 2.能够设置有效宽高

  ​ 3.宽度默认是父元素的100%

  常见块级元素：

  div h1 h2 h3 h4 h5 h6 p ul li ol...

• 行内元素：多个同名元素默认情况下会在一行显示，且宽高属性不起作用,默认宽度由内容决定。

  行内元素的显示方式： display:inline

  特点：

  ​ 1.一行可以显示多个

  ​ 2.默认宽度就是它本身内容的宽度，不能设置有效宽高

  常见的行内元素：

  span i s del b strong em ins a...

• 行内块级元素：多个元素默认会显示在一行，且宽高属性起作用。

  行内块级元素： display： inline-block;

  特点：

  ​ 1.一行显示多个

  ​ 2.能设置有效宽高

  ​ 3.默认宽度就是它本身内容的宽度

  常见的行内块级元素：

  input img textarea

• 通过display属性可以改变元素的显示方式, 改变成什么元素,就具有什么元素的特点

  • display:block; 转换成块级元素

  • display:inline; 转换成行内元素

  • display:inline-block; 转换成行内块元素

CSS背景属性

背景属性	描述
background-color	设置元素的背景颜色
background-image	设置元素的背景图像
background-repeat	控制背景图像是否重复
background-attachment	控制背景图像是否跟随窗口滚动
background-position	控制背景图像在元素中的位置
background-size	设置背景图像的尺寸
background-origin	设置 background-position 属性相对于什么位置来定位背景图像
background-clip	设置背景图像的显示区域
background	背景属性的缩写，可以在一个声明中设置所有的背景属性

参考文档:CSS background（背景） (biancheng.net)

CSS精灵图

雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到 所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。

.div1 {
    background-image: url(./images/biaoqing.png);
    background-repeat: no-repeat;
    /* 如果想要取出雪碧图中某个小图片,我们就需要使用背景定位技术 */
    /* 1. 把目标小图片,通过背景定位,移动到元素的"左上角" */
    background-position: -351px -43px;
    /* 2. "改变宽度高度",让元素的宽度高度仅能显示这个小图片 */
    width: 80px;
    height: 88px;
}

/* 通过这个网站可以帮助我们实现背景定位 */
/* http://www.spritecow.com/ */
.div2 {
    background: url(./images/index.png) no-repeat -137px -35px;
    width: 25px;
    height: 27px;
}

伪元素选择器

• 伪类选择器:给页面上的元素设置样式，"必须满足一定的条件"，我们的伪类选择器设置的样式才会显示。

  比如, :hover 鼠标悬停在元素上面的以后,才会触发的样式

• 伪元素选择器: 伪元素顾名思义,就是假的元素,不是真正HTML元素; 在 CSS 中允许使用伪元素来添加一些选择器的特殊效果

  伪元素选择器有很多,但是常用的就几个

  • E::first-letter 文本的第一个字母或字(如中文、日文、韩文等）

  • E::first-line 文本第一行

  • E::selection 选中文本以后的样式

    注意: "first-letter" 伪元素只能用于"块级元素"。这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。
    注意: "first-line" 伪元素只能用于"块级元素"。
    注意: E::selection只可以应用于少数的CSS属性: color, background,text-shadow文字阴影

p::first-letter {
    font-size: 50px;
    color: red;
}

p::first-line {
    font-weight: bold;
    font-style: italic;
}

p::selection {
    background: pink;
    color: blue;
    text-shadow: 2px 2px 1px green;
}

before伪元素和after伪元素

• E::before伪元素在标签内容之"前"添加一个"行内元素",通过content属性设置行内元素的标签内容, "content属性不能省略"
• E::after伪元素在标签内容之"后"添加一个"行内元素",通过content属性设置行内元素的标签内容, "content属性不能省略"

li::before {
    content: "★";
    /* content: ""; */
    font-size: 30px;
    color: yellow;
    background: skyblue;
    width: 100px;
    height: 50px;
    display: inline-block;
    text-align: center;
    line-height: 50px;
}

li::after {
    content: "❤";
    color: red;
}

换行问题

• 通过.div1~.div5现象观察,我们可以得到结论,默认纯字母或者纯数字,是不会自动换行的;
• 只有中文内容才会自动换行; 但是可以通过设置word-break: break-all;属性实现英文和数字自动换行

overflow属性

• 概念：CSS属性 overflow 定义当一个元素的"内容太大"而无法适应 块级格式化上下文 时候该做什么。

• overflow: visible | hidden | scroll | auto | inherit;

  • visible (默认)：内容不会被修剪，会呈现在元素框之外
  • ❤❤hidden：内容会被修剪，并且其余内容不可见
  • scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容
  • ❤auto：由浏览器定夺，如果内容被修剪，就会显示滚动条
  • inherit： 规定从父元素继承overflow属性的值

border边框

• 边框属性语法
  • border: border-width border-style border-color;
  • border: 边框粗细 边框样式 边框颜色;
  • 边框粗细取值是数值带px单位
  • 边框样式取值 ❤solid实线 ❤dashed虚线 ❤none没有线 double(双实线) dotted(点状线)
  • 边框颜色取值就是颜色值
  • border设置的是四个方向(上下左右)的边框线

border: 10px solid blue;

• 设置不同方向的边框
  • border-top: 边框粗细 边框样式 边框颜色;
  • border-bottom: 边框粗细 边框样式 边框颜色;
  • border-left: 边框粗细 边框样式 边框颜色;
  • border-right: 边框粗细 边框样式 边框颜色;

border-top: 10px solid red;
border-bottom: 5px dashed green;
border-left: 10px dotted orange;
border-right: 20px double purple;

边框应用-制作三角形

transparent是透明色

div {
    width: 0px;
    height: 0px;
    border: 20px solid transparent;
    border-left-color: green;
    border-top-color: green;
}

圆角边框(CSS3)

border-radius: 数值带px单位或者百分比;

❤设置border-radius:50%可以让一个正方形变成圆形

轮廓属性outline

• 轮廓属性outline,也称之为外轮廓线,外边框线

• outline语法跟border的语法几乎一样

  outline: 2px solid red;
  

• 去掉input标签的外轮廓线

  input {
  /* outline: none; */
  outline: 0;
  }
  

内填充(padding)

内填充指的是 从"内容到边框"的距离

• padding的取值是数值带px单位,只能正值,不允许负值

  • padding:1个值

  • padding:2个值

    padding: 上下 左右

  • padding:3个值

    padding: 上 左右 下

  • padding:4个值

    padding: 上 右 下 左

• 设置某个方向的内填充

  • padding-top上填充
  • padding-bottom下填充
  • padding-left左填充
  • padding-right右填充

• 注意: padding和border会撑开盒子宽度跟高度 但是padding只能影响内容,不影响背景图片

  • 默认盒子真实宽度 = 宽度 + 左右边框 + 左右内填充
  • 默认盒子真实高度 = 高度 + 上下边框 + 上下内填充

外边距(margin)

margin外边距, 是盒子与盒子之间的距离 是边框外面的距离

margin的用法跟padding类似

• margin的取值可以写数值带px单位, 允许"负值"

  margin的取值还可以写一个auto关键字, auto表示自动的意思

• 设置某个方向的内填充

  • margin-top上外边距
  • margin-right右外边距
  • margin-bottom下外边距
  • margin-left左外边距

margin实现盒子水平居中

• auto表示自动分配剩余空间

/* margin-left: auto;表示把所有剩余空间都给左边 */
margin-left: auto;

/* margin-right: auto;表示把所有剩余空间都给右边 */
margin-right: auto;

• margin实现盒子水平居中(重点,常用,必须得掌握)

  xxxxxxxxxx 

    // 与v-for同级的ref 返回值都是列表渲染出来当前元素数组集合    

        //v-for 内部的ref 返回值也是列表渲染出来当前元素数组集合        {{num}}-span        没用的a       {{num}}    

     <button @click="showRefList">click
  ​html
  1. 必须是块级元素。
  2. 盒子必须指定了小于父元素100%的宽度(width)
  3. 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

.box {
    background: skyblue;
    width: 300px;
    height: 50px;
    /* 让元素内容水平居中 */
    text-align: center;
    /* 实现单行文字垂直居中 */
    line-height: 50px;
    margin: 0 auto;
    margin: 100px auto;
    margin: auto;
}

html)

清除元素的默认内外边距

使用通配符选择器

* {
    margin: 0;
    padding: 0;
}

margin外边距合并现象

• 相邻(兄弟关系)块元素垂直外边距的合并

  当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。
  这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

• 解决方法: 不要同时设置两个盒子 只需要设置其中一个即可

• 嵌套(父子关系)块元素垂直外边距的合并

  对于两个嵌套关系的块元素，如果父元素没有上内填充及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

• 解决方法

  方法1: 不给子元素设置margin-top, 给父元素设置padding-top, 注意高度要减去多余的

  方法2: 给父元素设置1px上边框或者内填充即可

  方法3: 给父元素设置overflow:hidden

• 嵌套块(父子关系)元素给"子元素设置上外边距"出现整体塌陷(掉下来)现象

• 解决方法

  方法1: 不给子元素设置margin-top, 给父元素设置padding-top, 注意高度要减去多余的

  方法2: 给父元素设置1px上边框或者内填充即可

  方法3: 给父元素设置overflow:hidden

居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box1 {
                width: 300px;
                height: 100px;
                background: skyblue;
                text-align: center;
            }

            .box2 {
                width: 300px;
                height: 100px;
                background: pink;
                margin-left: auto;
                margin-right: auto;
            }

            .box3 {
                width: 600px;
                height: 400px;
                background: lightgreen;
                text-align: center;
            }

            .box4 {
                /* width: 600px; */
                width: 411px;
                height: 400px;
                background: tomato;
                padding-left: 189px;
            }

            .box5 {
                width: 600px;
                height: 400px;
                background: aqua;
            }

            .box5 img {
                margin-left: 189px;
            }

            .box6 {
                width: 600px;
                height: 400px;
                background: chocolate url(./images/3.jpg) no-repeat center top;
            }
        </style>
    </head>

    <body>
        <h2>文字水平居中 text-align:center</h2>
        <div class="box1">内容</div>

        <h2>盒子水平居中 设置已有宽度的块级元素的左右margin为auto</h2>
        <div class="box2">内容</div>

        <h2>图片水平居中 设置父元素的text-align:center</h2>
        <div class="box3">
            <img src="./images/3.jpg">
        </div>
        <h2>图片水平居中 设置父元素的padding-left</h2>
        <div class="box4">
            <img src="./images/3.jpg">
        </div>
        <h2>图片水平居中 设置子元素的margin-left</h2>
        <div class="box5">
            <img src="./images/3.jpg">
        </div>

        <h2>背景图片水平居中 使用背景定位属性background-position</h2>
        <div class="box6"></div>
    </body>

</html>

中,背景图片水平居中.html)

浮动（float)

• 标准文档流就是HTML元素的默认排列方式, 块级元素独占一行, 行内元素或者行内块元素不独占一行

• 浮动的语法

  float: none(默认值,不浮动,按标准文档流排列) 或者 left(左浮) 或者 right(右浮)

• 左浮动和右浮动区别

  1. 左浮动是把元素移动左边,直到遇到上一个浮动元素或者父元素的边界停止
  2. 右浮动是把元素移动右边,直到遇到上一个浮动元素或者父元素的边界停止

• 浮动的特点

  1. 即使元素浮动以后, 还是父元素的内容, 会受到padding和obrder的约束 不会跑出父元素之外
  2. 浮动以后的元素,会脱离标准文档流的约束(简称脱标), 不占位置标准文档流的约束就是块级元素从上到下排列, 行内或者行内块元素从左到右排列
  3. 父容器的宽度不够的时候, 浮动元素只能下一行
  4. 文字是无法跑到浮动元素的上面, 因为浮动最初设计出来是实现图文混排

清除浮动

• 为什么要清除浮动,因为浮动元素会脱标,不占位置,不占位置,不占位置

  比如子元素都浮动,容易导致父元素高度为0, 所以我们需要清除浮动带来的影响

• 清除浮动方法一: 给父元素设置一个固定高度, 该方式不推荐 缺点该方式需要手动计算父元素的高度

• 清除浮动方法二: 给父元素设置overflow:hidden;溢出隐藏, 缺点是超出父元素之外的内容会被隐藏

• 清除浮动方法三: 额外标签法, 在"最后一个浮动元素的后面",添加一个"空的块级元素",并且给这个块级元素设置clear:both;属性

  clear是专门用于清除浮动的属性, clear属性的取值可以写left, right和both clear:left清除左浮动 clear:right清除右浮动 clear:both;清除左右浮动

  缺点, 会有一个多余的块级元素

• ❤❤❤清除浮动方法四: ::after伪元素清除法, 它是额外标签法的升级版 定义一个清除浮动类, 并且在父元素上面添加这个类名

  .clearfix1::after {
      /* content属性不能省略 */
      content: "";
      /* 清除左右浮动 */
      clear: both;
      /* 转成块级元素 */
      display: block;
  }
  

• 清除浮动方法五: 双伪元素清除浮动法 定义清除浮动类 并且在父元素上面添加这个类名

  .clearfix2::before, .clearfix2::after{
      content:" ";
      display: table;
  }
  .clearfix2::after{
      clear:both;
  }
  

版心布局

• 因为版心布局页面中用的非常多,所以可以专门定义一个版心类

  版心类代码,仅需要设置宽度和margin左右auto即可

.container {
    width: 1000px;
    margin: 0 auto;
}

• 版心布局是 宽度超过页面的一半,元素需要水平居中在页面的中间

  多类名选择器 同一个标签的class属性值可以设置多个类名,类名之间使用空格隔开

<div class="div1 container">div1的内容</div>
<div class="div2 container">div2的内容</div>
<div class="div3 container">div3的内容</div>

通栏布局

• 通栏布局的宽度是百分比, 高度一般不超过页面的一半

.container {
    width: 1000px;
    margin: 0 auto;
}

.header {
    height: 50px;
    background: #ee0215;
}

• 通栏布局一半会配合版心布局使用, 外面通栏布局,内部版心布局

<div class="header">
    <div class="container">header头部</div>
</div>

分栏布局

• 浮动我们也会经常使用, 所以也可以跟版心类一样,定义两个浮动类

.fl{
    float: left;
}

.fr{
    float: right;
}

• 分栏布局,就是一个大盒子中,里面会有不同的栏目, 多个栏目排成一排,核心是使用浮动

<div class="div2 container">
    <div class="one fl">one</div>
    <div class="two fl">two</div>
    <div class="three fr">three</div>
</div>

定位(position)

• 浮动只能左浮和右浮, 网页中也会出现某个元素压住另一个元素,而且在这个元素的某个位置上 这种情况就需要使用定位

  还有一些固定在页面某个位置的元素,不随页面滚动而滚动的,这种也需要使用定位, 固定定位

• 定位: 就是把元素定在某个位置上

  定位 = 定位模式(position属性) + 偏移量(left,right top,bottom)

  定位模式是告诉元素定位的参照物是谁

  偏移量就是定位坐标

• position的取值：

  • static(静态定位)

  • absolute(绝对定位)

  • relative(相对定位)

  • fixed(固定定位)

  • sticky(粘性定位)

  不同的定位模式,有不同特点,特点我们需要牢记

• 先有定位模式, 再有偏移量

  偏移量的取值是数值带px单位 或者 百分比 允许负值

静态定位(static)

静态定位(position:static)的特点

1. 所有元素默认的定位方式都是静态定位
2. 静态定位模式下, 偏移量无效

相对定位(relative)

相对定位特点:

1. 如果只设置相对定位，不设置偏移量，元素位置不变
2. 元素不脱标，占位置
3. 相对于"自身原来的位置"为基点做定位
4. 设置了相对定位以后,float不失效, margin-left:auto; 跟 margin-right:auto;也不失效

绝对定位(absolute)

绝对定位特点

1. 只设置绝对定位,不设置偏移量, 该绝对定位元素位置不变
2. 脱标,不占位置
3. float浮动失效 , margin左右auto也会失效
4. 改变元素的显示方式, 具有"行内块特性", 行内块特性就是可以设置宽度高度, 默认宽度由内容决定
5. 如果所有父辈"都是静态定位", 那么相对整个浏览器(页面)做位置的偏移
6. 如果有"一个"父辈元素是"非静态定位",那么相对这个非静态定位父辈元素做位置的偏移
7. 如果有"多个"父辈元素是"非静态定位",那么相对离当前绝对元素"最近"的非静态父辈元素, 做位置的偏移

使用绝对定位实现子元素在父元素中水平垂直都居中

子绝父相,就是子元素设置绝对定位,父元素设置相对定位

.father {
    width: 600px;
    height: 400px;
    background: orange;
    margin: 100px auto;
    padding: 10px;
    border: 5px solid blue;
    /* 父元素相对定位 */
    position: relative;
}

.father .son {
    width: 200px;
    height: 150px;
    background: pink;
    /* 设置绝对定位 */
    position: absolute;
    left: 50%;
    top: 50%;
    /* 设置外边距 */
    /* margin-left:-自身宽度的一半; */
    /* margin-top:-自身高度的一半; */
    margin-left: -100px;
    margin-top: -75px;
}

<div class="father">
    <div class="son">son元素</div>
</div>

固定定位(fixed)

固定定位的特点

1. 只设置固定定位,不设置偏移量, 该固定定位元素的位置不变

2. 固定定位元素脱标,不占位置

3. 固定定位元素具有行内块特性

4. 大多数情况,都是根据整个页面(浏览器)进行位置的偏移

5. 注意：fixed一般都会以页面左上角作为坐标原点，但是如果该元素中存在某个父辈元素设置了CSS3部分属性

   比如 transform, perspective 属性，或 filter 属性非 none 时，元素将会以该父辈左上角作为坐标原点。

6. 因为固定定位会脱标,不占位置,所以原来设置的float,和margin左右auto都会失效

sticky（粘性定位）CSS3新增

• CSS3新增 position:sticky（粘性定位）

• 介绍：元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级元素祖先，包括table-related元素进行偏移。粘性定位可以被认为是"相对定位"和"固定定位"的混合。元素在跨越"特定阈值"前为相对定位，之后为固定定位偏移值不会影响任何其他元素的位置。

• 文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

• 特别注意: 设置粘性定位的层需要是body的"子元素",否则可能粘性定位失效

堆叠顺序(z-index)

• 堆叠熟悉怒就是非静态定位元素的层级, 谁压住谁 层级可以压住层级低的

  z-index取值是数值,不带CSS单位

• z-index 的特性如下:

  1. 属性取值:正整数、负整数或 0 或者 auto，默认值是 0，数值越大，盒子越靠上；
  2. auto取值, 盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。
  3. 如果属性值相同，则按照书写顺序，后来居上；
  4. 数字后面不能加单位。
  5. z-index只对非静态定位元素有效

元素的显示和隐藏(display)

• 隐藏元素display:none

  display:none隐藏的元素会不占位置

• 显示元素display:block

.father .son1 {
    width: 100px;
    height: 100px;
    background: pink;
    /* 隐藏元素 */
    display: none;
}

.father .son2 {
    width: 100px;
    height: 100px;
    background: skyblue;
}

/* 鼠标移上.father元素以后  .father的后代.son1对应的样式 */
.father:hover .son1 {
    /* 显示元素 */
    display: block;
}

元素的显示和隐藏(visibility)

• 隐藏元素visibility: hidden;

  visibility: hidden;隐藏的元素,只是在页面中看不见,但是还占据原有的位置

• 显示元素visibility: visible;

.father .son1 {
    width: 100px;
    height: 100px;
    background: pink;
    /* 隐藏元素 */
    visibility: hidden;
}

.father .son2 {
    width: 100px;
    height: 100px;
    background: skyblue;
}

/* 鼠标移上.father元素以后  .father的后代.son1对应的样式 */
.father:hover .son1 {
    /* 显示元素 */
    visibility: visible;
}

元素透明度(opacity) CSS3

• opacity: 0~1之间的数值,不带px单位,允许小数值或者整数值,0代表完全透明度,1代表完全不透明;
• 注意: opacity会让整个元素内容以及子元素内容都变透明; 而rgba设置背景颜色变透明,不影响其内容以及子元素内容
• 注意: opacity设置透明度为0的时候,虽然元素看不见了,但是还占据位置

.father {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background: red;
    /* opacity: 0.5; */
    /* css中小数可以省略0 ,比如0.5=>.5 */
    opacity: .5;
    /* opacity: 0.15; */
    /* opacity: 0; */
}

垂直对齐方式(vertical-align)

• vertical-align 不影响"块级元素"中的内容对齐，它只针对于 "行内元素"或者"行内块元素"，特别是"行内块元素",

  通常用来控制图片img图标标签 或者 表单控件input标签与"文字的对齐方式"。

• 当img标签设置vertical-align的取值不是baseline, 而是top,middle或者bottom的时候, 都可以解决图片底部默认产生的缝隙分析

<div>默认对齐:<img src="./images/2.jpg" />默认文字和图片基线对齐(vertical-align:baseline)</div>
<div>基线对齐:<img src="./images/2.jpg" style="vertical-align: baseline;" />文字和图片基线对齐(vertical-align:baseline)</div>
<div>垂直居中:<img src="./images/2.jpg" style="vertical-align: middle;" />文字和图片中线对齐(vertical-align:middle)</div>
<div>顶部对齐:<img src="./images/2.jpg" style="vertical-align: top;" />文字和图片行顶线对齐(vertical-align:top)</div>
<div>❤底部对齐:<img src="./images/2.jpg" style="vertical-align: bottom;" />文字和图片行底线对齐(vertical-align:bottom)</div>
<div>数值: <img src="./images/2.jpg" style="vertical-align: 54px;" />vertical-align的取值还可以写数值</div>
<div>百分比:<img src="./images/2.jpg" style="vertical-align: -73%;" />vertical-align的取值还可以写百分比</div>

去除图片底侧空白缝隙

• 去掉图片底部缝隙方式一, 设置图片的vertical-align属性

.p1 img {
    vertical-align: bottom;
}

• 去掉图片底部缝隙方式而, 把图片转成块级元素

.p2 img {
    display: block;
}

鼠标样式

属性值	示意图	描述
auto		默认值，由浏览器根据当前上下文确定要显示的光标样式
default		默认光标，不考虑上下文，通常是一个箭头
none		不显示光标
initial		将此属性设置为其默认值
inherit		从父元素基础 cursor 属性的值
context-menu		表示上下文菜单可用
help		表示有帮助
pointer		表示一个链接
progress		进度指示器，表示程序正在执行一些处理，但是您仍然可以在该界面进行一些操作（与 wait 不同）
wait		表示程序繁忙，您应该等待程序指向完成
cell		表示可以选择一个单元格（或一组单元格）
crosshair		一个简单的十字准线
text		表示可以选择的文本
vertical-text		表示可以选择的垂直文本
alias		表示要创建别名或快捷方式
copy		表示可以复制某些内容
move		表示可以移动鼠标下方的对象
no-drop		表示所拖动的项目不能放置在当前位置
not-allowed		表示无法完成某事
all-scroll		表示对象可以沿任何方向滚动（平移）
col-resize		表示可以水平调整列的大小
row-resize		表示可以垂直调整行的大小
n-resize		表示对象的边缘可以向上（向北）移动
e-resize		表示对象的边缘可以向右（向东）移动
s-resize		表示对象的边缘可以向下（向南）移动
w-resize		表示对象的边缘可以向左（向西）移动
ne-resize		表示对象的边缘可以向上和向右（北/东）移动
nw-resize		表示对象的边缘可以向上和向左（北/西）移动
se-resize		表示对象的边缘可以向下和向右（向南/向东）移动
sw-resize		表示对象的边缘可以向下和向左（南/西）移动
ew-resize		表示可以双向调整对象大小的光标
ns-resize
nesw-resize
nwse-resize
zoom-in		表示可以放大某些内容
zoom-out		表示可以缩小某些内容
grab		表示可以抓取（拖动）某些东西
grabbing		表示已经抓取到某些东西
url("")		自定义光标的样式，括号中的内容为光标图像的源文件路径

【示例】使用 cursor 属性设置网页中光标的样式：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 30px;
            border: 1px solid green;
            margin-top: 10px;
        }
        .cell {
            cursor: cell;
        }
        .crosshair {
            cursor: crosshair;
        }
        .text {
            cursor: text;
        }
        .vertical-text {
            cursor: vertical-text;
        }
        .alias {
            cursor: alias;
        }
        .copy {
            cursor: copy;
        }
        .move {
            cursor: move;
        }
        .no-drop {
            cursor: no-drop;
        }
    </style>
</head>
<body>
    <div class="cell">cursor: cell;</div>
    <div class="crosshair">cursor: crosshair;</div>
    <div class="text">cursor: text;</div>
    <div class="vertical-text">cursor: vertical-text;</div>
    <div class="alias">cursor: alias;</div>
    <div class="copy">cursor: copy;</div>
    <div class="move">cursor: move;</div>
    <div class="no-drop">cursor: no-drop;</div>
</body>
</html>

提示：由于计算机系统的不同，鼠标的样式会存在一定的差异。

参考文档:CSS cursor（鼠标样式） (biancheng.net)

CSS的writing-mode属性

• 介绍: writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。

  为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）

• 属性取值:

  • horizontal-tb 对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

  • ❤vertical-rl 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

  • ❤vertical-lr 对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

  参考文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode

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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            p {
                width: 300px;
            }

            .p1 {
                background: pink;
            }

            .p2 {
                background: skyblue;
                writing-mode: horizontal-tb;
            }

            .p3 {
                background: lightgreen;
                writing-mode: vertical-rl;
            }

            .p4 {
                background: orange;
                writing-mode: vertical-lr;
            }
        </style>
    </head>

    <body>
        <p class="p1">我是一段文字APP</p>
        <p class="p2">我也是一段文字APP</p>
        <p class="p3">我还是一段文字APP</p>
        <p class="p4">我也是是是一段文字APP</p>
    </body>

</html>

网站小图标的使用

• 通过link引入网站小图标,这个网站小图标的图片格式一般是icon,而且文件名一般为favicon.ico, 这个favicon.ico文件会放在跟网页同一级目录下

• vscode的快捷键link:favicon

<!-- <link rel="shortcut icon" href="ico图片所在路径" type="image/x-icon"> -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

ResetCSS (样式重置)

• 介绍：由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是重置默认样式（reset css）

  最简单的实现方法就是在所有CSS开始前，先把marin先把margin和padding都设为0，以防不同浏览器的显示效果不一样。

• 但是这段代码过于简单并不能解决绝大多数开发中遇到的浏览器不兼容问题，并且使用通配符选择器影响页面性能。

• 这里推荐使用专门的样式重置库，实现样式重置功能

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
	line-height: 1;
}
menu, ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

CSS中的flex布局

属性	描述
display	指定 HTML 元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式
flex-wrap	设置当弹性盒子的子元素超出父容器时是否换行
flex-flow	flex-direction 和 flex-wrap 两个属性的简写
justify-content	设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items	设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content	修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order	设置弹性盒子中子元素的排列顺序
align-self	在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex	设置弹性盒子中子元素如何分配空间
flex-grow	设置弹性盒子的扩展比率
flex-shrink	设置弹性盒子的收缩比率
flex-basis	设置弹性盒子伸缩基准值

介绍

• flex布局是一种新的布局方式

• 传统布局和flex布局对比

  • 传统布局

    • 兼容性好

    • 布局繁琐

    • 局限性，不能再移动端很好的布局

  • flex布局

    • 操作方便，布局极其简单，移动端使用比较广泛

    • pc端浏览器支持情况比较差

    • IE11或更低版本不支持flex或仅支持部分

• 布局建议

  如果是pc端页面布局，还是采用传统方式 display+float+position

  如果是移动端或者是不考虑兼容的pc则采用flex

flex布局原理

• 给ul设置display:flex,那么ul就是flex容器, ul里面的"子元素"就是flex项目

  因为flex容器有flex容器的属性,flex项目有flex项目的属性

• 开启弹性盒子布局

  .box ul {
      display: flex;
  }
  

• 注意: 开启flex以后,会出现两个轴,一个是主轴,一个是侧轴, 我们的flex项目会沿着主轴方向排列

  主轴默认方向是从左到右, 侧轴默认方向是从上到下 主轴跟侧轴始终是垂直关系

容器属性(对父元素设置)

• flex-direction：设置主轴的方向[^a1]
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction

注：开启弹性盒子以后, 项目会沿着主轴方向排列,默认主轴方向是从左到右,通过容器属性flex-direction改变主轴方向

• row取值就是默认取值,主轴方向从左到右

flex-direction: row; 

• row-reverse主轴方向从右到左

flex-direction: row-reverse;

• column主轴方向从上到下

flex-direction: column;

• column-reverse主轴方向从下到上

flex-direction: column-reverse;

justify-content

注：justify-content设置项目在主轴方向上排列方式;

• centet项目排列在主轴中间

justify-content: center;

• flex-start项目排列在主轴的开始位置

justify-content: flex-start;

• flex-end项目排列在主轴的结束位置

justify-content: flex-end;

• space-between两端对齐

justify-content: space-between;

• space-around项目左右间隔相同

justify-content: space-around;

• space-evenly平分空白距离

justify-content: space-evenly;

flex-wrap

注：默认情况下,如果flex项目的总宽度超过flex容器,flex容器会强制这些flex项目一行显示,所以会对flex项目进行压缩

​ 通过flex-wrap属性可以设置flex项目是否允许换行

• 取值: nowrap不换行(默认取值)

flex-wrap: nowrap;

• wrap换行

flex-wrap: wrap;

align-items

注：align-items属性是设置单行项目,在侧轴方向的对齐方式

• stretch拉伸,默认取值

align-items: stretch;

• center侧轴的中部

align-items: center;

• flex-start侧轴的开始

align-items: flex-start;

• flext-end侧轴的结束

align-items: flex-end;

align-content

注：align-content属性是设置多行项目,在侧轴方向的对齐方式

​ 需要设置flex-wrap:wrap才可能出现多行项目

• stretch拉伸,默认取值

align-content: stretch;

• center侧轴的中部

align-content: center;

• flex-start侧轴的开始

align-content: flex-start;

• flext-end侧轴的结束

align-content: flex-end;

• space-between侧轴两端对齐

align-content: space-between;

• space-around侧轴左右间隔相同

align-content: space-around;

• space-evenly侧轴平分空白距离

align-content: space-evenly;

flex-flow

注：flex-flow可以同时设置flex-direction以及flex-wrap属性, 没有顺序要求, 被省略的属性值将使用默认值

.box ul {
    /* 开启弹性盒子布局 */
    display: flex;
    /* flex-direction: row-reverse;
    flex-wrap: wrap; */
    /* flex-flow: row-reverse wrap; */
    /* flex-flow: wrap row-reverse; */
    /* flex-flow: wrap; */
    flex-flow: row-reverse;
}

flex布局子项(项目)属性

• flex-grow属性定义项目的放大比例
• flex-shrink属性定义了项目的缩小比例
• flex-basis属性定义了剩余空间分配之前元素的默认大小
• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

flex-grow

注：flex-grow定义项目的扩大比例, 当flex容器有剩余宽度的时候,定义剩余的宽度如何分配

• flex-grow取值是数值,不带CSS单位, 默认为0; 0表示不扩大

.box ul li:nth-child(1) {
    flex-grow: 1;
}

.box ul li:nth-child(2) {
    flex-grow: 2;
}

flex-shrink

注：当flex容器宽度不够的时候,项目如何缩小,项目的缩小比例

​ 即1/0大小不变，1/1大小auto，1/2为50%。

• flex-shrink取值是数值,不带css单位, 默认1;

.box ul li:nth-child(1) {
    flex-shrink: 0;
}

.box ul li:nth-child(2) {
    flex-shrink: 2;
}

flex-basis

注：flex-basis属性定义了剩余空间分配之前元素的默认大小，它可以是长度（例如20%, 40px, 5em等）或关键字auto。

​ 它的默认值为auto，即"项目的本来大小"。

.box ul li:nth-child(1) {
    /* 百分比是相对flex容器的 */
    flex-basis: 10%;
    flex-grow: 1;
}

.box ul li:nth-child(2) {
    flex-basis: auto;
    flex-grow: 1;
}

.box ul li:nth-child(3) {
    /* 1em等于1个字体大小 */
    flex-basis: 10em;
    flex-grow: 0;
}

.box ul li:nth-child(4) {
    flex-basis: 80px;
    flex-grow: 0;
}

flex属性

注：flex属性是flex-grow, flex-shrink 和 flex-basis的简写属性，默认值为0 1 auto。

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex#syntax

• 语法:

  flex: flex-grow flex-shrink flex-basis;

  flex: 放大比例 缩小比例 项目默认大小

• 另外,可以使用一个，两个或三个值来指定 flex属性, 规则如下:

  • 单值语法: 值必须为以下其中之一：

    一个无单位数 (): 它会被当作 flex: 1 0; 的值被假定为 1，然后 的值被假定为0。

    一个有效的 宽度 (width) 值：它会被当作 的值。

    关键字none，auto或initial.

  • 双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

    一个无单位数：它会被当作 的值。

    一个有效的宽度值：它会被当作 的值。

  • 三值语法：

    第一个值必须为一个无单位数，并且它会被当作 的值。

    第二个值必须为一个无单位数，并且它会被当作 的值。

    第三个值必须为一个有效的宽度值，并且它会被当作的值。

.box ul li:nth-child(1) {
    /* flex: 3; */
    /* 等同于
    flex-grow: 3;
    flex-shrink: 1;
    flex-basis: 0%; */

    flex: 2;
    /* 等同于
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0%; */
}

.box ul li:nth-child(2) {
    flex: 1;
    /* 等同于
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    */
}

.box ul li:nth-child(3) {
    flex: 0 1 auto;
    /* 等同于
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto; */
}

• 该属性有两个快捷值：
  1. flex: auto(等同于flex: 1 1 auto)
  2. flex: none(等用于flex: 0 0 auto)

.box ul li:nth-child(1) {
    flex: auto;
}

.box ul li:nth-child(2) {
    flex: none;
}

align-self

注：align-self设置"当前某个"项目在侧轴的对齐方式;

.box ul li:nth-child(1) {
    /* align-self设置"当前某个"项目在侧轴的对齐方式; */
    align-self: flex-start;
}

.box ul li:nth-child(2) {
    align-self: flex-end;
}

.box ul li:nth-child(3) {
    align-self: stretch;
}

order

注：order属性定义项目的排列顺序

• order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局
• 取值数值,不带px单位; 数值越小，排列越靠前，默认为0。

.box ul li:nth-child(1) {
    order: 1;
}

.box ul li:nth-child(2) {
    order: -2;
}

.box ul li:nth-child(4) {
    order: 3;
}

.box ul li:nth-child(5) {
    order: -1;
}