css-盒子模型
css-盒子模型
一、padding(内边距)
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。
padding-left/right/top/bottom 左内边距/右内边距/上内边距/下内边距
例如:h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
可以单独使用控制单独一边的效果,当然也可以合并一起使用
例如:
padding:2px 3px 4px 5px; /*上内边距2px 右内边距3px 下内边距4px 左内边距5px*/
padding:2px 3px 4px; /*上内边距2px 右/左内边距3px 下内边距4px*/
padding:2px 3px; /*上/下内边距2px 右/左内边距3px*/
padding:2px; /*上右下左内边距都为2px*/
二、border(边框)
在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
1、border-left/right/top/bottom(与padding类似)
2、border-style(边框样式)
border-left/right/top/bottom-style
例如:border-style:dotted solid double dashed;
/*上边框是点状 右边框是实线 下边框是双线 左边框是虚线*/
具体样式:
none /*无效果,默认*/
solid /*实线*/
double /*双实线*/
dotted /*点状*/
dashed /*虚线*/
groove /* 3D 凹槽边框*/
ridge /*3D 垄状边框*/
inset /*3D inset 边框*/
outset /*outset 边框*/
inherit /*规定应该从父元素继承边框样式*/
3、border-color(边框颜色)
border-left/right/top/bottom-color
例如:p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
4、border-width(边框宽度)
border-left/right/top/bottom-width
例如:p {
border-style: solid; border-width: 15px 5px 15px 5px;
}
5、border-radius(边框半径,可绘制圆角边框)
例如:div{
border:2px solid;
border-radius:25px 50px 75px 100px;
-moz-border-radius:25px 50px 75px 100px; /* Old Firefox */
}
与border的其他属性相似,它也是可以作用在四个角上的(左上,右上,右下,左下)
6、box-shadow (边框阴影)
例如:div{box-shadow: 10px 10px 5px red;}
表示:水平方向的距离10px(正值:阴影在右边) /*可以为负值,负值则表示阴影在左边*/
竖直方向的距离10px(正值:阴影在左边) /*可以为负值,负值则表示阴影在上面*/
模糊度5px
阴影颜色red
7、border-image(边框图)
border-image-sourcesource: url(xx.png)
border-image-width:边框宽/九宫格格宽
border-image-repeat: stretch(拉伸)/repeat(重复)/round(平铺)
当然也可以将这三种方式合并在一起,例如:
div{
border: 20px solid transparent;
border-image:url(box.png) 20 round; /*注意:此种写法width的值不能带单位*/
/*-webkit-border-image:url(box.png) 20 round;*/
}
三、margin(外边距)
margin-left/right/top/bottom(与padding类似)
(略)
四、补充
outline(轮廓)
outline-color || outline-style || outline-width
该属性是复合属性,且不占页面空间,用法如下:
img { outline-color: orange; outline-style: solid ; outline-width: medium ; }
五、综合
1、一个区块元素所占的空间总大小:
X轴:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
同理,Y轴:margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
2、区块元素合并
无浮动
竖直方向上排布,相邻元素的Margin会合并,合并后的值是二者指定的间距中的较大值,Padding各自独立;
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
有浮动
padding各自独立;
竖直/水平方向Margin上都各自独立
3、内联元素合并
内联元素:水平方向上排布,一行不够自动排布到下一行,
Margin:水平方向上各自独立,不合并;竖直方向上无效。
Padding:水平方向上各自独立;竖直方向上有效但不占用页面空间(即上下两行的padding可能会重叠)
六、其他:
(1)outline、box-shadow不会占用页面空间,故也不计入盒子模型的计算。
(2)float会对间距的合并产生影响
(3)区块若想在父元素中水平居中,margin: 0 auto; 由浏览器自动计算左右间距——平均分配
(4)为了屏蔽浏览器默认值造成的兼容性问题,页面布局时可以添加 *{margin:0; padding:0}
最新文章
- hdu 2857 求点关于线段的对称点
- Linux LVM全面实践
- ThinkPHP讲解(十)——第三方类的引入:以分页为主
- 属性传值,协议传值,block传值,单例传值四种界面传值方式
- win7局域网无法ping通本机的问题解决方法
- asp.net C# 时间格式大全
- SOA技术的进化史
- Java基础知识强化88:BigDecimal类之BigDecimal类引入和概述 以及 BigDecimal的使用(加减乘除)
- Front end workflow
- 十个iOS面试问题
- python parse命令行参数
- Windows 8 卡在正在检查更新
- java虚拟机学习-JVM内存管理:深入Java内存区域与OOM(3)
- JAVA_AesCBC纯净例子
- How to enable C development in a Windows 10 development environment VM
- 关于Java并发编程的总结和思考
- [Python 从入门到放弃] 1. 列表的基本操作
- MJExtension的一些实用技巧
- 湘潭校赛 Easy Wuxing
- 【题解】【雅礼集训 2017 Day5】远行 LOJ 6038 LCT
热门文章
- 【转】Android类动态加载技术
- android获取本机的IP地址和mac物理地址
- JSP 处理汉字信息
- Linux--Ubuntu12.04下安装JDK
- fresco Bitmap too large to be uploaded into a texture
- Difference between LET and LET* in Common LISP
- Hadoop 2.4.1 Map/Reduce小结【原创】
- Java IO 之 FileInputStream &; FileOutputStream源码分析
- jqgrid单元格中增加按钮
- Android下海康实时视频解码