成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

004-盒模型及文本溢出

fsmStudy / 1257人閱讀

摘要：什么是盒模型盒模型是布局的基石，它規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。盒模型填充內(nèi)邊距的使用方法填充在設(shè)定頁(yè)面中一個(gè)元素內(nèi)容到元素的邊緣邊框之間的距離。

什么是盒模型 
盒模型是css布局的基石，它規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框、邊界、補(bǔ)白、內(nèi)容區(qū)，這就是盒模型。
盒模型

填充（內(nèi)邊距）

padding的使用方法

填充：padding,在設(shè)定頁(yè)面中一個(gè)元素內(nèi)容到元素的邊緣(邊框) 之間的距離。 也稱補(bǔ)白。

用法：
   1）用來(lái)調(diào)整子元素在父元素中的位置關(guān)系。
   注：padding屬性需要添加在父元素上。
  
   2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性值。
    屬性值的4種方式：
     四個(gè)值：上   右   下   左 {padding:10px   20px   30px    40px;}
     三個(gè)值：上    左右    下 {padding:10px   20px   30px ;}
     二個(gè)值：上下    左右 {padding:10px   20px  ;}
     一個(gè)值：四個(gè)方向 padding:2px;/*定義元素四周填充為2px*/

說(shuō)明：
  可多帶帶設(shè)置一方向填充，如：
  上方向padding-top:10px;    
  右方向pahdding-right:10px;   
  下方向padding-bottom:10px;    
  左方向padding-left:10px;

外邊距

margin的使用方法

邊界：margin,在元素外邊的空白區(qū)域，被稱為邊距。
   margin-left:左邊界
   margin-right:右邊界
   margin-top:上邊界
   margin-bottom:下邊界

 屬性值的4種方式： 
     四個(gè)值：上 右 下 左
     三個(gè)值：上 左右 下
     二個(gè)值：上下 左右
     一個(gè)值：四個(gè)方向 
        margin:2px;/*定義元素四邊邊界為2px*/
        margin:2px 4px;/*定義元素上下邊界為2px，左右邊界為4px/
        margin:2px 4px 6px;/*定義元素上邊界為2px，左右邊界4px下邊界為6px，*/
        margin:2px 4px 6px 8px;/*定義元素上、右邊界為2px，下右邊界為6px，左邊界為8px*/
        margin:0 auto;/*在瀏覽器中橫向居中。*/

說(shuō)明：可多帶帶設(shè)置一方向邊界，如：margin-top:10px;

   *margin值的解析：左右邊界累加，上下邊界重合。
    
   *子元素（塊）直接寫margin-top時(shí)，會(huì)將margin-top屬性值加上父元素身上,(不設(shè)置任何浮動(dòng)及定位的屬性的前提下)

邊框
border的使用方法

 border:邊框?qū)挾?邊框風(fēng)格 邊框顏色;
 例如：border:5px solid #f00

   邊框：border,網(wǎng)頁(yè)中很多修飾性線條都是由邊框來(lái)實(shí)現(xiàn)的。
   
   邊框?qū)挾龋篵order-width:
   
   邊框顏色：border-color:
   
   邊框樣式：border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)
   可多帶帶設(shè)置一方向邊框，
   
   如：border-bottom:邊框?qū)挾?邊框風(fēng)格 邊框顏色;底邊框
   border-left:邊框?qū)挾?邊框風(fēng)格 邊框顏色;左邊框
   border-right:邊框?qū)挾?邊框風(fēng)格 邊框顏色;右邊框
   border-top:邊框?qū)挾?邊框風(fēng)格 邊框顏色;上邊框

盒子的實(shí)際大小

1）盒子的實(shí)際大小：

   寬 =左右border+左右padding+width
   
   高 =上下border+上下padding+height
   例如：一個(gè)盒子的 border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px
   
   寬= border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
   
   高= border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

2）溢出屬性

   overflow:visible/hidden(隱藏)/scroll/auto(自動(dòng))/inherit;
  
   visible:默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)成現(xiàn)在元素框之外；
   
   hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的；
  
   scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余的內(nèi)容;
   
   auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條，以便查看其他的內(nèi)容;
  
   inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值。

3）空余空間

   white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
   該屬性用來(lái)設(shè)置如何處理元素內(nèi)的空白；
   
   normal：默認(rèn)值，空白會(huì)被瀏覽器忽略，
   
   pre：空白會(huì)被瀏覽器保留，其行為方式類似HTML中的pre標(biāo)簽；
   
   nowrap:文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)，直到遇到
標(biāo)簽為止；
  
   pre-wrap：保留空白符序列，文字超出邊界時(shí)會(huì)正常換行；
  
   pre-line:合并空白符序列，但是保留換行符；
   
   inherit：規(guī)定應(yīng)該從父元素繼承White-space屬性的值；(ie瀏覽器不支持此屬性值)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114339.html

相關(guān)文章

  • 004-盒模型及文本溢出

    摘要：什么是盒模型盒模型是布局的基石，它規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。盒模型填充內(nèi)邊距的使用方法填充在設(shè)定頁(yè)面中一個(gè)元素內(nèi)容到元素的邊緣邊框之間的距離。 什么是盒模型 盒模型是css布局的基石，它規(guī)定了網(wǎng)頁(yè)元素如何顯示以及元素間相互關(guān)系。css定義所有的元素都以擁有可像盒子一樣的外形和平面空間，即都包含邊框、邊界、補(bǔ)白、內(nèi)容區(qū)，這就是盒模型。 盒模型 填充（內(nèi)邊距） pad...

    xiangzhihong 評(píng)論0 收藏0

  • 【芝士整理】CSS基礎(chǔ)圖譜

    摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開(kāi)頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...

    iOS122 評(píng)論0 收藏0

  • CSS - 純css實(shí)現(xiàn)多行文本溢出省略（兼容所有瀏覽器）

    摘要：前言多行文本超出高度限制出現(xiàn)省略號(hào)移動(dòng)端多為內(nèi)核的有擴(kuò)展屬性但并不是規(guī)范中的屬性端往往要借助去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今天就用純來(lái)實(shí)現(xiàn)一個(gè)完全兼容的多行省略。 前言 多行文本超出高度限制出現(xiàn)省略號(hào) , 移動(dòng)端多為webkit內(nèi)核的 , 有擴(kuò)展屬性-webkit-line-clamp , 但并不是CSS規(guī)范中的屬性 , PC端往往要借助js去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今...

    李義 評(píng)論0 收藏0

  • CSS規(guī)范里的一些事(一)

    摘要：規(guī)范里的一些事前言以下內(nèi)容總結(jié)于規(guī)范，一盒子模型以上圖形說(shuō)的是盒子模型中的邊界。，，和屬性失效盒的位置是根據(jù)常規(guī)流計(jì)算的被稱為常規(guī)流中的位置，然后盒相對(duì)于其常規(guī)位置偏移。 CSS規(guī)范里的一些事 前言：以下內(nèi)容總結(jié)于CSS2.1規(guī)范，http://www.ayqy.net/doc/css2-1/cover.html 一、盒子模型 showImg(https://segmentfault...

    neu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<