12018-01-01-WEB預習第三天-CSS盒模型

CSS中將每一個元素都設置為了一個矩形的盒子,便于方便的頁面布局。


盒子模型

盒子的組成部分

  • 內容區,內邊距,邊框,外邊距。

內容區

邊框

邊框必須指定的三個樣式

  • border-width:邊框的寬度;
    • 如果指定了4個值,會分別設置給:上,右,下,左。(順時針方向)
    • 三個值:上,左右,下;
    • 兩個值:上下,左右;
    • 另外兩個樣式同理。
  • border-color:邊框的顏色;
  • border-style:邊框的樣式;

大部分瀏覽器中,邊框寬度 和 顏色都有默認值,而邊框的樣式默認值都為none;

使用border設置邊框
同時設置4個邊框
不區分 樣式,顏色,寬度 的順序。
可以使用border-top:,border-right:,border-bottom:,border-left:;分別設置四個邊框。


內邊距

內邊距(padding),指的是盒子的內容區與盒子邊框之間的距離。

內邊距會影響盒子的可見框大小,元素的背景會延伸到內邊距。

一共有四個方向的內邊距,可以通過:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

來設置四個方向的內邊距

盒子的大小由 內容區,內邊距和邊框共同決定。
使用padding可以同時設置四個邊框的樣式,規則和border一致。


外邊距

外邊距指的是當前盒子與其它盒子之間的距離
它不會影響可見框大小,會影響盒子的位置

四個外邊距:

  • margin-top
  • margin-right
  • margin_bottom
  • margin_left

上外邊距,左外邊距 改變自己位置。(向左向上看齊
下外邊距,右外邊距 改變別人位置。

外邊距可以為 負值,使元素反方向移動。

margin還可以設置為auto

  • 單獨設置左,右為auto時為最大值;
  • 同時設置左右為auto時水平居中。
  • 垂直方向設置為auto,外邊距默認為0;(一般不用垂直方向)

相鄰的垂直外邊距的重疊
垂直方向的,相鄰,外邊距,重疊。(即取較大值,而非取和)

父子元素的垂直外邊距相鄰時,子元素的外邊距會給父元素。
解決方法:

  • 使其不相鄰:加邊框,內邊距。
  • 直接使用父元素內邊距調整位置(父元素本身形狀會受影響)

瀏覽器的默認樣式

瀏覽器為了在頁面中沒有樣式時,也可以有一個比較好的顯示效果,
所以為很多的元素都設置了一些默認的margin和padding,

而它這些默認樣式,正常情況我們是不需要使用的。
往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統統去掉。

*{
    margin:0;
    padding:0;
}

內聯元素的盒子模型

內聯元素垂直padding不會影響布局,只會單純調整大小,相鄰的直接覆蓋。


display,visibility,overflow

文檔流

文檔流

一個文檔就是網頁。(網頁即html文檔)
網頁是多層結構,文檔流就是最下面那層的地基。

塊元素 只有在文檔流中才會獨占一行(自上向下排列)。

當元素的高度或寬度的值為auto時,此時指定內邊距不會影響可見框的大小,而是會自動修改寬度,以適應內邊距。(高度被內容撐開)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 大家好,我是IT修真院的學員,一位正直純潔善良的web前端程序員 今天給大家分享一下如何理解盒模型? 1.背景介紹...
    寧靜森林閱讀 2,195評論 0 0
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,865評論 0 6
  • 引言 這次給大家帶來了CSS-盒子模型部分的筆記,大家一同交流?? 認識盒子模型之前,先來了解一下CSS元素的分類吧...
    zhaolion閱讀 4,327評論 9 85
  • 文化旅人余秋雨在出版《借我一生》前接受記者專訪時說——我寫這本書,決不想與誹謗者辯論,也不想對媒體和讀者表白。我只...
    素素_sky閱讀 114評論 0 0