在CSS中，所有元素被“ 盒子 ”所包圍，利用盒模型的基本原理來實(shí)現(xiàn)CSS準(zhǔn)確布局，元素排列等處理
站在用戶的角度思考問題，與客戶深入溝通，找到邕寧網(wǎng)站設(shè)計(jì)與邕寧網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋邕寧地區(qū)。
CSS廣泛使用的兩種盒子，其在頁面流和元素之間的關(guān)系表現(xiàn)為不同的行為：
對(duì)于定義為塊級(jí)盒子（block）的元素會(huì)表現(xiàn)出以下行為：
對(duì)于定義為內(nèi)聯(lián)盒子（inline）的元素會(huì)表現(xiàn)出以下行為：
通過對(duì)盒子設(shè)置display的屬性值，來控制盒子的外部顯示類型
外部顯示類型與內(nèi)部顯示類型
外部顯示類型：決定盒子是塊級(jí)還是內(nèi)聯(lián)，即決定了盒子之間的布局方式
內(nèi)部顯示類型：決定了盒子內(nèi)部的元素是如何布局的，默認(rèn)情況是按照正常文檔流布局，也可以通過設(shè)置display值為flex和grid來改變內(nèi)部元素之間的布局方式
不同顯示類型的例子
block：
圖中段落里的 span word /span 被設(shè)置為 display：block
因此其獨(dú)占一行，寬度填滿整個(gè)父元素
flex：
圖中的列表被設(shè)置為 display：block ，每個(gè)列表是一個(gè)塊級(jí)元素 —— 像段落一樣 —— 會(huì)充滿整個(gè)容器的寬度并且換行
inline-flex與inline
圖中的列表被設(shè)置為 display：inline-flex ，使得在一些flex元素外創(chuàng)建一個(gè)內(nèi)聯(lián)框
最后設(shè)置兩個(gè)段落為 display: inline ， inline flex 容器和兩個(gè)段落在同一行上，而不是像塊級(jí)元素一樣換行
CSS組成一個(gè)盒模型需要以下幾個(gè)部分：
在標(biāo)準(zhǔn)模型中，如果你給盒設(shè)置 width 和 height，實(shí)際設(shè)置的是 content box。 padding 和 border 再加上設(shè)置的寬高一起決定整個(gè)盒子的大小
如果使用標(biāo)準(zhǔn)模型寬度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box
如果使用替代模型，一切都將變得簡(jiǎn)單很多，此時(shí)的 width 和 height 就是盒子可見的寬度與高度，無論怎么改變 padding 或 border 的值，都會(huì)通過壓縮 conten box 的大小來保持 width 和 height 的值不變
如需使用，只需要聲明以下CSS樣式：
外邊距是盒子周圍一圈看不到的空間。它會(huì)把其他元素從盒子旁邊推開。 外邊距屬性值可以為正也可以為負(fù)。設(shè)置負(fù)值會(huì)導(dǎo)致和其他內(nèi)容重疊。無論使用標(biāo)準(zhǔn)模型還是替代模型，外邊距總是在計(jì)算可見部分后額外添加
CSS：
html：
結(jié)果如下：因?yàn)樯贤膺吘嘣O(shè)置為負(fù)值，所以兩個(gè)邊框會(huì)重疊
外邊距折疊
理解外邊距的一個(gè)關(guān)鍵是外邊距折疊的概念。如果你有兩個(gè)外邊距相接的元素，這些外邊距將合并為一個(gè)外邊距，即最大的單個(gè)外邊距的大小
結(jié)果如下，中間間隔的部分為50px
如下圖所示，對(duì)內(nèi)聯(lián)盒子設(shè)置 width 和 height 都不會(huì)生效，雖然margin，padding和border會(huì)生效，但不會(huì)改變與其它內(nèi)聯(lián)盒子的關(guān)系，因此其內(nèi)邊距和邊框會(huì)與段落的其它元素重疊
要避免上述情況，只需要將內(nèi)聯(lián)盒子的display值設(shè)置為inline-block即可
設(shè)置之后的效果為：
但因其保留有inline的特征，所以它不會(huì)跳轉(zhuǎn)到新行
float可以使得當(dāng)前元素脫離正常文本流，并吸附到父元素的左邊（left）或者右邊（right）正常布局中位于該浮動(dòng)元素之下的內(nèi)容，此時(shí)會(huì)圍繞著浮動(dòng)元素進(jìn)行排列
基本的常見用途在于圖片與文字環(huán)繞排版以及首字母下沉：
重點(diǎn)是這個(gè)，元素浮動(dòng)具有一定的規(guī)則與限制
設(shè)置如下三個(gè)盒子（均以塊級(jí)元素方式呈現(xiàn)）：
將box1設(shè)置為向右浮動(dòng)：
因?yàn)閎ox1脫離正常文檔流，所以box2和box3會(huì)向上填補(bǔ)box1的空位，box1浮動(dòng)到父元素（body）的最右邊
設(shè)置box1向左浮動(dòng)：
同理，box1脫離正常文檔流，box2與box3向上填補(bǔ)box1的空位，此時(shí)box1浮動(dòng)到父元素（body）的最左邊，所以會(huì)覆蓋掉box2（浮動(dòng)元素在正常流文檔的上方）
設(shè)置box2向左浮動(dòng)：
可以看到box3因?yàn)閎ox2脫離正常文檔流而向上填充其空位，box2因?yàn)楦?dòng)到左邊覆蓋了box3，然而box1仍處于正常文檔流中，并且在html文件中最先聲明，所以box2只能在box1的下方進(jìn)行浮動(dòng)（即使box2設(shè)置為向右浮動(dòng)也是一樣）
設(shè)置box1、box2與box3都向左浮動(dòng)：
可以看到三個(gè)盒子均向左浮動(dòng)，直到碰到前一個(gè)浮動(dòng)框的邊緣為止（對(duì)于box1來說是碰到父元素的邊緣），因此呈現(xiàn)如此的排列狀況
如果當(dāng)父元素太窄，無法包含三個(gè)盒子的寬度，則無法容納的元素向下移動(dòng)，直到有足夠的空間使得其能向某個(gè)方向浮動(dòng)，如下圖所示：
如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”
相關(guān)參考：
浮動(dòng)的規(guī)則先討論到此
高度塌陷
在父元素container內(nèi)設(shè)置一個(gè)盒子box1，此時(shí)沒有設(shè)置浮動(dòng)，box1會(huì)撐起父元素container的高度
如果此時(shí)設(shè)置box1浮動(dòng)，因?yàn)槠涿撾x了正常文檔流，無法撐起盒子的高度，所以將發(fā)生高度塌陷：
為了解決這個(gè)問題，在此提供三種方法：
1. 添加額外標(biāo)簽
首先在父元素內(nèi)添加空白內(nèi)容的額外標(biāo)簽clearfix
然后再CSS規(guī)則中添加以下內(nèi)容：
通過清除父元素內(nèi)空白元素的浮動(dòng)，使得父元素邊框重新包含浮動(dòng)內(nèi)容
2. 父級(jí)元素添加overflow屬性
直接在父元素內(nèi)添加overflow屬性：
同樣可以清除浮動(dòng)，結(jié)果如下：
3. after偽元素
html文檔改為：
在CSS規(guī)則里添加：
標(biāo)準(zhǔn)CSS盒模型規(guī)定width和height樣式屬于給定內(nèi)容區(qū)域的尺寸，并且不包含boder和padding,可以稱此盒子為“內(nèi)容盒模型＂。在老版的IE里和新版的CSS中都有一些例外，再IE6之前和IE6~8“怪異模式”下顯示一個(gè)頁面時(shí)（頁面中缺少 ＜IDOCTYPE 或有一個(gè)不夠嚴(yán)格的 doctype 時(shí)），width和height屬性確是包含boder和padding的。
IE的為是一個(gè)bug,但是IE的非標(biāo)準(zhǔn)盒模型通常也很有用。所以CSS3引進(jìn)了 box-sizing 屬性，默認(rèn)值是 content-box ,它指定了上面描述的標(biāo)準(zhǔn)的盒模型。如果替換為 box-sizing:border-box ,瀏覽器將會(huì)為那個(gè)元素應(yīng)用IE的盒模型，即width和height屬性將包括border和padding,當(dāng)想以百分比形式為元素是指總體尺寸，又想以像素單位指定border和padding時(shí)，邊框盒模型特別有用
box-sizing 屬性再當(dāng)今所有瀏覽器中都支持，但是還沒有不帶前綴通用的實(shí)現(xiàn)。再Chrome和Safari中，使用 -webkit-box-sizing .在Firefox中，使用 -moz-box-sizing .在Opera和IE8及其更高的版本中，可以使用不帶前綴的 box-sizing .
邊框盒模型在未來CSS3中的一個(gè)可選方案是使用盒子尺寸計(jì)算值；
在IE9中支持使用 cale() 計(jì)算CSS的值，在Firefox為 -moz-cale()
是元素(DIV
a
li
ul
等)的CSS屬性.ID是這個(gè)元素的唯一標(biāo)識(shí)只能一個(gè)元素使用用,class是類其他的元素可以共用 你的那個(gè)BOX
是以BOX命名的一個(gè)ID屬性
如
div#{color:red;}; 再如
class="center"
div.center
{float:left;}這種CSS樣式
1、第一種情況：
div class="box"/div
.box{color:red} 這種是定義div元素box的css樣式。比如color:red定義box里面的文字是紅色。
2、第二種情況：
div class="box"
div class="box1"紅色文字/div
div class="box2"藍(lán)色文字/div
/div
.box .box1{color:red} 定義元素box下的子元素box1的css樣式。
.box .box2{color:blue} 定義元素box下的子元素box2的css樣式。
box屬性 content 、padding 、margin 、background 、border
B選項(xiàng)不在里面。
盒子模型是CSS中一個(gè)很重要的概念，頁面中的所有元素都可以看成一個(gè)盒子，并占據(jù)一定的頁面空間，一個(gè)頁面由很多盒子組成，盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法，才能真正控制好頁面元素。
盒子模型主要定義四個(gè)區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁面元素，擁有如下屬性：
邊框基本屬性：
通過一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語法：border-方向（top/right/bottom/left）：width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語法：border-屬性（width/style/color）：取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語法：
border-image-source ：引入背景圖片
取值：
默認(rèn)值：無圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認(rèn)單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個(gè)參數(shù)，即水平和垂直方向
取值：
Stretch：默認(rèn)值，拉伸
Repeat：平鋪
Round：取整平鋪
內(nèi)容區(qū)域和邊框（邊緣）之間的距離
語法：padding: 值；
單邊設(shè)置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內(nèi)邊距的簡(jiǎn)寫方式：
padding:value;
四個(gè)方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個(gè)元素間的距離。
語法：margin: 值；
單邊設(shè)置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計(jì)算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構(gòu)成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認(rèn)值，滾動(dòng)
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。
font 簡(jiǎn)寫屬性語法：
將所有字體屬性合寫為一行，其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個(gè)值，如果省略值地話，就使用屬性的默認(rèn)值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語法：
作用：定義列表的編號(hào)樣式
屬性：list-style-type
作用：用于設(shè)置列表項(xiàng)的圖像屬性
語法：
圖像URL地址：圖像的相對(duì)路徑或絕對(duì)路徑
none：默認(rèn)值，不指定圖像
注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設(shè)置列表的圖片樣式。
通過設(shè)置li的背景圖片的方式來設(shè)置列表圖片基本步驟：
設(shè)置list-style-type屬性值為none
設(shè)置li標(biāo)記的背景屬性backgruond
作用：用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置
語法：
作用：可以同時(shí)設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語法：
注意：
可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性采用默認(rèn)值
同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯(cuò)誤無法顯示
當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí)，列表項(xiàng)目的樣式優(yōu)先顯示
特點(diǎn)：
可以設(shè)置寬度和高度
默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行
作用：
塊級(jí)元素主要用于頁面布局
常用塊級(jí)元素：
div、p、h1~h6、ol、ul等
特點(diǎn)：
不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度
默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示，遇父元素邊界時(shí)會(huì)自動(dòng)換行
作用：
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素：
a、span、em、b、i、strong、img、input等
作用：控制頁面元素脫離原有文檔流，實(shí)現(xiàn)向左或向右移動(dòng)，直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。
屬性： float
取值：
浮動(dòng)元素不會(huì)相互重疊；
浮動(dòng)元素不會(huì)上下浮動(dòng)，如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊，則它下降到低于先前任何浮動(dòng)元素的位置。
作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。
取值：
作用：控制頁面元素在頁面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列，塊級(jí)元素獨(dú)占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動(dòng)換行。
特點(diǎn)：
相對(duì)于自身原有位置進(jìn)行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時(shí)，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點(diǎn)：
建立了以包含塊為基準(zhǔn)的定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素（設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對(duì)于瀏覽器窗口。
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對(duì)定位未設(shè)置偏移量的特點(diǎn)：
無論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標(biāo)準(zhǔn)文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是瀏覽器窗口本身。
在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。
作用：用于控制元素的層疊次序，使得某個(gè)元素浮于其他元素之上。
語法：
auto：遵循其父元素的定位
number：整數(shù)，可負(fù)，值大者疊加在上層
注意：使用z-index屬性時(shí)，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語法：dispaly:值;
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語法：visibility:值;
重慶分公司
重慶分公司
