-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试相对定位</title> <style type="text/css"> body {margin: 0;padding: 0;} .box1 {height: 100px;background: #0000FF;position: relative;left: 10px;top: 10px;} .box2 {height: 200px;background: #FF0000} .box3 {height: 300px;background: #00FF00} </style> </head> <!-- 相对定位是指的是相对于元素在标准文档流中的偏移显示。但是元素本身还是保留了标准文档流中的位置，所以说相对定位只是作用于本身的位置偏移，它不会影响其他元素在标准文档流中的位置。其他元素该咋摆还是咋摆。不会受到相对定位的影响。 --> <body> <div class="box1">第一个div</div> <div class="box2">第二个div</div> <div class="box3">第三个div</div> </body> </html>查看全部
-
css中有三种定位机制： 标准文档流（flow）、浮动（float）、绝对定位（position） 一、标准文档流：这种定位机制就是简单的按照元素的属性进行从上往下，从左往右的顺序，一个一个摆放，例如块级元素一个占一行，行级元素多个占一行。 二、浮动定位：包括左浮动（float:left）和右浮动(float:right)，是相当于元素浮在了标准文档流的上方，专门有一层用来向左或者向右进行移动，在移动过程中，如果被父容器的边框挡住，或者被另一个浮动元素的边框挡住，就会停止移动。注意：浮动是脱离了标准文档流的。 浮动可能产生的意外现象有： 1、由于脱离文档流，所以父容器是不被撑开的，就成了一条线，导致父容器的背景、边框、边距不生效 2、由于普通文档流已经不包括浮动元素，所以会导致浮动元素后面的非浮动元素会无视浮动元素而直接顶上。可能会产生重叠的效果。 对于上面两种情况的处理方法有： 对于父元素的处理，设置父元素的height属性或者overflow: hidden; 对于后续元素的顶上处理，设置后续元素的clear:both,消除它的浮动影响。 三、绝对定位布局：https://zhidao.baidu.com/question/1771268464170895740.html 使用position属性来设置，一般可以用absolute（绝对）、relative（相对）、fixed（固定）三种属性值； position:relative:被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。 position:absolute：绝对定位的元素位置是相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。 如果元素没有已定位的祖先元素， 那么它的位置相对于初始包含块。绝对定位的元素可以在它的包含块向上、下、左、右移动。与相对定位相反， 绝对定位使元素与文档流无关， 因此不占据空间。 普通文档流中其他的元素的布局不受绝对定位元素的影响。 position:fixed 相对于浏览器窗口，其余的特点类似于绝对定位。查看全部
-
<!-- float浮动脱离了标准文档流，其实可以理解为，浮在了标准文档流的上层结构，进行移动。 w3school中对浮动的定义比较准确： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 理解上面两句话，就理解了浮动。 浮动可能产生的意外现象有： 1、由于脱离文档流，所以父容器是不被撑开的，就成了一条线，导致父容器的背景、边框、边距不生效 2、由于普通文档流已经不包括浮动元素，所以会导致浮动元素后面的非浮动元素会无视浮动元素而直接顶上。可能会产生重叠的效果。 对于上面两种情况的处理方法有： 对于父元素的处理，设置父元素的height属性或者overflow: hidden; 对于后续元素的顶上处理，设置后续元素的clear:both,消除它的浮动影响。 -->查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程练习3-5：类似腾讯软件中心布局</title> <style type="text/css"> body {margin: 0;padding: 0;} .wrap {background: #00c;width:960px;margin: 0 auto;} .header {background: #FF8040} .mainBody {background: #FFFF00;overflow: hidden;}/*left和right都浮动，mainBody不会被撑开，使用overflow:hidden高度自适应*/ .left {background: #000000;color: #FFFFFF;width:900px;float: left;} .right {background: #008000;width: 40px;float: right;} .footer {background: #8000FF;clear: both;}/*footer需要清除前面right浮动影响，增加clear:both，避免被文档流加载到上面去*/ </style> </head> <body> <div class="wrap"> <div class="header">头部</div> <div class="mainBody"> <div class="left">我是左侧的内容，不设置高度，自适应！哦我是左侧的内容，</div> <div class="right">我是右侧的内容，不设置高度，自适应哦！我是右侧的内容</div> </div> <div class="footer">版权部分</div> </div> </body> </html>查看全部
-
float浮动脱离了标准文档流，其实可以理解为，浮在了标准文档流的上层结构，进行移动。 w3school中对浮动的定义比较准确： 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 理解上面两句话，就理解了浮动。 浮动可能产生的意外现象有： 1、由于脱离文档流，所以父容器是不被撑开的，就成了一条线，导致父容器的背景、边框、边距不生效 2、由于普通文档流已经不包括浮动元素，所以会导致浮动元素后面的非浮动元素会无视浮动元素而直接顶上。可能会产生重叠的效果。 对于上面两种情况的处理方法有： 对于父元素的处理，设置父元素的height属性 对于后续元素的顶上处理，设置后续元素的clear:both,消除它的浮动影响。查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动效果</title> <style type="text/css"> body{margin: 0;padding: 0;} .box1 {border: 1px solid red;height: 100px;float: left;} .box2 {border: 1px solid blue;height: 100px;float: right;} p {border: 1px solid black;margin: 0 auto;text-align: center; clear: both; /* width:100%;overflow: hidden; */}/*清除浮动：clear:both;或者width:100%;overflow:hidden;*/ </style> </head> <!--从p标签跑上去，可以看出来box1和box2经过使用float之后，已经脱离了文档流， 所以文档流会将后面的元素排上去。 清除浮动有两种情况： 第一种，因为浮动脱离文档流，所以浮动的父容器默认是没有高度的。需要为浮动的父容器显示背景、边框、边距等，采用父容器增加height或者父容器增加overflow:hidden; 第二种，对于浮动元素同级的后续元素清除浮动两种方法：1、clear:both;2、width:100%;overflow:hidden; 这个例子主要针对第二种情况。不管哪种情况推荐使用clear:both --> <body> <div class="box1">第一个div</div> <div class="box2">第二个div</div> <p>浮动后面跟了一个p标签，受影响了</p> </body> </html>查看全部
-
盒子3D模型查看全部
-
盒子的3D模型查看全部
-
清除浮动：1. clear：both 2. 设置with : overflow:hidden查看全部
-
初始化margin padding查看全部
-
初始化margin查看全部
-
浮动定位机制，会使元素脱离文档流，脱离文档流的意思就是，正常的文档流中丢失了它的位置。父元素在高度自适应的情况下，由于浮动丢失了子元素的高度，父元素就无法被撑开，所以导致父元素的背景、边框等属性无法生效，也会使后面的元素顶上来。 我们使用浮动一般是为了让块级元素实现行级元素的特性，但也不希望浮动元素影响后面的元素位置，当浮动失去文档流，使后面的元素顶上来以后，一般有三种方法可以处理： 1、为父元素增加height属性，这样父元素就会显示边框、背景等，但这种情况是确定浮动元素的高度时才这么做，但是实际中，可能不清楚高度哦 2、为浮动元素后面的元素增加 clear:both，清除浮动效果，如果没有后面元素的话，增加一个元素。 3、为父元素设置overflow:hidden属性查看全部
-
relative 相对定位：首先按float方式一样浮动起来，通过left/right/top/bottom属性确定元素在查看全部
-
清除浮动的常用方法：要对受到浮动影响的元素标签使用哦！ 法1：clear:both;(或者是left/right)(推荐！！！) 法2：width:100%;overflow:hidden; 法3：加<br/>空标签对于块级元素清除浮动比较明显，但是不建议这么做，空标签没意义，对代码结构有影响。查看全部
-
position属性查看全部
举报
0/150
提交
取消