css三大特性权重计算BFC(块级格式化上下文)盒子模型

最新推荐文章于 2024-11-13 22:57:03 发布

会给自己买_�

最新推荐文章于 2024-11-13 22:57:03 发布

阅读量285

点赞数 1

文章标签： css3 html5 前端

本文链接：https://blog.csdn.net/qq_53787962/article/details/127620830

版权

本文深入讲解CSS的三大特性——继承性、层叠性和优先级，介绍权重计算规则，并解析块级格式化上下文(BFC)的概念。此外还探讨了元素显示模式、盒子模型及其组成部分，以及如何通过CSS技巧实现特定布局效果。

摘要由CSDN通过智能技术生成

系列文章目录

文章目录

系列文章目录
前言
一、css三大特性
- 1.继承性
- 2.层叠性
- 3.优先级
二、权重计算
- 1.引入库
- 2.读入数据
三、BFC(块级格式化上下文)
- 1.引入库
- 2.读入数据
总结

一、css三大特性

1.继承性：哪些属性能被继承？
文字文本属性可以被继承
opacity透明度
哪些标签不可以被继承？
a标签不可以继承文本样式和文本颜色
h标签--size和weight
2.层叠性：多个样式的时候，离得最远的样式被引用
3.优先级：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高

二、权重计算

1.优先级权重

当多个选择器混合在一起使用时,我们可以通过计算权重来判断谁的优先级最高。

权重计算规则
(1) 内联样式，如: style="”，权值为1, 0, 0，0。
(2) ID选择器，如: #content,权值为0，1, 0, 0。
(3)类，伪类和属性选择器，如.content E:link E[attr], 权值为0，0, 1, 0。

(4)元素选择器和伪元素选择器，如div p ::before,权值为0，0, 0, 1。

(5) 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0, 0, 0, 0。

(6)继承的样式没有权值。

!important的权重最高

2.练习

代码如下（示例）：

<!-- 
     .one>#two a:nth-of-type::before:hover{}
      10+0+100+0+1+10+1+10=0，100，30，2

     a>a+div:nth-child>ul li a::after{}
     1 0 0 1 10 0 1 0 1 0 1 1=0，0，10，6
     div>a+[nth]>a:hover span{}
     tag+子代+元素+相邻+属性+子代+元素+伪类+后代+元素
       1+0+1+0+10+0+1+10+0+1=0,0,20,4
                          10=0,0,20,12
                                   满10不能进位
    -->

三、BFC(块级格式化上下文)

1.元素显示模式：diaplay

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.块级元素、行内元素、行内块元素

1)行内元素：非独自一行，没有自己的宽度和高度；不能设置宽高，默认的宽高是内容撑起来的。常见的有a、b、u、span、del、i、em、strong等文字标签。只能容纳文本或其他行内元素，a特殊

2)块级元素：独自一行，有自己的宽度和高度。常见的有div、table、tr、form、ul、li、ol、h1~h6、p。只有文字能组成段落，p标签不能放块级元素，比如div，h

3)行内块：有自己的宽高，非独自一行。常见的有img、input、select等。

常见的空元素：img、hr、br、input、meta等。

四、盒子模型

1.盒子模型的组成

大小由"外边距、内边距、边框、内容"决定的。
页面显示的盒子大小：内边距、边框、内容。
IE盒子的宽高不变,内容包括了padding,所以内容变小了。
box-sizing: border-box;转换在设置宽高的时候是设置盒子宽高不是内容宽高。
看透网页布局的本质：把网页元素比如文字、图片等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。
1、宽度和高度
boder位置：上边框，右边框，下边框，左边框；
border:top,right,bottom,left;
2、边框border 属性：线条的粗细，线条的样式(solid直线)，线条的颜色(默认黑色)
border:1px solid red;
border-radius弧度：10px;(圆)
3、margin外边距：子元素与父元素的距离
margin-top:100px;上面
margin-bottom: 100px; 下面
margin: 100px auto; 上下，左右版心概念：永远处于页面正中心
margin使用于块级元素，指定宽度，左右外边距为auto
注：行内元素可以设置水平方向，不可以设置垂直方向
4、padding内边距：边框与内容之间的距离
1、padding: 10px;上右下左，即居中
2、padding-top: 10px;
padding-right:10px;
padding-bottom: 10px;
padding-left: 10px;
3、padding:0px 0px 100px 0px;上，右，下，左
4、padding:100px 100px; 垂直方向，水平方向，即居中
文字垂直居中：单行文本 line-height，多行文本padding

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.三角形

代码如下（示例）：

    //设置边框
    //设置边框颜色
    //把不想要的三角形设置为透明 
    width:40px;
    height:0px; 
    border:50px solid blue;
    box-sizing:border-box;盒子大小不变
    /* 对角线平分成四个三角形 */
    border-top-color:red;上红
    border-left-color:transparent;左透
    border-right-color:transparent;右透
    border-bottom:transparent;下透

3.清除空格

<style>
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
</style>
<body>
    <div>w</div><!--注释空格  --><div>w</div>
</body>