盒子模型
css學習三大特點：css盒子模型、浮動、定位
1、看透網頁布局的本質：
首先利用css設定好盒子的大小，然後擺放盒子的位置
最後把網頁元素比如文字等等，放入盒子裡面
2、盒子模型（box model）
所謂盒子模型：
就是把html頁面中的布局元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器
總結：
3、盒子邊框（border）
語法：border：border-width || border-style || border-color 屬性
作用
border-width
定義邊框粗細，單位是px
border-style
邊框的樣式
border-color
邊框的顏色
邊框的樣式：
3.1邊框綜合設定：
border：border-width || border-style || border-color；
例如：border：1px solid red；
3.2盒子邊框寫法總結表：
上邊框下邊框
左邊框
右邊框
border-top-style：樣式；
border-bottom-style：樣式；
border-left-style：樣式；
border-right-style：樣式；
border-top-width：寬度；
border-bottom-width：寬度；
border-left-width：寬度；
border-right-width：寬度；
border-top-color：顏色；
border-
bottom-color：顏色；
border-left-color：顏色；
border-right-color：顏色；
border-top：寬度 樣式 顏色
border-
bottom：寬度 樣式 顏色
border-left：寬度 樣式 顏色
border-right：寬度 樣式 顏色
3.3**的細線邊框：
通過**的cellspacing=「0」；將單元格與單元格之間的距離設定為0
但是兩個單元格之間的邊框會出現重疊，從而使邊框變粗
通過css屬性：
table
collapse單詞是合併的意思
border-collapse：collapse；表示相鄰的邊框合併在一起
4、內邊距（padding）
4.1內邊距：
padding是指邊框與內容之間的距離
4.2設定： 屬性
作用
padding-left
左內邊距
padding-right
右內邊距
padding-top
上內邊距
padding-bottom
下內邊距
當我們給盒子指定padding值之後，發生了兩件事：
1 內容和邊框有了距離
2 盒子會變大了
注意：後面跟幾個數值表示的意思是不一樣的
值得個數
表達意思
1個值
padding：上下左右內邊距
2個值
padding：上下內邊距，左右內邊距
3個值
padding：上內邊距，左右內邊距，下內邊距
4個值
padding：上內邊距，右內邊距，下內邊距，左內邊距
4.4核心尺寸計算（元素實際大小）
寬度：element width=content width+ padding + border （width為內容高度）
高度：
element height=content height + padding + border（height為內容高度）
盒子的實際大小：內容的寬度和高度+內邊距+邊框
4.5課堂一練
4.6 padding不影響盒子大小情況（特殊）
如果沒有給乙個盒子指定寬度，此時，如果這個盒子指定padding，則不會撐開盒子
5、外邊距（margin）
1、2省略
margin的寫法與padding相同，簡寫方式也相同
3、塊級盒子水平居中
盒子水平居中的條件：
盒子必須指定寬度（width）
然後給左右的外邊距設定為auto
語法：
.header
常見的寫法，以下3中都可以：
4、文字居中和盒子居中的區別
盒子內文字居中為text-align：center；而且還可以讓行內元素和行內塊元素集中對齊
盒子居中對齊為margin：0 auto；
（1）插入我們用的最多，比如產品展示類，移動位置只能靠模型padding，margin
（2）背景我們一般用於小圖示背景或者超大背景，背景只能通過background-position
6、清除元素的缺省內外邊距（重要）
* 神奇的**，是我們以後寫css的第一行
注意：行內元素為了照顧相容性，盡量只設定左右內外邊距，不要設定上下內外邊距
7、外邊距合併
（1）相鄰塊元素垂直外邊距的合併
解決方法：盡量只給乙個盒子新增margin值
（2）巢狀塊元素垂直外邊距的合併（塌陷）
解決方案：
8、盒子模型布局穩定性：width > padding > margin
原因：9、去掉列表預設樣式
以無序和有序列表前面預設的列表模式，在不同瀏覽器顯示的效果不一樣，而且比較難看，所以我們一般直接去掉這些列表樣式就行了，**如下：
li 擴充套件：
1、圓角邊框
語法：border-radius：length；
其中每乙個值可以為數值或百分比的形式
技巧：讓乙個正方形變成圓圈
矩形只要高度的一半，精確單位
2、盒子陰影：
語法：box-shadow：水平陰影 垂直陰影 模糊陰影（虛實） 陰影尺寸（影子大小） 陰影顏色 內、**影 值
描述
h-shadow
必需，水平陰影位置，允許負值
v-shadow
必需，垂直陰影位置，允許負值
blur
可選，模糊距離
spread
可選，陰影尺寸
color
可選，陰影顏色
inset
可選，將外部陰影（outset）改為內部陰影
前兩個屬性是必須寫的，其餘可省略
外部陰影（outset）是預設的，但是不能寫，想要內陰影可以寫inset
前端面試準備筆記之html和css 03
01.html頁面的載入順序 html文件是自上而下載入的。head完畢後，開始解析body中的 此時如果遇到script 同樣會將控制權交給js引擎。當body中的 全部執行完畢，並且整個頁面的css樣式載入完畢，css會重新渲染整個頁面的html元素。所以，script 標籤寫在標籤靠後的位置較...
再讀《精通css》03 引入和注釋
2 在css中也可以匯入其他css。但匯入規則要放在文件的最前面。而且要避免兩層以上的匯入。3 因為先考慮匯入的樣式表，在考慮鏈結的樣式表，所以鏈結的樣式表會覆蓋掉匯入的。4 對 進行注釋是個好習慣，css採用c風格的注釋 我總覺得在注視單行的時候，這種方法有點麻煩 5 在文件頭部應該加上文件作用，...
筆記 CSS 03 CSS 布局
by kevin song 內邊距 padding 指定乙個值則是四條邊內邊距，指定兩個值第乙個值是上下內邊距，第二個值是左右內邊距。四個值，上右下左 外邊距 margin 不同格仔之間的距離 kevin s homepagetitle tyle text css div div 1 div 2 d...