html-盒子模型
今天學(xué)習(xí)一下html中盒子模型的部分。
首先了解盒子模型之前,我們需要了解一下什么是 normal flow(文檔流)。
?網(wǎng)頁(yè)是一個(gè)多層的結(jié)構(gòu),設(shè)置樣式,也是一層一層的設(shè)置,最終我們看到的最上面的一層
?文檔流是網(wǎng)頁(yè)最底層。我們創(chuàng)建的元素默認(rèn)情況下,都在文檔流中。元素分為兩種狀態(tài):在文檔流中,脫離文檔流。
元素在文檔流中的特點(diǎn):
? ? ? ? 塊元素類
? ? ? ? ? ?1:會(huì)獨(dú)占一行
? ? ? ? ? ?2:塊元素的寬度默認(rèn)是父元素的100%
? ? ? ? ? ?3:塊元素的高度默認(rèn)是被內(nèi)容撐開的
? ? ? ? 內(nèi)聯(lián)元素(行內(nèi)元素)
? ? ? ? ? ?1:不會(huì)獨(dú)占一行
? ? ? ? ? ?2:寬度高度默認(rèn)都是被內(nèi)容撐開的,不能自己定義寬高
? ? ? ? 行內(nèi)塊元素
?元素脫離文檔流后的特點(diǎn)
? ? ? ? ?元素脫離文檔流之后,就不再區(qū)分塊元素,行內(nèi)元素,行內(nèi)塊元素,?也就是塊元素不會(huì)獨(dú)占一行,行內(nèi)也可以設(shè)置寬高,三像素問題也沒有。
? ? 脫離文檔流的途徑有:?浮動(dòng) ?絕對(duì)定位 ?flex 等。
? ? 把元素布局到頁(yè)面,就像買個(gè)家具,想要把它擺放到合適的位置,你需要了解它的大小和尺寸,以及如何組合它們,對(duì)此我們把這些元素都想想成盒子(一盒矩形)。
影響盒子大小的因素有:內(nèi)容區(qū)(盒子里的內(nèi)容),邊框(border),內(nèi)邊框(padding),外邊距(margin)則不影響盒子大小。
1.內(nèi)容區(qū)(content) ?元素中所有的子元素和文本內(nèi)容都在內(nèi)容區(qū)中排列。
? ? ? ? width ? 設(shè)置內(nèi)容區(qū)的寬度
? ? ? ? height ?設(shè)置內(nèi)容區(qū)的高度
?2.邊框(border)元素設(shè)置邊框
? ? ? 邊框?qū)儆诤凶舆吘?#xff0c;邊框里面屬于盒子內(nèi)部,出了邊框都是盒子的外部。
? ? ? 設(shè)置邊框必須指定三個(gè)樣式 分別是顏色,大小,樣式。
? ? ? ? ?border-color: ; ?設(shè)置邊框的顏色。
? ? ? ? ? ? (1)、有默認(rèn)值,默認(rèn)顏色是黑色。
? ? ? ? ? ? (2)、可以寫多個(gè)顏色 ?以空格隔開。
? ? ? ? ? ? ? ? ? ?4個(gè) ? 上 ?右 ?下 ? 左
? ? ? ? ? ? ? ? ? ?3個(gè) ? 上 ? 左右 ? 下
? ? ? ? ? ? ? ? ? ?2個(gè) ? 上下 ?左右
? ? ? ? ? ? ? ? ? ?1個(gè) ? 上下左右
? ? ? ? ? ? ?(3)、border-xxx-color ?特指top ?right ?bottom left某一邊顏色
? ? ? ? ?border-width: ; ?設(shè)置邊框的大小
? ? ? ? ? ? (1)、默認(rèn)值 ? 默認(rèn)值大概1-3px
? ? ? ? ? ? (2)、也可以跟多個(gè)值 ?以空格隔開
? ? ? ? ? ? ? ? ? 4個(gè) ? 上 ?右 ?下 ? 左
? ? ? ? ? ? ? ? ? 3個(gè) ? 上 ? 左右 ? 下
? ? ? ? ? ? ? ? ? 2個(gè) ? 上下 ?左右
? ? ? ? ? ? ? ? ? 1個(gè) ? 上下左右
? ? ? ? ? ? (3)、border-xxx-width 特指top ?right ?bottom left某一邊寬度
? ? ? ? ?border-style: ; ?設(shè)置邊框的樣式
? ? ? ? ? ? ? (1)、默認(rèn)值 ?none
? ? ? ? ? ? (2)、solid ?實(shí)線
? ? ? ? ? ? ? ? ? ? ? ? dashed ?虛線
? ? ? ? ? ? ? ? ? ? ? ? dotted ?點(diǎn)狀虛線
? ? ? ? ? ? ? ? ? ? ? ? double ?雙線
border簡(jiǎn)寫有以下幾種形式:
? ? ? ? ?border:顏色,大小,樣式;
? ? ? ? ?border-top:顏色,大小,樣式;
? ? ? ? ?border-right:顏色,大小,樣式;
? ? ? ? ?border-bottom:顏色,大小,樣式;
? ? ? ? ?border-left:顏色,大小,樣式;
3.內(nèi)邊距(padding)指的是內(nèi)容區(qū)和邊框之間的距離。
? ? ? ? padding-top ?上內(nèi)邊距;
? ? ? ? padding-right ?右內(nèi)邊距;
? ? ? ? padding-bottom 下內(nèi)邊距;
? ? ? ? padding-left ? 左內(nèi)邊距;
4.margin ?外邊距 ? 指的是當(dāng)前盒子和其他盒子之間的距離。
? ? ? ? ? margin-top ? ?上外邊距 ? ?盒子正值向下移動(dòng),負(fù)值向上移動(dòng);
? ? ? ? ? margin-right ?右外邊距 ? ?默認(rèn)情況,設(shè)置margin-right是沒有效果;
? ? ? ? ? margin-bottom ?下外邊距 ? 盒子自己不動(dòng),擠下面的盒子移動(dòng),正值向下,負(fù)值向上;
? ? ? ? ? margin-left ? ?左外邊距 ? 盒子正值向右移動(dòng),負(fù)值向左移動(dòng);
? ? ? ? 注:大小可正可負(fù)!
? ?margin:?后也可跟多個(gè)值,4個(gè),3個(gè),2個(gè),1個(gè)皆可,規(guī)則跟padding一樣。
總結(jié)
- 上一篇: 你所不知道的冰冷的经济真相 flp713
- 下一篇: ElasticSearch的搜索建议功能