02第一章筆記

11盒子模型

1. border-style:solid(實線)/dashed(虛線)/dotted(點劃線)/double(雙線)

2. padding 內容區域距離邊框

3. padding會撐開原有盒子的寬、高所以我們要減去padding的長度

4. padding的屬性值4種方式：上 右 下 左、上 左右 下、上下 左右、 一個值四個方向(可以單獨設置某一邊)

5. 如果出現邊框塌陷那么：overflow:hidden；

12盒子模型

1. margin 塊與塊之間的位置

2. margin: 0 auto

3. margin-top;設置時，如果子父都設置了margin，子的margin會傳遞到父的margin，例如：

解決方法：在父元素加入：overflow:hidden；

4. margin與padding

1. margin框架與框架之間、塊與塊之間、盒子與盒子、

2. padding盒子內部

13文本溢出

1. 語法{overflow:visible/hidden/scroll/auto/inherit;}

說明：

visible:默認值，內容不會被修剪，會出現在元素框之外。

hidden:內容會被修剪，并且其余內容是不可見的；

sorcll:內容會被修剪，但瀏覽器會顯示滾動條，以便查看其余的內容；

auto:如果內容被修剪，則瀏覽器會顯示滾動條，以便看見其他的內容；

inherit:規定應該從父元素繼承overflow屬性的值。

2. 語法{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}

normal:默認。空白會被瀏覽器忽略。

pre:空白會被瀏覽器保留。

nowrap:文本不會換行，文本會在在同一行上繼續，直到遇到
標簽為止。

pre-wrap:保留空白符序列，但是正常的進行換行

pre-line：合并空白符序列，但保留換行符。

inherit：規定應該從父元素繼承white-space屬性的值。

14文本溢出

1. 語法{text-overflow:clip/ellipsis;}

clip：不顯示省略號，而是簡單的裁剪。

ellipsis：當對象內文本沒有溢出時，顯示省略標記。

2. 使用ellipsis時需要配合下面：

width:10px;容器的寬，

white-space:nowrap;強制文本在一行內顯示，

overflow:hidden; 溢出內容為隱藏，

text-overflow:ellipsis; 溢出文本顯示省略號，

ellipsis：當對象內文本沒有溢出時，顯示省略標記。 ellipsis：當對象內文本沒有溢出時，顯示省略標記。

總結

以上是生活随笔為你收集整理的css 盒子有内容 盒子往下掉_css盒子模型与文本溢出学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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