css进阶

1. 样式的继承

​ 我们为一个元素设置的样式同时也会应用到它的后代元素上
​ 继承发生在祖先和后代元素间
​ 注意：并不是所有的样式都会被继承
​ 比如：背景相关的，布局相关，等样式都不会被继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <p>
        我是一个p元素
        <span>我是p中的span</span>
    </p>
    <span>我是p外的span</span>
    <div>
        我是div
        <span>
            我是div中的span
            <em>我是span中的em</em>
        </span>
    </div>
</body>
1
2
3
4
5
6
7
p{
    background-color: orange;
    color:red;
}
div{
    color: yellowgreen;
}

2. 选择器权重

样式的冲突

​ 当我们通过不同的选择器，选中相同的元素，并为同一个样式设置不同的值时，此时就发生了样式的冲突
​ 发生样式冲突时，应用那个样式由选择器的优先级即（权重）决定

1
<div id="box1" class="red">我是一个div</div>
1
2
3
4
5
6
7
div{
    color: yellowgreen;
}
.red{
    color: red;
}
/*这是div的字体是红色，说明类选择器的优先级更高，与两者位置无关*/

选择器的权重

​ 从上到下依次递减

选择器 优先级
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 没有优先级

比较优先级时，将所有的选择器的优先级进行相加运算，最后优先级越高的，越优先显示（分组选择器是单独计算的）
如果优先级计算后相同，优先选择靠下的样式
可以在某样式后加!important，则此样式会获得最高的优先级，甚至超过内联样式，千万要慎用！！！

3. 长度单位：

1
2
3
4
5
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
  • 像素–px
  • 百分比 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
/*设置box居中*/
    .box1{
        width: 400px;
        height: 300px;
        background-color: orange;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:  auto;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box2{
        width:50%;
        height: 50%;
        background-color: skyblue;
    }
</style>
  • em
    相对于元素的字体大小来计算
    1em=1font-size=1.6px(默认情况)
    em会相对于元素的字体大小而改变（重新设置font-size后大小会改变）
  • rem
    相对于根元素字体大小来计算
1
2
3
4
5
6
7
8
.box3{    
    font-size: 30px;
    /*width: 10em;
    height: 10em;*/
    width: 10rem;
    height: 10rem;
    background-color: #bbffaa;
}

4.文档流

​ 网页是一个多层结构，css可以为每一层设置样式用户只能看到最上面一层
​ 这些层中，最下面的一层称为文档流，文档流是网页的基础，
​ 我们创建的元素都在文档流中进行排列
元素共有两个状态

  1. 在文档流中
  2. 不在文档流中(脱离文档流)
    元素在文档流中的特点：
    • 块元素
      • 在页面中独占一行(自上而下垂直排列)
      • 默认宽度是父元素的全部
      • 默认高度被内容撑开(子元素)
    • 行内元素
      • 不独占一行，只占自身大小
      • 在页面中自左向右水平排列。当一行不能容纳时，则元素会自动换到第二行自左向右排列
      • 行内元素的默认宽度和高度都被内容撑开

5. 盒模型

​ css将页面中的所有元素都设置成一个矩形盒子

每个盒子都由以下几个部分组成

  • 内容区（content）
  • 内边距（padding）
  • 边框（border）
  • 外边距（margin）

Image

1
<div class="box1"></div>

​ 高度，宽度，背景颜色 

1
2
3
4
/*内容区，元素中所有的子元素和文本内容都在内容区中排列*/
width: 200px;
height: 200px;
background-color: #bfa;

5.1边框(border)，属于盒子边缘

设置边框需要至少三个样式：

  • 边框的宽度border-width

    可以指定四个方向的边框宽度

    值的情况

    • 4个值 顺序为上右下左
    • 3个值 上，左右，下
    • 2个值 上下，左右

    border-xxx-width top right bottom left (用来单独指定某一边的宽度)

  • 边框的颜色border-color

    指定4个边框的颜色，规则和border-width一样

  • 边框的样式border-style

    边框样式

    • solid 实线
    • dotted 点状虚线
    • dashed 虚线
    • double 双线
1
2
3
4
5
border-width: 2px;
/*顺序为上右下左
border-width: 5px 10px 20px 30px;*/
border-color: skyblue;
border-style: solid;

​ border简单属性，通过该属性可以同时设置边框所有相关的样式，并且没有顺序要求

1
border: 5px orange solid;

​ 还有4个border-xxx设置单个边
​ top right bottom left 

1
border-top: 5px red solid;

5.2内边距–内容区和边框间的距离

一共有4个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小，盒子的背景颜色会延申到内边距上
padding是内边距的简写属性，可同时设置四个方向的内边距，用法同border-width

1
2
3
4
<!--为了区分内边距和内容区，添加inner设置颜色-->    
<div class="box1">
    <div class="inner"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.box1{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    border: 5px orange solid;
    padding-top: 100px;
}
.inner{
    width:100%;
    height: 100%;
    background-color: yellow;
}

一个盒子的可见框下、大小，由内容区，内边距和边框共同决定，
盒子的大小等于三个区域的和

5.3外边距

不影响盒子的大小，而是影响盒子的位置
有四个方向的外边距
margin-top
margin-right
margin-bottom
margin-left
margin的简写属性，同时设置4个方向的外边距

子元素在父元素内容区中的排列：
如果子元素大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：

  • visible：默认值，子元素溢出，会在父元素外显示
  • hidden：溢出的内容会被裁剪，不显示
  • scroll：生成水平和垂直两个方向的滚动条，通过滚动条查看完整内容
  • auto：根据需要生成滚动条
1
overflow:auto;

Image

行内元素的盒模型
行内元素不支持设置宽度和高度，他的宽度和高度被内容撑开
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
可以设置margin，垂直方向margin 不会影响页面的布局，而且水平方向的margin不会重叠

5.4盒子可见框的大小

默认情况下，盒子可见框的大小由内容区，内边距和外边距共同决定
box-sizing 用来设置盒子尺寸的计算方式
可选值：

  • content-box 默认值，宽度和高度为内容区大小
  • border-box 宽度和高度设置为可见框大小（即内容区，内边距和外边距）

5.5轮廓,阴影,圆角

轮廓
outline 用来设置元素的轮廓线，用法和border一样
不同的是轮廓不会影响到可见框的大小，不会影响页面布局（不会挤开下面的元素）

1
2
/*用法和border一样*/
outline:10px red solid;

阴影
box-shadow 用来设置元素的阴影效果
阴影也不会影响页面布局

1
2
3
/*阴影 前两个值表示偏移量*/
/*第三个值为阴影的模糊半径*/
box-shadow: 10px 10px 20px rgb(64, 64, 64);

圆角
border-radius 用来设置圆角 设置圆角半径
四个值：左上 右上 右下 左下
三个值：左上 右上&左下 右下
两个值：左上&右下 右上&左下

1
2
3
4
5
6
7
8
/*正圆*/
border-radius: 30px;

/*椭圆*/
border-top-left-radius: 30px 20px;
border-radius: 30px 20px;
/*还可以设置4个角的不同半径*/
border-radius: 30px 20px 10px 15px;

此外还可以单独为每个角设置圆角
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;

6.元素的显示

  • display用来设置元素的显示类型

    可选值：

    • inline：将元素设置为行内元素
    • block：将元素设置为块元素
    • inline-block，将元素设置为行内块元素（既可以设置宽度和高度，又不会独占一行）
    • table：将元素设置为一个表格
    • none：元素隐藏，不在页面上显示

  • visibility用来设置元素的显示状态

    可选值：

    • visible：默认值，元素在页面上正常显示

    • hidden：元素在页面隐藏，不显示，但依然占据页面的位置

7.浏览器默认样式

通常情况下，浏览器会为元素设置一些默认样式
但默认样式的存在会影响页面的布局
通常情况下编写网页时，要先去除浏览器的默认样式

1
2
3
4
5
/*这种方法不能去除全部默认样式*/
*{
    margin: 0px;
    padding: 0px;
}

8.浮动

​ 通过浮动可以使一个元素向其父元素的左侧或右侧移动
​ 通过 float属性来设置元素的浮动
​ 可选值：

  • none：默认值，元素不浮动
  • left：元素向左浮动
  • right：元素向右浮动
1
2
float:left;
float:right;

浮动的特点：

  1. 元素设置浮动后（不是none），水平布局的等式不需要强制满足
  2. 浮动元素会完全从文档流中脱离，不再占用文档流的位置，所以下面的还在文档流中的元素会自动向上移动
  3. 浮动元素默认不会从父元素中移出
  4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
  5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移，浮动元素不会超过它上边浮动的兄弟元素，最多和它一样高
  6. 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围（用来设置文字环绕的效果）

脱离文档流的特点：
块元素：

  • 块元素不再独占页面的一行
  • 脱离文档流后，块元素的宽度和高度默认都被内容撑开

行内元素：

  • 行内元素脱离文档流以后变成块元素，特点和块元素一样

脱离文档流后，不需要区分块和行内元素

浮动导致的问题 —高度塌陷

​ 在浮动布局时，父元素的高度被子元素撑开

​ 当子元素浮动后，从文档流中脱离，导致父元素高度丢失

​ 父元素高度丢失后，其下的元素会自动上移，导致页面布局混乱

高度塌陷的解决：
1.BFC(块级格式化环境)
BFC是CSS中的一个隐含的属性，可以为一个元素开启BFC，开启后，该元素会变成一个独立的布局区域
元素开启BFC的特点：

​ 1）开启BFC的元素不会被浮动的元素覆盖

​ 2）开启BFC的元素，子元素和父元素外边距不会重叠

​ 3）开启BFC的元素，可以包含浮动的子元素

​ 开启BFC的方式：

1. 设置元素的浮动，但脱离文档流后，宽度丢失（不推荐）

1
float: left;

2. 将元素设置为行内块元素，宽度丢失（不推荐）

1
display: inline-block;

3. 将元素的overflow设置为一个非visible的值（常用的方式）

​ 为元素设置overflow: hidden 开启BFC，使其可以包含浮动元素

1
2
3
overflow: auto;
/*或者下者*/
overflow: hidden;

4. 利用clear属性

​ 用于消除浮动元素对当前元素所产生的影响

​ 可选值：

  • left：清除左侧浮动元素对当前元素的影响

  • right：清除右侧浮动元素对当前元素的影响

  • both：清除两侧中较大数值的一侧浮动元素对当前元素的影响

1
2
3
4
5
6
 <body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
      .box1{
          border: 10px red solid;
      }
      .box2{
          height: 100px;
          width: 100px;
          background-color: #bfa;
          float:left
      }
      .box3{
          clear: left;
      }
  </style>

通过after伪元素，为after伪元素设置clear属性

1
2
3
4
5
  <body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <style>
    .box1{
        border: 10px red solid;
    }
    .box2{
        height: 100px;
        width: 100px;
        background-color: #bfa;
        float:left
    }
    /*::after伪元素是行内元素*/
    .box1::after{
        content: '';
        clear: both;
        display: block;
    }
</style>

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题

1
2
3
4
5
6
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}
1
2
3
<div class="box1 clearfix">
    <div class="box2"></div>
</div>

9. 网页的布局

头部
网页主体
底部 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>                                            
    <!-- 头部 -->
    <header></header>
    <!-- 网页主体 -->
    <main>
        <!-- 左侧导航 -->
        <nav></nav>
        <!-- 中间内容 -->
        <article></article>
        <!-- 右边栏  -->
        <aside></aside>
    </main>
    <!-- 网页底部 -->
    <footer></footer>
</body>

10.定位–position属性

通过定位可以将元素放到页面任意位置

使用position属性来定位

​ 可选值：

  • static：默认值 ， 元素是静止的，没有开启定位

  • relative：开启元素的相对定位

  • absolute：开启元素的绝对定位

  • fixed：开启元素的固定定位

  • sticky： 开启元素的粘滞定位

​ 但经开启定位（非static），通过偏移量（offset）元素来设置元素的位置

​ 偏移量–offset： top、bottom、left、right

​ top和bottom选一个设置，left和right选一个设置

  • 相对定位（参照元素在文档流中的位置）

    当元素的position属性值设置为relative时开启元素的相对定位

    特点：

    1. 元素开启相对定位后，如果不设置偏移量元素位置不会发生改变
    2. 相对定位时参照元素在文档流中的位置进行定位的
    3. 相对定位会提升元素的层级
    4. 相对定位不会使元素脱离文档流
    5. 相对定位不会改变元素的性质 块还是块，行内还是行内
1
2
3
position: relative;                  
left: 200px;
top: -200px;

  • 绝对定位（相对于其包含块进行定位的）

    元素的position属性值设置为absolute时开启元素的绝对定位

    特点：

    1. 开启绝对定位后，如果不设置offset元素的位置不会发生变化
    2. 开启绝对定位后，元素会从文档流中脱离
    3. 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
    4. 绝对定位回使元素上升一个层级

    包含块：

    • 正常情况下：

      包含块是离当前元素最近的祖先块元素

    • 绝对定位的包含块：

      包含块是离它最近的开启了定位的祖先元素

      如果所有的祖先元素都没有开启定位，则相对于body

  • 固定定位（相对于浏览器可视窗口进行定位）

    1. 元素的position属性值设置为fixed时开启元素的固定定位
    2. 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样
    3. 元素不会随网页的滚动条滚动

  • 粘滞定位

    1. 当元素的position属性值设置为sticky时开启元素的粘滞定位
    2. 粘滞定位可以在元素到达某个位置时将其固定
1
2
position: sticky;                                                  
top: 0;

元素的层级

z-index

​ 开启定位的元素，可以通过z-index属性来设置元素的层级

​ z-index需要一个整数作为参数，数值越大层级越高

​ 如果层级一样，优先显示靠下的元素

​ 祖先元素的层级再高也不会盖住后代元素