欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

程序员文章站 2022-04-24 22:41:00
...

1. 盒模型

注意:padding和content区的颜色一样;border有自己的颜色;

问:如果border是虚线,那么虚线之间的颜色是什么呢?

答:跟content、padding颜色一样

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

有趣的理解:盒模型三个区的颜色:content区是帝都,相邻的padding受content控制,颜色与content一致,而border太远,border管的地方由border自己决定(哪怕不设置,默认都透明色|白色),border不管的地方(border-style:dashed、dotted),还是归content管的

2. position定位

(1)absolute:脱离原来位置,有层级,高,产生bfc;相对于有定位的父级进行定位,没有定位的父级,相对于文档定位。

(2)relative:保留原来位置,有层级,但不高。产生bfc;相对于自己原来的位置(在一个块内的位置,如果父级、祖父级移动,它也会跟着移动)

有趣的理解:position:relative;灵魂出窍,肉身还在。其他元素都可以看见肉身,都以肉身为准。

relative作为参照物,absolute作为定位。

(3)fixed:相对于屏幕定位,不管页面怎么移动,fixed的元素,相对于屏幕的位置是不变的。

问1:当父级只有position,没有left、right,算不算有定位?

答1:已经是定位元素,但是位置并不改变,因为,没有left和top,没有指定该元素定位到哪,所以默认原来位置

问2:因为absolute是相对父级定位的,而relative是相对自己原来位置定位的,那么absolute是相对父级盒模型的哪个区域定位的呢?

答2:有absolute定位的子级,子级盒模型优先与父级的padding定位(padding > content)。

问3:无定位的子级,在父级哪个区域呢?

问3:无absolute定位的子级,子级盒模型都在父级的content区域(不管父级是否定位)。

由问题3可以推倒,position:relative;原来的位置就是无定位的时候的位置。

3. bfc:block format content块级元素格式上下文,改变了块级结构的内部块的排列方式,比如:给父级设置float:left,那么子级就会在父级内从左到右的排列。

块级元素的哪些属性可以触发bfc?

float 除了none(left、right)
overflow 除了visible(hidden,auto,scroll ) 
display (inline-block, flex, inline-flex,table-cell,table-caption) 
position值为(absolute,fixed)

4. margin的两个问题

(1)margin塌陷:父子级的块级元素,垂直方向的margin,父子共用父子中margin值最大的那个,比如:父级的margin-top:100px;子级的margin-top:50px;那么父级和子级margin-top都是100px;

解决办法:父级触发bfc,父级是父级的margin-top,子级是子级的margin-top;

实例中:父级相对于文档,margin-top:100px;子级相对于父级,margin-top:50px;

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并                                                                            CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

(2)margin合并:兄弟结构的块级元素,垂直方向上的margin取最大那个margin值。比如:上一个块级的margin-bottom:100px;下一个块级元素的margin-top:50px;那么两个块级元素的垂直margin距离是100px。

解决办法:给其中一个加一个触发bfc的父级,当然,你要是给另一个也加一个触发bfc的父级也可以。

实例:上一个块级元素的margin-bottom:100px;下一个块级元素的margin-top:30px;

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

实例效果:

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并                                                                              CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

注意:在解决margin合并的时候,加了一个触发bfc的父级HTML标签,这是在HTML结构上添加标签,修改结构,不好。所以,margin合并,不要去解决,就使用margin的这种特性。

5. float

(1)特性:给父级设置float,那么子级就会在父级内依次排列,每一行不可溢出父级的宽度,换行排列。

(2)特性:子级元素之间没有文本间隙8px。

(3)特性:display:inline-block。

(4)产生浮动流:普通的块级元素看不见产生浮动流的元素,所以会与浮动元素处在同一位置(重叠)的下面

(5)清除浮动流:

实例代码:由于wrapper里面的子级是float,产生了浮动流,这时,父级wrapper看不到自己的子级,高度不能被撑开,所以要在子级的后面借用一个p标签,清除左右两侧的浮动流。

    <style>
    .wrapper {
        border: 1px solid black;
    }
    .wrapper div {
        float: left;
        width: 50px;
        height: 50px;
        background-color: green;
        column-rule-color: red;
    }
    p {
        clear: both;
    }
    </style>

<body>

    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <p></p>
    </div>

</body>

效果:注意此处的p标签失去了段落效果。

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

注意:坚决不能采用添加标签的形式解决问题,清除浮动流的最好方法:用微元素清除浮动流

像上图那种效果,父级包裹有浮动流的子级,也可以将父级触发bfc,这样就可以包裹子级了

(1)加position:absolute

效果:

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

(2)加overflow:hidden

效果:

CSS盒模型、position定位、bfc、float浮动流、margin塌陷合并

最后还是想说一点:div的display被改为inline-block后,宽、高都由内容决定。

position:absolute;float:left、right;他们的display:inline-block