CSS文档流和盒模型

Mianxiong
189 阅读4分钟

文档流

inline元素流动方向是从左到右
当一个span到达最底端的时候，如果发现空间不够了，会自己把自己截成两半

1.png

块级元素流动方向从上到下。默认情况下，一个块级元素只占一行，而且全占。
inline-block流动方向是从左到右，但是到达最后的时候，它不会把自己分成两块

2.png

1. span元素的宽度是由里面所有的内联元素的宽度合成
2. 不要在display为inline的元素里面 加入 display为block的元素
3. span，inline元素不接受宽度
4. span既不接受高度，也不接受宽度
5. span里面的padding改变的不是span的实际高度，而是改变了span看得见的高度
6. div的宽度默认能有多宽有多宽，默认自动计算宽度，不一定是百分之百，例如<div style="margin:20px;">第1个div元素</div>
7. span元素宽度是尽量的窄，div元素的宽度是尽量的宽
8. block一般来说，永远不要写宽度100%
9. inline-block宽度上是模仿了span，但是，它在设置上又模仿了block，inline-block元素可以设置宽度，也可以设置高度

span里面的padding改变的不是span的实际高度，而是改变了span看得见的实际高度
蓝色div，高度是0，红色span，它的高度是line-height间接决定的，而不是文档流决定的

span {
            border: 1px solid red;
            padding:20px 40px;
            line-height: 200px;
}

3.png

div的高度是由里面文档流的元素决定的，可以设置高度和宽度
如果div里面什么都没有，div的高度为0
span，它的高度是line-height间接决定的，而不是文档流决定的
如果有滚动条，那么我的内联元素，是默认只在第一屏里面显示，后面的我是留空的，不会跑到滚动条右边去得
._div {
            border: 1px solid green;
            height: 200px;
            overflow: auto;
}
<div class="_div">
        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        <div style="border: 1px solid red;width:1000px;">我很好</div>
        <span style="border: 1px solid blue;"></span>
 </div>

4.png

5.png

如果元素脱离了文档流，所在的容器就不把元素算在高度里面
脱离文档流的方法：1. position:absolute/fixed;  2. float:left/right;

盒模型

content-box width = 内容宽度 
border-box width = 内容宽度 + padding + border

<style>
        .content-box {
            margin: 30px;
            border: 3px solid blue;
            padding: 10px;
            box-sizing: content-box;
            width: 100px;
            height: 100px;
        }

        .border-box {
            margin: 30px;
            border: 3px solid blue;
            padding: 10px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
        }
    </style>
    <div class="content-box">content-box</div>
    <div class="border-box">border-box</div>

6.png

margin合并

<style>
        .parent {
            border:2px solid red;
        }
        .child1 {
            border: 2px solid blue;
            margin-bottom: 30px;
        }
        .child2 {
            border: 2px solid green;
            margin-top: 30px;
        }
</style>
<body>
    <div class="parent">
        <div class="child1">第一个孩子</div>
        <div class="child2">第二个孩子</div>
    </div>
</body>

7.png

取消margin合并

.child {
            border: 2px solid blue;
            margin: 30px 0;
            display: inline-block;
            width: 300px;
}
<div class="parent">
        <div class="child">第一个孩子</div>
        <div class="child">第二个孩子</div>
</div>

8.png

孩子和孩子之间会合并他们上面和下面的margin，第一个孩子的上边距和父母的上边距重合，最后一个孩子的下边距和父母的下边距重合
只有上下重叠，左右从来不重叠
<style>
    .parent {
            /* border: 2px solid red; */
            /* margin: 15px 0; 依然重叠*/
            margin: 30px 0;
            background: red;
    }
    .child {
            border: 2px solid blue;
            margin: 30px 0;
            /* display: inline-block;
            width: 300px; */
    }
    <div class="parent">
        <div class="child">第一个孩子</div>
        <div class="child">第二个孩子</div>
    </div>
</style>

9.png

父子合并四种取消外边距合并的方式,在parent上加：
1. border-top:  10px solid green; 只取消了上边距重合
2. padding-top: 1px;只取消了上边距重合
3. overflow: hidden;很好用，上下边距都取消了重合
4. border: 2px solid red;很好用，上下边距都取消了重合

border: 2px solid red;效果

11.png overflow:hidden;效果 10.png

CSS实现彩虹

效果：(mianxiong.github.io/html-css/cs…)

20.png

资料来源：饥人谷

avatar
文章
阅读
粉丝