尚硅谷H5+CSS3基础课笔记二（CSS部分）

CSS3

• css（层叠样式表）处理网页的表现
• 网页是一个多层的结构，用css可以分别为网页的每一个层设置样式，最终展示的是最上边一层。
• 内联样式；内部样式表；外部样式表
• 注释：/*  ...   */
• css基本语法：选择器+声明块

  ---

  选择器相关

• 元素选择器：标签名{}
• id选择器：#id属性值{}
• 类选择器：.class属性值{}
• 通配选择器：*{}
• 交集选择器：选择器1选择器2选择器n{}。这样一来就可以选择同时符合多个限定条件的元素。注意：如果~中有元素选择器，则必须用元素选择器开头，例如div.box1.box2
• 并集选择器：选择器1,选择器2,选择器n{}。
• 交集选择器和并集选择器的区别就是有无逗号，两个选择器可以嵌套使用，例如：#box1,.box2,div.h1{}
• 元素的关系：1.父元素，子元素；2.祖先元素，后代元素（父子关系也算在这组关系里，比如父元素也是祖先元素，子元素也是后代元素）；3.兄弟元素。
• 子元素选择器：父元素>子元素，例如：div>span{}
• 后代元素选择器：祖先 后代，例如div span{}。注意：交集选择器和~的区别只有是否有空格，比较容易混淆，交集选择器只用在同级别元素，而不应该选择后代元素！
• 兄弟选择器格式一： 前一个 + 后一个，例如p + span{}。注意是前后最近的该兄弟元素，假如兄弟标签按顺序有
  ，按照p+span{}的写法，

  不会受影响，且只会影响第一个，后面两个都选不到。
• 兄弟选择器格式二：兄 ~ 弟，例如p ~ span{}。选择下边所有的兄弟元素。，假如兄弟标签按顺序有

  ，按照p+span{}的写法会影响所有。

• 属性选择器格式一：[属性名]，例如p[titie]:{}，表示选择带有titile属性的所有p元素。
• 属性选择器格式二：[属性名=属性值]，例如p[titie="abc"]:{}，表示选择带有titile属性且值为"abc"的所有p元素。
• 属性选择器格式三：[属性名^=属性值]，例如p[titie^="abc"]:{}，表示选择带有titile属性且值的开头为"abc"的所有p元素。例如

  和

  都会被选中。

• 属性选择器格式四：[属性名$=属性值]，例如p[titie$="cde"]:{}，表示选择带有titile属性且值的结尾为"cde"的所有p元素。例如

  和

  都会被选中。

• 属性选择器格式五：[属性名*=属性值]，例如p[titie*="abc"]:{}，表示选择带有titile属性且值含有"abc"的所有p元素。例如

  ,

  和

  都会被选中。

• 伪类选择器：伪类用来描述元素的特殊状态，一般格式为带一个冒号。
• :first-child表示第一个子元素，:last-child表示最后一个子元素，:nth-child()表示第n个子元素（括号里放的是数字表示第几个，如果括号里填n则代表0到正无穷即全选，如果括号里是2n或even则代表选中偶数元素，如果括号里是2n+1或者odd则代表选中奇数元素）。类似的伪类还有:first-of-type，:last-of-type，:nth-of-type()，这哥仨和上面哥仨区别就是，上面哥仨是所有子元素不分类型的排序，后面哥仨是在指定类型的子元素中排序。

  ul>li:nth-child(2n+1){
      color: red;
  }
  ul>li:nth-child(even){
      color: blue;
  }

  

• :not()表示将符合条件的元素从选择器中去除。例如此代码段是将除了第三排的染蓝。

  ul>li:not(:nth-child(3)){
              color: blue;
          }

  

• a元素的伪类。1.:link表示正常的链接（没访问过的链接）；2.:visited表示访问过的链接，注意：由于隐私的原因，所以visited这个伪类只能修改链接的颜色，其他属性比如大小都不能改。3.:hover和:active分别表示鼠标悬浮和点击（这俩所有元素都可以有，不止有a元素）。
• 伪元素选择器：伪元素表示页面中一些特殊的不存在的元素（特殊的位置），使用双冒号开头。我的理解——可以把伪元素的工作模式看作系统在这些特殊位置脑补了一些标签比如。
• ::first-letter。表示首字母，比如p::first-letter{font-size:50px}，是给所有p元素的首字母加放大效果。
• 类似的还有::first-line表示第一行，::selection表示鼠标拖动的选中内容。下图为一个段落，给第一行加红色，给选中内容加蓝色的效果。
• ::after和::before （最常用的两个伪元素）分别表示元素的开始和最后的位置，要结合content属性使用，注意：这样生成的文字不能被选中（可以通过看源码来选中lol）。

  p::before{
              content: "here is before";
              color: red;
          }
  p::after{
              content: "here is after";
              color: blue;
          }

  

  ---

  选择器的优先级

• 样式的继承：一个元素的样式会应用到后代元素。但是有的样式不会继承，比如背景、布局相关的不被继承。
• 选择器的优先级（权重）：内联为1000，id为100，类和伪类为10，元素为1，通配*为0，继承的样式没有优先级，例如.box1{}为10，#box2{}为100，div为1。
• 选择器的优先级原则一（我自己归纳的）：计算选择器的优先级时，要将所有选择器的优先级进行相加计算，然后比最高（分组选择器是单独计算的）。例如div#box1{}的优先级就是元素加id为101；div,p,span{}的优先值分三组计算，div和p和span是分开算的。
• 选择器的优先级原则二：选择器优先级的累加不会超过数量级，例如类选择器叠加多少个也不能超过id选择器，所以优先级的加法不是单纯的加法，而是不跨越等级前提下的加法。
• 选择器的优先级原则三：如果优先级计算后相同，则优先使用位置靠下的样式，即同优先级后面叠前面。
• 选择器的优先级原则四：在某个样式后面加一个 !important，获得究极最高优先级，超过内敛样式。慎用！​​​​​​​

  ---

  像素&颜色相关

• 像素：屏幕是由无数个小点点构成的，不同屏幕像素大小不同，像素越小的屏幕显示的效果越清晰。所以同样的200px在不同设备显示出来是不一样的。
• 百分比：相当于父元素属性的百分比。好处是可以使子元素跟随父元素改变。
• em：是相对于元素的字体大小计算的。1em = 1font-size，一个em就是一个字的大小。例如：字体是16px，则10em等于160px。em会根据字体大小的改变而改变。
• rem：是相对于根元素（标签）的字体大小计算的。1rem = 1font-size（根元素）。可以通过改变html的字体来改一个rem的值。在移动端用处大。
•  RBG值：设置颜色的单位。red，green，blue。三种颜色不同浓度，每一种范围在0到255（或者0%~100%）之间。格式为rgb(红色，绿色，蓝色)，例如background-color: rgb(255,0,0);代表红色。如果三个属性都为0是黑色，都为255是白色。
• RGBA值：带一个透明属性的颜色单位，例如rgba(0,0,255,0.5)就代表透明度为一半的蓝色。
• 十六进制的rgb值：语法为#红色绿色蓝色，取值范围是00~ff。例如#ff0000是红色，#0000ff是蓝色。如果颜色两位两位重复可以简写，例如#aabbcc等于#abc，#ffff00等于#ff0，注意#abcabc不可以写#abc（等于#aabbcc），观察规则！推荐色号：#bfa护眼绿（等于#bbffaa）。
• HSL值，HSLA值（工业开发会用，平时不常用）：H为色相（取值范围0~360），S为饱和度（代表颜色的浓度，取值范围0%~100%），L为亮度（取值范围0%~100%），A为透明度（取值范围0~1）。

  ---

  盒子模型相关

• 文档流：网页是一个多层结构，通过css可以为每一层来设置样式，作为用户只能看到最顶上的一层，而最底下的一层成为文档流。我们创建的元素默认都是在文档流中排列的。元素有两个状态，在文档流和不在文档流（脱离文档流）。
• 在文档流的元素特点（块元素）：会独占一行（多个块元素自上而下垂直排列）；默认宽度是父元素的宽度（会把父元素撑满）；默认高度会被内容（子元素）撑开。
• 在文档流的元素特点（行内元素）：不会独占一行，只占自身大小；多个行内元素自左向右水平排列，一行无法容纳会换行（与书写习惯一致）；默认宽度和默认高度都是被内容撑开。
• 盒子模型：英文名box model 又名盒模型、框模型。css将所有元素都设置为一个矩形的盒子。页面的布局，即是把不同的盒子摆放在不同的位置。
• 每个盒子由以下几个部分组成：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。前三个决定盒子大小，第四个决定位置。​​​​​​​​​​​​​​一个盒子的可见框大小是由前三个共同决定的，计算盒子大小需要将三个区域加到一起计算！margin只影响实际占用面积大小，不影响可见框大小。

  

 内容区（content）：元素的所有文本和子元素在这里，通过设置width和height设置大小。

内边距（padding）：内容区与边框的距离（会撑大盒子大小）。有四个方向的内边距padding-top, padding-right, padding-bottom, padding-left。内容区的背景颜色默认会延申到内边距。padding四个值设定的方向顺序是上右下左。

边框（border）：属于盒子模型内部（类比国界），在边框之内的都是盒子内部（所以边框的宽度会撑大整个盒子），之外的都是盒子外部。至少要设置三个属性：宽度 border-width；颜色 border-color；样式 border-style。

        border-width 默认值一般是3px，四个值设置顺序为上右下左，三个值设置顺序为上左下（右会默认等于左），两个值设置顺序为上左（下默认等于上、右默认等于左），一个值全部设置。除了border-width，还有border-xxx-width，xxx可以是top right bottom left，单独指定宽度。

        border-color的默认是color的值，设置规则和border-width一致，可以设置四个三个两个或者一个值。

        border-style 默认是none，有四种样式：solid实线，dotted点状虚线，dashed虚线，double双线，设置规则和border-width一致，可以设置四个三个两个或者一个值。

        bolder 简写属性（常用），格式没有顺序要求。例如 border: 10px orange solid。

        单边也有简写属性，有 border-top、border-left、border-bottom、border-right，写法与border一致。

外边距（margin）：不会影响盒子可见框的大小，但是会影响盒子的位置，有四个方向的外边距margin-top （设置一个正值，自身元素会向下移动，负值往上）, margin-right（默认情况设置为任何值都没有效果，其大小经常是浏览器算出来的，计算方法下面会讲）, margin-bottom（设置一个正值，下面的那个其他元素会向下移动，负值往上）, margin-left（设置一个正值，自身元素会向右移动，负值往左）。元素在页面是按照自左向右排序，所以默认时设置左上是移动自身，设置右下是移动其他元素。

• 水平布局：

  

        因此有这个等式：

        margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素的内容区宽度

        这个等式必须是满足的，如果左边七项相加的结果使等式不成立，则等式会自动调整——如果七个值没有 auto，则浏览器会自动调整 margin-right 的值（哪怕左式大于了右式，也会把margin-right 自动调成负值）；如果 width margin-left 或 margin-right中有一个设置了 auto，则会自动调整设置了 auto 的那个值。

        如果将一个宽度和一个外边距设为auto，则宽度会最大，设置为auto的外边距为自动为0。

        如果宽度和两个外边距都设为auto，则外边距都是0，宽度最大。

        如果两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值。因此我们经常利用这个特点来水平居中，示例： width:xxxpx; margin: 0 auto;

• 垂直布局：没有等式。默认父元素高度被子元素撑开，假如父元素也设置了高，就各算各的。如果子元素高度比父元素高度还高就会溢出来，可以给父元素使用 overflow 处理溢出，overflow 的 visible 就是允许溢出，hidden 就会隐藏溢出，scroll 生成垂直和水平双滚动条，auto 根据需要生成滚动条。因此给父元素使用 overflow: auto; 是我们常用的处理溢出方式。还可以用 overflow-x 和 overflow-y 单独方向上处理溢出，不常用。
• 垂直外边距的折叠：相邻的垂直方向外边距会发生重叠现象。兄弟元素的情况，如果相邻垂直外边距都是正值则会取两者之间的较大值，如果一正一负则取和，如果两个都是负值则取绝对值更大的。父子元素间的相邻外边距，子元素会传递给父元素（上外边距），这是坏事儿，父子外边距的折叠会影响到页面的布局，是必须要处理的。
• 行内元素的盒子模型有什么区别：行内元素不支持设置宽度和高度，内容区的大小就是被内容撑开的；行内元素可以设置 padding、border 和 margin，但是垂直方向的 padding、border 、margin 不会影响页面的布局；
• display 属性：可以通过 display 实现块元素和行内元素的转换。display 的属性有： inline 表示行内元素，block表示块元素，inline-block 表示行内块元素（即可以设置宽高，又不独占一行），table 表示设置成表格，none 表示不在页面中展示。例如，想给行内元素 a 标签设置宽高，就要先把它转为块元素， a{display:block; width: 100px; height:100px;}。如果还同时想让 a 标签不独占一行，就 a{display:inline-block; width: 100px; height:100px;}。
• visibility属性: visible 默认值，hidden 元素在页面隐藏，但是依然占据位置（类似哈利波特穿着隐身衣）。
• 浏览器的默认样式。通常情况，浏览器会为元素设置一些默认样式。默认样式的存在会影响到页面的布局，因此我们经常要去除浏览器的默认样式（pc端）。例如去掉一些标签的margin，去掉 ul 的 list-style:none。开发中最常用的是写一个 *{margin:0; padding:0;}，或者用网上通用的重置样式表 reset.css（所有默认样式全部去除），normalize.css（对默认样式全部统一） 把所有浏览器默认样式给去除掉。
• 盒子的大小。可见区大小默认是由内容区、内边距和边框共同决定的。box-sizing 用来设置盒子尺寸的计算方式（即设置 width 和 height 的作用），其中 content-box 是默认值， width 和 height 设置内容区大小；border-box 的 width 和 height 用来设置整个可见框的大小（即内容区、内边距和边框的总大小）。
• 轮廓 outline。用来设置元素的轮廓线，用法和 border 一样，和 border 的区别是轮廓不会影响可见框的大小，不会影响布局。
• 阴影 box-shadow。用来设置元素的阴影效果。用法 box-shadow: 水平偏移量, 垂直偏移量, 阴影的模糊半径（越大越模糊，单位为px）, 颜色;
• 圆角 border-radius。用来设置圆角。可以给一个值，单位是px，如果是30px，意思是在角上画一个半径为30px的圆。可以用某px/某px的格式画椭圆。也可以给四个值在四个角上（顺序是左上顺时针到左下）画不同半径的圆。​也有单独设置四个角的 border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius，单独设置的时候可以给两个值画椭圆。特别的，border-radius: 50% 表示整个矩形变成圆形。​​​​

---

浮动

• 使用浮动使元素向其父元素的左侧或右侧移动（想象成气球），用 float 属性可以制作水平方向的布局。
• float可选值：none 默认值，不浮动；left、right 向左、右移动。
• 注意1：元素设置浮动以后，水平布局的等式便不需要强制成立。
• 注意2：元素设置浮动以后，会完全从文档流脱离，不在占用文档流的位置，所以元素下边还在文档流中的元素会自动向上移动。
• 总结浮动的特点：1. 浮动元素会完全脱离文档流；2. 设置浮动以后元素会向父元素的左侧或右侧移动；3. 浮动元素不会从父元素中移出；4. 浮动元素在向左或向右移动时，不会盖住其他浮动元素；5.  如果浮动元素的上面是一个没有浮动的块元素，则无法上移；6. 浮动元素不会超过它代码当中上一个浮动的兄弟元素，最多就是和它一样高。
• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围。可以利用这个实现文字环绕图片的效果，这也是设计浮动的初衷。
• 元素脱离文档流的特点：1. 块元素不独占一行；2. 脱离文档流之后，块元素的宽度和高度默认都被内容撑开；3. 行内元素脱离文档流之后会变成块元素，之后的特点和块元素一样，比如可以设置宽高。总结一句话：脱离文档流之后不需要区分块元素和行内元素了。
• 高度塌陷的问题。指的是父元素的高度丢失，原因是：在浮动布局中，父元素的高度默认被子元素撑开，当子元素设置浮动后脱离文档流，将无法撑起父元素的高度。这是浮动布局中比较常见的问题。
• BFC（block formatting context）块级格式化环境。开启一个元素的bfc模式，该元素会变成一个独立的布局区域。元素开启bfc之后的特点：不会被浮动元素覆盖；子元素和父元素的外边距不会重叠（即解决给子元素设置上外边距导致父元素也往下移动的bug）；父元素可以包裹浮动的子元素。
• 开启元素的方法有：设置元素的浮动（不推荐）；将元素设置为行内块元素（不推荐）；将元素的overflow设置为不是visible的值（推荐设置为hidden）。因此开发常用 overflow:hidden 开启元素的 bfc 模式，以使其可以包含浮动元素。
• clear属性。用来清除浮动元素对当前元素所产生的影响。可选值：left 清除左侧浮动元素对当前元素的影响，right 清除右侧浮动元素对当前元素的影响，both 清除两侧中影响最大的一侧。原理：浏览器自动为元素添加一个上外边距。
• 对付高度塌陷最好的方案。给父元素加一个伪类元素::after，并且设置如下图所示的三个属性。这样就默认给父元素的所有子元素末尾加了一个伪类子元素，内容为空，并且通过display转换成块元素，并设置clear为both，浏览器会自动设置上外边距（clear属性的原理），以撑开整个父元素！​​​​​​​

  

• 解决外边距重叠最好的方案。给父元素加一个伪类元素::before，并且设置如下图所示的两个属性。

  

• 小技巧！综上两个黑点，可以使用 clearfix 类同时解决高度塌陷和外边距重叠的问题：在父元素中加入类名 clearfix ，然后 css 加入如下代码：

---

定位 position

•  定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任何位置，一共有：static 默认值，元素是静止的，没有开启定位；relative 相对定位；absolute 绝对定位；fixed 固定定位；sticky 粘滞定位。
• 偏移量（offset）：开启定位以后，可以通过~来设置元素的位置top bottom left right。top 和bottom 控制垂直方向，通常只用其一，left 和 right同理。
• 相对定位。特点：1. 开启~后，没设置偏移量则元素不变化；2. ~是参照于元素在文档流之中的位置而定位的；3. ~会提升元素的层级；4. ~不会使元素脱离文档流；5. ！不会改变元素的性质，行内设置完了还是行内，块设置完了还是块。
• 包含块 containing block。正常情况下，~就是离当前元素最近的祖先块元素；开启绝对定位的包含块是离他最近的开启了定位（只要position不是static就是开启了定位）的祖先元素，假如没有任何祖先元素开启定位，则根元素是包含块。
• 绝对定位。特点：1. 开启~后，没设置偏移量则元素的位置不变化；2. 开启~后，元素从文档流中脱离；3. ~会改变元素的性质，行内变成块元素，块的宽高都被内容撑开；4. ~会提升元素的层级；5. ~是参照于其包含块（最近的开了定位的祖先元素或者根元素）进行定位的。
• 固定定位（可以做狗皮膏药型的小广告）。~是一种特殊的绝对定位，因此大部分特点是和绝对定位一样的，唯一不同的是：~永远参考于浏览器的视口进行定位的，也就是说~的元素不会随着网页的滚动条滚动。
• 粘滞定位（兼容性不好）（可以做导航条粘在页面顶部，不随着滚动条走）。~与相对定位特点基本一致，不同的是粘滞定位可以在元素到达某一个位置时固定。
• 在绝对定位下的水平布局遵守新的公式：left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 其父元素的内容区宽度，也就是多一个 left 和一个 right。当发生过度约束，如果9个值中没有 auto，则自动调整 right 值以使等式成立。可以设置 auto 的值：margin width left right。
• 在绝对定位下设置水平居中的方法：margin-left = auto, margin-right = auto, left = 0, right = 0
• 在绝对定位下的垂直方向也有要满足的等式：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom。
• 因此在绝对定位下可以设置垂直居中：margin-top = auto, margin-bottom = auto, top = 0, bottom = 0。如果把水平和垂直居中条件都给足就可以把元素放在平面的居中。
• 元素的层级。开启了定位的元素，可以通过 z-index 元素来设置元素的层级，越高越优先显示。ps：祖先元素的层级再高也不会盖住后代元素！

浮动和定位的使用技巧！大局用浮动，微调用定位！！

---

字体、背景

• 字体 font。相关样式：coloe 设置字体颜色；font-size 设置字体大小，其中 em 相当于当前元素的一个 font-size，rem 相对于根元素的一个 font-size；font-family 字体族（字体的格式）比如 font-family : '微软雅黑'，还有可选值（大的字体分类）：serif 衬线字体（所有字笔锋带勾），sans-serif 非衬线字体（所有字不带勾），monospace 等宽字体（所有英文字母宽度一样宽），字体族可以指定多个字体，浏览器优先用第一个，第一个无法使用则使用第二种，比如font-family : '微软雅黑', Courier, monospace。
• （未完待续）

暂时跳过字体、图标、其他文本样式、背景、ps等尚硅谷 77 到 95 集的内容。

---

表格

• 表格简介。table 标签声明一个表格，tr 标签表示一行，有几个 tr 就是几行；td 标签表示已单元格，有几个td 就是几个单元格。单元格的属性 colspan 和 rowspan 分别表示横向和竖向的单元格合并。