CSS中的一些知识点

·  阅读 281

这是我参与8月更文挑战的第23天,活动详情查看:8月更文挑战

css盒模型

就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

box-sizing(有3个值哦):border-box,padding-box,content-box.

标准盒子模型:

image.png

IE盒子模型:

image.png

区别:从图中我们可以看出,这两种盒子模型最主要的区别就是width的包含范围,在标准的盒子模型中,width指content部分的宽度,在IE盒子模型中,width表示content+padding+border这三个部分的宽度,故这使得在计算整个盒子的宽度时存在着差异:

标准盒子模型的盒子宽度:width

IE盒子模型的盒子宽度:左右border+左右padding+width

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示的是IE盒子模型 box-sizing属性的三个值 :

  • content-box: 默认值,border和padding不算到width范围内,采用标准模式解析计算,是W3c的标准模型(default)
  • border-box:border和padding划归到width范围内,采用怪异模式解析计算,是IE的怪异盒模型
  • padding-box:将padding算入width范围

最后,前面我们还提到了,box-sizing:padding-box,这个属性值的宽度包含了左右padding+width 也很好理解性记忆,包含什么,width就从什么开始算起。

BFC(块级格式化上下文,用于清楚浮动,防止margin重叠等)

块级格式化上下文,是一个独立的渲染区域,并且有一定的布局规则。

BFC区域不会与float box重叠

BFC是页面上的一个独立容器,子元素不会影响到外面

计算BFC的高度时,浮动元素也会参与计算

那些元素会生成BFC:

根元素

float不为none的元素

position为fixed和absolute的元素

display为inline-block、table-cell、table-caption,flex,inline-flex的元素

overflow不为visible的元素 这里可以参考我的文章BFC

垂直居中的方法

  • margin:auto法
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>
复制代码

定位为上下左右为0,margin:0可以实现脱离文档流的居中.

  • margin负值法
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
复制代码

margin-top: -190px; height的一半

margin-left: -240px; width的一半

补充:其实这里也可以将marin-top和margin-left负值替换成, transform:translateX(-50%)和transform:translateY(-50%)

  • table-cell(未脱离文档流的)

设置父元素的display:table-cell,并且vertical-align:middle,这样子元素可以实现垂直居中。

div{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}
复制代码
  • 利用flex

将父元素设置为display:flex,并且设置align-items:center;justify-content:center;

双边距重叠问题(外边距折叠)

多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠

折叠的结果为:

两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。

两个外边距一正一负时,折叠结果是两者的相加的和。

分类:
前端
标签: