一、css框模型概述 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素1、css内边距属性（padding） 定义元素边框与元素内容之间的空白区域 2、css外 ...
一、css框模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素
1、css内边距属性（padding）
定义元素边框与元素内容之间的空白区域
2、css外边距属性（margin）
margin 可以设置为 auto。margin后面是有4个参数的。例如：margin:1px 1px 1px 1px。分别表示 上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px 那么着是代表 上下都为1px， 左右都为2px. 居中标准的写法是：margin:0 auto ；
3、边框（border）
每个边框有 3 个方面：宽度（border-width）、样式（border-style），以及颜色（border-color）。可以单独定义边框某一边的宽度、样式或属性。
样式（border-style）可能的值：
4、外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
**只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
eg:
二、css定位(position)
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
1、定位属性
2、position的值：
（1）static：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- （2）relative：相对定位
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。相对定位会按照元素的原始位置对该元素进行移动。
- （3）absolute：绝对定位
- 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。通过绝对定位，元素可以放置到页面上的任何位置
- （4）fixed：固定定位
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>定位</title> 6 <style type="text/css"> 7 .static1{position:static;left:20px;} 8 .static2{left:20px;} 9 .relative1{position:relative;left:20px;}10 .relative2{left:20px;}11 .absolute1{position:absolute;left:20px;}12 .absolute2{left:20px;}13 .fixed1{position:fixed;left:20px;}14 .fixed2{left:20px;}15 </style>16 </head>17 18 <body>19 <p class="static1">这是static的效果</p>20 <p class="static2">这是static的对比效果</p>21 <p class="relative1">这是相对定位relative的效果</p>22 <p class="relative2">这是相对定位relative的对比效果</p>23 <p class="absolute1">这是绝对定位absolute的效果</p>24 <p class="absolute2">这是绝对定位absolute的对比效果</p>25 <p class="fixed1">这是固定定位fixed的效果</p>26 <p class="fixed2">这是固定定位fixed的对比效果</p>27 </body>28 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：CSS知识点补充
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
