9.div+css基础学习四 盒子模型margin/padding的使用

本文阅读 2 分钟
首页 代码,C/C#/C++ 正文

1、盒子模型

盒子模型的组成部分:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性。


自身的身高             width height 
内边距                 padding
盒子边框             border 边框
与其他盒子的距离         margin 外边距


Border 边框:
常见的写法 border:1px solid #foo;
单独属性:
        border-width:
    
        border-style:
                        dotted 点状虚线
                        dashed(虚线)
                        solid(实线)
                        double(双实线)
        
        border-color:(颜色)


padding:(值:像素/厘米等长度单位、百分比);
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左(设置4个点-->顺时针方向)
单独属性:
        padding-top:
        padding-right:
        padding-bottom:
        padding-left:


当设置内边距的时候会把盒子撑大,为了保持盒子原来的大小,应该高度和宽度进行减小,根据width和height减小。


margin 外边距
值:与padding相同
单独属性:与padding相同
外边距合并:两个盒子同时设置了外边距,会进行一个外边距合并。
margin:10px  上下左右都会腾出10px出来
margin:0px auto; 居中

2021.08.03 (0:18:41)

本文为互联网自动采集或经作者授权后发布,本文观点不代表立场,若侵权下架请联系我们删帖处理!文章出自:https://blog.csdn.net/qq_45555226/article/details/119355481
-- 展开阅读全文 --
KillDefender 的 Beacon 对象文件 PoC 实现
« 上一篇 02-09
Web安全—逻辑越权漏洞(BAC)
下一篇 » 03-13

发表评论

成为第一个评论的人

热门文章

标签TAG

最近回复