首页 > 其他 > 详细

盒模型

时间:2020-03-06 15:14:59      阅读:53      评论:0      收藏:0      [点我收藏+]

1、外边距:改变元素外边的间距(margin可以为负值)

            margin:一个值;一个值 改变四个方向 padding:34px;
             margin:两个值;每个值控制两个方向 padding:5px 24px;上下 左右
             margin:三个值;上 左右 下
            margin:四个值;上 右 下 左

 margin:20px auto;(auto指左右居中)

margin:auto;(只左右居中,垂直不居中)

margin常见bug:嵌套关系的元素,子元素和父元素的外边距相遇,取较大值。

                          上下外边距相遇,只显示较大值。

第二种写法:margin-top:20px ; 顶部内边距
                     margin-bottom:20px; 底部内边距
                     margin-left:45px; 左内边距
                     margin-right:56px; 右内边距
2、内边距:改变元素与内容的间距(padding不能为负值,不会对背景图的位置造成影响)
             padding:一个值;一个值 改变四个方向 padding:34px;
             padding:两个值;每个值控制两个方向 padding:5px 24px;上下 左右
             padding:三个值;上 左右 下
             padding:四个值;上 右 下 左
第二种写法:padding-top:20px ; 顶部内边距
                     padding-bottom:20px; 底部内边距
                     padding-left:45px; 左内边距
                     padding-right:56px; 右内边距

3、盒模型占位大小计算

w=width+左右边框+左右内边距+左右外边距

h=height+上下边框+上下内边距+上下外边距

4、矩形选框工具选中----ctrl+c-----ctrl+n---ctrl+v----ctrl+shift+alt+s

盒模型

原文:https://www.cnblogs.com/xsqlj/p/12402810.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!