浮动、css三大特性、伪元素

@西楚霸王

于 2020-08-23 22:53:57 发布

阅读量575

点赞数

分类专栏：浮动、css三大特性、伪元素文章标签： html5 css3

本文链接：https://blog.youkuaiyun.com/qq_41027812/article/details/108188930

版权

浮动、css三大特性、伪元素专栏收录该内容

1 篇文章

订阅专栏

浮动、css三大特性、伪元素

css三大特性

层叠性

样式冲突就近原则，也就是后引入生效
样式不冲突的代码不会受影响

    .box {
        width: 300px;
        height: 300px;
        background-color: red;
        background-color: blue;
    }
    .box {
        width: 500px;//蓝色
    }

继承性
- 子标签继承父标签的样式
  - 文本字体属性都会继承，text-, line- ,font-, color list-
优先级
- 选择器类型权值
  通配符选择器 0
  标签选择器 1
  类选择器，伪类选择器 10
  ID选择器 100
  行内样式 1000
  !important 无限权重
  继承样式比通配符选择器还低
- ```
    .box {
        color: green!important;// 无限权重
    }
```
- 复合选择器的权值计算方式：组成其所有单一选择器的权值之和 ul>li .red 1+1+10=12

选择器类型	权值
通配符选择器	0
标签选择器	1
类选择器，伪类选择器	10
ID选择器	100
行内样式	1000
!important	无限权重
继承样式	比通配符选择器还低

标签显示模式特点与转换

标签的嵌套规则
- h标签和p标签不能嵌套其他块级标签，只能嵌套其他行内标签或者文字
- a标签属于行内标签，但是比较特殊，可以嵌套任何标签，除了a标签
- 其他行内标签只能嵌套文字，或者行内标签
块级标签
- div h1-h6 p ul li ol li dl dt dd
- 总是从新行开始
- 设置高度、行高、外边距以及内边距都有效
- 宽度默认是容器的100%
- 可以容纳内联标签和其他块级标签
行内标签
- strong b em i ins u del s span
- 和相邻行内标签在一行上
- 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
- 默认宽度就是它本身内容的宽度
- 行内标签只能容纳文本或者其他行内标签
行内块标签
- img input button
- 和相邻的行内标签在一行，但之间会有白色缝隙
- 默认宽度就是它本身内容的宽度
- 设置高度、行高、外边距以及内边距都有效
标签显示模式转换 display
- 块转行内：display : inline;
- 行内转块： display : block;
- 块、行内转行内块： display : inline-block;

动态宽高

max-width 最大宽度，当屏幕小于800px(0-800px) 盒子宽度也会随之缩小
min-width 最小宽度，当屏幕大于800px(800px-无穷大) 盒子宽度也会随之放大
max-height 最大高度(0-300px), 随着子标签增高而增高，最大300px
min-height 最小高度(300px-无穷大)，随着子标签缩小而缩小，最小300px

外边距传递和塌陷

外边距传递和塌陷(父子关系)
- 给父标签添加overflow属性除默认值visible之外的其他值，触发BFC
- 给父级设置边框或内边距
外边距传递和塌陷(兄弟关系)
- 给其中一个标签套父标签，设置overflow属性为除默认值visible之外的其他值，触发BFC
- 相邻的两个标签，垂直外边距会发生折叠，取最大值

盒子居中技巧

<style>
      * {
          padding: 0;
          margin: 0;
      }
      .box1 {
          width: 300px;
          height: 300px;
          background-color: red;
      }
      .box1 div {
          width: 100px;
          height: 100px;
          background-color: blue;
          /* 块级标签水平居中 */
          margin: 0 auto;
      }
      .box2 {
          width: 300px;
          height: 300px;
          background-color: gold;
          text-align: center;
          line-height: 300px;
      }
      /* 行内标签具有文字的特性 */
      .box2 span {
          background-color: pink;
      }
      .box3 {
          width: 300px;
          height: 300px;
          background-color: green;
          text-align: center;
      }
      .box3 img {
          width: 200px;
          /* display: block;
          margin: 0 auto; */
      }
      .box4 {
          width: 300px;
          height: 300px;
          background-color: deeppink;
          /* text-align: center; */
          line-height: 300px;
      }
      .box4 a div {
          width: 100px;
          height: 100px;
          background-color: blue;
          margin: 0 auto;
      }
  </style>
</head>
<body>
  <div class="box1">
      <div></div>
  </div>
  <div class="box2">
      <span>
          hello world
      </span>
  </div>
  <div class="box3">
      <img src="./03.jpg" alt="">
  </div>
  <div class="box4">
      <a href="">
          <div></div>
      </a>
  </div>
</body>

浮动

什么是浮动？

标签的浮动是指设置了浮动属性的标签会脱离标准流的控制，移动到其父标签的指定位置

浮动属性

float
- left
- right
- none 默认

浮动的作用

图文环绕

     <style>
      img {
          width: 300px;
          float: left;
      }
  </style>
</head>
<body>
  <img src="./03.jpg" alt="">
  标签浮动以后，脱离正常文档流，导致父标签无法被撑开
  ，会影响后续正常布局标签浮动以后，脱离正常文档流，
  导致父标签无法被撑开，会影响后续正常布局标签浮动以
  后，脱离正常文档流，导致父标签无法被撑开，会影响后
  续正常布局标签浮动以后，脱离正常文档流，导致父标签
  无法被撑开，会影响后续正常布局
</body>

页面布局

浮动的问题

标签浮动以后，脱离正常文档流，导致父标签无法被撑开，会影响后续正常布局

清浮动的几种方法

给浮动标签的父标签固定高度（不够灵活）
在浮动标签的最后加一个div（块标签），标签本身不符动，且添加样式 clear:both;(代码冗余)
给父标签加overflow属性，overflow为visible以外的其他值时可以帮助实现

推荐方法：给浮动标签的父标签添加 .clearfix

.clearfix {
	*zoom:1; //这是针对于IE6/7的
}
.clearfix:after {
	content:"";
	clear:both;
	display:block;
}

伪元素

div:after {
	
}
//向当前元素的最后一个子元素后添加一个元素
div:before {
	
}
//向当前元素的第一个子元素前添加一个元素