display(元素显示模式)
display:block
元素默认显示模式，在不设置任何display属性情况下元素被作为一个块对象占据整行，其他元素不能与它在同一行显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div1 { width: 200px; height: 200px; border: 1px solid black; background: blue; display: block; } .div2 { width: 200px; height: 200px; border: 1px solid black; background: yellow; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
display:none(隐藏对象)
设置这个属性的元素在浏览器中被隐藏，其他元素可取代它原本的位置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div1 { width: 200px; height: 200px; border: 1px solid black; background: blue; display: none; } .div3{ width: 200px; height: 200px; border: 1px solid black; background: red; } .div2 { width: 200px; height: 200px; border: 1px solid black; background: yellow; } </style> </head> <body> <div class="div1"></div> <div class="div3"></div> <div class="div2"></div> </body> </html>
display:inline-block
与block相反，它允许其他元素在同一行显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div1 { width: 200px; height: 200px; border: 1px solid black; background: blue; display: inline-block; } .div2 { width: 200px; height: 200px; border: 1px solid black; background: yellow; display: inline-block; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
float(元素浮动)
当元素向左或向右浮动时，元素的显示属性也变化成相当于一个行内元素，个人认为相当于个一个表格的多个同个tr里的td，
在html代码中元素的浮动从上至下依次进行，谁在上谁就先浮动
被设置了float属性的元素会脱离文档流的显示规则，它只能浮动在左边或右边，如果在同一行内浮动的空间不足
则自动转向下一行
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div1 { float: right; width: 200px; height: 200px; border: 1px solid black; background: blue; } .div2 { float: right; width: 200px; height: 200px; border: 1px solid black; background: yellow; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
position(元素定位)
positon:static (默认值，无定位)
positon:absolute(绝对定位)通过脱离文档流来控制定位，以body为父元素来进行定位时：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div1 { position: absolute; top: 300px; left: 400px; width: 200px; height: 200px; border: 1px solid black; background: blue; } .div2 { float: right; width: 200px; height: 200px; border: 1px solid black; background: yellow; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
position:fixed(固定定位)
固定定位的元素是相对于浏览器来设置的，它在浏览器窗口中的位置始终不变，即使页面被滚动条下拉，
元素也会一直在原来相对的位置
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div1 { position: fixed; top: 300px; right: 0px; width: 200px; height: 200px; border: 1px solid black; background: blue; } </style> </head> <body> <div class="div1"></div> </body> </html>