CSS-盒模型
2016-04-24 22:15
477 查看
概述
css盒模型指定元素如何显示。页面的每个元素都是一个矩形区域,这个矩形区域包括元素的内容,内边距,边框以及外边距构成。内边距是内容边界和边框之间的区域,可以通过padding属性指定,边框是矩形区域的边界,可以由border属性进行配置,外边距则由是margin属性。.box{ border-color: green; border-width: 10px; border-style: solid; padding: 50px 50px; margin: 50px 50px; } body { border: 5px dotted red; } <div class="box">我是一个div盒子</div>
外边距的叠加
当两个相邻的盒子碰到一起的时候,如果两个盒子都设置了外边距,那么一般情况下这两个外边距会叠加,实际的外边距为较大值的那一方。.box1{ border: 2px solid pink; padding: 30px; margin-bottom: 50px } .box2{ border: 2px dotted purple; padding: 30px; margin-top:90px; }
给盒子1设置了外边距50px,给盒子2设置了外边距90px,最后实际的外边距为90px。
只有普通文档流中块框的垂直外边距才会发生叠加,行内框,浮动框和绝对定位框之间的空白都不会叠加。
.box1{ border: 2px solid pink; padding: 30px; margin-bottom: 50px; float: left; width: 80%; } .box2{ border: 2px dotted purple; padding: 30px; margin-top:90px; width:80%; float: left; }
相关文章推荐
- Qt基础:样式表
- CSS3笔记
- CSS继承
- CSS里常见的块级元素和行内元素
- CSS3 布局样式
- CSS3中的变形与动画(下)
- 2016-04-24 html学习 CSS学习
- CSS3中的变形与动画(上)【2D】
- CSS盒子模型
- CSS
- 《CSS3实战》笔记--弹性盒模型(三)
- css3的box-sizing
- 暂停和播放CSS3动画的两种实现方法
- css3新增的文本高级样式-文本阴影和文本溢出
- [读书笔记] CSS权威指南2: 结构和层叠
- 轮播图的实现
- 购物商城后台页面设计
- 【Qt】一段QPushButton的styleSheet样式分享
- H5+css3+js搭建带验证码的登录页面
- CSS 笔记