盒子模型

先記一下我覺得比較重要的東西

CSS的優先級

內聯樣式>ID 選擇器>偽類>屬性選擇器>類選擇器>元素（類型）選擇器>通用選擇器

行內元素，塊元素，行內塊元素之間的轉換

display:inline; //塊級元素（獨占一行）變為行內元素--可以文本居中

display:block; //行內元素變為塊級元素--可以設置寬高

display:inline-block; //其實仍是行內元素，但是可以設置width及height屬性等

---------------------------------------好了，現在是真的盒子模型-------------------------------------

這可是干貨好好看好好學

一個盒子由content+padding+border+margin組成

padding:10px；代表上下左右都是10px

padding:10px 20px;上下是10px 左右是20px

padding:10px 20px 30px;代表上 左右 下

padding:10px 20px 30px 40px;代表上右下左

margin同理

計算盒子寬多少的例題

有一個div設置width是100px height是50px,border:5px solid#000;padding:10px 20px;那么盒子在頁面實際占

據的寬度和高度是多少像素？

盒子的寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

寬：100+10+40

圖和題沒半毛錢關系

盒子的定位和浮動 這是真難懂

定位這個詞 position

就是為了方便布局控制盒子的位置

定位常見的有四種 如下：

定位 position 語法：position : static 、absolute 、relative、fixed 。

static : 稱為靜態定位，這是默認的屬性值，也就是該盒子按照標準流（包括浮動方式）進行布局。

relative ：稱為相對定位，使用相對的盒子的位置常以標準流動排版方式為基礎，然后使盒子相對于它在原來的位置偏移指定的距離。相對定位的盒子仍在標準流中，它后面的盒子仍以標準流的方式對待它。

absolute : 稱為絕對定位，盒子的位置以它的包括框為基準進行偏移。絕對定位的盒子從標準流中脫離。這意味著它們對其后的兄弟盒子的定位沒有影響，其他的盒子就好象這個盒子不存在一樣。

fixed : 稱為固定定位，它和絕對定位類似，只是以瀏覽器窗口為基準進行定位，也就是當拖動瀏覽器窗口的移動滾動條時，依然保持對象的位置不變。

靜態定位是默認的屬性，按照標準流布局

相對定位在我看來就像是分身術一樣，本體按照以前殘影的位置改變方位，但是用來做參照的盒子依舊在標準流中

絕對定位就厲害了脫離了標準流，獨立于它們

而固定定位就像是老頑固一樣，守著一個地方，頁面上下翻動它依舊不變

Z-index

z-index就像是皇帝睡覺翻牌子——誰先上！

就像皇帝挑妃子一樣，z-index也是有條件的那就是——得定位了才能用，而浮動的東西不能用。

它的默認值是0不用問，它沒單位，屬性值為整數，可正可負

屬性值一樣時還是原來的高低關系

浮動以及清除浮動

浮動學的稀爛就不皮了

元素加上浮動后會盡量向左或向右移動知道觸碰到外邊框，或者碰到另一個浮動框的邊框

文本流會環繞在浮動的圖片左邊

盒子被設置為float之后會脫離標準流，不會影響其他標準流中的盒子

清除浮動：clear屬性

clear屬性主要放在文字所在的盒子里，例如一個p段落的css設置中，而不要放到對浮動盒子的設置里面

clear屬性語法： clear : none 、left、right、 both clear參數值說明： none : 　允許兩邊都可以有浮動對象 both : 　不允許有浮動對象 left : 　不允許左邊有浮動對象 right : 　不允許右邊有浮動對象 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的窗口缩小 怎么让定位的盒子不动_盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。