CSS

2023-02-08 67 阅读1分钟

BFC是什么

1.BFC【块级格式化上下文】
2.触发条件

浮动元素
绝对定位元素
行内块元素
overflow值不为visible的块级元素
弹性元素（display为flex或inine-flex元素的直接子元素） 3.解决问题
清除浮动
防止margin合并、

如何实现垂直居中

如果父元素(parent)的高度（height）不写，只需写 padding:10px 0;
如果父元素(parent)有固定高度则方法如下：

1.flex

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
        需要居中的文字 需要居中的文字 需要居中的文字 需要居中的文字 需要居中的文字
    </div> 
  </div>
</body>
</html>

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}

2.margin-top

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
        需要居中的文字 需要居中的文字 需要居中的文字 需要居中的文字 需要居中的文字
    </div>
  </div>
</body>
</html>

.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  height: 100px;
  margin-top: -50px;
}

CSS选择器优先级如何确定？

选择器越具体，优先级越高
相同优先级，出现在后面的，覆盖前面的
属性后面加!important的优先级最高，但很少用

如何清除浮动？

给父元素加上 .clearfix

.clearfix:after{
    content:'';
    display:block;
    clear:both;
}

给父元素加上overflow:hidden

两种盒模型有什么区别

一种盒模型是content-box， width的宽度既是centent区域的宽度
实际宽度=width+padding+border
第二种为border-box,width的宽度就是左右边框外侧的距离
实际宽度=width