-
网页的特点：自适应界面的宽度；理论上能无限延长。<br> 分栏布局（分列）：一列，两列，三列和混合布局（一列头部，几列内容，可以有底部） 前端工程师需要用CSS的浮动和定位完成UI的设计。查看全部
-
网页布局：又称版式布局，是网页UI设计师将有限的视觉元素进行有机的排列组合，将理性的思维个性的化的表现出来，是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。 1、网页可以自适应宽度 2、网页的长度理论上可以无限延长 3：页面为：头部，主体部分，底部。 分栏又称为分列：一列布局 二列布局 三列布局 以及混合布局（用的最多） 布局通过 浮动和定位来完成(实现ui界面效果查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
CSS中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。 需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 所以 用 clear :both:清除浮动 是footer这个盒子 不会紧跟在 top盒子之后，而是跟在main之后。查看全部
-
clear:both 是用来清除紧邻后面元素的浮动，如前一个div左浮动了，后面的div就会与其同行，假如你不想两个div同行显示，想让后面的div单独一行，你就可以用clear:both,可看做是兄弟元素之间浮动的清除。 width:100%;overflow:hidden可实现浮动清除，它一般用于清除父元素和子元素之间的浮动影响。查看全部
-
margin:0 auto;是块状元素的居中对齐方式， text-align:center;是内联元素（如，a,img标签)的对齐方式， padding:0;margin:0;是做为初始化页面， 原因是页面在被各个浏览器读取时的理解不同产生不同的展示效果，所以需要清除查看全部
-
float:left ->左浮动(定义元素在哪个方向浮动) float:right ->右浮动 text-align:left; -> 文字的对齐是左对齐查看全部
-
文档流：将窗口自上而下分成一行一行，并在每行中按从左至右的依次排放元素，即为文档流。 有三种情况使得元素离开文档流而存在，分别是浮动 绝对布局 固定定位查看全部
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{width:100%;background:gray;height:100px;} .main{width:100%;background:red;height:500px;position:relative;} .left{width:200px;position:absolute;background:blue;height:500px;top:0;} .right{background:green;height:500px;margin-left:210px;} .foot{width:100%;background:orange;height:100px;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>查看全部
-
1、清除body自适应: body{margin:0;padding:0;} 2、元素自动居中： margin:0 auto; (这时不能在使用浮动属性和绝对定位属性和固定定位属性)查看全部
-
clear:both; //清楚浮动 总结： 单列布局用margin: 0 auto; 两列布局用：float: left & float: right; 三列布局用： position: absolute; top:0; left:0px; right: 0px; margin-left:XXX; 混合布局： clear:both; position: relative;查看全部
-
三列布局：不能使用float； 左右两列绝对定位，分别靠左和靠右，中间只需要给个左右的margin值与左右块隔开。 2016年5月22日实验： 其实也是可以用float的,只不过float块的特性是：只对HTML结构上“放置在其后”的[非float正常块]有影响,故需要把中间块放在left和right的后面,然后设定宽、高,不要设置为float，即可！查看全部
-
clear:both 是用来清除紧邻后面元素的浮动，如前一个div左浮动了，后面的div就会与其同行，假如你不想两个div同行显示，想让后面的div单独一行，你就可以用clear:both,可看做是兄弟元素之间浮动的清除。 width:100%;overflow:hidden可实现浮动清除，它一般用于清除父元素和子元素之间的浮动影响。查看全部
-
左侧宽度为200px,右侧宽度自适应： .left{width:200px;height:500px;position:absolute;top:100px;left:0;background:blue;} .right{height:500px;margin-left:210px;background:#9c9;}查看全部
-
position：absolute这个是绝对定位； 是相对于浏览器的定位。 比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。 比如：<div class="1"></div><div class="2"></div> 当1固定了位置。1的样式float:left;width:100px; height:800px; 2的样式为float:left; position：relative；margin-left:20px;width:50px; 2的位置在1的右边，距离120px查看全部
举报
0/150
提交
取消