width和height是指content內容的寬高 當width的值小於min-width時，則寬度為min-width 當width的值大於max-width時，則寬度為max-width min-width和max-width存在相容性問題，在IE6以下不支持 哪些元素可以設置寬高屬性 塊級元 ...
width和height是指content內容的寬高
當width的值小於min-width時，則寬度為min-width
當width的值大於max-width時，則寬度為max-width
min-width和max-width存在相容性問題，在IE6以下不支持
哪些元素可以設置寬高屬性
塊級元素
<p>、<div> 、 <h1> ~ <h6> 、<ul> 、<li> 、<ol>、<dl> 、<dt> 、<dd>等
替換元素
<img>、<input>、<textarea>等
如果圖片既通過width來設置寬度，又通過css樣式來設置寬度，最終寬度為css樣式中設置的寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*實際尺寸為200px*/ img{width:200px;} </style> </head> <body> <img src="cat.jpg" alt="cat" width="100px"> </body> </html>
border-style的值
none 定義無邊框。預設值
hidden 與 “none” 相同。除非在表格元素中解決邊框衝突時
dotted 定義點狀邊框。在大多數瀏覽器中呈現為實線
dashed 定義虛線。在大多數瀏覽器中呈現為實線
solid 定義實線
double 定義雙線
groove 定義 3D 凹槽邊框
ridge 定義 3D 壟狀邊框
inset 定義 3D inset 邊框
outset 定義 3D outset 邊框
inherit 規定應該從父元素繼承邊框樣式
border可以四個邊分開設置
border-left
border-right
border-top
border-bottom
<style> p{width:200px;height:100px;border-top:1px solid blue;} </style>
padding縮寫：
padding : 值1； //4個方向都為值1
padding : 值1 值2 ; // 上下=值1，左右=值2
padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
padding : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值4
margin值可以為負值，padding值不可以為負值
垂直方向上，兩個相鄰元素都設置外邊距，外邊距會發生合併
合併高度=兩個外邊距高度中的最大值
標準盒子模型
寬度=內容寬度
高度=內容高度
盒子在頁面中所占的寬度=左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊距
盒子在頁面中所占的高度=上邊距+上邊框+上填充+內容高度+下填充+下邊框+下邊距
盒子的實際寬度是：左邊框+左內邊距+內容寬度+右內邊距+右邊框
盒子的實際高度是：上邊框+上填充+內容高度+下填充+下邊框
IE盒子模型
寬度=左邊框+左填充+內容寬度+右填充+右邊框
高度=上邊框+上填充+內容高度+下填充+下邊框
盒子在頁面中所占的寬度=左邊距+寬度+右邊距
盒子在頁面中所占的高度=上邊距+高度+下邊距
如果有DOCTYPE文檔聲明，則所有瀏覽器會統一按照標準盒子模型來解析
display:inline; 內聯，前後沒有換行符
行內元素無法設置寬和高，外邊距只能設置左右的，無法設置上下的
display:block; 塊，前後帶有換行符
內聯元素之間有縫隙，是因為存在換行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{border:1px solid;} </style> </head> <body> <span>內聯元素1</span> <span>內聯元素2</span> <span>內聯元素3</span> </body> </html>
解決方法一：取消換行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{border:1px solid;} </style> </head> <body> <span>內聯元素1</span><span>內聯元素2</span><span>內聯元素3</span> </body> </html>
解決方法二：在外層加div，設置字體為0，給子元素單獨設置字體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{font-size:0px;} span{border:1px solid;font-size:16px;} </style> </head> <body> <div> <span>內聯元素1</span> <span>內聯元素2</span> <span>內聯元素3</span> </div> </body> </html>
display:none 不顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{color:#000;text-decoration: none;} span{display: none;;} a:hover span{display: inline-block;} </style> </head> <body> <a href="#">指我……<span>和你捉迷藏</span></a> </body> </html>
