2CSS

标签：盒子样式标签元素 2CSS 选择器属性

HTML的局限性
1. 说起HTML，这其实是一个非常单纯的家伙，他只关注内容的语义
2. 比如<h1>表明这是一个大标题，用<p>表明这是一个段落，用<img>表明这儿有一个图片，用<a>表示此处有链接。
3. 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点：丑。
4. HTML满足不了设计者的需求
5. 操作HTML属性不方便
6. HTML里面添加样式带来的是无尽的臃肿和繁琐
CSS网页的美容师：
1. 让我们的网页更加丰富多彩，布局更加灵活自如
2. CSS的最大贡献就是：让HTML从样式中脱离，实现了HTML专注去做结构呈现，样式交给css，我们理想中的结果：结构（HTML）与样式（CSS）相分离
3. 如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师
CSS初始：
1. 概念：CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表(级联样式表)
2. 作用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
3. CSS以HTML为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式
引入CSS样式表（书写位置）：
1. 行内式（内联样式）
2. 内部样式表（内嵌样式表）
3. 外部样式表（外链式）
行内式（内联式）：
1. 概念：称行内样式、行间样式。是通过标签的style属性来设置元素的样式
2. 语法格式：<标签名 style=”样式属性1: 样式属性1值; 样式属性2: 样式属性2值;…”>内容</标签名>
3. 实际上任何HTML标签都拥有style属性，用来设置行内式。
4. style其实就是标签的属性
5. 样式属性和样式属性值之间是:（冒号）
6. 多组样式属性值之间用;（分号）隔开
7. 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余
8. 缺点：没有实现样式和结构相分离
内部样式表（内嵌样式表）
1. 概念：称内嵌式，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
2. 基本语法格式：
  1. <head>

选择器 {

样式属性1：样式属性1值；

样式属性2：样式属性2值；

样式属性3：样式属性3值；

…

}

</style>

</head>

- 1. style标签一般位于head标签中，当然理论上他可以放在html文档的任何地方
  2. type=“text/css”在html5中可以省略
  3. 只能控制当前的页面
1. 缺点：没有彻底分离

外部样式表（外链式）：
1. 概念：称链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
2. link是个单标签
3. link标签需要放在head头部标签中，并且指定link标签的三个属性。
4. 语法格式：
  1. <head>

- 1. </head>
1. link标签常用属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”.表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。我们可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

1. 可以实现样式共享（不同的html页面共享同一个css文件），非常好的管理功能

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

团队约定-代码风格
1. 样式书写一般有两种：
  1. 紧凑格式
    1. 语法格式：
      1. 选择器 { 属性1: 属性1值; 属性2: 属性2值;…}
  2. 展开格式（推荐）
    1. 语法格式：
      1. 选择器 {

属性1: 属性1值;

属性2: 属性2值;

…

}

- - - 1. 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
      2. 属性和属性值以“键值对”的形式出现。
      3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
      4. 属性和属性值之间用因为”:”连接冒号后面敲一个空格
      5. 多个“键值对”之间用英文“;”进行区分。
1. 代码大小写：
  1. 样式选择器，属性名，属性值关键字全部使用小写。属性字符串允许使用大小写

CSS选择器：
1. 选择器的作用；找到特定的HTML元素(选择标签用的,把我们想要的标签选择出来)
标签选择器
1. 概念：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按照标签名称分类，为页面中某一类标签指定统一的CSS样式
2. 语法：
  1. 标签名 {属性1: 属性1值; 属性2: 属性2值; …}
3. 作用：标签选择器可以把某一类标签全部选择出来
4. 优点：是能快速为页面中同类型的标签统一样式
5. 缺点：不能设计差异化样式。
类选择器：
1. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（类名不能有#特殊字符，否则，样式设置会失效）
2. 语法：
  1. 类名选择器
    1. .类名 {

属性1: 属性1值;

属性2: 属性2值;

…

}

- 1. 标签
    1. <标签名 class=”类名”></标签名>
1. 优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
2. 长名称或词组可以使用中横线来为选择器命名
3. 不要纯数字、中文等命名，尽量使用英文字母来标识
4. 不建议使用”_”来命名CSS选择器

类选择器特殊用法-多类名
1. 给标签指定多个类名，从而达到更多的选择目的（多个类名之间用空格隔开），方便控制。
2. 样式显示效果跟HTML元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。
3. 语法：
  1. 类名选择器
    1. .类名1 {

属性1: 属性1值;

属性2: 属性2值;

…

}

.类名2 {

属性1: 属性1值;

属性2: 属性2值;

…

}

- 1. 标签
    1. <标签名 class=”类名1 类名2”></标签名>

Id选择器
1. Id选择器使用#进行标识，后面紧跟id名
2. 语法格式：
  1. 类名选择器
    1. #id名 {

属性1: 属性1值;

属性2: 属性2值;

…

}

- 1. 标签
    1. <标签名 id=”id名”></标签名>
1. 元素的id值是唯一的，只能对应于文档中某一个具体的元素
2. 用法基本和类选择器相同

Id选择器和类选择器区别：
1. W3C规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
  1. 类选择器（class）好比人的名字，是可以多次重复使用的
  2. Id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次
2. id选择器和类选择器最大的不同在于使用次数上
3. 类选择器我们在修改样式中，用的最多
4. id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript搭配使用
通配符选择器
1. 概念：通配符选择器用*号表示，*就是所有的，它是所有选择器中作用范围最广的，能匹配页面中所有的元素
2. 语法格式：
  - 1. * {

属性1: 属性1值;

属性2: 属性2值;

…

}

1. 通配符选择器定义CSS，清除所有HTML标记的默认边距：
  - 1. * {

margin: 0;

padding: 0;

}

1. 会匹配页面所有的元素，降低页面响应速度，不建议随便使用

基础选择器总结：

选择器	作用	缺点	使用情况
标签选择器	可以选出所有相同的标签	不能差异化选择	较多
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多
Id选择器	一次只能选择1个标签	只能使用1次	不推荐使用
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用

团队约定：
1. 选择器：
  1. 尽量少用通配符选择器*
  2. 尽量少用id选择器
  3. 不使用无具体语义定义的标签选择器：div span
font-size: 大小；
1. 作用：font-size属性用于设置字号。
2. 单位：
  1. 可以使用相对长度单位，也可以使用绝对长度单位
  2. 相对长度单位比较常用，推荐使用像素单位px,绝对单位使用较少。

相对长度单位	说明
em	相对于当前对象内文字的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英尺
cm	厘米
mm	毫米
pt	点

1. 注意：
  1. 我们文字大小以后，基本就用px，其他单位很少使用
  2. 谷歌浏览器默认的文字大小16px
  3. 但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body标签指定默认字体大小

font-family: 字体;
1. 作用：font-family属性用于设置哪一种字体
2. 网页中常用的字体有宋体、微软雅黑、黑体等
3. 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。【win系统默认字体为“微软雅黑”，mac系统默认字体为“苹果方正“】
4. 常用技巧：
  1. 各种字体之间必须使用英文状态下的逗号隔开
  2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前。
  3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号。
Css unicode字体：
1. 为什么使用Unicode字体：
  1. 在CSS中设置字体名称，直接写中文是可以的，但是在文件编码（GB2312、UTF-8等）不匹配时会产生乱码的错误
  2. Xp系统不支持类似微软雅黑的中文。
2. 解决：
  1. 方案一：使用英文名称来代替
  2. 方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误，使用Unicode写中文字体名称，浏览器是可以正确的解析的。
font-weight: 字体粗细;
1. 在html中如何将文字加粗，我们可以用标签来实现
  1. 使用b和strong标签是文本加粗
2. 可以使用css来实现，但是CSS是没有语义的。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400等同于normal，而700等同于bold。数字后面不跟单位

1. 平时我们用数字来表示加粗和不加粗

font-style：字体风格：
1. 在html中如何将字体倾斜我们可以用标签来实现
  1. 字体倾斜用i或em标签
2. 可以使用css来实现，但是css是没有语义的
3. font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

属性	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

font:综合设置字体样式
1. 语法：
  1. 选择器 {font: font-style属性值 font-weight属性值 font-size属性值/line-height属性值 font-family属性值;}
2. 注意：
  1. 使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性值以空格隔开。
  2. 其中不需要设置的属性可以省略(取默认值）,但必须保留font-size和

font-family属性，否则font属性将不起作用.

color:文本颜色
1. 作用：color属性用于定义文本的颜色
2. 其取值方式有如下三种：

取值方式	属性值
颜色英文单词	red,green,…
十六进制	#000000
rgb代码	rgb(255,0,0)

1. 注意：实际工作中，用16进制的写法是最多的，而且我们更喜欢简写方式
2. 实际工作中使用最多的是16进制

text-align：文本水平对齐方式
1. 作用：text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
2. 其可用属性值如下：

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

1. 注意：是让盒子里面的内容【文本、行内元素和行内块元素】水平居中，而不是让盒子居中对齐

line-height：行间距
1. 作用：line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高
2. 单位：line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%
  1. 也可以不带单位，设置属性值为1，这样可以取消上下间距【高度不设置的情况下,上下文字字间就不会有间隙】
3. 技巧：一般情况下，行距比字号大7-8像素就可以了。
4. 行高等于内容content区域的高度时，文本垂直居中
text-indent：首行缩进
1. 作用：text-indent属性用于设置首行文本的缩进
2. 属性值
  1. 其属性值可为不同单位的数值，em字符宽度的倍数，或相对于浏览器窗口宽度的百分比%，允许使用负值
  2. 建议使用em作为设置单位
    1. 1em就是一个标签内字的宽度
text-decoration：文本的装饰
1. text-decoration通常用于给链接修改装饰效果
2. 语法：text-decoration: none | underline | overline | line-through

值	描述
none	默认，定义标准的文本，取消下划线（最常用）
underline	定义文本下的一条线，下划线也是我们链接自带的（常用）
overline	定义文本上的一条线（不用）
line-through	定义穿过文本的一条线（不常用）

开发者工具（chrome）
1. 打开开发者工具：
  1. 法一：按“F12”或者“shift + ctrl + i”打开开发者工具
  2. 法二：右击网页空白然后点击检查
2. 小技巧：
  1. Ctrl + 滚轮可以放大开发者工具代码大小
  2. 左边是HTML元素结构右边是css样式
  3. 右边CSS样式可以改动数值和颜色，查看更改后效果
  4. Ctrl + 0（零）复原浏览器大小
Sublime快捷操作emmet语法
1. Emmet的前身是Zen-coding，它使用缩写，来提高html/css的编写速度。
  1. 生成标签：直接输入标签名按tab键即可
  2. 生成多个相同标签：标签名*标签数再按下tab键
  3. 父子级标签：父标签>子标签*子标签数目再按下tab键
  4. 兄弟关系标签：兄弟标签+兄弟标签再按下tab键
  5. 生成带有类名或者id名的标签：.类名+tab键或者#id名+tab键
  6. Div类名是有顺序的：可以用自增符号$
    1. .demo$*3
复合选择器
1. 后代选择器
2. 并集选择器
为什么要学习css复合选择器
1. Css选择器分为基础选择器和复合选择器，但是基础选择器不能满足我们实际开发中，快速高效的选择标签
2. 目的是为了可以选择更准确更精细的目标元素标签
3. 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
后代选择器（重点）
1. 概念：后代选择器又称为包含选择器
2. 作用：用来选择元素或元素组的子孙后代
3. 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子
4. 语法：
  1. 祖先元素选择器子级选择器{属性1：属性1值; 属性2：属性2值;…}
  2. 这里的子级选择器包括子孙后代
子元素选择器：
1. 作用：子元素选择器只能选择作为某元素子元素（亲儿子）的元素
2. 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接
3. 语法：
  1. 父级选择器>亲子级选择器{属性1：属性1值; 属性2：属性2值;…}
  2. 这里的子级选择器只包含亲儿子，只会选择亲儿子这些元素
交集选择器：
1. 条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签1的特点，也有标签2的特点。
2. 语法：
  1. 选择器1选择器2{属性1：属性1值; 属性2：属性2值;…}
  2. 先将满足选择器1的元素选出来，再在选出来的元素中选出满足选择器2的元素（选择器1和选择器2类型不能是同类型的标签选择器【否则会当新标签查找元素】）
  3. 当选择器中出现标签选择器时，标签选择器放在其他选择器的前面。
并集选择器：
1. 应用：
  1. 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
2. 并集选择器，用逗号隔开，逗号理解为和的意思，通常用于集体声明，因为这些选择器里面的样式相同
3. 并集选择器（CSS选择器分组）是各个选择器通过，连接而成的通常用于集体声明
4. 语法：
  1. 选择器1,选择器2{属性1：属性1值; 属性2：属性2值;…}
5. 并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。
相邻兄弟选择器：
1. 相邻兄弟选择器可以选择紧接在另一元素后的元素，而且两者需具有一个相同的父元素
2. 语法：
  1. E+F{属性1:属性1值；属性2：属性2值；…}
    1. E和F元素具有一个相同的父元素，而且F元素在E元素后面且紧相邻，这个元素可以选中E元素的紧邻兄弟元素F
通用兄弟选择器：
1. 将选择某元素后面的所有兄弟元素，通用兄弟元素需要在同一个父元素之中
2. 语法：
  1. E~F{属性1:属性1值；属性2：属性2值；…}
    1. E和F元素具有一个相同的父元素,并且F元素在E元素之后，那么E~F选择器将选择E元素后面的所有F元素
CSS注释
1. CSS注释规则：/*需要注释的内容*/，即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/”结束。
伪类选择器：
1. 类选择器是一个点加上类名，伪类选择器用2个点加类名
2. 作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第一个，第n个元素。
3. 因为伪类选择器很多，比如链接伪类，结构伪类等等
链接伪类选择器：
1. 语法：
  1. a:link /*未访问的链接*/

a:visited /*已访问的链接*/

a:hover /*鼠标移动到链接上*/

a:active /*选定的链接*/

- 1. 记的时候，他们的顺序尽量不要颠倒，按照lvha的顺序，否则可能引起错误
1. 因为叫链接伪类，所以都是利用交集选择器
2. 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式
3. 实际开发中，很少写全四个状态，一般写法如下：
  1. a{/*a标签选择器所有的链接*/}
  2. a:hover { /* :hover 是链接伪类选择器 */ }

复合选择器总结：

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是>
交集选择器	选择两个标签交集的部分	即是又是	较少	没有符号
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号
链接伪类选择器	给链接更改状态		较多	重点记住a{}和a:hover{}

标签显示模式
1. 什么是标签的显示模式：
  1. 标签以什么方式进行显示，比如div自己占一行，比如span一行可以放多个
2. 作用：我们网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。
3. 标签的类型（分类）：HTML标签一般分为块标签和行内标签两种类型。它们也称块元素和行内元素。
块元素（block-level）：
1. 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
2. 块级元素的特点：
  1. 独占一行
  2. 高度，宽度，外边距以及内边距都可以css样式控制
  3. 宽度默认是父级容器宽度的100%（没设置宽度就和父元素宽度一样宽）
  4. 是一个容器及盒子，里面可以放行内或者块级元素。
  5. 注意：
    1. 只有文字才能组成段落。因此<p>里面不能放块级元素，特别是<p>里面不能放<div>
    2. 标题标签<h1>~<h6>、自定义列表标题标签<dt>，它们都是文字类块级标签，里面不能放其他块级元素。
行内元素（inline-level）：
1. 常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素，有的地方也称为内联元素。
2. 行内元素的特点：
  1. 相邻行内元素在一行上，一行可以显示多个
  2. 宽高直接设置是无效的。
  3. 上下内边距是对文字内容有效，且不支持负值，不影响布局，但会影响页面显示效果（会遮挡前后元素的显示）(相对于文字的上下位置设置上下内边距，相对于盒子的左边框位置设置左右内边距，上下内边距会浮在其他盒子上面，导致看不见部分其他盒子)
  4. 默认宽度就是它本身内容的宽度【行内元素宽高由内容撑开，但图片只能撑开父级行内元素的宽度，不能撑开父级行内元素的高度】
  5. margin:0 auto;样式无效【不能居中盒子】
  6. 行内元素只能容纳文本或则其他行内元素
  7. 上下外边距设置无效【margin-left是有效的】
  8. 行内元素不支持transform样式属性。
  9. 注意：
    1. 链接里面不能再放链接。
    2. 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
行内块元素（inline-block）：
1. 在行内元素中有几个特殊的标签-<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
2. 行内块元素的特点：
  1. 和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。一行可以显示多个
  2. 默认宽度就是它本身内容的宽度。
  3. 默认高度就是它本身内容的宽度
  4. 宽度，行高，外边距以及内边距都可以控制。
标签显示模式转换display
1. 块转行内：display:inline;
2. 行内转块：display:block;
3. 块、行内元素转换为行内块：display:inline-block;
行高：

单行文本垂直居中：
1. 行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。
  1. 文字的行高等于盒子的高度【文本行高等于盒子内容区域content的高度】
2. 行高=上距离+内容高度+下距离
  1. 上距离和下距离总是相等的，因此文字看上去是垂直居中的。
行高和高度的三种关系：
1. 如果行高等于高度文字会垂直居中
2. 如果行高大于高度文字会偏下
3. 如果行高小于高度文字会偏上
CSS背景：
1. 背景的作用
2. Css背景图片和插入图片的区别
  1. 背景图片主要起修饰作用
  2. 插入的图片一般时商家卖的产品或者推广图片。
3. 应用：
  1. 通过css背景属性，给页面元素添加背景样式
  2. 能设置不同的背景图片位置
背景颜色（color）
1. 语法：background-color: 颜色值；
  1. 颜色值的默认值是transparent 透明的。
  2. 颜色值可以是16进制，也可以是颜色英文，还可以是rgb，实际工作中使用最多的是16进制
盒子半透明：
1. 语法：opacity：数值；
  1. 数值大小为[0,1]
    1. 0:完全透明
    2. 大于0小于1的小数：半透明
    3. 1：不透明
背景图片（image）
1. 语法：background-image: url(图片路径) ;
  1. 我们提倡背景图片后面的地址，url不要加引号。
背景平铺（repeat）
1. 语法：background-repeat:repeat | no-repeat | repeat-x | repeat-y;

background-repeat属性值	background-repeat属性值作用
repeat	背景图片在水平（横向）和垂直（纵向）方向都平铺（默认情况）
no-repeat	背景图片在水平（横向）和垂直（纵向）方向都不平铺
repeat-x	背景图片在只有水平方向（横向）平铺
repeat-y	背景图片在只有垂直方向（纵向）平铺

1. 没写background-repeat样式属性时，默认平铺方式为repeat，即横向和纵向都平铺。

背景位置(position)重点
1. 语法：background-position: top | center | bottom | right | 百分数（百分数大小是相对于背景图片所在元素的宽度-图片宽度后的百分数） | 浮点数 |单位标识符组成的长度值（精确单位）;

background-position属性值		background-position属性值作用
方位名词	top	背景图片上边缘位置与盒子顶部对齐（默认位置）
	center	背景图片位于盒子的正中间
	bottom	背景图片下边缘位置与盒子底部对齐
	right	背景图片右边缘位置与盒子右边框对齐（默认位置）
百分数		转换为px为单位的大小为：（背景图片所在元素的宽度-图片宽度）*此百分数
精确单位	px为单位的单个数字	x坐标，另一个默认是y坐标，默认居中
精确单位	px为单位的两个数字	第一个数字为x坐标，第二个为y坐标（两个值之间用空格隔开）

1. 注意：
  1. 必须先指定background-image属性才可以使用background-position属性
  2. position后面是x坐标和y坐标，可以使用方位名词或者精确单位
  3. 如果只指定了一个方位名词，另一个值默认居中，为50%
  4. 如果只指定了一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中
  5. 如果指定两个值，两个值都是方位名词，则两个值前后顺序无关，比如”left top”和”top left”效果一致
  6. 如果指定两个值，精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

背景图片定位实现图片居中在盒子中央：
1. background-position: 100% 100%;
背景图片大小尺寸background-size尺寸值
1. cover：等比例缩放图片到刚好覆盖住元素
2. contain：等比例缩放图片到刚好图片的长边接触到元素边框
3. 数值：第一个数值为背景图片长，第二个数值为背景图片宽
背景附着
1. 语法：background-attachment: scroll | fixed;

background-attachment属性值	background-attachment属性值作用
scroll	背景图片是随对象内容滚动（如果此时的background-position的值为百分数，则是相对于当前盒子宽度的百分数。background-position的值为像数值，也是相对于当前盒子左上角位置而言）
fixed	背景图像固定（背景固定在浏览器的固定位置上不动，如果此时的background-position的值为百分数，则是相对于浏览器宽度的百分数。background-position的值为像素值，也是相对与浏览器左上角的位置而言）

背景简写：
1. background：属性的值的书写顺序官方并没有强制标准。为了可读性，建议大家如下写：
2. background: 背景颜色背景图片地址背景平铺方式背景滚动背景位置；
背景透明：
1. 语法：background：rgba(0,0,0,0.3);
  1. 最后一个参数是alpha透明度取值范围0~1之间
  2. 我们习惯把0.3的0省略掉这样写background：rgba(0,0,0,.3);
  3. 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
  4. 因为是CSS3，所以低于ie9的版本是不支持的。
CSS三大特性
1. 层叠性
2. 继承性
3. 优先级
层叠性：
1. 概念：所谓层叠性是指多种CSS样式的叠加
2. 是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候，后面的一个属性就会将另一个属性层叠掉
3. 原则：样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式
4. 样式不冲突，不会层叠
继承性：
1. 概念：子标签会继承父标签的某些样式，如文本颜色和字号
2. 想要设置一个可继承的属性，只需要将它应用于父元素即可
3. 简单理解：子承父业
4. 注意：
  1. 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了
  2. 子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）
  3. a标签不会继承父元素的color字体颜色，h系列标签不会继承父元素的font-size字体大小
优先级
1. 概念：定义css样式时，经常出现两个或更多规则应用在同一个元素上，此时
  1. 选择器相同，则执行层叠性
  2. 选择器不同，就会出现优先级的问题。
2. 权重计算公式（叠加没有进位的）：

选择器	计算权重
继承或者*，关系选择器（+,>,” ”）,否定伪类	0，0，0，0（继承的优先级比通配符还低）
标签选择器，伪元素选择器(::before,::after)	0，0，0，1
类选择器，伪类选择器，属性选择器	0，0，1，0
Id选择器	0，1，0，0
行内样式style=””	1，0，0，0
！important	无穷大（在单个样式属性值后面添加）

1. 继承<通配符<标签选择器<类选择器<id选择器<行内样式<！important

权重叠加：
1. 我们经常用交集选择器，后代选择器等，是多个基础选择器组合而成的，它们的权重就是各个基础选择器权重的叠加。
2. 例如一下权重：
  1. div ul li ----> 0，0，0，3
  2. .nav ul li ---->0，0，1，2
  3. .nav li ----->0，0，1，1
3. 注意：数位之间没有进制比如：0，0，0，5 + 0，0，0，5 = 0，0，0，10，所以不会存在10个div能赶上一个类选择器的情况
4. 如果权重相同，则会根据层叠性，就近原则。
5. 2个特殊标签链接和h标题他们浏览器有自己默认的样式，继承的权重为0，所以，我们还是要单独给链接和标题一个样式。
继承的权重是0
1. 我们修改样式，一定要看该标签有没有被选中
  1. 如果选中了，那么以上面的公式来计算权重，谁打听谁的
  2. 如果没有选中，那么权重是0，因为继承的权重为0.
网页布局的本质：
1. 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
2. 最后把网页元素比如文字图片等等，放入盒子里面。
3. 以上两步就是网页布局的本质
盒子模型：
1. 概念：把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
2. 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成
3. 盒子里面的文字和图片等元素是内容区域
4. 盒子的厚度我们称为盒子的边框
5. 盒子内容与边框的距离是内边距
6. 盒子与盒子之间的距离是外边距
盒子边框：
1. 语法：border: border-width属性值 border-style属性值 border-color属性值;
  1. 上面综合写法，没有顺序的，一般按上面写法
  2. 案例：border: 1px solid red;

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

1. 语法二：
  1. border-width: 边框宽度属性值；

border-style: 边框样式属性值；

border-color: 边框颜色属性值；

边框样式：
1. 语法：border-style: none | solid | dashed | dotted

border-style样式属性值	border-style样式属性值作用
none	没有边框即忽略所有边框的宽度（默认值）
solid	边框为单实线（最为常用的）
dashed	边框为虚线
dotted	边框为点线

边框单独指定样式：

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border-bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top—color: 颜色;	border-bottom-color: 颜色;	border-left-color: 颜色;	border-right—color: 颜色;
border-top: 宽度样式颜色；	border-bottom: 宽度样式颜色；	border-left: 宽度样式颜色；	border-right: 宽度样式颜色；

表格的细线边框：
1. 通过表格的cellspacing=”0”，将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗
2. 通过css属性：table{ border-collapse: collapse;}
  1. collapse单词是合并的意思
  2. border-collapse：collapse；表示相邻边框合并在一起。
  3. 当写了细线边框后，就不需要写cellspacing=”0”这个标签属性了
内边距（padding）

padding相关样式属性	padding相关样式属性作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

1. 当我们给盒子指定padding值之后，发生了两件事情：
  1. 内容和边框有了距离，添加了内边距
  2. 盒子会变大【标准盒模型下】
2. 简写：
  1. padding：padding属性值；

padding属性值个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding: 上内边距左右内边距下内边距;
4个值	padding：上内边距右内边距下内边距左内边距;

当我们使用a链接做横向排列链接时，当a链接里面的文字个数不一样时，直接给a转换模式后给宽度的话，布局不好看，此时，为了让文字的间距一样，可以使用padding样式属性来来撑大盒子的方式来让文字间距一样（先将a链接转换模式后给高度，设置行高line-height与高度height相同，让a链接里面的文字达到垂直方向居中的效果，通过给左右padding撑大盒子左右宽度，从而让各链接水平间距相同）
内盒尺寸计算（元素实际大小）：
1. 宽度：Element width= content width + padding + border
2. 高度：Element height = content height + padding + border
3. 盒子实际大小=内容宽度(css样式里面的width属性)+内容高度(css样式里面的height样式属性)+padding+border
盒子实际大小已经确定，但内边距一定要给的，这时内边距会撑大盒子
1. 解决方案：
  1. 方案一：改变内容宽度（用盒子实际宽度-左右padding值）
  2. 方案二：不改变内容宽度(给设置了padding样式的盒子设置box-sizing:border-box;)
  3. 方案三：给当前元素添加一个父元素，给父元素设置宽度，当前元素不设置宽度，这样当前元素就会和父元素宽度一样宽，不会超出父元素宽度。(块级元素不设置宽度默认和父元素宽度一样。)
Padding不影响盒子大小情况：
1. 情况1：如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子（其宽度会和父元素宽度一样）
2. 情况2：当前盒子设置了box-sizing: border-box;样式
外边距：
1. 概念：盒子与盒子之间的距离

margin有关属性	作用
margin-left	左外边距【可以改变自己的位置】
margin-right	右外边距【可以改变右边兄弟盒子的位置】
margin-top	上外边距【可以改变自己的位置】
margin-bottom	下外边距【可以改变下边兄弟盒子的位置】

1. margin值得简写（符合写法）代表意思跟padding完全相同
2. 同时设置左右外边距，上下外边距，会优先执行左上外边距的值。相邻盒子左右距离为第一个盒子的右外边距加左边盒子的左外边距。

外边距实现盒子居中【margin:0 auto实现盒子居中需要同时满足盒子是块级元素且设置了宽度】
1. 让一个盒子实现水平居中，需要满足两个条件：
  1. 必须是块级元素
  2. 盒子必须指定了宽度
2. 然后给左右得外边距都设置为auto，就可使块级元素水平居中。
3. 写法1：
  1. margin-left:auto;

margin-right:auto;

1. 写法2：
  1. margin: auto;
2. 写法3：
  1. margin: 0 auto;

文字居中和盒子居中区别
1. 文字水平居中是text-align: center;而且还可以让行内元素和行内块元素居中对齐
2. 块级盒子水平居中左右margin改为auto
插入图片和背景图片区别：
1. 插入图片我们用的最多比如产品展示类，移动位置只能靠padding margin
2. 背景图片我们一般用于小图标或者超大背景图片。背景图片只能通过background-position调整位置。
清除元素的默认内外边距：
1. 为了更灵活地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
2. 代码如下：
  1. * {padding: 0; margin: 0;}
外边距合并：
1. 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
2. 相邻块元素垂直外边距的合并：
  1. 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
  2. 下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和
  3. 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
3. 嵌套块元素垂直外边距的合并（塌陷）：
  1. 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
  2. 父元素的上外边距会与子元素的上外边距发生合并
  3. 合并后的外边距为两者中的较大值
相邻块元素垂直外边距的合并解决方案：
1. 尽量只给一个盒子添加margin值。
嵌套关系元素垂直外边距合并解决方案：
1. 方案1：给父元素设置边框
2. 方案2：给父元素设置内边距
3. 方案3：给父元素添加overflow: hidden；
4. 其他方法：浮动、固定、绝对定位、弹性布局的盒子不会出现这个问题
盒子模型布局稳定性：
1. 学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？
  1. 大部分情况下是可以混用的，就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。
2. 我们根据稳定性来分，建议如下：
  1. 按照优先使用宽度（width）其次使用内边距（padding）再次外边距(margin)
  2. 原因：
    1. margin会有外边距合并还有ie6下面margin加倍的bug 所以最后使用。
    2. padding会影响盒子大小，需要进行加减计算（麻烦）其次使用
    3. width没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。
ps简单使用：
1. 文件—打开-->可以打开我们想要测量的图片
2. Ctrl + r 可以打开标尺或者视图—标尺
3. 右击标尺，把里面的单位改为像素
4. Ctrl+加号见可以放大视图 CTRL+ 减号键可以缩小视图
5. 按住空格键，鼠标可以变成小手，拖到ps视图
6. 用选区拖动可以测量大小
7. CTRL+d可以取消选区或者旁边空白处点击一下也可以取消选区。
去掉列表默认样式
1. 因为无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且比较难看，所以一般上来就直接去掉这些列表样式就行了。代码如下：
  1. li {list-style-type: none;}
圆角边框：
1. 语法：border-radius: 数值或百分数;
2. border-radius: length;
  1. radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
  2. 参数值可以为数值或百分比的形式
    1. 百分比是相对于盒子的宽度和高度而言的
  3. 如果是正方形，想设置为一个圆，把数值修改为宽度或高度的一半即可，或者直接写50%
  4. 如果是个矩形，设置为圆角矩形：length设置为高度的一半
  5. 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角（顺时针方向）
  6. 分开写：
    1. border-top-left-radius：左上角圆角
    2. border-top-right-radius：右上角圆角
    3. border-bottom-right-radius：右下角圆角
    4. border-bottom-left-radius ：左下角圆角
盒子阴影：
1. 语法：box-shadow: 水平阴影垂直阴影模糊距离阴影尺寸(影子大小) 阴影颜色内/外阴影；

值	描述
h-shadow	必需。水平阴影的位置。允许负值(影子离盒子左边的距离)
w-shadow	必需。垂直阴影的位置。允许负值(影子离盒子上边的距离)
blur	可选。模糊距离（影子边框向外的模糊距离）
spread	可选。阴影的尺寸（影子比盒子大或小的像素值，以影子中心向左右扩展）
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

CSS书写规范：
1. 空格规范：
  1. 选择器与{之间必须包含空格
  2. 样式属性名与之后的:之间不允许包含空格，:与样式属性值之间必须包含空格
2. 选择器规范：
  1. 并集选择器，每个选择器声明必须独占一行
3. 一般情况下，选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确
4. 样式属性定义，必须以分号 ; 结束
Css布局的三种机制：
1. 普通流（标准流）
2. 浮动
3. 定位
网页布局的核心：用CSS摆放盒子
普通流（标准流）：
1. 块级元素会独占一行，从上向下顺序排列
  1. 常用块级元素：div、hr、p、h1-h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行
  1. 常用行内元素：span、a、i、em等
普通流在布局中的特点
浮动：
1. 让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示
2. 元素的浮动是指设置浮动属性的元素会脱离标准流【半脱离标准流，因为它只会让兄弟盒子上来，但兄弟盒子里面的文字会被排挤到下面的盒子中，文字可能会盖住下面兄弟盒子的兄弟中的文字，但不影响哪个兄弟的排版。】的控制，移动到指定位置的过程。
3. 作用：浮动最早是用来控制图片，实现文字环绕图片的效果。
为什么需要浮动？
1. 让多个盒子水平排列成一行
2. 实现盒子左右对齐
行内块也可以实现多个元素一行显示，但是
1. 多个元素中间会有空白缝隙
2. 不能实现盒子左右对齐
浮动语法：
1. 选择器 { float: 属性值; }

float样式属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动（从左到右排列过来）
right	元素向右浮动（从右往左排列过来）

1. 设置了浮动的元素，漂浮在普通流的上面【漂浮在父元素的上面】，不占位置，脱标（会排挤文字。浮动元素排列好后，再在浮动的第一行排文字，文字放得下，就放在第一行浮动的最后一个元素后面，放不下文字，文字就会把浮动的元素向下挤，文字和刚好放得下它的盒子在同一列上）
2. 设置了浮动的元素把自己原来的位置漏给下面标准流的盒子就是不占原来位置，是脱离标准流的，我们俗称“脱标”（会把自己的位置让给同级下方的兄弟元素）
3. 任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。
4. 浮动元素之间默认没有空隙
5. 浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动的应用
1. 浮动和标准流的父盒子搭配
  1. 我们知道，浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化的减小了对其他标准流的影响。
浮动元素与父盒子之间的关系
1. 子盒子的浮动参照父盒子对齐
2. 不会与父盒子的边框重叠，也不会超过父盒子的内边距。
浮动元素与兄弟盒子之间的关系：
1. 在一个父级盒子中，如果前一个兄弟盒子是：
  1. 浮动的，那么当前盒子会与前一个盒子的顶部对齐
  2. 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方
2. 浮动只会影响当前的或则是后面的标准流盒子，不会影响前面的标准流。
建议：
1. 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，防止引起问题。
清除浮动：
1. 为什么要清除浮动：
  1. 因为父级盒子很多情况下不方便给高度，但是子盒子浮动就不占位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
2. 清除浮动本质：
  1. 清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度
清除浮动
1. 语法：选择器{clear: 属性值}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右侧浮动的影响

1. 实际工作中，几乎只用clear: both;

清除浮动的用法：
1. 给父级盒子内所有浮动元素的每一行的最后一个盒子的下一个盒子添加清除浮动，使得下一个盒子会换行布局。
2. 父级盒子自动检测高度
清除浮动的方法：
1. 额外标签法（隔墙法）
  1. 是W3C的做法，是通过在浮动元素末尾添加一个空的标签，给这个空标签添加清除浮动的样式(这个空标签前面就会在前面所有的浮动元素的下一行显示，因为空标签也是一个块级元素，所以会占一行的位置，而这个位置刚好撑开父元素的高度)。
  2. 优点：通俗易懂，书写方便
  3. 缺点：添加许多无意义的标签，结构化较差（不推荐使用）。
2. 父级添加overflow属性方法
  1. 可以给父级添加：overflow为hidden | auto | scroll都可以实现
  2. 优点：代码简洁
  3. 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3. 使用after伪元素清除浮动（给父元素添加after伪类）。
  1. :after方式为空元素额外标签法的升级版，好处是不用单独加标签了
  2. 优点：符合闭合浮动思想结构语义化正确
  3. 缺点：由于IE6-7不支持:after，使用zoom: 1触发hasLayout。
  4. 代表网站：百度、淘宝网、网易等
  5. 样式语法：
    1. .clearfix:after {

//必备属性

content: “”;

//将默认的伪元素【行内元素】转换为块级元素独占一行

display: block;

//伪元素不占位置，不影响后面盒子布局

height: 0;

visibility: hidden;

//清除浮动，元素前面遇到浮动元素，自动换行；

clear: both;

}

.clearfix {

*zoom: 1; /*i6,i7清除浮动用的*/

}

1. 使用双伪元素清除浮动（给父元素添加）
  1. 样式语法：
    1. .clearfix::before,

.clearfix::after {

content: "";;

display: table;

}

.clearfix2::after {

clear: both;

}

.clearfix2{

*zoom: 1;

}

- 1. 代表网站：小米，腾讯

什么时候用清除浮动：
1. 父级没有高度
2. 子盒子浮动了
3. 影响下面布局了，我们就应该清除浮动了
子盒子浮动，脱标，父盒子没有高度就为0，不会被撑开盒子
清除浮动的方法：
1. 清除浮动之后，父级就会根据子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了，在css中，clear属性用于清除浮动
Ps切图：
1. 常见的图片格式：
  1. Jpg图像格式：
    1. JPEG(.JPG)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
  2. Gif图像格式：
    1. GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果
  3. Png图像格式
    1. 是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
  4. PSD图像格式
    1. PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿
2. Ps切图可以分为手动利用切片切图，以及利用ps的插件快速切图
Ps切图分为两步：
1. 用切片选中图片
  1. 利用切片工具手动划出
  2. 图层菜单---新建基于图层的切片
  3. 利用标尺基于参考线的切片（选择切片工具）
  4. 先选个一个整个的切片，切片选择工具—属性面板中有“划分” –可以等分数平分切图
2. 导出切片
  1. 文件菜单 ---存储为web设备所用格式 --- 选择我们要的图片格式 --- 点存储 –别忘了选中的切片
辅助线和切片使用及清除
1. 视图菜单—清除辅助线/清除切片
第四天视频30
将盒子定在浏览器的某一个位置—css离不开定位，特别是后面的JS特效。
实际重要的导航栏中，我们不会直接用链接a，而是用li包含链接a的做法
1. li+a语义更清晰，一看这就是有条理的列表型内容
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
Css初始化语句
Css书写顺序
1. 第一写布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
2. 第二写自身属性：width/height/margin/padding/border/background
3. 第三写文本属性：color/font/text-decoration/text-align
4. 第四写其他属性（css3新增属性）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-grandient/line-height…
5. 注意：
  1. 当font连写属性和行高属性同时存在时，先写font连写属性，再写行高【font连写属性有个默认行高属性值为1】【或者将隐藏的行高属性写在font连写属性的font-size属性值/后面】
布局流程：
1. 为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下：
  1. 必须确定页面的版心（可视区），我们测量可得知。
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成
  3. 制作HTML结构，我们还要遵循，先有结构，后有样式的原则。结构永远最重要。
  4. 然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块
Chrome调试工具
1. Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机调试。我们现在只是使用html和css，我们先将一下现在常用的调试。
2. 怎样打开chrome的开发者工具
  1. 直接在页面上点击右键，然后选择“检查” 快捷键F12或者 ctrl + shift + i
3. Chrome调试数值
  1. 可以鼠标点击后面的数值，按下键盘上箭头是调大数值，下箭头是调小数值
4. 快速定位css所在行数
  1. 编辑器里：ctrl + g
    1. 在弹出的输入框中输入行数，即可跳到那一行
Chrome提示的常见布局错误
1. Css单词书写错误提示
  1. 用箭头，点击我们需要的html元素
2. Css无显示
  1. 声明类名和html调用调用名不一致或者 css文件引入不对
3. Html结构不匹配
定位
1. 将盒子定在某一个位置自由的漂浮在其他盒子的上面—css离不开定位，特别是后面的js特效
2. 定位的概念：定位=定位模式 + 边偏移（方位名词）
  1. 边偏移：简单来说，我们定位的盒子，是通过边偏移来移动位置的。
  2. 在css中，通过top、bottom、left、right属性定义元素的边偏移

边偏移	示例	描述
top	top: 80px;	顶部偏移量，定义元素相对于其父元素上边线【内容区content的上边线】的距离
bottom	bottom:80px;	底部偏移量，定义元素相对于其父元素下边线【内容区content的下边线】的距离
left	left:80px;	左侧偏移量，定义元素相对于其父元素左边线【内容区content的左边线】的距离
right	right:80px;	右侧偏移量，定义元素相对于其父元素右边线【内容区content的右边线】的距离

- 1. 定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。
  2. 边偏移左上为尊，同时出现left和right边偏移时，left优先级高，执行left边偏移，同时出现top和bottom边偏移时，top优先级高，执行top边偏移
1. 定位模式（定位的分类）
  1. 在CSS中，通过position属性定义元素的定位模式，语法如下：
    1. 选择器 { position: 属性值; }
  2. 定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

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

静态定位（static）
1. 静态定位是元素的默认定位方式，也就是说网页中所有元素默认都是静态定位的—按照标准流特性摆放位置。
2. 用大白话来讲，在不需要定位元素时，元素的定位属性就是static的
3. 注意：在静态模式下，无法通过边偏移（top，bottom，left，right）来改变元素的位置。（提示：因为是默认值，所以静态定位在布局时不使用，但是要知道）
4. 标准流布局中，当父盒子装不下子盒子时，子盒子会超出父盒子继续按标准流布局，但超出的子盒子并不会影响父级元素后面的兄弟元素，父级元素后面的兄弟元素会遮住这些子元素【因为子元素默认情况下背景透明】
相对定位（relative）
1. 相对定位是元素相对于它，原来在标准流中的位置来说的。（边偏移是相对于它原来的位置移动的）【页面上的可视盒子可以通过边偏移来改变它的位置，且层级比标准流高，所以可以遮挡住其他标准流的可视盒子元素】【层级关系：标准流【静态定位相当于标准流】<浮动<定位】
2. 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位（absolute）
1. 绝对定位是元素相对于他父级元素来设置元素的位置（边偏移是相对于离它最近一级设置了定位属性的父级元素的位置）
2. 绝对定位的盒子，浮动将失效【相对定位的盒子，浮动不会失效】
3. 完全脱标--完全不占位置；（不保留原来的位置，完全脱标）
4. 父元素没有定位，则以浏览器为准定位（浏览器左上角为参考点）
5. 元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位，如果所有父元素都没有定位，则依据浏览器左上角进行定位。
6. 定位口诀—子绝父相
7. 子决父相—子级是绝对定位，父级要用相对定位。
  1. 子决父相是使用绝对定位的口诀，要牢牢记住！
8. 绝对定位的盒子margin: 0 auto;不能让盒子水平居中对齐
固定定位
1. 固定定位是绝对定位的一种特殊形式
  1. 完全脱标—完全不占位置
  2. 只认浏览器的可视窗口 + 边偏移属性来设置元素的位置；
    1. 跟父元素没有任何关系
    2. 不随滚动条滚动。
绝对定位的盒子居中
1. 父元素设置position：relative；
2. 子元素设置position：absolute；
3. 子元素要在父元素的中间
  1. 子元素首先需要向右移动父元素盒子宽度一半的距离（即离左边父元素边框的距离是父元素宽度的一半，即left: 50%;）
  2. 子元素然后向左移动自己盒子宽度一半的距离（即margin-left: -(1/2)*width）
堆叠顺序（z-index）：
1. 在使用定位布局时，可能会出现盒子重叠的情况。
2. 加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子
3. 应用z-index层叠等级属性可以调整盒子的堆叠顺序。
4. z-index的特性如下：
  1. 属性值：正整数、负整数或0，默认值是0（标准流中布局，假设有z-index,那么z-index就为0），数值越大，盒子越靠上；
  2. 如果属性值相同，则按照书写顺序，后来居上；
5. z-index只能应用于“相对定位”、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
定位改变display属性
1. 前面我们讲时，display是显示模式，可以改变显示模式有以下方式：
  1. 可以用inline-block转换为行内块
  2. 可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
  3. 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块
    1. 所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等
绝对定位，固定定位和浮动元素都不会触发外边距合并的问题
定位的盒子，如果要给通栏，width属性值给100%就可以了。绝对定位盒子通栏如果压住下面的标准流内容，给下面的盒子设置margin-top: 绝对定位盒子高度；即可
定位总结

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

固定定位的导航栏贴着版心盒子左侧的方法：
1. 固定定位的导航栏设置position：fixed;
2. 让固定定位的导航栏左边框到浏览器中线：left: 50%;
3. 让固定定位的导航栏左边框贴着版心盒子的左边框，再让固定定位的导航栏右边框贴着版心盒子的左边框：
  1. 给固定的导航栏设置margin-left:-(版心盒子宽度的一半+固定定位盒子宽);
    1. margin-left: -版心盒子宽度的一半；是将固定定位的盒子移到于版心盒子左边边框重合。加上固定定位盒子宽就是移到版心盒子的左侧了
css高级技巧
1. 元素的显示与隐藏
2. Css用户界面样式
3. Vertical-align垂直对齐
4. 溢出的文字隐藏
5. Css精灵技术
6. 滑动门
元素的显示与隐藏
1. 目的：让一个元素在页面中消失，但是不在文档源码中删除（该元素在页面中消失后不会占有位置，后面的兄弟元素会顶上来）
2. 场景：是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，会重新出现。
display显示
1. display设置或检索对象是否及如何显示
  1. display: none;
    1. 隐藏对象，且不保留位置，后面的兄弟元素会顶上来
  2. display: block;
    1. 除了转换为块级元素之外，同时还有显示元素的意思。
2. 特点：隐藏之后，不再保留位置。
visibility
1. 设置或检索是否显示对象
  1. visibility: visible;
    1. 对象可视
  2. visibility: hidden;
    1. 对象隐藏
2. 特点：隐藏之后，继续保留原位置（后面的兄弟元素不会占它原来的位置，会保留在原地）
overflow溢出
1. 检索或设置当对象内容超过其指定高度及宽度时如何管理内容。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

显示与隐藏总结

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

Css用户界面样式
1. 所谓的界面样式。就是更改一些用户操作样式，以便提高更好的用户体验。
  1. 更改用户的鼠标样式（滚动条因为兼容性非常差，我们不研究）
  2. 表单轮廓等
  3. 防止表单域拖拽
鼠标样式cursor
1. 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default	小白（白色向左上角箭头）默认
pointer	小手
move	移动（中心向上下左右发射箭头）
text	文本（竖线，word中的竖线光标一样）
not-allowed	禁止

轮廓线
1. 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  1. outline: outline-color | outline-style | outline-width;
2. 去掉轮廓线：
  1. outline: 0; 或者 outline: none;
防止拖拽文本域resize
1. 实际开发中，我们文本域右下角是不可以拖拽
  1. resize: none;
vertival-align垂直对齐
1. 有宽度的块级元素居中对齐，是margin: 0 auto;
2. 让文字居中对齐，是text-align: center;
3. vertical-align垂直对齐，它只针对于行内元素或则行内块元素
4. 默认文字与图片是基线对齐
vertical-align: baseline | top | middle | bottom;
1. 设置或检索对象内容的垂直对齐方式。
2. 注意：vertical-align不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐方式
3. 一般是先在父元素中设置高度和行高，让文字垂直居中，然后给文字的兄弟行内元素或行内块元素设置vertical-align: middel;让文字和图片或者表单中线对齐
去除图片底侧空白缝隙：
1. 因为图片和文字默认是基线对齐，所以存在空白缝隙
2. 去除图片底侧空白缝隙的方法：
  1. 法1：给图片设置vertical-align: top | middle | bottom;
    1. 只要不是基线对齐就可以去掉底侧的空白缝隙
  2. 法2：给图片设置display: block;
    1. vertical-align对块级元素无效，所以就不存在基线对齐了。
  3. 法3：给父元素设置font-size: 0;
    1. 图片和文字默认是基线对齐，给文字设置大小为0，就不存在基线对齐了。
解析空格：
1. 连续的空格或tab缩进或者回车换行符都会被合并解析为一个空格
行内元素左右之间的空格是解析空格
1. 解决方案：
  1. 法一：相邻内联元素或内联块级元素标签写在同一行（删除不需要的空格）
  2. 法二：相邻内联元素或内联块级元素设置浮动
  3. 法三：父元素设置font-size: 0;
    1. 为了让内联元素里面的文字显示出来，我们还需要在内联元素样式内重设font-size属性（空格是什么，空格就是一个字符，有大小，所以给父元素设置font-size：0；就可以解决解析空格的问题，但是字体会继承，所以要重新给子元素设置字体大小）
  4. 法四：用连接（不推荐使用）
溢出文字用省略号显示
1. 先强制一行内显示文本
  1. white-space: nowrap;
2. 超出的部分隐藏
  1. overflow: hidden;
3. 文字用省略号代替超出的部分
  1. text-overflow: ellipsis;
white-space
1. white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
  1. white-space: normal;默认处理方式
  2. white-space: nowrap;强制在同一行内显示所有文本，直到文本结束或遇到br标签对象才换行
text-overflow文字溢出
1. 设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
  1. text-overflow: clip;不显示省略标记（…），而是简单的裁切
  2. text-overflow: ellipsis;当对象内文本溢出时显示省略标记(…)
Css精灵图技术（也称CSS Sprites、CSS雪碧）
1. 为什么需要精灵图技术
  1. 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大的减低页面的加载速度。（减少服务器压力）
  2. 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。
2. 精灵图技术讲解
  1. Css精灵图其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，我们需要使用css的
    1. background-image
    2. background-repeat
    3. background-position属性进行背景定位
    4. 其中最关键的是使用background-position属性精确地定位
3. 精灵图技术使用核心总结
  1. Css精灵图技术主要针对于背景图片，插入的图片是不需要这个技术的。
    1. 精确测量，每个小背景图片的大小和位置
    2. 给盒子指定小背景图片时，背景定位基本都是负值
4. 制作精灵图
  1. Css精灵图其实是将网页中的一些背景图像整合到一张大图中（精灵图），我们要做的，就是把小图拼合成一张大图
  2. 大部分情况下，精灵图都是网页美工做
    1. 我们精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
    2. 我们精灵图的宽度取决于最宽的那个背景
    3. 我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适
    4. 在我们精灵图的最低端，留一片空隙，方便我们以后添加其它精灵图。
    5. 小公司，背景图片很少的情况下，没必要使用精灵技术，维护成本太高，如果是背景图片比较多，可以建议使用精灵技术
滑动门技术
1. 滑动门出现的背景
  1. 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办
    1. 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术，它从新的角度构建，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强，最常见于各种导航栏的滑动门。
2. 核心技术
  1. 核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏，一般的经典布局都是这样的：
    1. <li>

<span>导航栏内容</span>

</a>

</li>

- - - 1. a是设置左侧背景（左门）
      2. span是设置右侧背景（右门）
      3. 因为整个导航栏都是链接，所以a要包含span
      4. 因为我们是滑动门，左右推拉，跟文字内容多少有关系，此时需要用文字撑开盒子，就要用到行内块
  1. Css样式：
    1. *{

padding: 0;

margin: 0;

}

display: inline-block;

height: 33px;

padding-left: 15px;

background: url(images/tupian.png) no-repeat;

}

a span{

display: inline-block;

height: 33px;

padding-right: 15px;

background: url(images/tupian.png) no-repeat right top;

}

margin负值之美
1. 负边距 + 定位：水平垂直居中
  1. 一个绝对定位的盒子，利用left：50%；然后往左走自己宽度的一半，可以实现盒子水平居中
2. 压住盒子相邻边框
  1. float: left

margin-left: -1px;

margin-top:-1px;

broder: 1px solid blue;

- - 1. 浮动的盒子紧贴在一起的，所以第一个盒子左移动1像素后，第二个盒子及后面的盒子会紧贴着第一个盒子，然后第二个盒子再左移1像素…
1. 鼠标经过盒子，突出显示边框
  1. 压住相邻盒子
    1. float: left

margin-left: -1px;

margin-top:-1px;

border: 1px solid blue;

- 1. 突出边框
    1. 法一：
      1. 需要给元素设置z-index属性，只有定位的元素才有z-index属性，元素还要占有位置，所以先需要给元素设置position: relative;样式
      2. 鼠标经过时给z-index属性。
    2. 法二：
      1. 鼠标经过元素时直接给元素设置position: relative;样式

双飞翼布局
1. 使用float属性让左中右三个元素即三列浮动
  1. 第一个元素设置样式width:100%;样式，让第二个和第三个元素在下一行显示
  2. 第二个元素设置样式margin-left: -(自身盒子宽度)；让第二个元素盒子摆放到第一个元素盒子的最右侧
  3. 第三个元素设置样式margin-left:-100%；让第三个元素的盒子摆放到第一个元素的盒子的左侧
  4. 第一个元素盒子外面嵌套一个子元素盒子，子元素盒子设置样式margin-left: (第三个元素盒子的宽度)
  5. 最后，别忘了清除浮动，让父元素高度正常显示
2. 双飞翼布局优点
  1. 中间内容列宽度自适应
  2. 中间内容区域先加载
  3. 使用浮动布局
  4. 巧妙使用负margin属性保持三列水平
  5. 方法简单直接
  6. 浏览器兼容性好
Css三角之美
1. 需要给元素的宽高都设置为0
2. 通过css边框模拟三角效果
  1. border-top: 10px solid red;
    1. 设置上边框
  2. border-right: 10px solid green;
    1. 设置右边框
  3. border-bottom: 10px solid blue;
    1. 设置下边框
  4. border-left: 10px solid pink;
    1. 设置左边框
  5. 如果有不需要的看见的边框可以设置颜色为transparent，这样边框还是会占有位置，但达到我们看不见部分边框的效果
  6. 如果有不需要的边框可以设置为border-top-style: none;这样不需要的边框就不会占有位置
  7. 为了照顾兼容性低版本的浏览器，加上font-size: 0; line-height: 0;
创建BFC方法：
1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow属性值不为visible
BFC盒子【也叫块级格式化上下文】常见特点：
1. BFC盒子会默认包裹住内部子元素（标准流、浮动）->应用: 清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象->应用:解决margin的塌陷

标签：盒子,样式,标签,元素,2CSS,选择器,属性
From： https://www.cnblogs.com/BlueGirl/p/17014100.html

相关文章

赞助商

阅读排行