前端学习(四）盒子模型（笔记）

内外边距：

外边距：
margin

margin-left:100px;
margin-right:100px;
margin-top:100px;
margin-bottom:100px;

缩写：
margin:100px;
四个方向都是100px；
margin:100px 200px;
上下100px 左右200px
margin:100px 200px 50px;
上100px  左右200px 下50px
margin:100px 200px 50px 70px;
上100px 右边200px 下50px 左边70px（顺时针）

****
外边距：指的是同级元素之间的距离（自己本身距离父级的距离）

margin值可以是负值！

注意：
    margin的bug

        1.拖拽父级（只发生margin-top）
        场景：
            父级包子级，给了子级margin-top，但是出来的效果相当于给了父级margin-top了！！！

        解决：
            1.给父级添加border（有时候不需要border，不太好）
            2.padding内边距
            3.子级是浮动元素！

        2.margin塌陷（只发生在上下的两个块身上）

        场景：
            上下的两个块之间要写100px； 上面给了一个margin-bottom：50px
            下面给了一个margin-top：50px；

            显示出来的是50px；

        解决：
            1.只给一个块写margin值！
            2.padding

        结论：
            塌陷的时候只认值大的那一个！    
===============================================

内边距：
    padding 的写法和margin一某一样！

（一个块距离自己内部的一个距离！）

***遇到固定宽的块元素，要给他添加内边距，加完以后要是为了和原来保持一样那么原来的宽度上要减去相应的值！

注意：padding没有负值！
===============================================


盒模型：一个盒子宽高！


一个盒子宽高=宽高+padding+border

===============================================


对于内外边距还有最注意：
    
    块元素：四个方向都支持！

    行内元素：只支持左右方向！

============================================

让一个固定宽的块在页面中居中！
margin:0 auto;上下为0；左右自动！


行内标签（修饰细节）
块标签（搭架子）
--------------------------------------

没有固定高的标签里面有文字的话，高度一般认为是文字的高，但是比文字还要高（默认的行高）！


=========================================
ps：

ctrl+R 显示标尺

转载于:https://www.cnblogs.com/wxiaoyu/p/9579172.html