css基础教程【学习笔记】

已于 2022-03-19 09:36:29 修改
阅读量1.2k 收藏 7
点赞数 3
分类专栏： 零基础学前端学习笔记 文章标签： css css3 html
于 2022-01-12 17:28:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li520_fei/article/details/122446288
版权

【前端总路线学习笔记】

文章目录

css基础

一. css初识

  • CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
  • 有时我们也会称之为 CSS 样式表或级联样式表。
  • CSS 是也是一种标记语言
  • CSS 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
  • CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
  • CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离

二. css语法规范

  1. 使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。

  2. CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
    请添加图片描述

  3. Css样式规则

    1. 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
    2. 属性和属性值以“键值对”的形式出现
    3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
    4. 属性和属性值之间用英文“:”分开
    5. 多个“键值对”之间用英文“;”进行区分

  4. 代码放在html 的head中 ，写在style标签内

三. 字体属性

请添加图片描述

1. 字号大小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E27sUiGr-1641950522976)(https://note.youdao.com/yws/res/4/WEBRESOURCEf24cf9ae97db6b9ed404874a7315ad34)]

2. 字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码:
p { font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

3. 字体字号常用技巧

1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman " ; 
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

4. 字体的Unicode 编码（因为中文的兼容性可能不好）

宋体 SimSun \5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
新宋体 NSimSun \65B0\5B8B\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
细明体 MingLiU \7EC6\660E\4F53
标楷体 DFKai-SB \6807\6977\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1
华文黑体 STHeiti \534E\6587\9ED1\4F53
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro
标楷体 BiauKai \6807\6977\4F53
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B
字体 ：宋体\5B8B\4F53 微软雅黑\5FAE\8F6F\96C5\9ED1

5. 字体大小font-weight的取值

  • normal： 正常的字体。相当于数字值400
  • bold： 粗体。相当于数字值700。
  • bolder： 定义比继承值更重的值
  • lighter： 定义比继承值更轻的值
  • ： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
<!DOCTYPE html>
<html>
	<head>
		<title>CSS学习</title>
		<style type="text/css">
			span {
				font-weight: bold;
				/*font-weight: bold;*/
			}


		</style>
	</head>
	<body>
		我还是一个三年纪的<span>孩子</span>
	</body>
</html>

6. 字体风格font-style的取值

  • normal： 指定文本字体样式为正常的字体
  • italic： 指定文本字体样式为斜体

7. 字体综合设定

  • font属性用于对字体样式进行综合设置，其基本语法格式如下。
    选择器{font: font-style font-weight font-size/line-height font-family; }
  • 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
  • 注意:其中不需要设置的属性可以省略〈取默认值〉，但必须保留font-size和font-family属性，否则font属性将不起作用。

四. CSS注释

HTML的注释 <!--注释内容-->
css的注释 /* 注释内容 */
快捷键都是ctrl + /

五.开发工具

六. 选择器

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

1.标签选择器

  1. 标签选择器的使用，会修改所有是这个标签的的内容
    像下面这个鸣人，佐助，卡卡西无法区别开来
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
	<style type="text/css">
		div {
			color: orange;
		}
	</style>
</head>
<body>
	<div>鸣人</div>
	<div>佐助</div>
	<div>卡卡西</div>
</body>
</html>

2. 类选择器（下面声明，上面引用）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
	<style type="text/css">
		.mingren{
			color: orange;
		}
		.zuozhu{
			color: blue;
		}
	</style>
</head>
<body>
	<div class="mingren">鸣人</div>
	<div class="zuozhu">佐助</div>
	<div>卡卡西</div>
</body>
</html>
  • 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
  • 类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
  • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
  • 可以理解为给这个标签起了一个名字，来表示。
  • 长名称或词组可以使用中横线来为选择器命名。下面有示例
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。
  • 命名不建议使用“_”下划线来命名css选择器

3. 命名规范示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
	<style type="text/css">
		.color-orange{
			color: orange;
		}
	</style>
</head>
<body>
	<div class="color-orange">猥琐发育</div>
	<div>全军出击</div>
	<div>哎呀</div>
</body>
</html>

4. 谷歌课堂案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
	<style type="text/css">
		span {
			font-size: 100px;
		}
		.blue {
			color: blue;
		}
		.red {
			color: red;
		}
		.orange {
			color: orange;
		}
		.green {
			color: green;
		}
	</style>
</head>
<body>
	<span class="blue">G</span>
	<span class="red">o</span>
	<span class="orange">o</span>
	<span class="blue">g</span>
	<span class="green">l</span>
	<span class="red">e</span>
</body>
</html>

5. 多类名选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
	<style type="text/css">
		.font20 {
			font-size: 20px;
		}
		.font14 {
			font-size: 14px;
		}
		.pink {
			color: pink;
		}
		.red {
			color: red;
		}
	</style>
</head>
<body>
	<div class="font20 pink">亚瑟</div>
	<div class="font20 red">刘备</div>
	<div class="font14 pink">安琪拉</div>
	<div class="font14 red">妲己</div>
</body>
</html>
  • 在标签class 属性中写 多个类名
  • 多个类名中间必须用空格分开
  • 这个标签就可以分别具有这些类名的样式
  • 样式显示效果跟HTML元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。

6. id 选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  • HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
 语法：
        #id名 {
            属性1: 属性值1;  
            ...
       } 
       html标签需要加上id属性 ，例如<h1 id = "myid">
  • id选择器和类选择器使用类似
  • 注意：id 属性只能在每个 HTML 文档中出现一次

7. id选择器和类选择器的区别：

  • 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
  • id选择器好比人的身份证号码，全中国是唯一的，不得重复。
  • id选择器和类选择器最大的不同在于使用次数上。
  • 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

8. 通配符选择器

* 代表所有选择器，改变所有选择器的样式
 语法：
        * {
            属性1: 属性值1;  
            ...
       }

9. 伪类选择器

  • 定义：
    伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

  • 语法：
    伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、:first-child 。

  • 链接伪类选择器

    • a:link 没有点击过的(访问过的)链接
    • a:visited 点击过的(访问过的)链接
    • a:hover 鼠标经过的那个链接
    • a:active 鼠标正在按下还没有弹起鼠标的那个链接
/*伪类选择器其中的链接伪类选择器，主要针对于 a(<a></a>)*/

  • 链接伪类选择器注意事项

    • 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
    • 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

  • 链接伪类的简写方式

	a { /*a是标签选择器 所有的链接*/
		font-size: 16px;
		color: gray;
		font-weight: 700;
	}
	a:hover {
		color: red;
	}
  • 如果只想改某个链接,可以把"a:hover"替换为".类名:hover"
  • 结构伪类选择器
<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style type="text/css">
		li:first-child {
			color: pink;
		}
		li:last-child {
			color: purple;
		}
		li:nth-child(4){/*第四个孩子*/
			color: skyblue;
		}
	</style>
</head>
<body>
	<ul>
		<li>第一个孩子</li>
		<li>第二个孩子</li>
		<li>第三个孩子</li>
		<li>第四个孩子</li>
		<li>第五个孩子</li>
		<li>第六个孩子</li>
		<li>第七个孩子</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style type="text/css">
		li:nth-child(odd){/*第奇数个*/
			color: pink;
		}
		li:nth-child(even){/*第偶数个*/
			color: deeppink;
		
		}
	</style>
</head>
<body>
	<ul>
		<li>第一个孩子</li>
		<li>第二个孩子</li>
		<li>第三个孩子</li>
		<li>第四个孩子</li>
		<li>第五个孩子</li>
		<li>第六个孩子</li>
		<li>第七个孩子</li>
	</ul>
</body>
</html>

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style type="text/css">
		li:nth-child(2n){
		/*使用公式
		n 代表 0到end
		在这里就是 0 1 2 3 4 5 6 7
		所以 若填写n 则 1 2 3 4 5 6 7 全被设置
		填写n+1 则 1 2 3 4 5 6 7 8 被设置 也就是1 2 3 4 5 6 7 全被设置
		n 与 n+1 都是全被设置 只不过一个多出0，一个多出8
	    把初始n 0到end带入公式，其中在1到end个数被设置
		还有一个是nth-last-child 区别与nth-child，last说明最后一个为第一个，倒着数
		*/
			color: deeppink;
		
		}
	</style>
</head>
<body>
	<ul>
		<li>第一个孩子</li>
		<li>第二个孩子</li>
		<li>第三个孩子</li>
		<li>第四个孩子</li>
		<li>第五个孩子</li>
		<li>第六个孩子</li>
		<li>第七个孩子</li>
	</ul>
</body>
</html>
  • 目标伪类选择器
    目标伪类选择器是：点击锚点后对目标文本状态进行设置的选择器
格式：
:target{
	color:red;
	...
}

例子：

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style type="text/css">
		:target{
			color:red;
			font-size: 30px;
		}
	</style>
</head>
<body>
	<a href="#four">我的孩子在哪里</a>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

	<ul>
		<li>第一个孩子</li>
		<li>第二个孩子</li>
		<li>第三个孩子</li>
		<li id = "four">第四个孩子</li>
		<li>第五个孩子</li>
		<li>第六个孩子</li>
		<li>第七个孩子</li>
	</ul>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
  • :focus 伪类选择器
    定义：
    ​ :focus 伪类选择器用于选取获得焦点的表单元素。
    ​ 焦点就是光标，一般情况 类表单元素才能获取

七.文本属性

1. 文本颜色

  • color属性用于定义文本的颜色。
语法：
div { 
    color: red;
}

请添加图片描述

  • 开发中最常用的是十六进制
  • 十六进制如果可以简化，建议写简化形式，不是都可以简写：
    • 例如 :
    • #ffffff 简化为 #fff
    • #ff0066简化为#f06

2. 行间距

  • line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
语法：
    p { 
        line-height: 26px;
    }
  • 行高的文本分为 :上间距+文本高度+下间距 = 行间距
  • 一般行间距比字号大7、8像素就可以了

3. 文本对齐

  • text-align 属性用于设置元素内文本内容的水平对齐方式。
语法：
    div { 
        text-align: center;
    }
  • left : 　左对齐
  • right : 　右对齐
  • center : 　居中对齐
  • justify : 　两端对齐

4. 文本缩进

语法：
   div { 
       text-indent：20px；
   }
   div { 
       text-indent：2em；
   }
  • em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

5. 字间距和单词间距

  • 字间距： letter-spacing:2px
  • 单词间距：word-spacing:10px

6. 颜色半透明(css3)

color:rgba(r,g,b,a)     a是alpha 透明的意思 取值范围0-1

7. 文字阴影(css3)

text-shadow:水平距离 垂直距离 模糊距离 阴影颜色

在这里插入图片描述
例：

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		h1 {
			font-size: 100px;
			text-shadow: 5px 11px 3px rgba(0, 0, 0, 0.5);
		}
	</style>
</head>
<body>
	<h1>你是阴影，我是火影</h1>

</body>
</html>

8. 文字修饰

text-decoration：
text-decoration：text-decoration-line || text-decoration-style || text-decoration-color

text-decoration-line： 指定文本装饰的种类，
		可取值：none | underline | overline | line-through | blink text-decoration-
style： 指定文本装饰的样式。 
text-decoration-color： 指定文本装饰的颜色。

八.css样式表：

  • 按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

1.内部样式表（嵌入式）

  • 内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 
   语法：
       <style>
           div {
           color: red;
           font-size: 12px;
           }
       </style>
  1. style 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的head标签中
  2. 通过此种方式，可以方便控制当前整个页面中的元素样式设置
  3. 代码结构清晰，但是并没有实现结构与样式完全分离
  4. 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

2.行内样式表（行内式）

  • 行内样式表（内联样式表,还有人称为行间样式，内嵌样式）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
语法：
   <div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
  1. style 其实就是标签的属性
    在双引号中间，写法要符合 CSS 规范
  2. 可以控制当前的标签设置样式
  3. 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  4. 使用行内样式表设定 CSS，通常也被称为行内式引入

3.外部样式表（链接式）

  • 实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
  • 引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件。
语法：
   <link rel="stylesheet"  href="css文件路径" 	type="text/css">
  • href:定义所链接外部样式表文件的uRL，可以是相对路径，也可以是绝对路径。
  • type:定义所链接文档的类型，在这里需要指定为"text/css"，表示链接的外部文件为css样式表。
  • rel:定义当前文挡与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件

请添加图片描述

九.css的显示模式

1、什么是元素的显示模式

  • 定义：
    元素显示模式就是元素（标签）以什么方式进行显示，
    比如div自己占一行，
    比如一行可以放多个span。

  • 作用：
    网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

2、元素显示模式的分类

2.1、块元素
  • 常见的块元素：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>


<div> 标签是最典型的块元素。

  • 块级元素的特点：

    • 比较霸道，自己独占一行。
    • 高度，宽度、外边距以及内边距都可以控制。
    • 宽度默认是容器（父级宽度）的100%。
    • 是一个容器及盒子，里面可以放行内或者块级元素。

  • 注意： 文字类的元素内不能放块级元素

<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div> 
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
2.2、行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<u> 标签定义下划线文本。HTML 5 中不再支持该标签。

<s> 标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。



<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

  • 行内元素的特点：

    • 相邻行内元素在一行上，一行可以显示多个。

    • 高、宽直接设置是无效的。

    • 默认宽度就是它本身内容的宽度。

    • 行内元素只能容纳文本或其他行内元素。

  • 注意：

    • 链接里面不能再放链接
    • 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全
2.3、行内块元素

常见的行内块标签：

<img />、<input />、<td>
<img> 标签定义图像。
<input> 标签定义输入字段，用户可在其中输入数据。
<td> 标签定义表格中的一个单元格。

​ 它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

  • 行内块元素的特点：

    • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
    • 一行可以显示多个（行内元素特点）。
    • 默认宽度就是它本身内容的宽度（行内元素特点）。
    • 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

  • 学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

3、元素显示模式的转换

  • 简单理解:
    ​ 一个模式的元素需要另外一种模式的特性
    ​ 比如想要增加链接 a 的触发范围。

  • 转换方式

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

4、单行文字垂直居中的代码

  • 解决方案:
    ​ 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

请添加图片描述

请添加图片描述

  • 简单理解:
    • 行高的上空隙和下空隙把文字挤到中间了，
    • 如果行高小于盒子高度,文字会偏上，
    • 如果行高大于盒子高度,则文字偏下。

十、css的复合选择器

1、什么是复合选择器？

​ 在 CSS 中，可以根据选择器的类型把选择器分为***基础选择器***和***复合选择器***，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2、后代选择器 (重要）

  1. 定义：

​ 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

  1. 语法：
元素1 元素2 {样式声明}

	上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

​
语法说明：

  • 元素1 和 元素2 中间用空格隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2
  • 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  • 元素1 和 元素2 可以是任意基础选择器

3、子选择器 (重要）

  1. 定义：

​ 子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

​ （简单理解就是选亲儿子元素）

  1. 语法：
元素1>元素2 {样式声明}
​		上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

语法说明：

  • 元素1 和 元素2 中间用 大于号 隔开
  • 元素1 是父级，元素2 是子级，最终选择的是元素2
  • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

4、并集选择器 (重要）

  1. 定义：
    并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1,元素2 {样式声明}
​		上述语法表示选择元素1 和 元素2。

语法说明：

  • 元素1 和 元素2 中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明

5、交集选择器

  1. 定义：
    交集选择器由两个或多个基础选择器。通过不同的方式组合而成目的是为了选择更准确更精细的目标元素标签。

  2. 语法：

元素1.元素2 {样式声明}
​	即属于元素1，又属于元素2的标签

语法说明：

  • 元素1 和 元素2 中间用"."隔开
  • "."可以理解为乘的意思

7.属性选择器

  1. 定义：
    选取标签带有某些特殊属性的选择器，我们称为属性选择器
  2. 语法：
标签[属性] {样式声明}
标签[属性=属性值] {样式声明}
标签[属性^=属性值] {样式声明} 选择属性的值是以这个属性值开头的
标签[属性$=属性值] {样式声明} 选择属性的值是以这个属性值结尾的
标签[属性*=属性值] {样式声明} 选择属性的值是包含这个属性值即可

8、伪元素选择器

语法：

伪元素选择器书写最大的特点是用双冒号（::）表示
	::first-letter 选择第一个字
	::first-line 选择第一行
	::selection 当我们选中文字的时候，可以变化的样式

E::before和E::after
在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用
示例：
<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div::before {
			content: "俺";
		}
		div::after {
			content: "22岁";
		}
	</style>
</head>
<body>
	<div>今年</div>

</body>
</html>
插入后 俺 和 18岁 都属于这个div的内部元素

十一、css书写规范

空格规范

  • 【强制】选择器与" {" 之间必须包含空格
  • 【强制】属性名与之后的 ":"之间不允许包含空格， ":"与属性值之间必须包含空格

选择器规范

  • 【强制】并集选择器，每个选择器声明独占一行
  • 【建议】[子]选择器的嵌套层级不大于3级，位置靠后的限定条件应尽可能准确

属性规范

  • 【强制】属性另起一行
  • 【强制】属性定义后分号结尾

十二、css的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1、背景颜色

background-color 定义元素的背景颜色
元素背景颜色默认值是 transparent（透明）
	background-color: transparent;

2、背景图片

background-image  定义元素的背景图片
background-image: none|url(url);
	none 无背景图
	url()使用绝对路径和相对路径

其他说明：

  • 实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
  • 注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

3、背景平铺

background-repeat 设置元素背景图像的平铺 
	repeat-x： 背景图像在横向上平铺 
	repeat-y： 背景图像在纵向上平铺 
	repeat： 背景图像在横向和纵向平铺 
	no-repeat： 背景图像不平铺

4、背景图片位置

background-position 属性可以改变图片在背景中的位置
background-position: x y;

center： 背景图像横向或纵向居中。 
left： 背景图像从元素左边开始出现。 
right： 背景图像从元素右边开始出现。 
top： 背景图像从元素顶部开始出现。 
bottom： 背景图像从元素底部开始出现。 

默认左上角
background-position: left top;

1、参数是方位名词
​	如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left  top 和 top  left 效果一致
	如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位
	如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
	如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位
	如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5、背景图片固定

样式名称：

background-attachment  设置或检索背景图像是随对象内容滚动还是固定的
fixed： 背景图像相对于视口（viewport）固定。 
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，
		因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

其他说明：
background-attachment 后期可以制作视差滚动的效果。

6、背景样式合写

背景合写样式：
	background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

7、背景色半透明

background-color: rgba(0, 0, 0, 0.5);
  • 背景半透明是指盒子背景半透明，盒子里面的内容不受影响
  • CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

8.背景缩放


background-size： [ <length> | <percentage> | auto ]{1,2} | cover | contain

	<length>： 用长度值指定背景图像大小。不允许负值。 	
	<percentage>： 用百分比指定背景图像大小。不允许负值。 
	auto： 背景图像的真实大小。 
	cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 
	contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 
	
<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			background-color: skyblue;
	
		}
		div {
			width: 500px;
			height: 500px;
			padding: 20px;
			background-color: hotpink;
			background-image: url(IMG/1.jpg);
			background-repeat: no-repeat;
			background-size: 50% ;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

9.多背景图片

  • .一个元素可以设置多重背景图像。
  • 每组属性间使用逗号分隔。
  • 如果设置的多重背景图之间存在着交集（即存在着重叠关系)，* 前面的背景图会覆盖在后面的背景图之上。·
  • 为了避免背景色将图像盖住，背景色通常都定义在最后一组上
background: url(test1.jpg) no-repeat left top,
	   		url(test2.jpg) no-repeat right bottom #aaa;

10.凹凸文字的效果

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			background-color: #ccc;
		}
		div {
			color: #ccc;
			font: 700 80px "微软雅黑";
		}
		div:first-child {
			/*text-shadow: 水平距离 垂直距离 模糊距离 阴影颜色;*/
			text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
		}	
		div:last-child {
			/*text-shadow: 水平距离 垂直距离 模糊距离 阴影颜色;*/
			text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
		}	 
	</style>
</head>
<body>
	<div>我是凸起的文字</div>
	<div>我是凹下的文字</div>
</body>
</html>

十三、css三大特性

1、层叠性

  • 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
  • 层叠性原则:
    • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
    • 样式不冲突，不会层叠

2、继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式：
​ （text-，font-，line-这些元素开头的可以继承，以及color属性）

行高的继承性：

 body {
   font:12px/1.5 Microsoft YaHei；
 }
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5
  • 此时子元素的行高是：当前子元素的文字大小 * 1.5
  • body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

3、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行

选择器优先级计算表格：

请添加图片描述

优先级注意点:

  1. 权重是有4组数字组成,但是不会有进位。
  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…
  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
  4. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

!import写的位置

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
				div {
			color: red!important;
		}
		div {
			color: black;
		}	

	</style>
</head>
<body>
	<div>我是啥颜色</div>

</body>
</html>

十五、盒子模型

1、网页布局的本质

  • 网页布局的核心本质： 就是利用 CSS 摆盒子。

  • 网页布局过程：

    1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
    2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
    3. 往盒子里面装内容

2、盒子模型（Box Model）组成

  • 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
  • CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

3、边框（border）

3.1、边框的使用

  1. border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；

  2. 语法：

 border : border-width || border-style || border-color;   
 边框粗细||边框样式||边框颜色
  • 边框样式 border-style 可以设置如下值：
    • none：没有边框即忽略所有边框的宽度（默认值）
    • solid：边框为单实线(最为常用的)
    • dashed：边框为虚线
    • dotted：边框为点线
  1. 边框的合写分写
  • 边框简写：
 border: 1px solid red; 

没有边框
  border: 0;

边框分开写法：

 border-top: 1px solid red;  /* 只设定上边框， 其余同理 */  
 
 border, border-top, border--right, border-bottom, border-left。
3.2、表格的细线边框

1、border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

2、语法：

 border-collapse:collapse;

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起

3.3、边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

  • 测量盒子大小的时候,不量边框。
  • 如果测量的时候包含了边框,则需要 width/height 减去边框宽度
3.4、圆角边框
border-radius：：[ <length> | <percentage> ]{1,4}

取值：
<length>： 用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值 
<percentage>： 用百分比定义圆形半径或椭圆的半长轴，半短轴。
			* 水平方向百分比参照元素宽度（非内容宽度），
			* 垂直方向参照元素高度。不允许负值

4、内边距（padding）

4.1、内边距的使用方式

  1. padding 属性用于设置内边距，即边框与内容之间的距离。

  2. 语法：

padding,padding-top,padding-right,padding-bottom,padding-left
padding-top: 5px;

合写属性：

请添加图片描述

4.2、内边距会影响盒子实际大小

1、当我们给盒子指定 padding 值之后，发生了 2 件事情：

  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。

2、内边距对盒子大小的影响：

  • 如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
  • 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

3、解决方案：

​ 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

5、外边距（margin）

5.1、外边距的使用方式

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin：[ <length> | <percentage> | auto ]{1,4}
拆分属性：margin-top,margin-bottom,margin-right,margin-left
5.2、外边距典型应用–水平居中

外边距可以让块级盒子水平居中的两个条件：

  • 盒子必须指定了宽度（width）。
  • 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

水平居中：
margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

5.3、外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

1、相邻块元素垂直外边距的合并

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案：
尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加 overflow:hidden。
5.4、清除内外边距**[几乎写css都要加]

​ 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

 * {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（margin设置了也没有效果,padding设置了效果不对）。但是转换为块级和行内块元素就可以了

6、计算盒子大小

  • 外盒尺寸计算(元素空间尺寸)
    Element空间高度= content height + padding + border + margin
    Element空间宽度= content width + padding + border + margin/*
  • 内盒尺寸计算(元素实际大小)
    Element Height = content height + padding + border (Height为内容高度)
    Elemert width - content width + padding + border (width为内容宽度)
  • 学会计算盒子尺寸：设置好盒子的宽度和高度，padding影响实际盒子大小需要注意
  • 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img标签和 input除外）。
  • 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
  • 如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高鏖，则padding 不会影响本盒子大小

7、盒子模型布局稳定性

  • 开始学习盒子模型，同学们最大的困惑就是，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距?
    答案是:其实他们大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。
    但是，总有一个最好用的吧，我们根据稳定性来分，建议如下:
    • 按照优先使用宽度(width)其次使用内边距(padding)再次外边距（(margin).
    • **width > padding >margin **
      原因:
    1. margin 会有外边距合并还有ie6下面margin加倍的bug(讨厌）所以最后使用。
    2. padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
    3. width 没有问题，我们经常使用宽度剩余法高度剩余法来做。

8、CSS3盒子模型

box-sizing: border-box; 设置盒子大小后，padding和border不会撑开盒子
box-sizing: content-box; 和之前说明的特性相同

9、盒子阴影

box-shadow: 水平位置 垂直距离 模糊距离 阴影尺寸 阴影颜色 内外阴影;
内阴影：inset ，外阴影需省略
只有前两个是必须 ，其他可选

十六、浮动

1、传统网页布局的三种方式

​ CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

  • 普通流（标准流）

  • 浮动

  • 定位

    这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式

2、标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列

  1. 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

3、为什么需要浮动？

​ 总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

​ 浮动最典型的应用：可以让多个块级元素一行内排列显示。

​ 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

4、什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱高标准昔通流的控制，移动到其父元素中指定位置的过程。
​ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

 选择器 { float: 属性值; }
none 元素不浮动
left 元素向左浮动 默认值
right 元素向右浮动

5、浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

  1. 浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

请添加图片描述

  1. 浮动的元素会一行内显示并且元素顶部对齐

请添加图片描述

注意：

​ 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

  1. 浮动的元素会具有行内块元素的特性

​ 浮动元素的大小根据内容来决定

​ 浮动的盒子中间是没有缝隙的

6、浮动元素经常和标准流父级搭配使用

  • 为了约束浮动元素位置, 我们网页布局一般采取的策略是:
    先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

请添加图片描述

  • 浮动首先创建包含块的概念〈包赢）。就是说，浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

在这里插入图片描述

7、常见网页布局

浮动布局注意点

  1. 浮动和标准流的父盒子搭配。
    先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

  2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。
    一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。
    浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

  3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少

十七、版心和布局流程

  • 阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版"。

  • “版心”(可视区)是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

  • 布局流程
    为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下:

    1. 确定页面的版心(可视区)。
    2. 分析页面中的行模块，以及每个行模块中的列模块。
    3. 制作HTML结构。
    4. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。一列固定宽度且居中

  • 版型

    • 一列固定宽度且居中
    • 两列左窄右宽型
    • 通栏平均分布型（下图）（最上面和最下面是通栏）
      在这里插入图片描述
中间分栏使用的列表，
取消列表的默认样式
list-style: none;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.top {
			height: 50px;
			background-color: pink;

		}
		.banner {
			height: 80px;
			width: 960px;
			margin: 10px auto;
			background-color: deeppink;
			border-radius: 15px;
		}
		.main ul {
			list-style: none;
		}
		.main {
			height: 150px;/*很多情况下，我们父级盒子，不方便给出高度，考虑到孩子的高度会变*/
			width: 960px;
			margin: 0 auto 10px auto;
			background-color: green;

		}
		.main li {
			height: 150px;
			width: 240px;
			background-color: #ccc;
			float: left;
		}
		.main li:nth-child(odd) {
			background-color: #000;
		}

		.foot {
			height: 20px;
			background-color: pink;	
		}


	</style>
</head>
<body>
	<div class="top">
	</div>
	<div class="banner">
	</div>
	<div class="main">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="foot"></div>
	
	
</body>
</html>

8、清除浮动

1、为什么需要清除浮动？

​ 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

请添加图片描述

2、清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
  • 父级有了高度，就不会影响下面的标准流了

3、清除浮动样式

语法：

 选择器{clear:属性值;} 
 left：不允许左侧有浮动元素(清除左侧浮动的影响)
 right:不允许右侧有浮动元素(清除右侧浮动的影响)
 both:同时清除左右两侧浮动的影响

我们实际工作中， 几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

4、清除浮动的多种方式

4.1、额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

使用方式：

​ 额外标签法会在浮动元素末尾添加一个空的标签。

例如 <div style="clear:both"></div>，或者其他标签（如<br />等）。

css中一般给这个div定义类，然后在上方head中 style标签中给

  • 优点： 通俗易懂，书写方便

  • 缺点： 添加许多无意义的标签，结构化较差

  • 注意： 要求这个新的空标签必须是块级元素。

总结:

​ 1、清除浮动本质是?

​ 清除浮动的本质是清除浮动元素脱离标准流造成的影响

​ 2、清除浮动策略是?

​ 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

​ 3、额外标签法?

​ 隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式.

​ 实际工作可能会遇到,但是不常用

4.2、父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

例如：

overflow:hidden | auto | scroll;

优点：代码简洁

缺点：无法显示溢出的部分

注意：是给父元素添加代码

4.3、父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加：

 .clearfix:after {  
   content: "."; /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  /*隐藏盒子*/
 } 
 .clearfix {  /* IE6-7 专有 带有这个*的属性 只有ie6-7才执行 */
 /*zoom就是IE6-7清除浮动的方式*/ 
   *zoom: 1;
 }

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站： 百度、淘宝网、网易等

4.4、父级添加双伪元素

给父元素添加

 .clearfix:before,.clearfix:after {
   content:"";
   display:table; /*触发bfc 防止外边距合并*/
 }
 .clearfix:after {
   clear:both;
 }
 .clearfix {
    *zoom:1;
 }

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

总结

为什么需要清除浮动？

  1. 父级没高度。
  2. 子盒子浮动了。
  3. 影响下面布局了，我们就应该清除浮动了。

请添加图片描述

十八、定位(position) 介绍

1.1 为什么使用定位

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？

场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

请添加图片描述

场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

请添加图片描述

结论**：要实现以上效果，**标准流 或 浮动都无法快速实现

所以：

1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1.2.1 边偏移（方位名词）

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

边偏移属性示例描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离。
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离。
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离。
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

**top与bottom 不能同时出现 left和right不能同时出现 **

1.2.2 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { 
    position: 属性值; 
}

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

请添加图片描述

1.3 定位模式介绍

1.3.1. 静态定位(static) - 了解

  • 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

  • 语法：

    选择器 { 
    position: static; 
}

  • 静态定位 按照标准流特性摆放位置，它没有边偏移。

  • 静态定位在布局时我们几乎不用的

1.3.2. 相对定位(relative) - 重要
  • 相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的（自恋型）。
  • 语法：
选择器 { 
	position: relative; 
}

  • 相对定位的特点：（务必记住）

    • 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

    • 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

      因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

  • 效果图：

请添加图片描述

1.3.3. 绝对定位(absolute) - 重要
1.3.3.1 绝对定位的介绍

  • 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

  • 语法：

     选择器 { 
 	position: absolute; 
 }

  1. 完全脱标 —— 完全不占位置；

  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

请添加图片描述

  1. 父元素要有定位

    • 元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

请添加图片描述

  • 绝对定位的特点总结：（务必记住）

    1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

    2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

    3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

1.3.3.2 定位口诀 —— 子绝父相

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个**“子绝父相”太重要了，是我们学习定位的口诀**，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

1.3.3.3 绝对定位的盒子居中

注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法：

请添加图片描述

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

请添加图片描述
请添加图片描述

分析：

  1. 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
  2. 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
    • 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

1.3.4. 固定定位(fixed) - 重要

  • 固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法：

     选择器 { 
 	position: fixed; 
 }

  • 固定定位的特点：（务必记住）：

    1.以浏览器的可视窗口为参照点移动元素。

    • 跟父元素没有任何关系
    • 不随滚动条滚动。

    2.固定定位不在占有原先的位置。

  • 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

    • 完全脱标—— 完全不占位置；
    • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
      • 跟父元素没有任何关系；单独使用的
      • 不随滚动条滚动。

固定定位举例：

请添加图片描述

提示：IE 6 等低版本浏览器不支持固定定位。

1.3.5 粘性定位(sticky) - 了解

  • 粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

  • 语法：

     选择器 { 
     position: sticky; 
     top: 10px; 
 }

  • 粘性定位的特点：

    1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

    2.粘性定位占有原先的位置（相对定位特点）

    3.必须添加 top 、left、right、bottom 其中一个才有效

    跟页面滚动搭配使用。 兼容性较差，IE 不支持。

1.3.6 堆叠顺序（z-index）

  • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

  • 语法：

    选择器 { 
	z-index: 1; 
}

  • z-index 的特性如下：

    1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
    2. 如果属性值相同，则按照书写顺序，后来居上；
    3. 数字后面不能加单位。

    注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

  • 应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

请添加图片描述

案例演示：堆叠顺序。

1.3.7 定位总结
定位模式是否脱标移动位置是否常用
static 静态定位否不能使用边偏移很少
relative 相对定位否 (占有位置)相对于自身位置移动基本单独使用
absolute绝对定位是（不占有位置）带有定位的父级要和定位父级元素搭配使用
fixed 固定定位是（不占有位置）浏览器可视区单独使用，不需要父级
sticky 粘性定位否 (占有位置)浏览器可视区当前阶段少

  • 一定记住 相对定位、固定定位、绝对定位 两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。

  • 学习定位重点学会子绝父相。

  • 注意：

  1. 边偏移需要和定位模式联合使用，单独使用无效；
  2. top 和 bottom 不要同时使用；
  3. left 和 right 不要同时使用。
1.3.8 定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式,
因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。

1.3.9 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

十九、 元素的显示与隐藏

  • 目的（本质）

    ​ 让一个元素在页面中消失或者显示出来

  • 场景

    ​ 类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

1. display 显示（重点）

  • display 设置或检索对象是否及如何显示。

    display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

  • 特点： display 隐藏元素后，不再占有原来的位置。

  • 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

    配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

请添加图片描述

2. visibility 可见性 （了解）

  • visibility 属性用于指定一个元素应可见还是隐藏。

    visibility：visible ; 　元素可视

visibility：hidden; 　  元素隐藏

  • 特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

  • 如果隐藏元素想要原来位置， 就用 visibility：hidden

  • 如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

请添加图片描述

3. overflow 溢出（重点）

  • overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。
属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条
  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
  • 但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分。

请添加图片描述

  • 实际开发场景：
  1. 清除浮动
  2. 隐藏超出内容，隐藏掉, 不允许内容超过父盒子。

4. 显示与隐藏总结

属性区别用途
display 显示 （重点）隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 可见性 （了解）隐藏对象，保留位置使用较少
overflow 溢出（重点）只是隐藏超出大小的部分1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

5. 文本遇到边框自动换行

word-break属性规定自动换行的处理方法。通过该属性，可以让浏览器实现在任意位置换行。语法：word-break: normal|break-all|keep-all;

值描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

二十、CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

1. 鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor : default小白箭头| pointer小手| move移动|text文本
鼠标放我身上查看效果哦:

<ul>
    <li style="cursor : default">我是小白</li>
    <li style="cursor : pointer">我是小手</li>
    <li style="cursor : move">我是移动</li>
    <li style="cursor :text">我是文本</li>
</ul>

尽量不要用hand(也是小手) 因为火狐不支持; pointer ie6以上都支持的尽量用

2. 轮廓outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline : outline-color |loutline-style ll outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的。
最直接的写法是:outline: 0;

<input type="text"style="outline: 0; " />

3. 防止拖拽文本域resize

resize: none这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽:

<textarea></textarea>

右下角不可以拖拽:

<textaea style="resize: none; "></textarea>

4. 垂直对齐vertical-align

4.1 行内块和文字对齐

有宽度的块级元素居中对齐，是margin: 0 auto;

文字居中对齐，是text-align: center;

vertical-align垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气

vertical-align 对块级元素无效
vertical-align: baseline|top|middle|bottom
设置或检索对象内容的垂直对其方式。
vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素

通常用来控制图片|表单与文字的对齐


图片文字默认为基线对齐

请添加图片描述

4.2 去除图片底侧缝隙

有个很重要特性你要记住，图片或者表单等***行内块**元素，**他的底线会和父级盒子的基线***对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。
I

解决方法一：

display: block; /*转化为块级元素*/

解决方法二：

vertical-align: top|middle /*top用的多*/

5. 溢出的文字隐藏

5.1 word-break:自动换行
normal     使用浏览器默认的换行规则。
break-all  允许在单词内换行。
keep-all   只能在半角空格或连字符处换行。主要处理英文单词
5.2 white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal:默认处理方式
nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
5.3 text-overflow文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记(...）标示对象内文本的溢出
clip:不显示省略标记(...），而是简单的裁切
ellipsis:当对象内文本溢出时显示省略标记（...)

注意一定要首先强制一行内显示，再次和overflow属性搭配使用
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

5.4 多行文本溢出显示省略号（了解）

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

/*1. 超出的部分隐藏 */
overflow: hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

二十一、CSS精灵技术

1. CSS精灵技术产生背景

请添加图片描述

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的力加速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧)。

2. 精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图

3. 精灵技术的使用

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图)，然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

4. 制作精灵图

CSS精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图)，那我们要做的，就是把小图拼合成一张大图。大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。在我们精灵图的最低端，留一片空隙,方便我们以后添加其他精灵图。
结束语:小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

二十二、字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放"，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被重新"宠幸"啦。。这就是字体图标（iconfont).

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

1. 字体图标优点

灵活性：可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
灵活性：但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
灵活性：本身体积更小，但携带的信息并没有削减。
兼容性：几乎支持所有的浏览器
移动端设备必备良药....

注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

2. 字体图标使用流程

总体来说，字体图标按照如下流程:

请添加图片描述

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustratorl或Sketch这类矢量图形软件里创建icon图标

上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： icomoon 字库 http://icomoon.io

请添加图片描述

一般不自己做直接下载 使用步骤

字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：

  1. 字体图标的下载

  2. 字体图标的引入 （引入到我们html页面中）

  3. 字体图标的追加 （以后添加新的小图标）

3. 字体图标的下载

推荐下载网站：

  • icomoon 字库 http://icomoon.io 推荐指数 ★★★★★

IcoMoon 成立于 2011 年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

  1. 选择想要的字体图标点击右下角

请添加图片描述

  1. 进入新的页面确定选择的图标正确后，点击右下角的download

请添加图片描述

  • 阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI制作图标上传生成。 重点是，免费！

4. 字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

  1. 把下载包里面的 fonts 文件夹放入页面根目录下

请添加图片描述

  • 字体文件格式
    不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
    1. TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
    2. Web Open Font Format( .woff )格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
    3. Embedded Open Type( .eot )格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
    4. SVG( .svg )格式 .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
  1. 在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。

一定注意字体文件路径的问题（无需背过，拷贝就好）

 @font-face {/*声明字体，电脑中没有的字体，我们需要声明*/
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

  1. html 标签内添加小图标。

    下方页面是第一步下载的压缩包解压后的demo文件，用网页打开就可以看到。虽然图标看着相同但是每个图标负责对应的文字图标

请添加图片描述

除了上面加入图标的方式，还可以借用伪类加入图标

span::before {
	content: "\e91b";
}
  1. 给标签定义字体。
 span {
   font-family: "icomoon";/*一定保证与上面@font-face里面的font-family相同*/
 }

2.5 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

请添加图片描述

2.6 字体图标加载的原理：

请添加图片描述

二十三、滑动门

请添加图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		a {
			margin: 100px;
			display: inline-block;
			height: 33px;
			/*千万不能给宽度，写死宽度就不能作推拉门，自由缩放了*/
			background: url(img/2.png) no-repeat left top;
			padding-left: 15px;/*padding撑开盒子*/

			color: #fff;
			text-decoration: none;
			line-height: 33px;
		}
		a span {
			display: inline-block;
			height: 33px;
			background: url(img/2.png) no-repeat right top;
			/*span不能给宽度 利用padding挤开 */
			padding-right: 15px;
		}
	</style>
</head>
<body>
	<a href="#"><span>字</span></a>
</body>
</html>

二十四、伪元素的本质

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出伪元素的在html的结构无法审查

  • 类选择、伪类选择器就是选区对象
  • 伪元素选择器本质上是插入一个元素（标签盒子)，只不过是行内元素 span a

注意

  1. 伪元素::before和::after添加的内容默认是inline元素，这个两个伪元素的content属性，表示伪元素的内容;设置::before和::after时必须设置其content属性，否则伪元素就不起作用。
  2. 伪元素是不占位置的。

鼠标经过显示边框

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		div {
			width: 296px;
			height: 180px;
			background-color: pink;
			margin: 20px auto;
			position: relative;
		}
		div:hover::before {
			content: "";
			width: 100%;
			height: 100%;
			border: 10px solid rgba(255, 255, 255, .3);
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;
		}

	</style>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

二十五、过渡（transition)

  • **过渡（transition)**CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
  • 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
  • 在CSS3里使用transition可以实现补间动画（过渡效果)，并且当前元素只要有"属性"发生变化时即存在两种状态我们用A和B代指)，就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
  • 语法格式:
    transition:要过渡的属性 花费时间 运动曲线 何时开始;
    如果有多组属性变化，还是用逗号隔开。
<' transition-property '>： 检索或设置对象中的参与过渡的属性 
<' transition-duration '>： 检索或设置对象过渡的持续时间    默认是0 单位是s ，不能省略 ms
<' transition-timing-function '>： 检索或设置对象中过渡的动画类型  默认是“ease”
<' transition-delay '>： 检索或设置对象延迟过渡的时间        默认是0
  • 有过渡效果的属性：
transformall
background-colorcolor
background-imageonly gradients
background-positionpercentage, length
border-bottom-colorcolor
border-bottom-widthlength
border-colorcolor
border-left-colorcolor
border-left-widthlength
border-right-colorcolor
border-right-widthlength
border-spacinglength
border-top-colorcolor
border-top-widthlength
border-widthlength
bottomlength, percentage
colorcolor
croprectangle
font-sizelength, percentage
font-weightnumber
grid-*various
heightlength, percentage
leftlength, percentage
letter-spacinglength
line-heightnumber, length, percentage
margin-bottomlength
margin-leftlength
margin-rightlength
margin-toplength
max-heightlength, percentage
max-widthlength, percentage
min-heightlength, percentage
min-widthlength, percentage
opacitynumber
outline-colorcolor
outline-offsetinteger
outline-widthlength
padding-bottomlength
padding-leftlength
padding-rightlength
padding-toplength
rightlength, percentage
text-indentlength, percentage
text-shadowshadow
toplength, percentage
vertical-alignkeywords, length, percentage
visibilityvisibility
widthlength, percentage
word-spacinglength, percentage
z-indexinteger
zoomnumber
  • 对象中过渡的动画类型
linear： 线性过渡。匀速
ease： 平滑过渡。逐渐变慢
ease-in： 由慢到快。
ease-out： 由快到慢。逐渐变慢
ease-in-out： 由慢到快再到慢。
  • 示例：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/*transition: 要过渡的属性 花费时间 运动曲线 何时开始*/
			transition: width 0.6s ease 0s ,height 0.3s ease-in 0s;
		}
		div:hover {
			width: 600px;
			height: 300px;

		}

	</style>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

二十六、2D变形 3D变形(CSS3) transform

  • transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
语法：
	transform：none | <transform-function>+

transform-function 2D函数包括哪些
transform-function list:
    1. translate() 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
            translatex() 指定对象X轴（水平方向）的平移 
            translatey() 指定对象Y轴（垂直方向）的平移 
            不会影响其他盒子的位置
            单位时百分比是相对于自己
            对行内元素无效
	2. scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 0-1:缩小效果   ；1-？:放大效果 ，可以为负值
		需要注意translate() 只有一个参数只变化x，缩放 scale()若只有一个值，x，y同时变化
		会搭配overflow: hidden;使用 ，父级的盒子使用
		动画过渡效果需要准确加入到做动画的标签
            scalex()： 指定对象X轴的（水平方向）缩放 
            scaley()： 指定对象Y轴的（垂直方向）缩放 

	3. rotate()： 指定对象的2D rotation（2D旋转），单位deg
			90deg 	顺时针90°
			-90deg  逆时针90°
		旋转中心点设置
	transform-origin：像素|百分比|方位词
			默认transform-origin：50% 50%，效果等同于center center
			left： 指定原点的横坐标为left 
			center： 指定原点的横|纵坐标为center 
			right： 指定原点的横坐标为right 
			top： 指定原点的纵坐标为top 	
			bottom： 指定原点的纵坐标为bottom 
	4. skew()：倾斜 ：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 单位deg
			skewx()： 指定对象X轴的（水平方向）扭曲 ，正值往左倾斜
			skewy()： 指定对象Y轴的（垂直方向）扭曲
  • 左手坐标系
    伸出左手，让拇指和食指成L形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

请添加图片描述

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

请添加图片描述

  • 简单记住他们的坐标:
    x左边是负的，右边是正的
    y上面是负的，下面是正的
    z里面是负的，外面是正的
transform-function 3D函数包括哪些
    rotatex()： 指定对象在x轴上的旋转角度 
    rotatey()： 指定对象在y轴上的旋转角度 
    rotatez()： 指定对象在z轴上的旋转角度 
	translatez() 指定对象z轴的平移 有透视才可以看出来
    translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略， z轴数值不能是百分比 只能是像素大小        
	
	
perspective 指定透视距离
    用法 
    		perspective: 500px;
	电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
	透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
		·透视原理:近大远小。
		·浏览器透视:把近大远小的所有图像，透视在屏幕上。
	perspective:视距，表示视点距离屏幕的长短。
		视点，用于模拟透视效果时人眼的位置
	注:并非任何情况下需要透视效果，根据开发需要进行设置。
	perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

transform应用示例

1. 定位的盒子居中对齐完美写法
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*transform: translate(100px);x方向移动100px*/
			transform: translate(50%); /*自己宽度的50%，不是以父级的宽度，定位是以父级的宽度*/

			position: absolute;
			left: 50%;
			/*margin-left: -100px;*/
			transform: translate(-50%);
			/*垂直居中也同理*/
		}
		
	</style>
</head>
<body>
	<div></div>
</body>
</html>
2.开门大吉(小案例)
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		section {
			width: 400px;
			height: 300px;
			background-color: deeppink;
			margin: 100px auto;
			border: 1px solid #000;
			position: relative;
			perspective: 700px;
		}
		.door-r,
		.door-l {
			width: 50%;
			height: 100%;
			background-color: red;
			position: absolute;
			top: 0;
			
			transition: all 1s;
		}
		.door-l {
			left: 0;+
			border-left: 1px solid #000;
			transform-origin: left center;
		}
		.door-r {
			right: 0;
			border-right: 1px solid #000;
			transform-origin: right;
		}
		.door-r::before,
		.door-l::before {
			content: "";
			position: absolute;
			width: 20px;
			height: 20px;
			top: 50%;
			transform: translateY(-50%); 
			border: 1px solid #000;
			border-radius: 50%;

		}
		.door-r::before {
			left: 5px;
		}
		.door-l::before {
			right: 5px;
		}
		section:hover .door-l {
			
			transform: rotateY(-135deg);
		}
		section:hover .door-r {
			
			transform: rotateY(135deg);
		}


	</style>
</head>
<body>
	<section>
		<div class="door-l"></div>
		<div class="door-r"></div>
	</section>
	
</body>
</html>
3.翻转的的图片（两面不相同）
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			width: 540px;
			height: 540px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			width: 540px;
			height: 540px;
			transition: all 1s;
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden;/*不是正面面向屏幕，就隐藏*/
		}
		div:hover img {
			transform: rotateY(180deg);

		}

	</style>
</head>
<body>
	<div>
		<img src="img/top.jpg" alt="">
		<img src="img/bottom.jpg" alt="">
	</div>
	
</body>
</html>

二十七、动画

语法：	
	animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反向；


animation :动画属性的简写属性
<' animation-name '>： 检索或设置对象所应用的动画名称 
<' animation-duration '>： 检索或设置对象动画的持续时间 
<' animation-timing-function '>： 检索或设置对象动画的过渡类型 
<' animation-delay '>： 检索或设置对象动画延迟的时间 
<' animation-iteration-count '>： 检索或设置对象动画的循环次数  
			infinite： 无限循环
<' animation-direction '>： 检索或设置对象动画在循环中是否反向运动 
			normal： 正常方向
            reverse： 反方向运行 
            alternate： 动画先正常运行再反方向运行，并持续交替运行 
            alternate-reverse： 动画先反运行再正方向运行，并持续交替运行 
<' animation-fill-mode '>： 检索或设置对象动画时间之外的状态 

<' animation-play-state '>： 检索或设置对象动画的状态。
		running： 运动 
		paused： 暂停 

@keyframes 指定动画名称和动画效果。 
定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

1.体会动画

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			/*animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反向；*/
			animation:go 2s ease 0s 4 alternate;
			/*动画名称是自定义的*/
			/*一般情况下 我们就用前两个属性*/

		}
		@keyframes go {
			from {
				transform: translate(0);
			}
			to {
				transform: translate(600px);
			}
			
		}

	</style>
</head>
<body>
	<div>
	</div>
	
</body>
</html>

2. 多组动画

定义动画 可以不使用from to 而是百分比
@keyframes animationName {
	0% { transform: translate(0, 0); }
	20% { transform: translate(20px, 20px); }
	40% { transform: translate(40px, 0); }
	60% { transform: translate(60px, 20px); }
	80% { transform: translate(80px, 0); }
	100% { transform: translate(100px, 20px); }
}
/*如果有多组变形都属于transform那我们用空格隔开就好了*/

3. 无缝滚动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		nav ul li img {
			width: 100px;
			height: 100px;
			float: left;
		}
		nav {
			width: 300px;
			height: 100px;
			border: 1px solid pink;
			margin: 100px auto;
			overflow: hidden;

		}
		nav ul {
			animation: moving 3s infinite linear;
			width: 200%;
			
		}
		@keyframes moving {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(-300px);
			}	
		}
		nav:hover ul {
			animation-play-state: paused;
		}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li><img src="img/1.jpg" alt=""></li>
			<li><img src="img/2.jpg" alt=""></li>
			<li><img src="img/3.jpg" alt=""></li>
			<li><img src="img/1.jpg" alt=""></li>
			<li><img src="img/2.jpg" alt=""></li>
			<li><img src="img/3.jpg" alt=""></li>
		</ul>
	</nav>
	
</body>
</html>

二十八、伸缩布局（display: flex;）

1.传统布局三等份

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		section {
			width: 80%;
			height: 200px;
			border: 1px solid pink;
			margin: 100px auto;
		}
		section div {
			width: 33.33%;
			height: 100%;
			float: left;
		}
		section div:nth-child(1) {
			background-color: pink;
		}
		section div:nth-child(2) {
			background-color: purple;
		}
		section div:nth-child(3) {
			background-color: pink;
		}
	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>

2.伸缩布局三等份

父标签可以声明
	display: flex; 子项目在主轴的可以划分缩放比例

可以给父标签或子标签声明：
min-width 最小值 
max-width 最大值

子标签可以不划分份数，而固定像素长度，其他盒子来划分剩余像素

flex-direction 排列方式(父盒子添加)
     row   横向排列(默认)
     column纵向排列
flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 
    flex-flow:flex-direction flex-wrap;
 
flex-wrap 控制是否换行


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		section {
			width: 80%;
			height: 200px;
			border: 1px solid pink;
			margin: 100px auto;

			/*父级盒子添加 flex*/
			display: flex;
		}
		section div {
			flex: 1;
			height: 100%;
			
		}
		section div:nth-child(1) {
			background-color: pink;
			/*flex: 2; 这里可以每个div可以划分份数 所占大小为 自己的份数/总份数*/
		}
		section div:nth-child(2) {
			background-color: purple;
			margin: 0 5px;/*加了margin也不会掉下来*/
		}
		section div:nth-child(3) {
			background-color: pink;
		}
	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>

3.justify-content属性(写给父标签)

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

  • flex-start：

    弹性盒子元素将向行起始位置对齐

  • flex-end：

    弹性盒子元素将向行结束位置对齐

  • center：

    弹性盒子元素将向行中间位置对齐

  • space-between：

    左右的盒子贴紧父盒子，中间的平均分布空白间距

  • space-around：

    相当于给每个盒子添加了左右margin外边距

4. align-items (适用多行的弹性盒模型容器)

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

  • flex-start：

    垂直对齐开始位置

  • flex-end：

    底对齐

  • center：

    垂直居中对齐

  • stretch：

    各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

5. flex-wrap 控制是否换行

  • nowrap：

    flex容器为单行。收缩显示

  • wrap：

    规定灵活的项目在必要的时候拆行或拆列

  • wrap-reverse：
    规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

    比如第五个多出来了，第五个盒子在第一行，其余四个第二行

6. align-content堆栈（由flex-wrap产生的独立行）对齐

  • align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

  • 必须对父元素设置自由盒属性display:flex，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

  • 值

    • stretch
      默认值。项目被拉伸以适应容器。
    • center
      项目位于容器的中心。
    • flex-start
      项目位于容器的开头。
    • flex-end
      项目位于容器的结尾。
    • space-between
      项目位于各行之间留有空白的容器内。
    • space-around
      项目位于各行之前、之间、之后都留有空白的容器内。

7. flex-flow

flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式。
flex-flow:flex-direction flex-wrap;

8. order

  • order控制子项目的排列顺序，正序方式排序,从小到大
  • 用css来控制盒子的前后顺序。用order就可以
  • 用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是0
D之光
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css基础入门学习笔记详细教程
04-15
css入门学习笔记详细教程
【02】 PC端网页布局之CSS3-pink老师-2022/03
qq_44722174的博客
03-15 3846
PC端网页布局之CSS3 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 1. CSS基础 css最大价值：让HTML专注做结构呈现，样式交给CSS，即结构和样式相分离。主要调整文本内容、图像、页面布局和外观美化等。（网页的美容师） CSS代码风格 样式格式书写：紧凑格式和展开格式（强烈推荐） 样式大小写风格：全部使用小写（更加直观） 样式空格风格：冒号后，保留一个空格；选择器（标签）和大括号间保留一个空格
css入门学习
山有木兮
06-25 3426
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
CSS入门学习 —（全基础合集）
lerrel1的博客
07-28 724
CSS ( Cascading Style Sheets，层叠样式表 ），是一种用来为结构化文档（ 如 HTML 文档或 XML 应用 ）添加样式，字体，间距和颜色等的计算机语言
CSS零基础快速入门（详细教程）
小杨的博客
05-20 4159
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
CSS（1）
weixin_44260499的博客
11-06 473
CSS层叠样式表 一、CSS简介 CSS的主要 使用的场景就是美化网页，布局页面的 1、HTML的局限性 说起HTML，这其实是个非常单词的家伙，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个图片，表明此处有链接。 2、CSS-网页的美容师 （1）css是层叠样式表（Cascading Style Sheets）的简称，有时我们也称之为CSS样式表或级联样式表。 （2...
学习css，这一篇足矣
m0_64336780的博客
04-07 9089
关于CSS的所有常用知识点来了，满满的干货！
CSS入门 超详细
weixin_55816781的博客
04-12 6591
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
CSS基础学习
qq_51148337的博客
05-24 170
Cascading Style Sheet 层叠级联样式表CSS：表现，美化网页字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oonhf7BI-1684937628510)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230517182627268.png)]margin：外边距 padding：内边距 border：边框。
CSS入门学习
m0_74991285的博客
05-14 192
CSS的主要适用场景就是美化网页，布局页面的.基础选择器作用特点使用情况用法标签选择器可以选出所有相同的标签，比如p不能差异化选择较多类选择器可以选出一个或者多个标签可以根据需求选择一般多id选择器一次只能选择一个标签ID属性只能在每个HTML文档中出现一次一般和js搭配通配符选择器选择所有标签选择的太多，有部分不需要特殊情况使用属性表示注意点font-size字号通常用的单位是px 像素，一定要跟上单位字体实际工作中按照团队约定来写字体字体粗细。
超详细的学习笔记：CSS基础（附代码示例）
lbcbjtlhmjq的博客
06-30 949
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
Web前端CSS视频教程课堂笔记
12-17
本套CSS基础视频教程详细讲解了什么是css 。层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅...
前端HTML5+CSS+JavaScript学习笔记.docx
05-24
前端HTML5+CSS+JavaScript详细学习笔记，来自菜鸟教程、w3cSchool和b站视频教程的总结，包括基础知识和示例代码，欢迎大家指正
CSS基础入门视频课程
06-11
课程中使用的所有英文单词都会逐一查询并记录，真正做到零基础入门学习，最适合初学者的教程，让你少走弯路！课程内容包括：1.CSS简介2.CSS基本用法3.选择器4.常用CSS属性5.盒子模型6.定位方式7.其他CSS属性8.页面...
21天学习PHP.pdf
09-27
课程将按照html基础，css样式表，JavaScript，PHP环境配置（包括简单的Apache配置），PHP基础知识，MySQL的基本运用等，逐步将学习者带入PHP的世界。
PostCSS概述
活到老学到老
04-18 246
PostCSS是一个用于转换CSS的工具。它采用插件机制，通过运行各种插件来处理CSS，并生成转换后的CSS文件。PostCSS具有强大的扩展性和灵活性，可以根据需要选择使用不同的插件。PostCSS可以用于各种不同的任务，如自动添加浏览器前缀、压缩CSS、提取CSS中的关键信息等。它还支持使用JavaScript编写自定义插件，以实现更高级的转换。PostCSS是一个非常强大的工具，它在前端开发中被广泛应用。它可以大大提高CSS代码的开发效率和维护性，并支持使用最新的CSS特性和语法。
探索PostCSS：打造定制化、前瞻性的现代CSS开发工作流
艾恩小灰灰的博客
04-19 485
PostCSS是一种用JavaScript编写的CSS处理器，它通过解析、转换和输出CSS代码来增强和优化CSS开发流程。不同于传统的预处理器（如Sass、Less），PostCSS并不引入新的语法，而是专注于在CSS标准的基础上进行扩展和优化。它的强大之处在于其丰富的插件生态系统，允许开发者根据项目需求定制CSS处理流程。PostCSS凭借其插件化架构、对未来CSS特性的支持以及出色的集成能力，已成为现代CSS开发不可或缺的工具。
css设置文字撑满盒子
半兽先生的博客
04-12 278
【代码】css设置文字撑满盒子。
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 515
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
css改变value颜色_CSS 基础教程：语法基础
06-06
要改变CSS中的value颜色，你需要使用CSS属性和值。通常使用的属性是color，可以改变文本的颜色。下面是一个例子： ```css p { color: red; } ...更多关于CSS颜色的信息可以在CSS颜色教程中找到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

D之光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值