嵌套规则

• 在网页中，元素可以分成两大类

块元素和行内元素

块元素

在网页中独占一行

• h1~h6 header main footer article nav section ul li...
• 块元素主要用来将网页区分不认同的区域
• 最常用的块元素就是div，h，p，div没有语义，就表示一个独立的区域

行内元素（inline）

• 在网页中不会独占一行，只会占有自身大小

• 学习过的行内标签<a></a>

• 行内元素永远包裹文字，标识文字所代表的意义

• 最常用的行内元素就是span，span本身没有语义，就标识一段文字

• 替换元素

  
  
  替换元素.png

1.替换元素和行内元素类似，但是替换元素不会直接在网页中显示，而是会被其他内容替换

• 学习过的替换元素
  1.img iframe audio video..都不会独占一行
  p元素里面不能出现任何块元素
  
  2.png
  
  可以这样
  
  3.png
  
  这样不行
  
  4.png

元素的嵌套规则

• 通常情况下块元素可以嵌套，块元素可以嵌套块元素，也可以嵌套行内元素，说白了块里面什么都能放
• 在行内元素只能嵌套行内元素，不能嵌套块元素

（特殊情况）

• P元素里面不能出现任何的块元素，就算在p里面放块元素，浏览器也会自动把块元素择出来，会导致代码结构出问题，后期不好维护
• 在a元素中可以嵌套除了它本身以外的任意元素

继承

样式的继承

可以这样

5.png

6.png

• 和现实生活中后代可以继承祖先的财产一样
• 在CSS中后代元素也可以继承到祖先元素上的样式
• 当我们为祖先元素设置样式时，其后代元素也会应用上相同的样式
• 继承的存在大大的简化了我们的开发
  • 有了继承后我们可以将样式统一设置到一个元素上，这样它的所有后代元素都可以继承该样式
  • 并不是所有的样式都会被继承
  • 比如：背景相关，布局相关的都不会被继承，background-color默认值是（transparent) 透明的，没有给行内元素设置背景颜色，所以行内元素背景颜色还是透明，所以背景图片和背景颜色是不会继承的

选择器的权重

id，类，标签选择器都选择同一个元素，都改同样的样式，这种是样式冲突，

7.png

8.png

9.png

样式的冲突

写两个选择器，优先级靠前.png

这个优先级是单独计算.png

这两个是等价的.png

• 当我们通过不同的选择器选中同一个元素，同时为同一个样式设置不同的值，比如颜色都设成不同的颜色，此时就发生了样式冲突
• 当发生样式冲突时，那个样式会生效由选择器的优先级决定

选择器的优先级（选择器的权重）

• 内联样式优先级是 1，0，0，0

• id选择器优先级是 0，1，0，0

• 类和伪类选择优先级是 0，0，1，0

• 元素选择器优先级是 0，0，0，1

• 通配选择器 没有优先级
  （不建议使用内联样式，如果写了内联样式，上面所有选择器都会失效）
  

  这时候优先级一样，橙色生效.png
  
  当写完样式之后发现样式没生效，有可能是优先级比较低
  
  红色生效，因为通配选择器没有优先级.png

• 优先级的计算需要将多个选择器加在一起计算

• 选择的分组都是单独计算

• 优先级的计算是不会超过最大的数量的级

• 如果两个选择器的优先级一样，则优先显示靠下的样式

  
  
  如果为一个样式添加了！important.png

• 如果为一个样式添加了！important 则该样式会自动获得一个最高的优先级，优先于所有的样式显示甚至超过内联样式，慎用！
  继承的样式没有优先级，随便写一个都可以覆盖继承的样式

伪类的顺序

• :link
• :visited
• :hover
• :active
  一般lin和visited很少用，如果要用一定要写在hover和active前面
  一般看两种状态会不会同时出现在同一个元素上，如果会，就会有冲突问题
  
  10.png
  
  
  11.png
  
  
  这两种可能同时出现，点击就不会变颜色，谁在后边谁显示.png

单位

• 长度单位（px）

  • 像素，计算机的屏幕是由一个一个发光的小点构成
  • 每一个小点都是一个像素，像素越多，屏幕越清晰
  • 百分比，会自动依据父元素的指定属性去计算大小

    • 使用百分比作为单位时，元素可以根据父元素的大小自动改变

      
      
      这里指的父元素的50%.png

• 颜色单位

1. 颜色名

• CSS中直接使用颜色名来表示各种颜色
• red orange yellow green blue tomato ...用颜色名有很多限制

2. rgb值

• RGB值就是通过红绿蓝三种颜色调配出其他各种不同颜色

• RGB（红色，绿色，蓝色）不是美术的三元色，这个是光的三元色，是把一个一个颜色转换成数字，不方便我们的识别，数字不方便人类识别，方便工具识别

• 每种值的取值范围0-255之间

  
  
  image.png

• 三个都是255得到一个白色，

• 值也可以取在0%-100%之间，一般就用数值就行

十六进制RGB值

• 使用十六进制的数字来表示颜色
  0 1 2 3 4 5 6 7 8 9 a b c d e f 1a ..1f,2a..2f,3a...3f,4a...4f,5a...5f单个数字16个，最大的数是f

• 语法

  
  
  语法.png

红色绿色蓝色

颜色取值范围00-ff

• 如果颜色是两位两位重复的，则可以省略

盒模型

盒子模型、盒模型、框模型（box model）

• 网页布局面临的两个问题，一个是元素的大小，一个是元素的位置
• 在CSS中将页面中的每一个元素都设置一个矩形的盒子，所有元素都是矩形，这样网页的布局就变成将不同的矩形摆放到不同位置，调整位置和大小达到不同的显示效果

每一个元素从内到外由以下几个部分组成：

• 内容区（content）
• 内边距（padding） 内容区和边框的距离
• 边框（border）

• 外边距（margin）

  
  
  盒子模型.png
• 每个元素最内部的区域称为内容区
• 内容区相当于一个盒子的容积，一个元素的子元素和它文本内容都在元素的内容区中排列
• 内容区的大小决定了一个元素能装多少东西

内容区的大小需要通过两个属性设置

• width 设置内容区的宽度

• height 设置内容区的高度

  
  
  内容区的大小.png

边框（border）

• 边框是盒子可见框的最边缘
• 要设置边框需要使用三个属性
  • 边框宽度 border-width
  • 边框的颜色 border-color
  • 边框的样式border-style
    
    10像素红色实线边框.png
    
    width和height只是设置内容区，影响盒子大小的还有内边距和边框宽度
• 边框（border）
  • 盒子可见框的边缘，也会影响盒子可见框的大小

- 边框的宽度

• 使用border-width来设置边框宽度
• 该属性可以同时指定四个边框的宽度，也可以分别指定
• 如果指定了四个值：
  • 四个值分别：上 右 下 左
• 如果指定了三个值：
  • 分别表示：上 左右 下
• 如果指定两个值：
  • 分别表示：上下 左右
• 如果指定一个值
  • 则四个方向都是该值
• 除了border-width，在CSS中提供了border-xxx-width
  • xxx可以是top right bottom left，这种比较麻烦，所以用的比较少

边框的颜色border-color

• 可以同时或者分别指定四个边的颜色，边实际上是个梯形
• 同样有四个border-xxx-color用来单独设置某个边的颜色

边框的样式（border-style）

• solid 表示实线
• dotted 表示点状
• dashed 表示虚线
• double 表示双线

• 可以同时或者分别设置四个方向的边框

  
  
  12.png

border

• 边框的简写属性，通过border可以同时设置四个边框的所有样式，并且没有顺序要求
  
  13.png
  
  缺点就是设置都是四个边框
  也可以单独设置一个边
  
  单独设置一个边的样式.png

内边距（padding）

• 边框和内容区之间的距离
• 会影响到盒子的可见框大小，三个因素决定（内容区 内边距 边框）
  • padding-top
  • padding-right
  • padding-left
  • padding-bottom
• 元素背景颜色，默认是会延伸到内边距上，找到内容区和内边距的边距
  
  14.png
  
  
  黄色应该出现box1的内容区里.png
  
  
  15.png
  
  黄色应该出现box1的内容区里
• padding是内边距的简写属性
  • 可以同时或者分别设置四个方向的内边距，规则和border-width相同

外边距（margin）

• 决定了盒子与盒子的距离（盒子的位置）
• 外边距不会影响盒子可见框的大小，但是会影响到盒子的实际大小，就是实际占地大小，就是不可见框
• 一共四个方向的外边距
  • margin-top
  • margin- bottom
  • margin- right
  • margin- left

    • margin-left:100px

      
      
      16.png
• margin-left如果是个正值，元素向右移动，如果是个负值，元素向左移动
• margin-right:100px;

• margin-bottom:100px;
  由于元素在页面中默认是靠左上排列，所以默认情况下，设置左和上外边距会移动元素本身，而设置下和右外边距会移动相邻的元素

  
  
  16.png
  
  
  17.png
  
  

  设置个样式

  
  
  18.png
  
  
  19.png

简写属性margin

也可以同时指定四个方向，规则和border-width 一样

• margin一可以设置为auto，浏览器会自动计算margin值
• 如果将水平方向的margin设置为auto，则浏览器尽可能的让margin-left值能多大就多大
  margin-left：auto
  margin-right：auto
• 垂直方向的外边距设置为auto，浏览器会自动设置为0
• margin-left和margin-righ同时设置为auto，浏览器会将两个外边距设置为一个相等的值，元素就水平居中
  • 利用这个特点可以让一个元素在他的父元素当中水平居中
• width也可以设置为auto，它的默认值就是auto，浏览器会自动使width尽可能大，没空间就变小
  如果将width设置为auto，则margin-left和right的auto将会自动设置为0
  父元素text-align:center;可以让行内元素在父元素中水平居中，父元素设置line-height=height