页面布局之盒子模型 |
您所在的位置:网站首页 › 水平垂直页边距怎么设置 › 页面布局之盒子模型 |
页面布局之盒子模型——核心
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; }如图: 若设置了padding,会撑大盒子! div{ width: 100px; height: 110px; padding: 30px; margin-top: 30px; margin-left: 30px; border:1px solid red; }蓝色部分是content,绿色部分是向外额外撑开的padding,绿色与橙色交界是原本的border。 如果给盒子设置了宽度和高度(针对content),再设置padding,则会撑开盒子。 不让padding撑开盒子如何既能让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; }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的宽度再去撑开盒子即可 如图我给定了宽度width:100px; 非常丑 margin 外边距 margin的叠加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。 看看效果: 设置margin值,粉色为30px.蓝色为20px,如下: .box1{ width: 100px; height: 100px; margin-bottom: 30px; background-color: pink; } .box2{ width: 100px; height: 100px; margin-top: 20px; background-color: skyblue; }橙色那块是粉色盒子的margin-bottom:30px;“吃掉”了蓝色的margin-top。 同样父子元素外边距叠加,也遵循以上规则。 如何解决? 为父元素定义上边框 border-top为父元素定义上内边距 padding-top为父元素添加overflow:hidden关于margin,除了外边距叠加的知识,还有水平居中和负margin技巧 可另外看以下链接 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |