css 选择器

标签选择器：

概念：通过标签名去选择标签元素。
书写：标签名
选中范围：html中所有标签名一致的标签。
注意：标签选择器可以选中所有同名的标签，会忽视掉html的嵌套关系。
优点：可以选中全部同名标签，可以对标签设置公共样式。
缺点：不能对局部的标签添加特殊样式。

id 选择器：

概念：通过id属性选择标签。
书写：#id 属性名
选中范围：只能选中一个标签
注意：每个id的属性值必须是唯一的。

类选择器：

概念：通过标签的class属性选择标签。
书写：.class属性值
选中范围：相同class名称的标签。
注意：class属性名可以与其他标签相同。
特点：
    1.多个不同的标签不区分标签类型，只要class的属性值相同，就会被选中。
    2.一个标签可以有多个class属性值，属性值之间用空格隔开，每个属性值组成的选择器都可以选中这个标签，每个选择器后面的样式都会添加给这个标签。
优点：
    1.通过一个类选择器进行多选，选中多个标签添加公共样式。
    2.原子性，一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
彩蛋：在实际开发中，一般使用class选择器为标签添加样式，使用id选择器为标签添加js行为。

后代选择器：

概念：后代选择器也叫做包含选择器，通过标签之间存在的嵌套关系去选择元素，基本组成部分就是基础选择器。
书写：空格表示后代，基础选择器之间用空格隔开。空格前面的选择器必须是后面的祖先级。
选择范围：通过一系列的基础选择器缩小范围，由最终的一个选择器确定选中标签。

并集选择器：

概念：不同选择器选中的元素都要设置相同的样式，可以将多个选择器同时选中添加样式。
书写：选择器中间用英文逗号隔开，最后一个选择器不能添加逗号。
优点：
    1.如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。
    2.可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符功能。

继承性

概念：如果一个标签没有设置过一些样式，它的祖先级标签曾经设置过，在浏览器中该标签也加载了这个样式，这些样式都是从祖先级标签中继承来的，这种现象就是继承性。能够被继承的样式是所有文字相关式的属性，其他的属性都不能被继承。
应用：可以将页面中出现最多的文字格式设置到body标签中，后期所有的标签中的文字属性都可以从body标签中继承。

层叠性

概念：解决同一标签中设置多组样式的展示问题。
判断方法：
    -选中目标：
        1.比较选择器权重，权重高的层叠权重低的。
        2.如果权重相同，则比较css书写顺序。
    -选中目标祖先级：
        1.比较就近原则，HTML结构中距离目标标签近的层叠远的。
        2.如果距离相同，比较选择器的权重，权重大的层叠权重小的。
        3.如果距离和权重都相同，则比较css的书写顺序。后面的层叠前面的。
选择器权重：
    id选择器 > 类选择器 > 标签选择器 > 通配符选择器

css 常用属性

文字属性

color

作用：给文字添加颜色
属性名：color
属性值：颜色名，颜色值。
语法：
    p {
        color: red;
    }

font-family

作用：设置网页展示字体。
属性名：font-family
属性值：字体名称

注意：
    1.font-family可以从左到右依次设置多个字体，在加载时会按照顺序选择可执行的字体。最终只会执行一个字体。
    2.浏览器选择字体的机制是根据自己机器本身自带的字体进行选择的，如果没有可选字体，则浏览器会使用默认字体。
语法：
    p {
        font-family: "微软雅黑", "宋体"
    }

font-size

作用：设置字体大小
属性名：font-size
属性值：number
单位：px，em等
语法：
    p {
        font-size: 12px;
    }

font-weight

作用：设置字体粗细
属性名：font-weight
属性值：400表示不加粗，700表示字体加粗
语法：
    p {
        font-weight: 400;
    }

font-style

作用：定义字体斜体效果
属性名：font-style
属性值：normal 正常（默认），italic 斜体，oblique 斜体。
注意：italic和oblique都表示斜体，但是有些字体有italic属性，有些没有italic属性，oblique就是让没有italic属性的字体也能够有斜体效果。
语法：
    p {
        font-style: normal;
    }

line-height

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
属性名：line-height
属性值：·px像素值，设置具体的像素值。
       ·百分比数值，设置的本身字号像素值的百分比。
注意：字体行高的量取一般是从第一行文字的顶部量取到第二行文字的顶部。

字体综合 font

字体，字号，行高，加粗，斜体都是font综合属性的单一属性，可以进行合写，属性值可以有2到多个，值之间用空格分隔。
注意：1.在进行复写的时候，必须有字号和字体，并且字号在前，字体在后，不能颠倒顺序。
    2.一般情况下是对字号，行高和字体进行复合写法，顺序不能颠倒，并且字号和行高之间不是用空格分隔，必须用"/"分隔。
    3.如果想要设置字体加粗和斜体样式，这两个必须写在最前面，两者的顺序可以颠倒，后面的字号/行高 字体样式不能互换位置。

文本属性

水平对齐 text-align

作用：设置文本水平方向对齐。
语法：text-align: 属性值;
属性：left：左对齐
     right：右对齐
     center：居中对齐

文本修饰 text-decoration

作用：设置文本整体是否有线条的修饰效果。如添加下划线或者删除线。
语法：text-decoration: 属性值;
属性：none：没有修饰，默认值。
     overline：上划线
     line-through：中划线，删除线，del标签的默认值。
     underline：下划线，a标签的默认值。

文本缩进 text-indent

作用：设置段落首行是否进行缩进。
语法：text-indent: 属性值
属性：px单位：缩进多少像素值
     em单位：缩进字体倍数的位置。
     百分比：表示缩进文字所在父元素标签宽度的百分比。
注意：属性值区分正负，正数表示向右缩进，负数表示向左缩进。

vertical-align 属性应用

描述：用于设置图片或者表单(行内块元素)和文字垂直对齐。但是它只针对行内元素或者行内块元素有效。
语法：vertical-align: 属性值;

vertical-align 属性值

盒子模型

概念：盒子模型包含了五个属性，分别是宽度（width），高度（height），边框（border），内边距（padding）和外边距（margin）。

宽度

作用：设置盒子模型的宽度
语法：width：属性值；
属性：auto： 默认值，浏览器会自定计算宽度。
     px：像素值定义的宽度。
     %：参考父元素宽度的百分比进行计算。
注意：如果不设置宽度，默认是auto，如果是块元素，则会独占一行，根据父元素的宽度计算他的宽度，如果是行内元素，则会根据内容的宽度计算标签的宽度。

高度

作用：设置可添加内容元素的区域的高度。
语法：height：属性值；
属性：同宽度一样

内边距 padding

作用：设置的是元素的边框内部到宽高区域之间的距离。
特点：可以加载背景，但是不能书写内容。
语法：padding：属性值;
属性值：常以px为单位的数值。
注意：1.padding是一个复合型的写法，padding-top， padding-right，padding-bottom，padding-left的综合写法。
      2.顺序是顺时针加载的。
      3.根据四个方向的属性值的不同，区分了padding的四种表示法。
padding表示法：
    1.padding：10px；表示top，right，bottom，left的内边距都是10px。
    2.padding：10px 20px；表示top和bottom内边距是10px，right和left内边距是20px。
    3.padding：10px 20px 30px;表示top内边距是10px，bottom内边距是20px，left和right内边距是30px。
    4.padding：10px 20px 30px 40px；分别表示top，right，bottom和left四个方向的内边距。

边框 border

作用：设置的是内边距外面的边界区域，最为盒子实体化的最外层。
语法：border：1px solid black；
属性值：由三个值组成，分为线的宽度，颜色和形状。

外边距 margin

作用：设置盒子与盒子之间的距离。
特点：不能渲染背景。
语法：margin：10px；外边距的设置方法与内边距的设置方法一致。
属性值：常以px为单位的数值。

overflow 属性

作用：设置文本域溢出部分内容的显示效果；
语法：overflow：属性值
属性值：
    visible：默认值，展示溢出内容。
    hidden：隐藏溢出内容，超过边框范围的内容直接隐藏。
    scroll：溢出的部分出现滚动条，可以拖拽滚动条展示溢出内容。不论有没有溢出的内容，x轴和y轴都会出现滚动条。
    auto：只有在溢出的部分才会出现滚动条，如果内容没有溢出，不会出现滚动条效果。

居中

1.单行文字垂直居中的时候，可以设置文字的line-height等于盒子的高度。
2.如果是多行文字，设置居中的时候可以不给盒子设置高度，让文本内容撑开盒子或者盒子高度与文本内容的高度相等。也可以在此基础之上添加上下相同的padding。
3.元素水平居中，当父盒子的宽度大于子盒子的宽度的时候，可以给子盒子设置margin属性，属性值垂直方向随便设置，水平方向设置值为auto。auto只有在水平方向设置才有效果，当水平方向设置auto的时候，水平方向的边距会无限增大，直到撑满整个父元素除了子元素宽度之外的剩余区域。

盒模型自动内减

父子盒模型中，如果父元素设置了宽度，并且子元素是块级元素，独自占据一行，那么可以不设置子元素的宽度，子元素的宽度会自动加载父元素的宽度，如果同时设置了子元素的padding，margin和border，此时子元素的宽度会自动缩减。

margin 塌陷

margin塌陷现象：在垂直方向如果有两个元素的外边距相遇，浏览器中加载的真正的外边距并不是两个margin的和，而是两个边距中值比较大的。边距值小的塌陷到了边距值大的内部。
解决方法：
    1.同级盒子的时候，可以将margin值设置到一个盒子上，只给一个元素设置。
    2.父子元素的时候，让两个边距不要相遇，可以直接在父盒子内添加padding，解决margin父子塌陷问题。

标准文档流

块级元素

特点：
    1.块级元素可以设置宽高，在浏览器中正常加载。
    2.块级元素独占一行，不能与其它标签在一行展示。
    3.只有块级元素在不设置宽的时候，会加载他的父级元素的宽度，不设置高度时，元素的高度由元素内的内容撑开。

行内元素

1.行内元素不能设置宽高，其他属性（border，padding，margin）虽然可以设置，但是会出现加载问题。
2.行内元素可以与其他行内元素并排一行显示。
3.行内元素无论是否设置宽高，宽度和高度都只能被内容自动撑开。

行内块元素

1.行内块元素可以设置宽高。
2.行内块元素可以和其他的元素并排展示在一行。
3.行内块元素如果不设置宽高，那么默认宽高是由内容自动撑开。
4.行内块元素具有标准流的微观性值，例如空白折叠现象。

display

作用：更改标签的显示模式
语法：选择器 {display: 属性值}
属性值：
    block：表示元素要以块级模式加载，具备块级元素的特性。
    inline：表示元素要以行内模式加载，具备行内元素的特性。
    inline-block：表示标签以行内块模式加载，具备行内块元素的特性。
    none：表示标签及内部内容直接隐藏，让出原有标准流的位置。

浮动

为什么需要浮动？

有很多的布局效果，标准流是无法完成的，次是就可以利用浮动来完成布局，因为浮动可以改变元素标签默认的排列顺序。可以让多个块级标签在一行排列显示。

网页布局准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。一般先用标准流的父元素排列上下位置，之后内部的子元素采取浮动排列左右位置。

浮动概念

float属性用来设置浮动，将其移动到一边，直到左侧边缘或者右侧边缘触碰到另一个边框。

float 属性

left：左浮动
right：右浮动

浮动的特性

1.浮动元素回脱离标准流。浮动的盒子不再保留原来的位置。
2.浮动的元素会一行内显示并且元素依次贴边。
3.浮动的元素会具有行内块的特性。
    ·如果是行内元素的盒子添加了浮动，则有行内块元素的特性。
    ·如果块级盒子没有设置宽度，默认宽度和父级宽度一样，添加浮动之后，如果没有设置宽度，则宽度由元素中的内容宽度决定。
    ·浮动的盒子中间是没有空隙的，是紧挨在一起的。

浮动的问题

1.如果父元素没有设置高度，子元素设置浮动后，子元素会脱离文档标准流，则父元素不会被子元素的内容撑开。从而父元素没有高度。
2.父元素没有高度，会影响后面标准流元素的位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

浮动布局的注意点

1.浮动和标准流的父盒子搭配。
2.浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流。

清除浮动

本质：清除浮动元素造成的影响。
语法：选择器 {clear：属性值}
属性值：
    left：清除左边的浮动
    right：清除右侧的浮动
    both：清除左右两侧的浮动

清除浮动方法

1.额外标签法，在左后一个浮动元素标签后面添加一个空标签，设置clear属性。但是会造成添加许多无意义的标签，结构较差。必须是块级元素，不能是行内元素。
2.给父级标签添加overflow（overflow：hidden）。但是无法展示父级溢出的部分。
3.:after伪元素，给父元素添加。额外标签法的升级版，实际是css在父级元素中添加了一个新的标签。
    clear::after {
        content: "";
        display: block;
        clear: both
    }
4.双伪类清除浮动
    .box::before,
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    <!-- 兼容IE6和IE7 -->
    .box {
        *zoom: 1;
    }

伪类

概念：伪类不需要给标签添加任何属性，伪类名是语法提前规定好的，书写伪类的时候必须搭配选择器一起使用，伪类选择器后面添加的样式不一定能够立刻就加载到浏览器上，只有用户触发了固定行为，伪类样式才能立即加载。
语法：选择器:伪类名 {属性名:属性值}

a 标签的伪类

:link: 点击之前的状态
:visited: 点击之后的状态
:hover: 鼠标悬浮的状态
:active: 鼠标点击状态
注意：1.想让每个状态都能正常加载，必须保证伪类的书写顺序是link，visited，hover，active。
    2.:hover伪元素不仅仅a标签可以使用。其他标签也可以使用。

背景定位

作用：设置不重复的图片在背景区域开始加载的位置。
语法：background-position：属性值1，属性值2；
属性值：
    水平方向：left，center，right
    垂直方向：top，center，bottom
    像素值表示：第一个属性值表示水平方向移动的距离，第二个属性表示垂直方向移动的距离。
    百分比表示法：水平方向，等价于盒子的border以内的背景区域宽高减去图片的宽度。垂直方向等价于盒子的border以内的背景区域高度减去图片的高度。

背景附着 background-attachment

作用：设置背景图片是否要随着页面或者盒子的滚动而滚动。
语法：background-attachment: 属性值;
属性值：
    scroll：滚动的，表示背景图片和页面保持一个相对位置不变，随着页面的滚动而滚动。
    fixed：固定的。背景图片的定位位置由原来的盒子变为浏览器左上角的顶点，不会随着页面的滚动而滚动。

background 综合写法

可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序，五个属性值之间可以互换位置。
语法：background: url() no-repeat center top fixed #000;
注意：1.如果属性值没有设置完全，那么没有设置的属性值会按照默认属性值进行加载。
     2.如果想去层叠综合属性中的某一部分，其他属性保持不变，最好使用单一属性进行层叠。

背景半透明

在css3中增加了背景半透明的语法，用rgba()来表示颜色。取值范围在0-1之间，0表示完全透明，1表示不透明。
语法：background-color: rgba(0,0,0,.3)
注意：背景半透明是指盒子背景半透明，盒子内容不受影响.
    2.rgba模式也可以应用到字体半透明或者边框半透明等场景。

背景缩放 background-size

概念：通过background-size设置背景图片的宽度和高度，就像设置img标签中图片的宽度一样，可以修改背景图片的尺寸。
语法：background-size：width height;
属性值：1.px值，当设置一个值的时候，垂直方向等比拉伸，当设置两个值的时候，按照设置的两个值加载。
    2.百分比，设置百分比时，参照盒子的宽高属性。
    3.cover，自动调整缩放比例，把背景图片扩展到足够大，使背景图片完全覆盖背景区域。如又溢出区域则会隐藏。
    4.contain，自动调整缩放比例，把图片扩展到最大尺寸，保证图片始终在背景区域内展示。

多个背景图

概念：在css3中可以添加多个背景图片，background-img中的url用逗号隔开。先添加的背景图片在上面，后添加的背景图片在下面。
语法：background-img: url("test1.jpg"),url("test2.jpg")
注意：test1.jpg会压在test2.jpg上面。

定位

定位的组成

定位：将盒子固定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式

定位模式通过css的position属性设置的。
语法：position: 属性值;
属性值：static：静态定位（默认方式）
    relative：相对定位
    absolute：绝对定位
    fixed：固定定位

边偏移

边偏移就是定位的盒子移动到最终位置，有top，bottom，left，right四个属性，通常是两两组合，如top和left，两个边就可以得到定位的位置。可以设置负值。
语法：top：10px；
     left：10px
属性：
    top：顶端偏移量，定义元素相对于其父元素上边线的距离。
    bottom：底部偏移量，定义元素相对于其父元素下边线的距离。
    left：左侧偏移量，定义元素相对于其父元素左边线的距离。
    right：右侧偏移量，定义元素相对于其父元素右边线的距离。

相对定位 relative

概念：相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
语法：选择器 {position: relative;}
特点：1.是相对于自己原来的位置移动的。
     2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保持原来的位置）

绝对定位 absolute

概念：绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：选择器 {position: absolute}
特点：1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
     2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先元素作为参考点移动位置。
     3.绝对位置移动后不再占有原先的位置（脱标）。

子绝父相

1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2.父盒子需要加定位显示盒子在父盒子内显示。
3.父盒子布局时，需要占有位置，因此父亲只能是相对定位。所以，相对定位经常迎来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

固定定位 fixed

概念：固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。固定定位需要设置宽度。
语法：选择器 {position: fixed;}
特点：1.以浏览器的可视窗口为参照点移动元素。
     2.跟父元素没有关系。
     3.不随着滚动条的滚动而滚动。
     4.不占有原先的位置。

固定在版心右侧位置

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

压盖顺序

定位元素不区分定位类型，都会去压盖标准流或者浮动的元素。如果都是定位元素，则根据书写顺序压盖，后写的会压盖之前的。如果想设置压盖顺序，可以自定义设置z-index属性。
语法：z-index: number;
属性值：默认是auto，可以设置数值。
注意：z-index属性值大的会压盖属性值小的，设置z-index会压盖没有设置z-index的。
    2.如果属性值相同，还是会比较html的书写顺序，后写的会压盖前写的。
    3.只有设置定位的元素设置z-index属性才有效果。
    4.两组或者多组父子盒模型中，如果父子盒子都进行了定位，且后写的压盖了前写的父子盒模型情况下：
        a.如果父盒子没有设置z-index，则后写父子盒模型的会压盖前写的父子盒模型。如果父子盒模型设置了z-index属性，则属性大的压盖属性小的。
        b.如果父盒子没有设置z-index属性，子盒子设置了z-index属性，则属性值大的子盒子会压盖属性值小的子盒子，但是父盒子的压盖顺序不会发生改变。如果父盒子设置了z-index属性，无论子盒子设置的index属性有多大，都是父级盒子设置z-index属性值大的压盖属性值小的。从父效应。

css 鼠标样式

语法：a {cursor: 属性值}

css 鼠标样式属性值

字体图标 icofont

1.使用场景：主要用于显示网页中通用，常用的一些小图标。展示的是图标，本质属于字体。

字体图标的优点

1.轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
2.灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明，旋转等效果。
3.兼容性：几乎支持所有的浏览器。

字体图标的下载

1.icomoon字库 http://icomoon.io
2.iconfont字库 http://www.iconfont.cn/

字体图标的使用

1.将解压过后的fonts文件夹放到项目的根目录里面；
2.声明字体图标(百度声明方法或者参考京东商城)
3.复制fonts文件中demo.html页面中的字体并粘贴到自己的代码中。
4.设置在css中声明字体图标，font-family。

声明字体图标代码

@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?p4ssmb");
    src: url("fonts/icomoon.eot?p4ssmb#iefix") format("embedded-opentype"),
         url("fonts/icomoon,ttf?p4ssmb") format("truetype"),
         url("fonts/icomoon.woff?p4ssmb") format("woff"),
         url("fonts/icomoon.svg?p4ssmb#icomoon") format("svg");
    font-weght: normal;
    font-style: normal;
    font-display: block;
}

css 制作三角形

原理：根据边框制作三角形；

.box {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-bottom-color: pink;

}