css切图还是蛮难的!
实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px
这题难点在于content自适应(对于我来说是难点。。。)
两种解法:
1.float为right,aside的div在content的前面,content不设置float,
这里有个小问题:如果content也设置float:right,则宽度就不是自适应了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict //EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div { padding : 0px;} .header { border : 3px solid green;padding : 10px;position:relative;} .header:after { content : ""; clear : both; display : block; visibility : hidden; height : 0; } .header { zoom : 1; } .logo { float : left ; width : 100px; height : 100px; border : 3px solid red; } .user { float : right ; width : 200px; border : 3px solid #000; text-align : right; position : absolute; bottom:10px; right : 10px; } #content { margin : 10px 0;} #content:after { content : ""; clear : both; display : block; visibility : hidden; height : 0; } .aside { width :200px; margin-left : 25px; border:3px solid red; float : right; } .content { height : 600px; border : 3px solid purple; margin-right : 220px; //浮动元素是脱离文档流的,所以设置margin-right,不然就会覆盖右边元素。 } .footer { text-align : center; border : 3px solid blue;} </style> </head> <body> <div class = "header"> <div class = "logo">Logo</div> <div class = "user"> <span>用户名 </span></div> </div> <div id = "content"> <div class = "aside">aside - 定宽 200px</div> <div class = "content">content - 自适应宽度</div> </div> <div class = "footer">footer</div> </body> </html>
注:此处用的是固定宽度的div浮动,自适应宽度的div正常文档流中放置,利用margin-right实现布局。
要说明的是: 父元素的宽度不设置的话默认100%啦,没什么好说的。
但是父元素的高度值得一说,应该这么说,父元素的高度遵循的是自适应的子div的高度,所以,如果父元素正好要求如此的话,就没什么问题了。
但是,如果,父元素的高度非要按照浮动的子div的高度或者说当浮动子div比较高,而且父div想要包住子div的话,就需要清除浮动啦!
推荐的当然后是用伪类 :after{content:"";clear:both;display:block;visibility:hidden;height:0px;} {zoom:1}
2.两层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict //EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div { padding : 0px;} .header { border : 3px solid green;padding : 10px;position:relative;} .header:after { content : ""; clear : both; display : block; visibility : hidden; height : 0; } .header { zoom : 1; } .logo { float : left ; width : 100px; height : 100px; border : 3px solid red; } .user { float : right ; width : 200px; border : 3px solid #000; text-align : right; position : absolute; bottom:10px; right : 10px; } #content { margin : 10px 0;} .left { float : left; width:100%; } .aside { width :200px; margin-left : -206px; //这句好关键啊!!! border:3px solid red; float : left; } .content { height : 600px; border : 3px solid purple; margin-right : 220px; } .footer { text-align : center; border : 3px solid blue;} </style> </head> <body> <div class = "header"> <div class = "logo">Logo</div> <div class = "user"> <span>用户名 </span></div> </div> <div id = "content"> <div class = "left"> <div class = "content">content - 自适应宽度</div> </div> <div class = "aside">aside - 定宽 200px</div> </div> <div class = "footer">footer</div> </body> </html>
补充于:2015.10.8(9月的最后一天大风大雨地去面试,然后被藐视了。。不过呢,还是有收获的!)
利用position中的脱离文档流的性质来实现的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict //EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> div { padding : 0px;} .header { border : 3px solid green;padding : 10px;position:relative;} .header:after { content : ""; clear : both; display : block; visibility : hidden; height : 0; } .header { zoom : 1; } .logo { float : left ; width : 100px; height : 100px; border : 3px solid red; } .user { float : right ; width : 200px; border : 3px solid #000; text-align : right; position : absolute; bottom:10px; right : 10px; } #content { margin-top : 10px; } .aside { width :200px; border:3px solid red; position:absolute;
right:5px; //绝对定位在靠右边 } .content { height : 600px; border : 3px solid purple; margin-right : 210px; //空出一部分位置给right的div,虽然它不占文档流,但是障眼法啦 } .footer { text-align : center; border : 3px solid blue;margin-top:10px;} </style> </head> <body> <div class = "header"> <div class = "logo">Logo</div> <div class = "user"> <span>用户名 </span></div> </div> <div id = "content"> <div class = "aside">aside - 定宽 200px</div> <div class = "content">content - 自适应宽度</div> </div> <div class = "footer">footer</div> </body> </html>
position中默认的值是static,占据文档流。
absolute , fixed都是脱离文档流的,absolute是相对于position不为static的最近父元素定位直至document。
fixed是相对于浏览器定位的,并且随着浏览器屏幕的变小,会出现滚动条。
relative是占据原来的文档流的。
这种方法不用float算是一个优点,但是父div无法捕捉到position为absolute的高度,这个算缺点啦,一般少用绝对定位吧。。。