页面布局之盒子模型 |
您所在的位置：网站首页 › 水平垂直页边距怎么设置 › 页面布局之盒子模型 |
页面布局之盒子模型
|
页面布局之盒子模型——核心
padding 内边距padding会撑开盒子不让padding撑开盒子padding属性的设置padding属性的应用——导航栏
margin 外边距margin的叠加
padding 内边距
padding会撑开盒子
padding实际上是内容与边框的距离。设置padding，即设置了内容与边框的距离，则本质上是“撑开”了盒子。故盒子会变大！ 仅设置content和border的块状元素div 设置content内容区的宽度高度，并且设置了margin-top,margin-left，以及设置了1px的红色实线边框。 div{ width: 100px; height: 110px; margin-top: 30px; margin-left: 30px; border:1px solid red; }如图：
如何既能让content与border保持距离，但又不额外撑开盒子，使得盒子变大而影响布局呢。 用height和width减去设置的padding值即可解决问题。 padding属性的设置可分别单独设置四个方向的padding div{ width: 100px; height: 110px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; margin-top: 30px; margin-left: 30px; border:1px solid red; }分别设置了padding-top,padding-left,padding-bottom,padding-right。 也可一起设置padding，上面代码等价于： div{ width: 100px; height: 110px; padding:10px; margin-top: 30px; margin-left: 30px; border:1px solid red; }padding：10px表示上右下左都有10px的内边距。 另外几种设置方式 padding:5px 10px; 上下为5px,左右为10pxpadding:5px 10px 15px;上为5px，左右为10px，下为15px；padding:5px 10px 15px 20px;上右下左分别为5px，10px，15px，20px （顺时针） padding属性的应用——导航栏先上代码 首页 朋友圈 QQ空间 呵呵呵呵呵呵 body{ font-size: 0; } a{ display:inline-block; height: 30px; padding: 0 20px; line-height: 30px; font-size: 15px; text-decoration: none; background-color: pink; }
如图我给定了宽度width:100px; margin外边距叠加，分以下三种 同级元素外边距叠加父子元素外边距叠加空元素外边距叠加margin外边距叠加的规则如下： 水平margin，即margin-left,margin-right永远不会发生叠加只有margin-top,margin-bottom会在这三种情况下发生叠加外边距叠加之后，外边距高度等于两个外边距最大的那个值外边距叠加，与inline元素无关，因为行内元素的margin-top,margin-bottom无意同级元素外边距叠加的实例： aaaa bbbb首先，设置两个块级元素盒子。 .box1{ width: 100px; height: 100px; /* margin-bottom: 30px; */ background-color: pink; } .box2{ width: 100px; height: 100px; /* margin-top: 20px; */ background-color: skyblue; }再者，设置CSS样式，设定width,height,background-color，先不设置margin。 看看效果：
同样父子元素外边距叠加，也遵循以上规则。 如何解决？ 为父元素定义上边框 border-top为父元素定义上内边距 padding-top为父元素添加overflow:hidden关于margin，除了外边距叠加的知识，还有水平居中和负margin技巧 可另外看以下链接 |
若设置了padding，会撑大盒子！
蓝色部分是content，绿色部分是向外额外撑开的padding，绿色与橙色交界是原本的border。 如果给盒子设置了宽度和高度（针对content），再设置padding，则会撑开盒子。
text-decoration:none 是为了去掉 a 标签的下划线。 line-height:30px；与height相等，是为了使文本垂直居中 既然要设置height，而a是行内元素，无法设置高度，故要对元素进行模式转换！ 转化成block元素则没法横向排列，故转化为inline-block。 转化成inline-block，又会出现间隙，故要父元素font-size:0，子元素a标签另外设置font-size 每个导航栏的字数不一样多，3个，4个，5个，6个，若给定宽度会很不方便 所以只设置padding，根据content的宽度再去撑开盒子即可
非常丑
设置margin值，粉色为30px.蓝色为20px，如下：
橙色那块是粉色盒子的margin-bottom:30px；“吃掉”了蓝色的margin-top。【本文地址】