css学习笔记——css框模型
CSS框模型
css框模型规定了元素处理元素内容、内边距、边框和外边距的方式。
背景： 由内容、内边距和边框组成的区域。内边距、边框、外边距都是可选的，默认值都为0。
<!DOCTYPE html> <html> <head> <style> img { border:2px solid red; margin:80px; background:no-repeat blue; padding:10px; } </style> </head> <body> <img src=‘http://gtms01.alicdn.com/tps/i1/T1E98mFploXXc2jIrl-250-125.png‘/> </body> </html>
注意：1、css中，height、width指的是 内容区域 的高度和宽度，增加外边距和内边距不会影响到内容的尺寸，只会增加元素框的总尺寸。
2、外边距可以为负值，而且大多数情况下都是使用负值的外边距。
2、内边距
内边距的属性：padding-top、padding-right、padding-bottom、padding-left
可以给内边距设置四个不同的值：
ep：h1 {padding:10px 0.25 2ex 20%;} 注意：在给内边距设置值的时候是按照上右下左的顺序。
如果我们给内边距是以百分数值的方式来进行赋值的话，要注意，百分数值是相对于其父元素的width值来进行计算的，外边距也同理。所以父元素的width的值发生变化时，内边距和外边距都会改变。
<html> <head> <style> div { height:200px; width:300px; border:2px solid red; padding:10px; background:no-repeat green; } div p { padding:10%; background:no-repeat red; } </style> </head> <body> <div> <p>哈哈哈哈哈哈哈</p> </div> </body> </html>
3、边框
定义：元素边框是围绕元素内容和内边距的一条或多条线。
边框与背景：
css2.1定义：元素的背景是指内容、内边距和边框组成的那部分区域。
边框的样式属性：
border-style:dotted solid double dashed; 分别是点状、实线、双线、虚线。（上右下左）
border-style:dotted solid double; 分别是上边框是点状、左右边框是实线、下边框是双线
border-style:dotted solid; 分别是上下边框是点状、左右边框是实线
border-style:dotted; 四条边框都是点状的
边框的样式属性值：
none 无边框
hidden 与“none”相同，不过hidden应用于表示除外，对于表，hidden用于解决边框冲突。
dotted 点状边框
dashed 虚线边框
solid 实线边框
double 双线边框
groove 3D凹槽边框
ridge 3D隆状边框
inset 3D inset边框
outset 3D outset边框
边框宽度：
border-width属性： 可以用来定义边框的宽度
属性值： thin（细的边框）、medium（中等粗细的边框）、thick（粗的边框）
length（可以自己设定边框的宽度，ep：ep：border-width:10px; 注意：设置边框宽度的前提是有边框）
透明边框：
a:link,a:visited {
border-style:solid;
border-width:5px;
border-color:transparent;
}
a:hover {border-color:gray;}
边框的简写形式：
ep：border:red double 5px;
4、外边距
定义：围绕着元素变宽的空白区域就是外边距，设置外边距会在元素外创建额外的“空白”。
margin属性
值的复制：ep：p {margin: 0.5em 1em 0.5em 1em;}
p {margin: 0.5em 1em;}
两者是等价的。
注意：最好还是四个值都写上，因为在p {margin: 20px 30px 30px 20px;}这种情况下，是不能使用 复制值得方式的。
5、CSS外边距合并
外边距合并指的是，当两个垂直边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中较大的那个。ep：1、{margin-bottom:10px;}，2、{margin-top:20px;}合并后的外边距是 20px。
1、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
2、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
