<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css盒子模型的深入理解,在塊級、行內元素的區別和特性

          時間:?2017-11-27閱讀:?2820標簽:?盒子

          css盒子模型用于處理元素的內容、內邊距、邊框和外邊距的方式簡稱。元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距默認是透明的,因此不會遮擋其后的任何元素。


          內邊距、邊框和外邊距都是可選的,默認值是零。但是,許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。

          * {
            margin: 0;
            padding: 0;
          }


          css盒子模型到底的思想是什么?

          CSS實現頁面布局的一種思想:把頁面的所有元素都看成一個類似于禮品盒的盒子,禮品盒可能會有好多層包裝組成,那么頁面元素也對應的有內容、邊框、內外邊距等組成。這里特別提醒一下,盒模型是要把元素看成立體的,它確實有空間的3D屬性,css盒子3D模型從上到下分為5層:1、border;2、content+padding;3、background-image;4、background-color;5、margin

          目前有:標準盒子模型和IE盒子模型 2種盒模型 ,區別在于:

          標準盒模型:元素的width和height = content //內容
          IE盒模型:元素的width和height =content+border+padding  //內容+邊框+內邊距

          為了滿足跨瀏覽器的差異,我們比較肯定的方式是使用標準盒模型,這里通過在網頁頂部增加DOCTYPE的聲明,來解決跨瀏覽器兼容方案(或者使用css3的聲明方式):

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


          CSS盒子模型對行內元素和塊級元素的區別和特點

          塊級元素會獨占一行,默認情況下,其寬度自動填滿其父元素寬度。

          行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化,另外

          塊級元素可以設置width,height屬性。
          行內元素設置width,height屬性無效,它的長度高度主要根據內容決定。
          塊級元素即使設置了寬度,仍然是獨占一行。
          塊級元素可以設置margin和padding屬性。 
          行內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不會產生邊距效果。
          塊級元素對應于display:block. 行內元素對應于display:inline。

          塊級元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table...

          行內元素(內聯元素):a ,   span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite....

          如果想讓一個元素可以設置寬度高度,又讓它以行內形式顯示,我們可以設置display的值為inline-block。  


          Box-sizing說明

          CSS3增加的box-sizing屬性,允許我們規定元素使用哪種盒模型。IE8及以上版本支持該屬性,Firefox 需要加上瀏覽器廠商前綴-moz-,對于低版本的IOS和Android瀏覽器也需要加上-webkit-。它具有有3個屬性值:

          box-sizing:content-box:  W3C標準盒模型,默認屬性。padding和border不被包含在定義的width和height之內。

          box-sizing:border-box:IE6混雜模式盒模型, padding和border被包含在定義的width和height之內。此屬性表現為怪異模式下的盒模型。

          box-sizing:inherit  從父級元素中繼承該屬性。

          如果設置box-sizing:border-box來使用IE6混雜盒模型 ,那么

          .demo {
              width: 100px;
              height: 100px;
              padding: 10px;
              border: 5px solid black;
              box-sizing: border-box; /*增*/
          

          -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;

          }


          設置padding與border后,內容區的寬度和高度被壓縮為70px*70px,盒子的原尺寸仍然是100px*100px  


          Box-sizing 的應用場景?

          當一個容器寬度定義為 width:100%; 之后,如果再增加 padding 或者 border 則會溢出父容器,是向外擴張的。如果使用該樣式,指定為 box-sizing: border-box; 則 padding 和 border 就不會再溢出,而是向內收縮的,這個效果是非常實用的。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/180

          DOM盒子模型常用屬性client,offset和scroll

          在JS中通過相關的屬性可以獲取(設置)元素的樣式信息,這些屬性就是盒子模型屬性(基本上都是有關于樣式的),clientWidth & clientHeight:獲取當前元素可視區域的寬高

          css3動畫之兩面翻轉的盒子

          利用偽元素before、after,只創建一個div,一個盒子里面裝兩個同寬高的盒子,利用backface-visibility設置元素背面是否可見的屬性,達到兩面翻轉的效果

          CSS3中的box-sizing(content-box與border-box)

          CSS3中的box-sizing 屬性允許以特定的方式來指定盒模型,有兩種方式:現代瀏覽器和IE9+默認值是content-box。 content-box:padding和border不被包含在定義的width和height之內。

          css盒子模型_css全局設置border-box

          border-box 告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width,height內的。全局設置 border-box 很好,更符合我們通常對一個「盒子」尺寸的認知。讓有邊框的盒子正常使用百分比寬度。

          css中border-sizing屬性詳解和應用

          box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值,inherit指的是從父元素繼承box-sizing表現形式。根據項目中的使用經驗和w3c的建議,推薦將box-sizing屬性設置為border-box。

          css3盒子模型中的box-sizing屬性的使用_box sizing常用的3種屬性

          box-sizing屬性用來定義元素的width和height所表示的區域,該屬性一般有三種值:content-box、border-box、inherit,其中inherit表示box-sizing的值應該從父元素繼承。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网