CSS

CSS

CSS介绍

现在的互联网前端分三层：

• HTML：超文本标记语言。从语义的角度描述页面结构。
• CSS：层叠样式表。从审美的角度负责页面样式。
• JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能

HTML的缺陷：

1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大

引入CSS 优点：

1. 使数据和显示分开
2. 降低网络流量
3. 使整个网站视觉效果一致
4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

CSS引入方式

1. 行内样式
   <p style="color: red">我是一个段落</p>
   行内样式优先级最高，一般CSS写在单独文档中引入，JS操作行内样式。
2. 内接样式

    <style>
        /*写CSS代码*/
        div{
            color: red;
        }
    </style>

3. 外接样式
   • 链接式
     <link rel="stylesheet" href="./index.css">
   • 导入式

   <style type="text/css">
       @import url('./index.css');
   </style>
   

CSS的选择器

• 基本选择器
• 高级选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器
• 通配符选择器

基本选择器

1. 标签选择器
   标签选择器可以选中所有的标签元素

/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

2. id选择器
   选中id,同一页面中的id不能重复，id命名规范：要以字母，可以有数字，下划线，大小写严格区分

        #pg{
            color: red; 
        }

3. 类选择器
   所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

 .big{
     font-size: 40px;
 }

总结：

• 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
• 每个类要尽可能的小，有公共的概念，能够让更多的标签使用
• 选用id还是CSS,尽可能的用class,id一般是用在js的。也就是说js是通过id来获取到标签

高级选择器

1. 后代选择器
2. 子代选择器
3. 并集选择器
4. 交集选择器

后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

<!--选择p标签下所有标签-->
.container p{
    color: red;        
}

子代选择器
用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

<!--只选择p标签-->
.container p{
    color: red;        
}

并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器

 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }

交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器.语法：div.active。它表示两者选中之后元素共有的特性。
比如要选择这个标签 <h4 class='active'></h4>

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}

属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

        /*找到属性有flag的标签*/
        [flag]{
            color: blue;
        }
        /*找到flag属性的等于233的标签*/
        [flag='233']{
            color: #000;
        }
        /*以....开头  ^ */
        [flag^='23']{
            color: #888c8e;
        }
        /*以....开头  $ */
        [flag$='33']{
            color: darkgreen;
        }
        /*包含某元素的标签* */
        [flag*='3']{
            color: #990000;
        }
        /*指定单词的属性*/
        label[flag~='23']{
            color: #ff002e;
        }

伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte

        /*没有访问过的a标签的样式*/
        a:link{
            color: #ff002e;
        }
        /*访问过后的a标签的样式*/
        a:visited{
            color: black;
        }
        /*鼠标悬停时a标签的样式*/
        a:hover{
            color: green;
        }
        /*鼠标摁住的时候a标签的样式*/
        a:active{
            color: #0f88eb;
        }

伪元素选择器

在一个标签内部加内容

        p:first-letter{
            color: red;
        }
        p:before{
            content: 'Bob';
        }
        /*经常使用，常用于清除浮动*/
        p:after{
            content: 'gg';
            color: blue;
        }

CSS的层叠性和继承性

继承性
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
记住：有一些属性是可以继承下来 ： color 、 font-、 text-、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

层叠性
层叠性： 权重大的标签覆盖掉了权重小的标签
权重： 谁的权重大，浏览器就会显示谁的属性。

1. 行内标签1000>id选择器100>类选择器10>标签选择器1，
2. 权重一样，后面覆盖前面
3. 继承来的属性权重为0，与选中的标签没有可比性
4. 如果是继承来的属性，就近原则
5. 如果是继承来的属性，一样近，回到数权重。

盒子模型

在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

盒模型的属性

• width：内容的宽度
• height: 内容的高度
• padding：内边距，边框到内容的距离
• border: 边框，就是指的盒子的宽度
• margin：外边距，盒子边框到附近最近盒子的距离

如果一个盒子设置了padding，border，width，height，margin
盒子的真实宽度=width+2padding+2border
盒子的真实宽度=height+2padding+2border

padding内边距

padding：就是内边距的意思，它是边框到内容之间的距离
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域

padding设置
写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

写综合属性，用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

一些标签默认有padding
比如ul标签，有默认的padding-left值。
做网站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置

可以使用通配符

*{
  padding:0;
  margin:0;    
}

但是，效率不高，可以使用并集选择器来选中页面中应有的标签。直接用别人写好的。

https://meyerweb.com/eric/tools/css/reset/

border(边框)

border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

按照3要素来写border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

<!--或者-->
bordr: 10px solid red;
<!--或者-->
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border:none；
border：0；
表示border没有设置样式。

使用border来制作小三角,圆

        /*小三角 箭头指向右方*/
        div {
            width: 0;
            height: 0;
            border-left: 10px solid red;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
        }
        /*画圆*/
        /*div{*/
            /*background-color: yellow;*/
            /*width: 500px;*/
            /*height: 500px;*/
            /*border-radius: 50%;*/
        /*}*/

margin

margin：外边距的意思。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

前提条件，在标准文档流下

• 左右方向没有问题
• 上下方向有塌陷问题，布局时只设置一个方向的。

当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。
margin-上下，出现塌陷问题

        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;

        }
        /*两个方向上都设置后，只会显示最大的*/
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

margin-父子，出现塌陷问题

        /*前提在标准流下*/
        .father {
            width: 400px;
            height: 400px;
            background-color: red;
            /*改进方法：父标签设置padding，子标签不再设置margin*/
            padding-top: 100px;
            padding-left: 100px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: black;
            /*margin-top: 100px;*/
            /*如果父级标签没有设置border，会将margin-top交给父级标签。。。*/
            /*解决方法，父级标签设置padding(子标签不再设置margin)，父级标签设置border*/
        }

版心设置(盒子居中)

        .container{
            width: 1266px;
            margin-left: auto;
            margin-right: auto;
            /*margin: 0 auto;*/
        }

标准文档流

什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下 ，像 “织毛衣”。而设计软件 ，想往哪里画东西，就去哪里画

现象

1. 空白折叠现象
   多个空格会被合并成一个空格显示到浏览器页面中，img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2. 高矮不齐，底边的对齐
   文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3. 自动换行，一行写不完，换行来写
   如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

块级元素和行内元素

行内元素和块级元素的区别

行内元素：

• 与其他行内元素并排；
• 不能设置宽、高。默认的宽度，就是文字的宽度。
  块级元素：
• 霸占一行，不能与其他任何元素并列；
• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

从HTML的角度来讲，标签分为：

• 文本级标签：p、span、a、b、i、u、em
• 容器级标签：div、h系列、li、dt、dd

PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
• 块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素和行内元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

• 块级元素可以转换为行内元素：失去高度、宽度，可以与行内标签并排
• 行内元素转换为块级元素：可以设置高度、宽度，独占一行。

浮动

为什么有浮动

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流(可以理解为它已经不在文档了，不占位置)：

1. 浮动
2. 绝对定位
3. 固定定位

float：表示浮动的意思。它有四个值。

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

浮动的四大特性

1. 浮动的元素脱标,不再区分行内、块级标签
2. 浮动的元素互相贴靠
3. 浮动的元素由"子围"效果
4. 收缩的效果

关于浮动，要浮动一起浮动,另外 有浮动清除浮动。
浮动带来的问题
如果父盒子没有设置高度,子盒子都设置浮动,(脱标了,不在文档上占位置) 撑不起父盒子的高度

清除浮动

• 给父盒子定制高度
• 伪元素清除法
• overflow:hidden; 谨记，属性原来意思。清除浮动原理:BFC

伪元素清除浮动

        .clearfix:after {
            content: '.';
            display: block;
            /*隐藏 元素不占位置*/
            /*display: none;*/
            /*隐藏 元素占位置*/
            visibility: hidden;
            height: 0;
            clear: both;
        }

文本属性和字体属性

文本属性

文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify(英文对齐)
letter-spacing 文本间距

文本颜色
color属性

文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em

文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线,删除线) | inherit(继承父元素的text-decoration属性的值。)

行高
line-height就是行高的意思，指的就是一行的高度。
单行垂直居中，行高等于盒子高度
多行垂直居中，使用padding-top = (height-行数*行高)/2,并且减去盒子的高度

字体属性

字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。

字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）

字体系列
font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。

font
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial;
font: font-size/font-height font-family

超链接导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .nav {
            width: 960px;
            overflow: hidden;
            margin: 100px auto;
            background-color: purple;
            border-radius: 5px;
        }

        .nav ul li {
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .nav ul li a {
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }

        .nav ul li a:hover {
            background-color: black;
            font-size: 22px;
        }

    </style>
</head>
<body>
<div class="nav">
    <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>

</div>
</body>
</html>

background

颜色表示方法

一共有三种：单词、rgb表示法、十六进制表示法
本质都是rgb,rgb的本质就是红色、绿色、蓝色，三原色的叠加。

#000 黑
#fff 白
#f00 红
#333 灰
#222 深灰
#ccc 浅灰

background-color属性表示背景颜色

background-img:表示设置该元素的背景图片

默认的背景图片，水平方向和垂直方向都平铺
background-repeat:表示设置该元素平铺的方式

• repeat 默认。背景图像将在垂直方向和水平方向重复。
• repeat-x 背景图像将在水平方向重复。
• repeat-y 背景图像将在垂直方向重复。
• no-repeat 背景图像将仅显示一次。
• inherit 规定应该从父元素继承 background-repeat 属性的设置。

雪碧图技术（精灵图技术）

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？
其实就是 截取 大图一部分显示，而这部分就是一个小图标。
使用雪碧图的好处：

1. 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1. CSS雪碧的最大问题是内存使用
2. 拼图维护比较麻烦
3. 使CSS的编写变得困难
4. CSS 雪碧调用的图片不能被打印

我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，
那么我们可以此属性来制作通天banner。 大图居中显示。
background: red url('./images/banner.jpg') no-repeat center top;
background-attach

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

定位

• 相对定位
• 绝对定位
• 固定定位

相对定位

相对定位:相对于自己原来的位置定位
现象和使用：

1. 如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2. 设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性：

1. 不脱标
2. 形影分离
3. 老家留坑，实际是原来的位置不会被其他元素覆盖。

用途：

1. 微调元素位置
2. 做绝对定位的参考（父相子绝）。

参考点：
自己原来的位置做参考点。

绝对定位

特性：

1. 脱标
2. 做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)：
一、单独一个绝对定位的盒子

1. 当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2. 当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1. 父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2. 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3. 不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点

注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

还要注意，绝对定位的盒子无视父辈的padding

绝对定位的盒子居中显示

        * {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;
            background-color: pink;
            width: 960px;
            height: 1000px;
            margin: 0 auto;
        }
        .box1{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            /*margin: 0 auto; 不管用了*/
            left: 50%;
            margin-left: -50px;
        }

固定定位

固定当前的元素不会随着页面滚动而滚动
特性:

1. 脱标
2. 遮盖，提升层级
3. 固定不变

参考点：

• 设置固定定位，用top描述。那么是以浏览器的左上角为参考点
• 如果用bottom描述，那么是以浏览器的左下角为参考点

作用：

1. 返回顶部栏
2. 固定导航栏
3. 小广告

z-index

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

• z-index 值表示谁压着谁，数值大的压盖住数值小的，
• 只有定位的元素，才能用z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
• z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
• 从父现象：父亲怂了，儿子再牛逼也没用。父亲标签显示了，子标签才能显示。

iconfont

fontclass引用

symbol引用

unicode引用

http://www.iconfont.cn/

IconFont 图标

• 购物车空,
• 搜索,

unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持ie6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
  }

第二步：定义使用iconfont的样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  }

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

居中

文本居中

text-alien:center;
line-height:盒子高度

盒子居中

margin: 0 auto;

浮动的盒子居中

在盒子外再套一层，设置margin: 0 auto;

绝对定位的盒子居中

left:50%; margin-left:-XX;（半个盒子宽度）