CSS和CSS3（背景，图片，浮动等）
CSS和CSS3背景图片
CSS的背景，无法伸缩图片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background</title> <style> div{ width: 100%; height: 1500px; border: 10px solid red; background: skyblue url(img/bg-little.png) no-repeat top right fixed; } </style> </head> <body> <div></div> </body> </html>
而CSS3的background-size指定了背景图片是否扩大缩小。contain一边紧贴边缘拉伸，最终高或者宽有留白。 cover按照一遍拉伸，很可能内容区域超出。而设置100% 100%是高，宽都能将内容显示出来。具体还是跟图片有关。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Size</title> <style type="text/css"> * { margin: 0; padding: 0; border: none; } div { width: 800px; height: 400px; padding: 50px; border: 50px solid transparent; /*background: color position size repeat origin clip attachment image;*/ /*background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');*/ background: #abcdef url('bg1.jpg') no-repeat center center; background-size: 50%; background-origin: content-box; background-clip: content-box; background-attachment: fixed; } span.div_border { position: absolute; top: 0; left: 0; width: 800px; height: 400px; padding: 50px; border: 50px solid rgba(255, 0, 0, .25); } span.div_padding { position: absolute; top: 50px; left: 50px; width: 800px; height: 400px; border: 50px solid rgba(255, 255, 0, .25); } </style> </head> <body> <div></div> <span class="div_border"></span> <span class="div_padding"></span> </body> </html>
浮动
就是高度丢失了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin:0; padding:0; } .container { border:1px solid blue; margin:100px; /*overflow: hidden;*/ /*zoom: 1;*/ } .block1 { width:50px; height:50px; background-color: red; float: left; } .block2 { width:50px; height:50px; background-color: black; float: left; } .block3 { width:50px; height:50px; background-color: blue; float: left; } </style> </head> <body> <div class="container"> <div class="block1"><span>1</span></div> <div class="block2"><span>22</span></div> <div class="block3"><span>333</span></div> </div> </body> </html
还有一个现象，叫文字环绕，将图片左浮动，后面的文字就会环绕图片周围，这是因为浮动元素脱离文档流，但还是在文本流当中。
定位
relative 相对定位，可定位的祖先元素，相对定位的元素不会离开常规流。
absolute 绝对定位，使元素脱离常规流，使元素的位置与文档流无关，因此不占据空间。元素绝对定位后 生成块状元素，不论原来它在正常文档流中是什么类型的元素。可结合 top、left、right bottom 使用。绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，可以是 absolute、relative、fixed。
fixed 固定定位，固定定位元素不会随着视口滚动而滚动，继承absolute特点，参照物是视口。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position-relative</title> <link rel="stylesheet" href="./reset.css"> <style> .block { position: relative; top: 0; left: 0; width: 80px; height: 80px; line-height: 80px; border: 2px solid black; text-align: center; float: left; z-index: 9; } .block:nth-child(2) { position: relative; top: 0; left: -80px; border-color: red; z-index: 1; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> </body> </html>
居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>block、inline</title> <style type="text/css"> #dan{ width:300px; height:300px; border: 1px solid red; margin: 0 auto; text-align: center; line-height: 300px; } #warp{ width:300px; height:300px; border: 1px solid red; margin: 0 auto; } #duo{ height:300px; text-align: center; display: table-cell; vertical-align: middle; } </style> </head> <body> <div id="dan">单行文本内容</div> <div id="warp"> <div id="duo"> 多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 </div> </div> </body> </html>
