网页布局与设计 HTML5基础、CSS3基础 position-2019.pptx

网页设计与布局Position详解CSS盒模型 pYou dont have to be crazy to do this but it does help. Everythings not great in life, but we can still findbeauty in it. You gotta think like a tree. This is truly an almighty mountain. Just let this happen. We just letthis flow right out of our minds./p几种类型的 position 定位的元素 position: absoluteposition: relativeposition: fixedposition: staticposition: inherit绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在。就好像/css/visibility-vs-display/?display /css/visibility-vs-display/属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个，top 或者 bottom，以及 left 或者 right。默认地它们的值都为 auto。弄明白/TR/CSS2/visuren.html#absolute-positioning绝对定位的关键是知道它的起点在哪里。 相对定位position:relative relative称为相对定位，如果你给某个元素指定了postion的值为“relative”，那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。使用relative时有几点需要注意：元素设置了relative时，是相对于元素本身位置进行定位；元素设置了relative后，可以通过“T-R-B-L”改变元素当前所在的位置，但元素移位后，同样点有当初的物理空间位；元素设置了relative后，如果没有进行任何的“T-R-B-L”设置，元素不会进行任何位置改变。上面三点第一点和第三点来说都是比较好理解，那么现在针对第二点，我们来看一个实例的操作：在上面的基础上，我们对“div-1”进行向下移动20px；向左移动40px: 绝对定位position:absolute absolute是position中的第三个属性值，如果你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。 此时元素“div-1a”不在当初的文档流中，而且其此时定位也是相对于html来进行定位，那么我们有时候并不是需要这样的效果，哪果我们元素div-1a还想在div-1是进行绝对定位，那要怎么办呢？此时就要发挥前面第二步的“relative”作用了。relative和absolute的结合 上图做为一个实例来说明“relative”和“absolute”的关系，首先上图中共有三个div放在body内，而且他们三个div的关系是“div-1div-2div-3”,而且在div-3有这么一个绝对定位：1、div-1与div-2都没有设置“position:relative”，此时我们的div-3绝对定位后就漂到了上图中“div-3c”的位置上；2、现在我们在div-2元素中加设置一个“position: relative”，此时我们的div-3绝对定位后就漂到了上图中的“div-3a”的位置;3、接下来把相对定位的设置换到div-1元素上，此时div-3绝对定位后就到了div-3b的位置。如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。 relative和absolute实现布局效果 设置固定高度 float 多列浮动 清除浮动