CSS简述

1. CSS基础

　　HTML太丑了，怎么办？

　　CSS层叠样式表——表现，凡是页面中所有能看见的东西的设置

　1.1 什么是CSS?

　　　　CSS指的是层叠样式表(Cascading Style Sheets) ，用于为网页创建样式表，对网页进行装饰，如设置HTML页面中的文本内容（字体、大小、对齐方式），图片的外形（宽高、边框样式、边距等）；

　1.2 层叠样式表

　　　　1、层叠：

　　　　　　网页是一层一层的，层次高的将会覆盖层次低的，我们看到的只是最上面的一层；

　　　　2、样式：

　　　　　　CSS可以为网页各个层次分别设置样式；

　　　　3、注释：css的注释/* */，必须编写在 <style> 标签中；

　　　　4、

.box + tab== <div class="box"></div> 创建一个class为box的div ；

2. CSS基本结构

　2.1 书写位置

　　　　CSS有专有的<style>样式标签，可以分别为网页各个层次设置样式；

　　　　<style>样式可分为三类：行内样式、内部样式、外部样式；

　　　　2.11、行内样式

　　　　　　1、特点：

　　　　　　　　直接将css样式写到<body>标签内部的style属性中，给哪个标签设置就写在哪，直接写声明即可，内联样式又称行内样式；内联样式只对当前元素中的内容起作用；

　　　　　　2、语法：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
<p style="color:red; font-size:12px;"> </p>;

　　　　　　3、优点：编写简单，定位准确,不需填写选择器，直接编写声明即可；

　　　　　　4、缺点：直接将css代码写到html内部，使结构与表现耦合，导致样式不能复用；不方便后期维护，不推荐；

　　　　2.12、内部样式

　　　　　　1、特点：

　　　　　　　　将css样式编写到<head>标签中的<style>标签中，通过css选择器来指定元素；

　　　　　　2、语法：

<head>
    <style type="text/css"> // type="text/css"  在html5中可以省略
        p {
             color: red;
             font-size: 30px;
           }
    </style>
</head>

type="text/css"是默认样式文本，将样式编写到<style>标签中，对页面中所有的这个标签统一设置样式；

　　　　　　3、优点：使css独立于html代码，同时为多个元素设置样式，可以使样式进一步复用，也可以使结构与表现进一步分离，常用；

　　　　　　4、缺点：内部样式样式只能在一个页面使用，结构与表现没有彻底分离，一个好的程序是需要每个部分都是独立的个体，模块化的概念；

　　　　2.13、外部样式

　　　　　　1、特点：

　　　　　　希望写一个css的样式在不同的页面都可以使用，可以将所有样式表统一编写到外部样式文件 style.css 中,再通过<link>标签，将style.css样式引入到当前页面中，建立关系；

　　　　　　2、语法：

<head>
    <!-- head标签内引入外部css文件 -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    
    /* css文件内直接定义样式，不用写style标签 */
        li {
          list-style: none;
        }
</head>

　　　　　　3、优点：

　　　　　　　　（1）使结构表现完全分离，可以使样式表同时控制多个页面，最大限度的使样式可以复用；

　　　　　　　　（2）浏览器第一次加载图片之后已经将图片下载了，以后访问则不需下载，可以利用浏览器的缓存，加速用户访问的速度，提高了用户体验；

　　　　　　　　　　所以在开发中，最推荐使用外部css；文件级别：三者中行内样式表级别最高；

　　　　　　4、属性：

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

　　　　2.14、三种样式对比

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

　2.2、语法规范

　　　　1、结构：选择器 { 声明块 }

　　　　　　（1）选择器用于指定CSS样式的HTML标签，花括号内是设置的具体样式；

　　　　　　（2）声明块紧跟选择器后，用一组{ }括起来，里面是一组组的名值对结构；

　　　　　　　　一组一组的名值称为声明，一个声明块中可以有多个声明，用；隔开使用，声明的样式名和样式值之间使用：来连接；

　　　　　　　　格式：属性值前，冒号后面，保留一个空格；选择器和花括号之间保留空格；

　　　　2、语法

<style>
/* 给谁改样式 { 改什么样式 } */
    p {
      color: red;
      font-size: 25px;
    }
</style>

3、CSS选择器

　　　　1、作用：告诉浏览器：网页上的哪些元素需要设置设么样的样式，即选择器是选择标签用的；

　　　　2、分类：选择器分为—基础选择器和复合选择器；

　3.1、基础选择器

　　　　基础选择器是由单个选择器组成的；

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

基础选择器	作用	特点	使用	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	`p {color: red}`
类选择器	可以选出1个或者多个标签	根据需求选择	非常多	.nav {color: red;}
id选择器	一次只能选择1个标签	id选择器在每个html中只能出现一次	一般和js搭配	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况如清除全文样式	* {color: red;}

　　　　3.11、标签选择器：标签名 { }

　　　　　　以HTML标签名作为选择器，把页面中某一类标签都选择，能快速统一标签样式；

　　　　　　语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

　　　　　　例：p会选取页面中所有的p标签；

<style>
   p {
       color: red;
       font-size: 25px;
      }
</style>

　　　　3.12、类选择器：.class属性值{ }

　　　　　　作用：通过元素的class属性值选中一组元素，可选中一个或多个元素；

　　　　　　口诀：样式点定义，结构类（class）调用，一个或多个，开发最常见；

　　　　　　语法：

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
<p class='类名'></p>

　　　　　　（1）可以同时为一个元素设置多个class属性值，多个值之间用空格隔开；

　　　　　　（2）可以允许多个标签调用一个共用的class类；

<style>
/* .class选择器会选取页面中所有 class属性值为red的元素； */
        .red {
            color: red;
        }
        .font20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 可以允许多个标签调用一个共用的class-->
    <p class="red">选择器</p>
    <p class="red">选择器</p>
    <!-- 同时为一个元素设置多个class属性值 多类名样式：把一个标签相同的样式放在一个类里-->
    <p class="red font20">选择器</p>
</body>

　　　　多类名开发：

　　　　　　可以把一些标签相同的样式放到一个类里；这些标签都可以调用这个共用的类，然后再调用自己的类；从而节省css代码，统一修改。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

　　　　常用类：

类命名	描述
头	header
内容	content/container
尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左右中	left、right、center
登录条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu

　　　　3.13、id选择器：#id属性值{ }

　　　　　　作用：可以在页面中单独选取某一个标签；

　　　　　　口诀：样式 #定义，结构id调用，只能调用一次，别人切勿使用

　　　　　　语法：

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p> // 元素的id值是唯一的，只能对应于文档中某一个具体的元素。

　　　　　　例：

<head>
<style>
   /* #p1会选取页面中唯一 id属性值为p1的元素； */
    #p1 {
         color: red;
         font-size: 25px;
        }
</style>
</head>
<body>
    <p id="p1">选择器</p>
</body>

　　　　3.14、通配选择器 *{ }

　　　　　　作用：选择页面中的所有元素，特殊情况使用；

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

　　　　　　语法：

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

　3.2、复合选择器

　　　　复合选择器是由两个或多个基础选择器组合成的；

　　　　复合选择器分为后代选择器，子选择器，交并集选择器，伪类选择器；

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

　　　　3.21、后代元素选择器：父元素后代元素{ }

父级 子级{属性:属性值;属性:属性值;}

　　　　　　作用：选中指定父元素里的后代元素，可以是子孙后代；

/*例；为页面中所有div中的span设置一个颜色为绿色*/

<style>
    div span {
        color: greenyellow;
        }
 </style>

　　　　3.22、子元素选择器：父元素 > 子元素（直接后代，亲儿子）

　　　　　　作用：选中指定父元素的直接后代，子元素；

/*例：为div标签的直接子元素 span设置一个背景颜色为黄色；*/

div > span {
    backage-color: yellow，亲儿子
 }

　　　　　　*IE6及以下的浏览器不支持子元素选择器

　　　　3.23、并集选择器：元素1，元素2，元素n { 样式声明 }

　　　　　　作用：同时选中多组标签，为它们定义相同的样式，用于集体声明；

　　　　　　任何形式的选择器都可以作为并集选择器的一部分，用，连接，和的意思；

/*例：为id为p1的元素，class为p2的元素，还有h1,同时设置一个背景颜色为黄色（并集选择器竖着写，最后一个不加逗号）*/

#p1,
.p2 ,h1 {
    backage-color: yellow;
}

　　　　　　#交集选择器：既有标签一的特点，也有标签二的特点。并且，又的意思。

　　　　　　比如： p.one 选择的是：类名为 .one 的段落标签。

　　　　3.24、伪类选择器

　　　　　　伪类：专门用来表示元素的某种特殊的状态，用：表示；

　　　　　　比如：访问过得超链接，普通的超链接，获取焦点的文本框；当我们需要为处在这种特殊状态的元素设置样式时，就可以使用伪类；

　　　　　　（1）超链接伪类 lvha：

　　　　　　　　例：超链接按颜色分：访问过的——紫色；没访问过的——蓝色；正在点击时是红色；

　　　　　　　　以根据访问者与该链接的交互方式，通过四个伪类将链接设置成4种不同的状态:顺序不能乱；

- - - :link{} 选择所有未被访问的链接；
    - :visited{} 选择所有已被访问的链接
    - :hover{} 选择鼠标指针移动到上面的状态
    - :active{} 选择鼠标按下时被点击时的状态

　　　　　　（2）注意：

- - - 写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序
    - hover和active也可为其他选择器设置；但IE6中不支持对超链接之外的元素设置；
    - 使用visited伪类只能设置字体的颜色；原理：浏览器是通过历史记录来判断一个链接是否访问过，有历史，访问过；由于涉及到了用户隐私，所以使用visited伪类只能设置字体的颜色；

a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

　　　　　　（3）：focus伪类选择器

　　　　　　　　用于选取获取焦点（光标）的表单元素，主要针对表单元素；

/* 将获得光标的input元素选取出来 */

input:focus {
     background-color: pink;
   }

　　　　3.25、选择器按元素之间的关系分类：

- - - 父元素：直接包含子元素的元素；
    - 子元素：直接被父元素包含的元素；
    - 祖先元素：包含父元素，直接或间接包含后代元素的元素；
    - 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素；
    - 兄弟元素；拥有相同父元素的元素；

4、CSS三大特性

　　　　CSS有三个非常重要的特性：继承性、优先级、层叠性；

　4.1、继承性（样式的继承）

　　　　1、作用：现实中：像儿子只可以继承父亲遗产一样，子承父业；

- - - 在css中，祖先元素的样式，也会被后代元素继承；如文本的颜色和字号；
    - 利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式，只需要设置一个；
    - 但不是所有元素都会被子元素继承，比如，背景相关的样式不会被继承，边框，定位不继承；背景是有一个默认值，是透明颜色，可以通过子元素透过去；

　　　　2、特点：

　　　　　　　　恰当地使用继承可以简化代码，降低CSS样式的复杂性；

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

　　　　　　　　继承性口诀：龙生龙，凤生凤，老鼠的孩子会打洞；

　　　　3、语法：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div { color: red; }
        p { color: green; }

        /*因为demo 没有选p标签，所以 继承的权重为 0*/
        .demo { color: blue; }
        #test { color: pink; }
    </style>
</head>

<body>
    <div class="demo" id="test">
        <!-- p是绿色 -->
        <p>继承的权重为 0</p>
    </div>
</body>

　　　　4、行高的继承

　　　　语法：

body{
    font:12px/1.5 Microsoft YaHei;
}

　　　　特点：

　　　　　　行高可以接单位也可以不接；

　　　　　　若子元素没设置行高，则汇集成父元素的行高/1.5；

　　　　　　此时的行高是当前子元素的文字大小*1.5；

　　　　　　body行高1.5的优势：里面的子元素可以根据自己文字大小自动调整行高；

　4.2、层叠性

　　　　1、作用：是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，此时一个样式会覆盖（层叠）另外一个冲突的样式，层叠性主要解决样式冲突的问题；

　　　　2、原则：

　　　　　　样式冲突，遵守就近原则，那个样式离结构近，就执行哪个；

　　　　　　样式不冲突，不会层叠；

　4.3、优先级（权重）

　　　　当使用不同选择器选择同一个元素，并且设置相同的样式时，样式之间产生了冲突，最终采用哪个选择器的样式，由选择器的优先级（即权重）决定：

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

　　　　1、权重计算公式

　　　　　　　　选择器的权重：计算权重需要将一个样式的全部选择器相加；

　　　　　　　　优先级规则：

标签选择器	计算权重公式
继承或者 *通配	0,0,0,0
元素（标签选择器）	0,0,0,1
类，伪类，属性	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

　　　　　　　　通配符和继承权重为0；标签为1，类（伪类）为10，id为100，行内1000；

　　　　注意：

- - 当选择器中包含多种选择器时需要相加；
  - 选择器的优先级计算，不会超过他的最大的数量级；
  - 如果选择器的优先级一样，则使用靠后的样式；
  - 并集选择器的优先级是单独计算的：div, p, #p1, .hello{}

- - 不相加计算：在样式后面添加！important会获得一个最高的优先级，但是开发中尽量避免使用；不利js修改；

　　　　例：如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，因为继承没有权重；

<style>
    /*父亲的权重是100*/
    #father {
        color: red;!important;
    }
    /*虽然权重有高低，但继承的权重为0*/
    /*所以以后看标签到底执行哪个样式，就先看这个标签有没有直接被选出来*/
    p {
        color: pink;
    }
</style>
<body>
    <div id="father">
        <p>内容</p>
    </div> 
</body>

　　　2、权重的叠加：复合选择器需计算权重；

　　　　就是一个简单的加法计算

- - 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

　　　　数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

5、字体样式

　　　　Fonts属性定义字体系列、大小、粗细、和文本样式（如斜体）；

属性	表示	注意点
font-size	字号	一定要有单位，通常px
font-family	字体	按照团队约定抒写字体
font-weight	字体粗细	加粗700/bold；不加粗400/normal；数字常用无单位
font-style	字体样式	倾斜italic；不倾斜normal（常用默认）用于em不倾斜
font	字体简写	有序顺；字号和字体必须有；
font-variant	大小写	small-caps：小型大写字母；

　　　　1、font-size：文本大小/字号

　　　　　　（1）结构：

  /* 标题标签比较特殊，需要单独指定文字大小 */
    p {
       font-size: 25px;
    }

　　　　　　（2）特点：其实设置的并不是文字本身真正大小，而是是文字在页面中所属的看不见的框空间的大小（盒子模型），类似于方格纸，所以字体大小实际值是小于font-size值；

- - - 不同浏览器默认字体不同，所以在网页中默认显示的效果也不同，谷歌浏览器默认16px；
    - 当使用某种字体时，如果浏览器支持则使用该字体，不支持则使用默认字体；

　　　　2、font-famliy：字体系列

　　　　　　（1）结构：

body {
   font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';
}

　　　　　　（2）特点：可以同时指定多个字体，优先使用前面的字体;超过两个单词加引号；

　　　　　　（3）分类：5大类

- - - serif（衬线字体）：结尾拐个弯，宋体
    - sans-serif（非衬线字体）：横平竖直，雅黑
    - monospace（等宽字体）：一边宽，英文也是，编程程序一般用
    - cursive（草书字体）：楷书
    - fantasy（虚幻字体）：

　　　　　　（4）应用场景：

- - - 浏览器会自动选择指定的字体并应用样式，选择大字体中的一类；
    - 不同浏览器对字体的理解效果不同，所以网页中显现的字体也不同；
    - 一般会将字体的大分类指定为font-family中最后一个字体；
    - 浏览器默认使用的是计算机字体，计算机有，就可以设置，但有些只支持英文；字体查看——c盘，windows，fonts；注意奇怪字体不要用；

　　　　　　（5）常用字体：

字体名称	英文名称	Unicode 编码
宋体	SimSun	5B8B4F53
新宋体	NSimSun	65B05B8B4F53
黑体	SimHei	9ED14F53
微软雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
楷体_GB2312	KaiTi_GB2312	69774F53_GB2312
隶书	LiSu	96B64E66
幼园	YouYuan	5E7C5706
华文细黑	STXihei	534E65877EC69ED1
细明体	MingLiU	7EC6660E4F53
新细明体	PMingLiU	65B07EC6660E4F53

　　　　　　　　为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

　　　　3、font：字体复合属性

　　　　　　（1）特点：将字体的样式的值统一写到font中，不同值间用空格隔开；

　　　　　　（2）结构：

body {
     font: font-style font-weight font-size/line height font-family;
    }

　　　　　　前面可省略，但最后两项，font-size和font-family必须有且遵循顺序；

　　　　　　优点：使用简写属性也会有一个比较好的性能；

6、CSS文本属性

　　　　Text属性可定义文本的外观，比如文本的颜色、对齐、装饰、文本缩进、行间距；

属性	表示	注意点
color	文本颜色	英文单词；十六进制 #fff（常用）；RGB值
text-align	文本对齐	center/left/right/justify(两端对齐)
text-decoration	文本修饰	下划线：underline；取消：none（常用）
text-indent	文本缩进	段落首行缩进，text-indent：2em；
line-height	行高	调整行与行之间的距离

text-shadow	文本阴影	：水平偏移垂直偏移模糊程度模糊颜色
text-transform	大小写转换	大uppercase；小lowercase；首大写capitalize
letter-spacing	字符间距
word-spacing	单词间距	只对英文起作用，设置空格多少，单位px

　　　　1、color：文本颜色

　　　　　　CSS颜色的表达形式有三种：（1）使用颜色的单词；（2）RGB代码；（3）十六进制；

　　　　　　（1）颜色的英文单词：

p {
    color: red;
}

　　　　　　（2）RGB值：

　　　　　　　　RGB是指通过Red,Green,Blue三元色的不同浓度，来表示出不同的颜色；

p {
    color: RGB(255,0,0); /* 以表示颜色浓度的数值表示 0-255 */
    color: RGB(100%,0%,0%); /* 以百分数表示浓度 0-100%，最后转为数字 */
}

　　　　　　（3）十六进制

　　　　　　　　使用十六进制RGB的值表示颜色：三组两位的十六进制表示颜色，每组表示一个颜色；每组范围：00-ff 即0-255；

p {
    color: #ff0000;/* 可简写为#f00 */
}

　　　　　　RGBA：表示透明度；可选值：0—1的值，完全透明—完全不透明；

　　　　2、text-align：水平文本对齐方式

　　　　　　可选值：center/left/right/justify（两端对齐)

　　　　　　通过调整文本之间的空格的大小，来达到一个两端对齐的目的

.pic {
/*想要图片居中对齐，则让他的父亲p标签添加水平居中的代码*/
    text-align: center;
}

　　　　3、text-decoration：修饰文本

　　　　　　可选值：Underline（下划线) / overline（上划线）/ line-through（删除线）/ none

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

　　　　4、text-indent：文本首行缩进（缩进em字节）

　　　　　　一般都会使用em作为单位正值向右移，负值左移，可以将不想显示的字隐藏起来；

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

　　　　5、行间距

　　　　　　（1）特点：

- - - 行间距包括：文本高度，上间距和下间距；
    - 文字默认在行高中垂直居中；
    - CSS中并没有提供一个设置行间距的单独方式，而是通过行高间接设置，行高越大，间距越大；
    - 对于单行文本，可以将行高设置为和父元素高度一致；可以使单行文本在父元素中垂直居中；

　　　　　　（2）行间距的设置：

/* 1、直接指定大小（ px或者% ）*/
   p {
      /* line-height: 10%; */
      line-height: 10px;
    }

/* 2、通过行高指定：指定行高,字体大小后添加 / 指定行高，行高越大间距越大，行间距=行高-字体=50-30=20 */

.p2 {
     font-size: 30px/50px "微软雅黑"；
   }

/* 3、设置字体相应的倍数:line-height:1; */

　　　　6、行高和高度的三种关系

- - - 如果行高等高度文字会垂直居中
    - 如果行高大于高度文字会偏下
    - 如果行高小于高度文字会偏上

7、CSS背景

　　　　背景属性可以设背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定；

　　　　应用场景：网页扒图片，超大的图片或者小图标及logo等都使用背景图片，然后通过定位调节背景图片位置；

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x 和 y坐标，切记如果有精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll/fixed
背景简写	更简单	背景颜色背景图片地址背景平铺背景滚动背景位置; 他们没有顺序
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值

　　　　1、background-color：颜色值

　　　　　　为元素设置背景颜色；若不设置，默认透明transparent，实际会显示父元素的背景颜色；

　　　　2、background-image：背景图片

background-image : none | url (images/demo.png)

　　　　　　为元素指定背景图片；

- - - 如果背景图片大于元素大小，默认显示图片左上角；
    - 如果背景图片小于元素大小，则会默认将图片平铺，直到填满页面；
    - 可以同时为一元素设置背景颜色和背景图片，背景颜色会作为底色（常用）
    - 插入图片和背景图片区别

1. 1. 1. 插入图片我们用的最多比如产品展示类移动位置只能靠盒模型 padding margin
    2. 背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

 img {  
         200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入当图片也是一个盒子 */
    }

 div {
         400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    }

　　　　3、background-repeat：背景平铺方式

background-repeat : repeat | no-repeat | repeat-x | repeat-y

　　　　可选值：

参数	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

background-size：cover；布满全局最小；

　　　　4、background-position：背景图片位置

　　　　　　精确调整背景图片在元素中的位置；背景图片默认贴着元素左上角显示；

　　　　　　position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。

参数	值
position	top \| center \| bottom \| left \| center \| right 方位名词
length	百分数 \| 由浮点数字和单位标识符组成的长度值

　　　　　　（1）指定的两个值都是方位名词，则两个值前后顺序无关；如果只给出一个值，则第二个值默认center；

　　　　　　（2）如果position 后面是精确坐标，第一个肯定是 x ,第二个一定是y；

　　　　　　　　如果只指定一个，则第一个是x坐标，第二个默认是center；

　　　　5、background-attachment：背景附着

　　　　　　用来设置背景图片是否固定或随页面一起滚动，后期做视差滚动效果；

background-attachment : scroll | fixed

　　　　　　可选值：

参数	作用
scroll	背景图像是随窗口对象内容滚动
fixed	背景图片固定在某位置，相对于浏览器，不随窗口滚动；文字动，背景不动；不随窗口滚动的元素一般给body设置，不给其他标签设置；

　　　　6、background：简写属性

　　　　　　没有顺序要求和数量要求；不设置的为默认值；

　　　　　　通常：background:背景颜色背景图片背景平铺背景图片滚动背景位置

body {
    background: black url(images/bg.jpg) no-repeat fixed center top;
}

    <style>
        .bg {
            width: 800px;
            height: 500px;
            background-color: pink;
            /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
            background-image: url(images/l.jpg);
            /*背景图片不平铺*/
            background-repeat: no-repeat;
            /*背景位置*/
            /*background-position: x坐标 y坐标;*/
            /*background-position: right top; 右上角*/
             /*那么第一个，肯定是 x 是 50   第二的一定是y 是 10*/
            /*background-position: 50px 10px ;*/
            /*以下说明  x 10像素  y 垂直居中的*/
            /*background-position: 10px center;*/
            background-position: center 10px;

        }
    </style>

　　　　7、背景图片透明（CSS3）

　　　　　　语法：

background: rgba(0, 0, 0, 0.3);

　　　　　　alpha是透明度，范围0-1；0.3可简写为.3;

　　　　　　因为是CSS3 ，所以低于 ie9 的版本是不支持的

　　　　　　IE6:半透明背景 filter:alpha（opacity=50），范围0-100；

　　　　　　案例：

<style>
    .nav a {
        display: inline-block;
        width: 120px;
        height: 58px;
        background-color: pink;
        text-align: center;
        line-height: 58px;
        color: #ffffff;
        text-decoration: none;
        }
    /* .nav .bg1 {
          background: url() no-repeat;
        } */
</style>
</head>
<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>

8、盒子模型

　　　　css学习三大重点： css 盒子模型、浮动、定位

　　　　网页布局的本质：

- - - 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
    - 最后把网页元素比如文字图片等等，放入盒子里面。

　　　　　　　　　　　盒子是网页布局的关键点

　8.1、格式

　　　　一、作用：

　　　　　　　　盒子模型（BOX）也叫框模型：在网页中，一切皆是盒子，是一个盛装内容的容器；

　　　　　　　　css处理页面时，每个html元素都看作包含在一个不可见的盒子里；

　　　　　　　　盒子默认矩形，对网页进行布局就等同于摆放盒子；

　　　　二、结构：

　　　　　　　　盒子分四部分：内容区（content）、边框（border）、内边距（padding）、和外边距（margin）组成。

　　　　　　1、内容区（content）：

- - 内容区是盒子中放置内容的区域，元素中的文本内容；
  - 如果没有设置内边距和边框，则内容区的大小默认是和盒子大小一致；
  - width和height设置的是内容区宽度和高度，而非整个盒子的大小，此外，width和height只适合块元素；

　　　　　　2、边框（border）：

border : border-width || border-style || border-color 
border: 1px solid red;  没有顺序

　　　　　　（1）作用：元素可见框的最外部；边框会影响盒子大小，测量时需减去；

　　　　　　（2）样式：要为一个元素设置边框必须指定三个样式：width/style/color;

border-style：solid（实线）dotted（点）dashed（虚线）double（双线）

　　　　　　注意：

- - 大部分的浏览器中，边框的宽度和颜色都是默认值；而边框的样式style默认值都是none，所以前两者不写也可出现边框，样式不写就无法显示；所以border-style必须写；
  - CSS中还可以单独设置某边的样式，如 border-xxx-style，xxx的值可能是top right bottom left；其余同理；
  - 若想设置除一边之外的三边统一设置：

    border：red solid 10px； 
    border-right：none；

　　　　　　（3）表格相邻边框合并，细线边框；

border-collapse：collapse；

　　　　　　3、内边距（padding）：

　　　　　　　　（1）作用：盒子内容区与边框间的距离；内边距会影响盒子的可见框大小，测量需减去（双倍两侧）；盒子的大小由内容区、内边距和边框共同决定；

　　　　　　　　（2）格式：padding：10px；

　　　　　　　　（3）属性：padding-top/right/bottom/left 逆时针方向；

　　　　　　　　（4）盒子的实际的大小 = 内容的宽度和高度 + 两侧内边距 + 两侧边框

　　　　　　　　　　盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width

　　　　　　　　（5）应用场景：padding可以撑开盒子，巧妙运用，常用于制作导航栏；

　　　　　　　　　　因为每个导航栏里的字数不一样，所以不给盒子设置宽度，直接给padding撑开；

　　　　　　　　（6）注意：如果盒子本身没给宽高，则padding则不会撑开；

　　　　　　　　（7）内边距导致的问题：会撑大原来的盒子

　　　　　　　　　　解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小；

　　　　　　4、外边距（margin）：

　　　　　　　　（1）作用：元素边框与周围元素相距的空间；即当前盒子与其他盒子之间的距离；不会影响可见框的大小，只是影响盒子的位置；

　　　　　　　　（2）盒子有四个方向的外边距，页面中的元素都是靠左上摆放的，当设置上和左外边距时，会导致盒子自身发生变化；当设置右和下边距会挤其他盒子，改变其他盒子的位置；

　　　　　　　　（3）外边距可以指定正负值，负值反方向移动；

　　　　　　　　（4）垂直方向框如果设置为auto，则外边框默认是0；

　　　　　　　　（5）当左右外边距（水平方向）设置为auto时，浏览器会将左右外边距设置为相等，将外边框设置为最大值；前提是盒子设置了高度；

　　　　　　5、文字居中和盒子居中区别

　　　　　　　　（1）盒子内的文字水平居中是 text-align: center；而且还可以让行内元素和行内块居中对齐

　　　　　　　　（2）盒子内的文字垂直居中是 line-height= 高度；

　　　　　　　　（3）块级盒子水平居中左右margin 改为 auto

    text-align: center; /*  文字 行内元素 行内块元素水平居中 */
    line-height: height;
    margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */
    .box {
      margin：0 auto;
    }

　8.2、外边距合并导致的问题

　　　　我们根据稳定性来分，建议如下：按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。 ``` width > padding > margin ```

　　　　原因： - margin 会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。 - padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。 - width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

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

　　　　主要会出现两种情况：

- - 相邻块元素垂直外边距的合并——外边距重叠；
  - 嵌套块元素垂直外边距的塌陷；

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

　　　　　　　　- 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，

　　　　　　　　- 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是 **取两个值中的较大者** 这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。如100 100取100；

　　　　　　　　如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素；

　　　　　　　　解决：尽量只给一个盒子设置margin值；

　　　　　　2、嵌套块元素垂直外边距的合并（塌陷）

　　　　　　　　- 对于两个嵌套关系(父子)的块元素，如果父元素没有上内边距及边框

　　　　　　　　- 父元素的上外边距会与子元素的上外边距发生合并 - 合并后的外边距为两者中的较大者

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

　　　　　　　　解决：

　　　　　　　　　　1、为父元素设置上边框border隔开；设置属性会增加像素，可以在宽高上减去；

　　　　　　　　　　2、为父元素设置上内边距padding-top；但是最后要在高度减去100px；

　　　　　　　　　　3、若想不使他重叠：在两个块元素div间添加其他，则不相邻，不重叠；

　　　　　　　　　　4、为父元素添加overflow：hidden；

    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            /*嵌套关系 垂直外边距合并  解决方案 */
            /*1. 可以为父元素定义上边框  transparent 透明*/
            /*border-top: 1px solid transparent;*/
            /*2. 可以给父级指定一个 上 padding值*/
            /*padding-top: 1px; */
            /*3. 可以为父元素添加overflow:hidden。*/
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

　　　　　　有了浮动，定位就不会有外边距塌陷的问题了；

　8.3、清除内外边距

　　　　浏览器为了在页面中不设置样式时，也可以有很好的显示效果，所以浏览器为很多的元素都设置了一些默认的margin和padding。而这些默认样式，正常情况下不需要；所以使用前需要去掉；

　　　　清除浏览器默认样式；

* {
    margin：0；/* 清除内边距 */
    padding：0； /* 清除外边距 */
}

　　　　行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

　8.4、内联元素的盒模型：

　　　　特点：

　　　　　　1、内联元素只占本身大小，水平排列，一行可放多个；

　　　　　　2、内联元素不能设置width和height；

　　　　　　3、水平内边距padding可以设置；垂直内边距虽然可以设置，但不会影响布局；

　　　　　　4、可以设置边框，但垂直方向不会影响布局；

　　　　　　5、内联元素不支持垂直外边距margin-top、margin-bottom；

9、CSS元素的显示与隐藏

　9.1、元素的显示模式

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行一个	可设置宽高	整行	包含任何标签
行内元素	一行多个	不可直接设置宽高	本身	容纳文本或其他行内
行内块元素	一行多个块级	可设置宽高	本身

　9.2、display标签显示模式转换

　　　　display属性：设置一个元素如何显示

　　　　　　（1）作用：

- - - 通过diaplay样式可以修改元素的类型，将一个内联元素变成块元素；
    - 内联元素不能设置width、height、margin-top、margin-bottom，但通过display转为块元素后可设置宽高；
    - display：none隐藏元素后，不在占有原来的位置；

　　　　　　（2）可选值：

- - - none:隐藏元素；页面中不显示，并且元素在页面中不占位；
    - inline：可以将一个元素设置为内联元素，横向排列；
    - block：可以将一个元素设置为块元素，纵向排列；
    - inline-block：将一个元素设置为行内块元素；可以使一个元素既有行内元素的特点，又有块元素特点；既可以设置宽高，又不独占一行；

　9.3、元素的隐藏

属性	语法	描述	特点
display	display：none；	隐藏元素，页面中不显示	元素在页面中不占位
visible	visible： hidden;	指定一个元素是可见还是隐藏	元素隐藏后占位
overflow	overflow:hidden；	内容溢出一个元素的框（超过其指定高度及宽度）时，元素隐藏，以免影响布局	只是对于溢出的部分处理

　　　　　　注意：对于有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

　　　　　　overflow属性值：

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

　　　　　　导航栏案例

　　　　　　　　注意，实际重要的导航栏中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。

1. 1. li+a 语义更清晰，一看这就是有条理的列表型内容。
  2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

　　　　　　案例：简洁版小米侧边栏

- - 将链接转为块元素，这样链接就可以独占一行，并有宽高；
  - 鼠标经过a 给连接设置背景颜色；

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

        li {
            list-style: none;
        }

        ul {
            background-color: #55585a;
            width: 230px;
        }

        ul li {
            width: 230px;
            height: 40px;
            line-height: 40px;
        }

        ul li a {
            /* display: block; */
            font-size: 14px;
            color: #ffffff;
            text-decoration: none;
            text-indent: 2em;
        }

        ul li:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
     <ul>
         <li><a href="#">手机 电话卡</a></li>
         <li><a href="#">电视 盒子</a></li>
         <li><a href="#">笔记本 平板</a></li>
         <li><a href="#">出行 穿戴</a></li>
         <li><a href="#">智能 路由器</a></li>
         <li><a href="#">健康 儿童</a></li>
    </ul>
</body>

</html>

View Code

　　　　　　案例：新浪导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪导航栏案例</title>
    <style>
    /*清除元素默认的内外边距*/
        * {
            margin: 0;
            padding: 0;
        }
        .nav {
            height: 41px;
            background-color: #FCFCFC;
            /*上边框*/
            border-top: 3px solid #FF8500;
            /*下边框*/
            border-bottom: 1px solid #EDEEF0;
        }
        .nav a {
            /*转换为行内块*/
            display: inline-block;
            height: 41px;
            line-height: 41px;
            color: #4C4C4C;
            /*代表 上下是 0  左右是 20 内边距*/
            padding: 0 20px;
            /*background-color: pink;*/
            text-decoration: none;
            font-size: 12px;
        }
        .nav a:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>
</html>

View Code

　　　　　　案例：蓝牙耳机

　　　　错误~！

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

        body {
            background-color: #f5f5f5;
        }
        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
        }
        .box img {
            width: 100%;
            background-color: pink;
        }
        .review {
            height: 70px;
            padding: 0 28px;
            margin-top: 30px;
            font-size: 14px;
        }
        .appraise {
            margin-top: 20px;
            font-size: 14px;
            color: #b0b0b0;
            padding: 0 28px;
        }
        .info {
            margin-top: 15px;
            padding: 0 28px;
            font-size: 14px;
        }
        .info h4 {
            display: inline-block;
            font-weight: normal;
        }
        .info span {
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../1.png" alt="">
        <p class="review">快递牛，整体不错蓝牙可以说秒连，红米给力</p>
        <div class="appraise">来自于***的评价</div>
        <div class="info">
            <h4>Redml AirDots真无线蓝...|</h4>
            <span>99.9元</span>
        </div>
    </div>
</body>

View Code

　　　　还有一个竖线：方法：加<em>里然后去除斜体加颜色；再加上链接；

10、CSS3——圆角边框

　　　　原理：

　　　　　　border-边框；radius-半径；

　　　　　　假如给一个矩形盒子设置圆角边框，给border-radius：length指定一个数值，绘制一个以length为半径的圆，让这个圆分别与矩形的四个边框相切，得出一个圆弧

　　　　　　　　1、语法：

border-radius：length; //  数值或百分比的形式
border-radius: 50%; // 让一个正方形  变成圆圈
border-radius: 左上角 右上角  右下角  左下角 逆时针顺序;

　　　　　　　　2、特点：数值越大，圆角的幅度越大，越明显；

　　　　　　　　3、设置方法：

　　　　　　　　　　（1）参数值可以是数值或百分数；

　　　　　　　　　　（2）若是正方形想设置一个圆，就把数值改为高度或是宽度的一半即可，或50%；

　　　　　　　　　　（3）若是矩形，改为高度一半即可；

　　　　　　　　　　（4）可简写也可分开写：四个值分别代表：左上角右上角右下角左下角；

　　　　　　　　　　若只设置两个值，则是对角线形式；

　　　　案例：设置圆形、椭圆形

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

        .radius {
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 10px 20px 30px 40px;
        }

        .yuan {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }
        .juxing {
            width: 300px;
            height: 100px;
            background-color: red;
            border-radius: 50px;
        }
</style>
</head>
<body>
    <div class="yuan"></div>
    <div class="juxing"></div>
    <div class="radius"></div>
</body>

11、阴影

　11.1、盒子阴影

　　　　1、语法：

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；
box-shadow：h-shadow v-shadow blur spread color inset;

　　　　2、特点：

- - 盒子阴影不占用空间，不会影响其他盒子排列。

　　　　3、属性：

- - 前两个属性是必须写的。其余的可以省略。
  - 外阴影 (outset) 是默认的但是不能写 ;想要内阴影可以写 inset

值	描述
h-shadow	必须，水平阴影位置，允许负值
v-shadow	必须，垂直阴影位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外部阴影改为内部阴影

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) inset;
    }
</style>

　11.2、文字阴影

　　　　1、语法：

text-shadow: h-shadow v-shadow blur color;

　　　　2、属性：

h-shadow、 v-shadow、 blur、 color

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

　　　　　　网页布局的本质是用css摆放盒子；

　　　　　　网页布局的三种传统方式有：文档流（标准流）/ 浮动 / 定位；

　12.1、文档流

　　　　　　文档流处在网页的最底层，表示一个页面中的位置，像地基一样的东西；

　　　　　　我们所创建的元素都默认在文档流里；

　　　　　　　　1、块元素会独占一行，从上到下顺序排列（按列排列）；

　　　　　　　　　　常用块元素：<div> <hr> <h1> <p> <ul> <ol> <form> <table>

　　　　　　　　2、行内元素会按照顺序，从左到右顺序排列（按行排列），碰到父元素边缘自动换行；

　　　　　　　　　　常用行内元素：<span> <a> <i> <em>

　　　　　　　　　　以上都是标准流的布局；

　12.2、浮动float

　　　　　　1、为什么需要浮动？

　　　　　　　　很多布局标准流无法完成，需要借助浮动完成布局，因为浮动可改变元素的默认排列方式；

　　　　　　　　典型应用：可以让多个块元素（盒子）在一行内排列；

　　　　　　　　（块元素转为行内块也可实现一行显示，但是中间有空白缝隙）

　　　　　　2、什么是浮动？

　　　　　　　　利用float属性创建浮动框，将其移动到一边，直到左右边缘或遇另一个浮动框边缘；

　　　　　　　　概念：元素的浮动是指设置了浮动属性的元素会

- - - 脱离标准普通流的控制
    - 移动到指定位置

　　　　　　格式：选择器 { float：none/left/right }

　　　　　　3、浮动特性：

　　　　　　　　（1）浮动元素脱离原来的文本流（脱标），不再占位；

　　　　　　　　（2）浮动的元素会在一行内显示且元素顶部对齐；

　　　　　　　　（3）浮动的元素具有行内块元素的性质，若给span浮动，则不需转换为行内块；

　　　　　　　　（4）浮动的元素是紧贴在一起的，无缝隙，若一行装不下，另起一行；

　　　　　　　　（5）浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围；可以通过浮动设置文字环绕图片效果；

　　　　　　　　（6）文档流中，子元素宽度默认占父元素全部；

　　　　　　4、块元素和行内元素都可以设置浮动，当行内元素设置浮动以后，脱离文档流，将会自动变成一个块元素；

　　　　　　　　但当一个块元素浮动之后，宽度会默认被内容撑开，所以当漂浮一个跨级元素时会为他指定一个宽度；浮动元素默认会变成块元素，即使设置display：inline以后依旧是块元素；

　　　　案例：

　　　　　　若第一个粉色的盒子加了浮动，他就飘起来了，不会占位，下面的元素立即上移；

　　　　　　如果第一、三个盒子不浮动，第二个盒子浮动，则第一个div独占一行，2不浮上去；得出浮动的盒子只对它下面的元素有影响；

　　　　　　如果第一、三盒子浮动，第二个不浮动，则第二个上升第一个，第三个浮到挨着第二个；

<style>
    .box1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .box2 {
        width: 300px;
        height: 300px;
        background-color: rgba(0,153,255);
    }
</style>

　　　　浮动小结：

特点	说明
浮	加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。
漏	加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白缝隙

　　清除浮动

　　　　　　1、浮动引发的高度塌陷

　　　　　　　　文档流中，父元素的高度默认被子元素撑开，子元素多高，父元素多高；

　　　　　　　　但是当为子元素设置浮动之后，子元素会完全脱离文档流，导致子元素无法撑起父元素高度，导致父元素高度塌陷；

　　　　　　　　由于父元素高度塌陷，则父元素下的所有元素都会向上移动，导致页面布局混乱；所以开发中一定要避免塌陷问题的出现；

　　　　　　　　可以将父元素的高度写死，解决塌陷，但是一但将高度写死，父元素的高度将不能自动适应子元素的高度；不建议使用；

- - - 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
    - 准确地说，并不是清除浮动，而是清除浮动后造成的影响

　　　　　　2、清除浮动本质

　　　　　　　　清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

　　　　　　3、清除浮动clear

　　　　　　　　1、原理：

　　　　　　　　　　（1）清除其他元素的浮动对当前元素的影响，也就是说元素不会因为上方出现了浮动元素而改变位置；

　　　　　　　　　　（2）如果父盒子本有高度，则不需要清除浮动；

　　　　　　　　　　（3）清除浮动后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了；

　　　　　　　　2、为什么要清除浮动？父级没高度；子盒子浮动了；影响下面布局了；

　　　　　　　　3、方法：清除浮动的策略就是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外边的盒子；

　　　　　　　　4、可选值：None/left/right/both：清除两侧，清除对他影响最大的一侧；

语法：选择器{clear:属性值;} clear 清除

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

　　　　　　4、高度塌陷问题的解决——清除浮动方法：

- - - 额外标签法也称为隔墙法，是 W3C 推荐的做法。
    - 父级添加 overflow 属性
    - 父级添加after伪元素
    - 父级添加双伪元素

　　　　　　　　后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

　　　　　　　　1).额外标签法(隔墙法)--W3C推荐

　　　　　　　　　　在最后一个浮动的子元素后面添加一个额外的空标签（必须是块级元素），清除浮动样式；

　　　　　　　　　　例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

　　　　　　　　　　原理：由于这个div没有浮动，所以他是撑开父元素高度的，然后对其进行清除浮动，通过这个空白的div撑开父元素的高度，基本没有副作用；

- - - - 优点：通俗易懂，书写方便
      - 缺点：添加许多无意义的标签，添加了多余结构，结构化较差。

<head>
<style>        
    /*清除浮动*/
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="damao"></div>
        <div class="ermao"></div>
        <div class="clear"></div> // 额外标签法，div无意义
    </div>
    <div class="two"></div>
</body>

　　　　　　　　2).父级添加overflow属性方法

　　　　　　　　　　可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。

　　　　　　　　　　之前清除外边距合并也用了 overflow；

　　　　　　　　　　原理：w3c标准，页面中的元素都有一个隐含的属性，叫做block formatting context，简称****BFC****;该属性可以设置打开或者关闭，默认关闭；

　　　　　　　　　　当开启元素的BFC后，元素将具有如下特性：

- - - - 父元素的垂直外边距不会和子元素重叠；
      - 开启BFC的元素不会被浮动元素覆盖；
      - 开启BFC的父元素可以包含浮动的子元素

　　　　　　　　　　　　　　优点：代码简洁

　　　　　　　　　　　　　　缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

　　　　　　　　　　　　　　如何开启BFC

- - - - 设置元素浮动；——虽然可以撑起父元素但会导致父元素宽度丢失，而且也会导致下面元素上移，不能够解决；
        
        设置元素绝对定位；——同上
        
        设置元素inline-block；——可以解决问题，会导致宽度丢失；
        
        不是直接开启的，间接的，会有副作用；
        
        将元素的overflow设置一个非visible得值；
        
        推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式；

overflow：auto/hidden；

　　　　　　　　　　　　　　　　在IE6以下浏览器不支持BFC；IE6虽然按不兼容BFC，但是有另一个隐藏的属性——haslayout，作用和BFC相似，IE6可以通过haslayout解决该问题；

　　　　　　　　　　　　　　　　开启父元素的haslayout： zoom：1；

- - - - zoom是放大的意思，后面跟一个数值，表示将元素放大几倍；
        
        zoom：1；表示不放大元素，但是通过该样式开启haslayout，
        
        zoom样式在IE支持，在火狐和其他不兼容；

　　　　　　　　3).父级添加after伪元素 :after

　　　　　　　　　　:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

　　　　　　　　　　若不想添加div，又想解决塌陷，可通过css添加after伪类，选中box1的两边，after向元素的最后边添加一个空白的块元素，然后对其清除浮动（闭合浮动）；这样和添加一个div的原理一样，得到相同的效果；而且没有在页面里添加多余的div；

　　　　　　　　　　使用方法：

.clearfix :after {
                /*添加一个内容*/
                content: "";
                /*转换为一个块元素 默认是行内元素*/
                display: block;
                /*清除两侧的浮动*/
                clear: both;
                height: 0; 
                visibility: hidden; 
            }
        /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理 */

            .clearfix{
                zoom：1;
            }   /* IE6、7 专有 */

- - - 优点：符合闭合浮动思想结构语义化正确
    - 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
    - 代表网站：百度、淘宝网、网易等

　　　　　　　　4).父级添加双伪元素

　　　　　　　　　　解决父子元素的外边距重叠：使用空的table标签可以隔离父元素和子元素的外边距，阻止外边距的重叠；

　　　　　　　　　　display：table可以将元素作为一个表格显示；

　　　　　　　　　　修改后的clearfix是一个多功能，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

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

        .clearfix {
            zoom: 1;

        }

- - - 优点：代码更简洁
    - 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
    - 代表网站：小米、腾讯等

　　　　　　　　清除浮动总结

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

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持:after，兼容性问题

　　图片质量问题

　　　　一、PNG24图片格式问题

　　　　　　1、问题：IE6中对图片格式PNG24支持度不高，如果使用，会导致效果无法正常显示；

　　　　　　2、解决：

- - - 使用png8代替png24，利用ps操作，文件存储为web格式，但清晰度下降；
    - 利用javascript解决，需要向页面中引入一个外部的js文件，写一个js代码处理这个问题；

　　　　　　　　　　（1）引入js方法：

　　　　　　　　　　　　　　在<body>标签的最后引入外部js文件，相当于link；

<script type="text/javascript" src="script.js"> </script>

　　　　　　　　　　（2）然后要再创建一个新的<script>标签，并编写js代码；

<script type="text/javascript>
    DO-belatedPNG.fix("div");修复
</script>

　　　　二、hack浏览器版本问题

　　　　　　css hack 实际是一个特殊的代码，只有部分浏览器能识别；所以用来为一些浏览器设置特殊代码；

　　　　　　方式一：

- - - 若只想在一些如IE6等特殊的浏览器执行，IE10及以上不支持，可以用css hack来解决；
    - 但css hack不推荐使用，它等同于bug，后期不好维护；
    - 条件hack，只对IE浏览器有效，其它都视为注释；IE10及以上不支持；

　　　　　　　　　　以下内容只会出现在IE6，后面跟的是版本；

<!-- [if IE 6]-->
    <p></p>
<!-- [endif]-->

　　　　　　　　　　以下内容只会出现在IE9以下浏览器；

<!-- [if lte IE 6]-->

　　　　　　方式二：

- - - 在样式前面添加下划线 —，则该样式只有IE6及以下浏览器可以实现；

　　　　三、IE6的双边距问题

　　　　　　在IE6中，当为一个向左浮动的元素设置左外边距，或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的2倍——IE6的双边距问题：

　　　　　　解决：

　　　　　　　　通过添加display：inline样式来解决IE6的双边距问题，虽然对于一个浮动元素来说设置行内块元素没有任何意义，但可以解决双边距问题；

.box1 {
     100px;
    height: 100px;
    float: left;
    
    display: inline;
    background-color: red;
    margin-left: 100px;
}

　12.3、position定位

　　　　　　Positon使用场景：标准流和浮动都无法实现的效果，采用定位；

　　　　　　　　（1）浮动可以让多个块盒子一行没有缝隙排列，用于横向排列盒子；

　　　　　　　　（2）定位则是让盒子自由的在某个盒子内移动位置或滚动窗口时固定在屏幕中心某个位置，并且可以压住其他盒子；

　　　　　　当开启了元素的定位（position属性是一个非static值）时，可以通过left right top bottom四个属性来设置元素的偏移量；

　　　　　　如：left：元素相对于其定位位置的左侧偏移量；脑海应该有三种布局机制的上下顺序：标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）通常偏移量只用两个方向属性就可以对元素定位，相当于x y;坐标的概念：

　　　　　　例：

p {
    position：relative；
    left：100px；
    top：200px；
}

　　　　　　注意：

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

　　　　1、定位模式：

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

　　　　　　1、相对定位：relative

　　　　　　　　（1）当开启了相对定位以后，而不设置偏移量时，元素位置不会发生任何变化：

　　　　　　　　（2）相对定位是相对于元素在文档流中 原来的位置进行定位；

　　　　　　　　（3）相对定位的元素不会脱离文档流，元素在文本流的位置不会改变，还会占位；

　　　　　　　　（4）相对定位会使元素提升层级，定位元素盖住元素；

　　　　　　　　（5）相对元素不会改变元素的性质，块还是块，内联还是内联；

　　　　　　2、绝对定位：absolute

　　　　　　　　（1）特点：

- - - - 开启绝对定位，会是元素完全脱离文档流，不再占位；
      - 如果不设置偏移量，元素的位置不会发生变化；
      - 绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的，如果所有的祖先元素都没有开启定位，则会按照浏览器窗口（左上角）进行定位，通常用于轮播图；
      - 绝对定位会使元素提升层级；
      - 绝对定位会改变元素的性质，内联（行内）元素会变成块元素，块元素宽和高都被内容撑开；

　　　　　　　　（2）绝对定位的盒子居中

　　　　　　　　　　　　加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

　　　　　　　　（3）子绝父相

　　　　　　　　　　　　子级是绝对定位的话，父级要用相对定位；

　　　　　　　　　　　　子盒子不需要占有位置，则是绝对定位，父级需要占位置，所以是相对定位；

　　　　　　3、固定定位：fixed

- - - 固定定位也是一种绝对定位，他的大部分特点和绝对定位一样；
    - 不同的是固定定位永远相对于浏览器窗口（页面可视区）定位；
    - 固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动；

　　　　　　　　　　① 固定定位小技巧：固定在版心右侧

　　　　　　　　　　　　　　小算法：

- - - - 让固定定位的盒子left：50%，走到浏览器可视区（版心）的一半位置；
      - 让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了；

　淘宝轮播图：

　　　　　　　　　　　　　　① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

　　　　　　　　　　　　　　② margin-left: -100px;：让盒子向左移动自身宽度的一半transition：50% 自身宽度一半

　　　　　　　　　　② 固定定位特点：　　

　　　　　　　　　　　　（1）IE6不支持固定定位；

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

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

　　　　　　　　　　　　　　　　但是绝对定位（固定定位）会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

　　　　　　　　　　　　　　　　注意：脱标的盒子不会触发外边距塌陷，浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

　　　　　　4、粘性定位：sticky（了解）

　　　　　　　　　　（1）特点：

- - - - 以浏览器的可视窗口为参照点1移动元素（固定定位特点）
      - 粘性定位占有原先的位置（相对定位特点）
      - 必须添加top left right bottom其中的一个才有效；跟页面滚动搭配使用，兼容性差，IE不支持；

　　　　　　　　　　（2）语法：

p {
    Position：sticky；
    top：10px;
}

　　　　　　5、静态定位：static

.promo-nav {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -35px;
     70px;
    height: 13px;
    background: rgba(255,255,255,.3);
    border-radius: 7px;
}

固定定位案例：

固定定位的应用场景：固定在浏览器可视窗口某个位置的布局；
在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度

　　　　步骤 1 —— 顶部图片和底部内容

.top {
    /* 注意：使用固定定位时，如果盒子中没有内容，需要指定宽度 */
     100%;
    height: 44px;
    background: url(images/top.png) no-repeat top center;
    position: fixed;
    left: 0px;
    top: 0px;
}

.box {
     1002px;
    /* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
    margin: 44px auto;
}

注意：

在使用固定定位时，如果盒子中没有内容，需要指定宽度
设置底部内容图片的顶部 margin，可以让底部盒子初始显示在顶部图片的下方。

　　　　步骤 2 —— 左右两侧广告

.ad-left,
.ad-right {
    position: fixed;
    top: 100px;
}

.ad-left {
    left: 0px;
}

.ad-right {
    right: 0px;
}

注意：不要同时使用 left 和 right 和边偏移属性。

定位：

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

<head>
    <meta charset="UTF-8">
    <title>绝对定位以带有定位的父级元素来移动位置</title>
    <style>
        .yeye {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            position: absolute;
        }

        .father {
            width: 350px;
            height: 350px;
            background-color: pink;
            margin: 100px;
            /*标准流的子盒子总是以父级为准移动位置*/
            /*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/
            /*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/
            /*position: relative;*/
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            /*margin-left: 100px;*/
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>

</html>

　定位的扩展

　　　　2.1 绝对定位的盒子居中

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

　　　　　　在使用绝对定位时要想实现水平居中，

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

　　　　2.2 盒子居中定位示意图

　　　　2.3 堆叠顺序（z-index）

　　　　　　在使用定位布局时，可能会出现盒子重叠的情况，z-index只能用于定位。加了定位的盒子，默认**后来者居上**，后面的盒子会压住前面的盒子。应用 `z-index` 层叠等级属性可以**调整盒子的堆叠顺序**。

　　　　　　　　z-index 的特性如下：

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

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

　　　　2.4 定位改变display属性

　　　　　　前面我们讲过， display 是显示模式，可以改变显示模式有以下方式:

- - - 可以用inline-block 转换为行内块
    - 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
    - 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

　　　　　　　　　　所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

完善新浪导航案例

　　　　　　同时注意：

　　　　　　　　浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）

　　　　　　　　也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

相关阅读:
ES6常用语法简介
 webpack核心概念
 前端模块化规范详解
 使用Node.js原生代码实现静态服务器
 Node.js脚手架express与前段通信【socket】
临门一脚- Node.js
redis缓存穿透和雪崩
 redis哨兵模式
 redis主从复制
 redis发布订阅
原文地址：https://www.cnblogs.com/xinxinzi/p/14377540.html

CSS简述

1. CSS基础

1.1 什么是CSS?

1.2 层叠样式表

2. CSS基本结构

2.1 书写位置

2.11、行内样式

2.12、内部样式

2.13、外部样式

2.14、三种样式对比

2.2、语法规范

3、CSS选择器

3.1、基础选择器

3.11、标签选择器：标签名 { }

3.12、类选择器：.class属性值{ }

3.13、id选择器：#id属性值{ }

3.14、通配选择器 *{ }

3.2、复合选择器

3.21、后代元素选择器：父元素 后代元素{ }

3.22、子元素选择器：父元素 > 子元素（直接后代，亲儿子）

3.23、并集选择器：元素1，元素2，元素n { 样式声明 }

3.24、伪类选择器

3.25、选择器按元素之间的关系分类：

4、CSS三大特性

4.1、继承性（样式的继承）

4.2、层叠性

4.3、优先级（权重）

5、字体样式

6、CSS文本属性

7、CSS背景

8、盒子模型

8.1、格式

8.2、外边距合并导致的问题

8.3、清除内外边距

8.4、内联元素的盒模型：

9、CSS元素的显示与隐藏

9.1、元素的显示模式

9.2、display标签显示模式转换

9.3、元素的隐藏

10、CSS3——圆角边框

11、阴影

11.1、盒子阴影

11.2、文字阴影

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

12.1、文档流

12.2、浮动float

清除浮动

1).额外标签法(隔墙法)--W3C推荐

2).父级添加overflow属性方法

3).父级添加after伪元素 :after

4).父级添加双伪元素

12.3、position定位

1、定位模式：

固定定位案例：

定位：

定位的扩展

2.1 绝对定位的盒子居中

2.2 盒子居中定位示意图

2.3 堆叠顺序（z-index）

2.4 定位改变display属性

同时注意：

　1.1 什么是CSS?

　1.2 层叠样式表

　2.1 书写位置

　　　　2.11、行内样式

　　　　2.12、内部样式

　　　　2.13、外部样式

　　　　2.14、三种样式对比

　2.2、语法规范

　3.1、基础选择器

　　　　3.11、标签选择器：标签名 { }

　　　　3.12、类选择器：.class属性值{ }

　　　　3.13、id选择器：#id属性值{ }

　　　　3.14、通配选择器 *{ }

　3.2、复合选择器

　　　　3.21、后代元素选择器：父元素后代元素{ }

　　　　3.22、子元素选择器：父元素 > 子元素（直接后代，亲儿子）

　　　　3.23、并集选择器：元素1，元素2，元素n { 样式声明 }

　　　　3.24、伪类选择器

　　　　3.25、选择器按元素之间的关系分类：

　4.1、继承性（样式的继承）

　4.2、层叠性

　4.3、优先级（权重）

　8.1、格式

　8.2、外边距合并导致的问题

　8.3、清除内外边距

　8.4、内联元素的盒模型：

　9.1、元素的显示模式

　9.2、display标签显示模式转换

　9.3、元素的隐藏

　11.1、盒子阴影

　11.2、文字阴影

　12.1、文档流

　12.2、浮动float

　　清除浮动

　　　　　　　　1).额外标签法(隔墙法)--W3C推荐

　　　　　　　　2).父级添加overflow属性方法

　　　　　　　　3).父级添加after伪元素 :after

　　　　　　　　4).父级添加双伪元素

　12.3、position定位

　　　　1、定位模式：

　定位的扩展

　　　　2.1 绝对定位的盒子居中

　　　　2.2 盒子居中定位示意图

　　　　2.3 堆叠顺序（z-index）

　　　　2.4 定位改变display属性

　　　　　　同时注意：