BFC、选择器及居中

最新推荐文章于 2024-07-03 09:38:36 发布

后栀

最新推荐文章于 2024-07-03 09:38:36 发布

阅读量228

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/qq_52612197/article/details/110698666

版权

什么是BFC

块级格式化上下文
BFC是一个独立的布局环境，其中的元素不受外界的影响,它也不会影响外界的元素。
BFC规则：

内部的box会在垂直方向，从顶部开始一个接一个放置。
计算BFC高度时浮动元素也会参与计算。
具有BFC的元素不会与浮动元素相互重叠，一般是用来清除浮动。
在BFC这个元素的垂直方向的边距会发生重叠。

如何触发BFC：

根元素< html >
浮动元素的float不为none时
绝对定位元素（position的值为absolute或fixed）
overflow的值不为visible得块元素
contain值为layout、content或paint
display的值为inline-block、table-cell、table、flex、inline-flex、table-caption、table-row等

BFC解决的问题：

浮动元素的父元素高度坍塌
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box{
            background-color: green;
            width: 600px;
            border: 10px solid black;
        }
        .box1,.box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
此时发生了高度坍塌，现给浮动元素父元素激活BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box{
            background-color: green;
            width: 600px;
            border: 10px solid black;
            overflow: hidden;
        }
        .box1,.box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
2.两栏自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
       *{
           margin: 0;
           padding: 0;
       }
       .box1{
           height: 500px;
           background-color: yellow;
           overflow:hidden;
       }
       .box2{
           width: 200px;
           height: 500px;
           background-color: green;
           float: left;
       }
    </style>
    <div class="box">
        <div class="box2"></div>
        <div class="box1"></div>
    </div>
</body>
</html>

让box1触发BFC
在这里插入图片描述
3. 外边距垂直方向重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            margin-bottom: 30px;
        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: green;
            margin-top: 50px;
        }
    </style>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

此时外边距重合，只有50px,可以给其中一个盒子外边包一个盒子触发BFC，解决外边距重叠问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .box{
            overflow: hidden;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            margin-bottom: 30px;
        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: green;
            margin-top: 50px;
        }
    </style>
    <div class="box">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

选择器总结

1.元素选择器
2.id选择器

 <style>
        #box{
            width: 0;
            height: 0;
            border:5px solid black;
        }
    </style>
    <div id="box"></div>

3.类选择器
4.属性选择器
E[att]选中有att属性的E元素
E[att=" xm"]选中具有att属性且属性值为xm的E元素
E[att~=“xm”]选中有att属性且属性列表中有一个符合xm的值的E元素
E[att^=“xm”]选中具有att属性且属性值以xm开头的E元素
E[att*=“xm”]选中具有att属性且属性值包含xm的E元素
5.伪类选择器

first-child选中第一个元素
first-of-type子元素中第一个指定类型的元素
last-child父标签中最后一个子元素
last-of-type选中子元素中最后一个指定类型的元素
nth-of-type（n）父标签中第n个某元素
nth-last-child（n）父标签中倒数第n个元素如果是某元素，则被选中，若不是，则选不中
nth-child（n）第n个是某元素则被选中
nth-last-of-type（n）倒数第n个某标签
only-child父标签中只有一个标签，且是某标签才会被选中
only-of-type父元素中只有一个某标签时才会被选中
not（）选择非指定元素的其他元素
empty选中没有子元素的某元素
还有link、visited、hover、active

7.伪元素选择器

E::after{} 在E元素之后{}
E::before{} 在E元素之前{}
::selection{}被用户选择的文字的样式
::first-letter{}选中元素的第一个字母
::first-line{}选中元素第一行文字

8.层次选择器
子选择器：>
兄弟选择器：“+”、“~”
+即选中下一个兄弟元素
“~”选中此元素下边所有某元素的兄弟元素
9.通配符选择器
*{ }

选择器权重

在这里插入图片描述

第一等，内联样式表即写在标签里的style=“ ”，权值为1000
第二等，ID选择器，即#ID{ }，权值为0100
第三等，类选择器、属性选择器、伪类选择器，权值为0010
第四等，标签选择器、伪元素选择器，权值为0001
除此之外其他选择器，如通配符选择器、兄弟选择器、子选择器的权值均为0000

水平居中

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{
          width: 100px;
          height: 100px;
          background-color: red;
          margin: 0 auto;
      }
    </style>
</head>
<body>
  <div></div>
</body>
</html>

在这里插入图片描述
第二种方法
定位+margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .body{
          position: relative;
        }
        .imp{
          position: absolute;
          width: 100px;
          height: 100px;
          background-color: red;
          left:0;
          right: 0;
          margin: 0 auto;
        }
    </style>
</head>
<body>
   <div class="body">
      <div class="imp">
      </div>
  </div>
</body>
</html>

结果同上
第三种方法
flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
      .one{
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .two{
        width: 100px;
        height: 100px;
        background-color: red;
      }
</style>
</head>
<body>
   <div class="one">
      <div class="two"></div>
   </div>
</body>
</html>

垂直居中

第一种
使用flex弹性布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        body{
            background-color: grey;
            width: 100%;
            height: 500px;
            display: flex;
            align-items: center;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color:red;
        }
    </style>
    <body>
        <div class="box">
        </div>
    </body>
    <html>

在这里插入图片描述

第二种
使用定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            transform: translatey(-50px);
        }
    </style>
<head>
<body>
    <div class="son"></div>
</body>
</html>

在这里插入图片描述

后栀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC、选择器及居中

什么是BFC块级格式化上下文BFC是一个独立的布局环境，其中的元素不受外界的影响,它也不会影响外界的元素。BFC规则：内部的box会在垂直方向，从顶部开始一个接一个放置。计算BFC高度时浮动元素也会参与计算。具有BFC的元素不会与浮动元素相互重叠，一般是用来清除浮动。在BFC这个元素的垂直方向的边距会发生重叠。如何触发BFC：根元素< html >浮动元素的float不为none时绝对定位元素（position的值为absolute或fixed）overflow的值
复制链接

扫一扫