-
text-indent：<length> | <percentage> 默认值：0 取值： <length>： 用长度值指定文本的缩进。可以为负值。 <percentage>： 用百分比指定文本的缩进。可以为负值。 说明： 检索或设置对象中的文本的缩进。 内联对象要使用该属性必须先使该对象表现为块级或内联块级。 对应的脚本特性为textIndent。查看全部
-
横向两列布局： 使用absolute实现横向两列布局： 常用语一列固定宽度，另一列宽度自适应的情况 主要应用功能： relative-父元素相对定位 absolute-自适应宽度元素绝对定位 注意：固定宽度列的高度>自适应宽度的列查看全部
-
当元素设置为绝对定位后，元素也会 多出两类属性：偏移量属性 和 Z-index属性 不同的是： 1.该元素已经脱离了标准文档流（不占位） 2.建立的定位基准不是该元素的原来位置，而是分两种情况 2.1：没有设置偏移量：无论是否存在已定位的祖先元素，都保持在元素初始位置，脱离文档流，宽度塌陷（随内容变化而变化） 2.2：设置了偏移量：又分两种情况（A.无已定位的祖先元素 B.有已定位的祖先元素） A.无已定位的祖先元素:它会以根节点（<html>）为偏移参照基准 B.有已定位的祖先元素:它会以距其最近的已定位祖先元素为偏移参照基准 绝对定位不在文档流中（不会占位置，宽度及长度显示随内容增减而增减 [ 收起全文 ]查看全部
-
相对定位的特点: 1.相对于原先位置进行定位 2.仍处于文档流中,会占据原来的空间位置 3.拥有偏移属性和Z-index属性,即空间层叠现象 设定相对定位时，会产生层叠效果，并且遮盖住其他元素， 而且长度和宽度不会有变化，会将浏览器撑开查看全部
-
浮动定位机制，会使元素脱离文档流，脱离文档流的意思就是，正常的文档流中丢失了它的位置。父元素在高度自适应的情况下，由于浮动丢失了子元素的高度，父元素就无法被撑开，所以导致父元素的背景、边框等属性无法生效，也会使后面的元素顶上来。 我们使用浮动一般是为了让块级元素实现行级元素的特性，但也不希望浮动元素影响后面的元素位置，当浮动失去文档流，使后面的元素顶上来以后，一般有三种方法可以处理： 1、为父元素增加height属性，这样父元素就会显示边框、背景等，但这种情况是确定浮动元素的高度时才这么做，但是实际中，可能不清楚高度哦 2、为浮动元素后面的元素增加 clear:both，清除浮动效果，如果没有后面元素的话，增加一个元素。 3、为父元素设置overflow:hidden属性查看全部
-
绝对定位的宽度随内容的变化而变化查看全部
-
一 采用绝对定位实现横向两列布局的情况 一列为固定宽度，另一列宽度自适应的情况； 二 应用小贴士： relative-对父元素进行相对定位 absolute-对需要自适应宽度的元素进行绝对定位 注意！ 固定宽度列的高度大于自适应宽度的列高度。查看全部
-
典型上中下结构查看全部
-
一 采用绝对定位实现横向两列布局的情况 一列为固定宽度，另一列宽度自适应的情况； 二 应用小贴士： relative-对父元素进行相对定位 absolute-对需要自适应宽度的元素进行绝对定位 注意！ 固定宽度列的高度大于自适应宽度的列高度。查看全部
-
当一个元素设置了绝对定位，没有设置宽度时，元素的宽度会根据内容进行调节查看全部
-
绝对定位的特点： 1 建立了以包含块为基准的定位 2 完全脱离了标准文档流 3 随即拥有了偏移属性和z-index属性 2017.3.24查看全部
-
学到这了查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页布局-编程挑战</title> <style type="text/css"> body {margin: 0;padding: 0} #wrap {width: 970px;margin: 0 auto;} #mainbody {position: relative;} #mid {position: absolute;top: 0;left: 122px;border:1px solid #999;} #right {position: absolute;top: 0;left: 790px;} </style> </head> <body> <div id="wrap"> <div id="header"><img src="http://img1.sycdn.imooc.com//5369cd6e0001a15b09700088.jpg" width="970" height="88" /></div> <div id="mainbody"> <div id="left"><img src="http://img1.sycdn.imooc.com//5369cd0e00011e3901090487.jpg" width="109" height="487" /></div> <div id="mid"><img src="http://img1.sycdn.imooc.com//5369cd3c00013e9e06490439.jpg" width="649" height="439" /></div> <div id="right"><p>欢迎使用金山软件出品的爱词霸，在线查询你英语词汇、句子释义</p><img src="http://img1.sycdn.imooc.com//5369cd540001d8e101770329.jpg" width="177" height="329" /></div> </div> </div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过绝对定位实现水平两列</title> <style type="text/css"> body {margin: 0;padding: 0} .header {background: blue} .content {margin: 0 auto;position: relative;background: #C0C0C0} .left {background: green;width: 200px;height: 500px;} .right {background: red;position: absolute;top: 0;left: 200px;} .footer {background: #FF8000} </style> </head> <!-- 一般让块级元素并列摆在同一行有两种方法： 1、使用浮动float 2、使用绝对定位position:absolute 使用绝对定位需注意： A、父容器一般设置为position:relative;不设置偏移量，只是为了让父容器有定位属性，子元素根据他来计算偏移量 B、子元素使用position:absolute，并设置偏移量，一般top为0，left根据左侧统计元素的width来确定 C、由于position:absolute的元素是脱离标准文档流的，所以它无法将父容器撑开，而它本身又是宽度、高度自适应的，所以必须保证它的高度不能高于父容器本身的高度，否则就会出现内容溢出的现象，一般父容器里面首先有一个高一点的子容器，来决定父容器的高度，绝对定位元素的高度小于这个高度就行 --> <body> <div class="header">我是头部，一般是登陆信息</div> <div class="content"> <div class="left">我是左侧区域</div> <div class="right">我是右侧区域我是右侧区域我是右侧区域我是右侧区域我是右侧区域我是右侧区域</div> </div> <div class="footer">我是底部，一般是版权信息</div> </body> </html>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试绝对定位</title> <style type="text/css"> .box1 {height: 100px;background: blue} .box2 {height: 150px;background: #FF8040} .box3 {height: 200px;background: green;position: relative;} .test {height: 50px;background: #FFFF00;position: absolute;top: 20px;left: 50px;} .testHasParent {height: 50px;background: red;position: absolute;top: 20px;left: 50px;} </style> </head> <!-- position:absolute;绝对定位 绝对定位是元素相对于最近的已有定位的父容器产生的偏移量（已有定位:元素已经设置了position属性为relative、absolute、fixed中的一种）。 绝对定位有下面的特点： 1、绝对定位脱离了标准文档流，这一点类似于浮动float，标准文档流会将后面的元素提上来，而不会考虑当前元素的空间 2、如果没有已定位的父容器，它是相对于html标签计算偏移。如果有已定位的祖先元素，以最近的已定位祖先元素进行偏移。 3、绝对定位会产生z-index，也就是说会产生叠加效果。 4、绝对定位会使块级元素的宽度自适应。 对于不设置偏移量的position:absolute的元素，它是按照标准文档流的位置进行摆放。 --> <body> <div class="box1">box1</div> <div class="test">测试绝对定位</div> <div class="box2">box2</div> <div class="box3"> <div class="testHasParent">测试存在已定位的父元素的绝对定位</div> </div> </body> </html>查看全部
举报
0/150
提交
取消