盒子模型
??盒子模型是我們在CSS網頁布局中必不可少的東西，網頁中的盒子模型用來存放網頁中的各個元素，每一個可見的HTML元素都是一個盒子，這些盒子通過嵌套、疊加或者排列等方式組織在一起，形成我們所看見的頁面，
??一個盒子由外到內可以分成四個部分：margin（外邊距）、border（邊框）、padding（內邊距）、content（內容），會發現margin、border、padding是CSS屬性，因此可以通過這三個屬性來控制盒子的這三個部分，而content則是HTML元素的內容，如圖：
CSS系列文章目錄
- CSS3快速入門：一、三種CSS匯入方式
- CSS3快速入門：二、CSS選擇器
- CSS3快速入門：三、美化網頁
- CSS3快速入門：四、盒子模型
文章目錄
- 盒子模型
- CSS系列文章目錄
- 1. 盒子大小
- 2. 外邊距設定
- 3. 內邊距設定
- 4. 邊框設定
- 5. box-sizing屬性
- 6. box-shadow屬性
1. 盒子大小
??width和height屬性設定的是其元素內容的寬度和高度，盒子的大小=元素內容大小+內邊距大小+外邊距的大小+邊框寬度，計算方式如下：
盒子寬度=width+padding-left+padding-right+margin-left+margin-right+border-left+border-right
盒子高度=height+padding-top+padding-bottom+margin-top+margin-bottom+border-top+border-bottom
2. 外邊距設定
- margin：設定外邊距，例如margin：10px;設定外邊距為10px；margin：10px 5px 15px 20px;順時針（上右下左）設定外邊距；margin：10px 5px;設定上下外邊距為10px，左右外邊距為5px;margin：10px 5px 15px;設定上邊距為10px，左右外邊距為5px，下邊距為15px，
- margin-top：設定上邊距，
- margin-right：設定右邊距，
- margin-bottom：設定下邊距，
- margin-left：設定左邊距，
3. 內邊距設定
??內邊距設定方法與外邊距類似，
4. 邊框設定
- border：設定邊框粗細、顏色以及線形，例如：border:1px solid red;設定邊框寬度為1px，線形為實線，顏色為紅色，
- border-top;：設定上邊框，
- border-right：設定右邊框，
- border-bottom：設定下邊框，
- border-left：設定左邊框，
- border-radius：給div元素添加圓角的邊框，
5. box-sizing屬性
box-sizing: content-box|border-box|inherit;
- content-box：寬度和高度分別應用到元素的內容框，在寬度和高度之外繪制元素的內邊距和邊框，默認為content-box，
- border-box：為元素設定的寬度和高度決定了元素的邊框盒，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度，
- inherit 規定應從父元素繼承 box-sizing 屬性的值，
（1）標準盒模型
box-sizing: content-box;
??標準盒模型的width組成：content（不包含 padding 和 border），
（2）IE盒模型
box-sizing: border-box;
??IE盒模型的width組成：content + 2 * padding + 2 * border，
6. box-shadow屬性
box-shadow: offset-x offset-y blur spread color inset;
- offset-x：不可預設屬性，水平陰影的位置，允許負值，
- offset-y：不可預設屬性，垂直陰影的位置，允許負值，
- blur：可選，模糊距離，只能取正值，blur-radius可設定陰影模糊半徑，0即無模糊效果，值越大陰影邊緣越模糊，
- spread：可選，陰影的大小，允許負值，spread代表陰影的周長向四周擴展的尺寸，正值陰影擴大，負值陰影縮小，
- color：可選，陰影的顏色，
- inset：可選，將外部投影(默認outset)改為內部投影，inset 陰影在背景之上，內容之下，inset 只能寫在引數的第一個或最后一個，其它位置無效，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/274414.html
標籤：其他