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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79772.html
標籤：Html/Css
上一篇：css字體樣式+文本樣式