国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS盒模型的介紹

didikee / 1788人閱讀

摘要：盒模型的概念與分類盒模型就是一個盒子，封裝周圍的元素，它包括內(nèi)容邊框內(nèi)邊距外邊距。水平方向邊界不會重疊，垂直方向會重疊，垂直方向的實際邊界是邊界中的最大值。

CSS盒模型的概念與分類

? ? ?CSS盒模型就是一個盒子，封裝周圍的HTML元素，它包括內(nèi)容content、邊框border、內(nèi)邊距padding、外邊距margin。

? ?? ?CSS盒模型分為標(biāo)準(zhǔn)模型和IE模型；

?

標(biāo)準(zhǔn)模型和IE模型的區(qū)別

? ? ? 標(biāo)準(zhǔn)模型：width = 內(nèi)容content 的寬度；(默認(rèn)） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

　　　　　　設(shè)置方式： box-sizing:content-box;

? ? ? ?IE模型：width? = 內(nèi)容content + 邊框border + 內(nèi)邊距paddig 的寬度；? ? ? ? ? ? ? ? ??

　　　　　　設(shè)置方式： box-sizing:border-box;

?

通過js如何獲取盒模型的寬高

? ? ?1.dom.style.width/height ? ? ? ? ? ? ? ? ?

　　　　只能獲取到dom的內(nèi)聯(lián)樣式

? ? ?2.dom.currentStyle.width/height ? ? ? ?

　　　　?獲取到的是dom的實際寬高，但這種方式只在IE中可以使用

? ? ?3.window.getComputedStyle(dom,null).width/height ? ? ? ? ? ? ? ? ?

　　　　?獲取到的是dom的實際寬高，但是不支持IE

? ? ?4.dom.offsetWidth/offerHeight ? ? ? ? ? ? ? ? ? ? ?

　　　　最常用的，兼容性最好的

???? 第2，3個組合下就可以兼容ie與其他瀏覽器了?

window.getComputedStyle ? window.getComputedStyle(obj,null).width : obj.currentStyle.width;

?

邊距重疊

? ? ?邊距重疊是指兩個或多個盒子相鄰邊界重合在一起形成一個邊界。水平方向邊界不會重疊，垂直方向會重疊，垂直方向的實際邊界是邊界中的最大值。

? ? ? 比如子元素設(shè)置了margin-top，父元素沒有設(shè)置，但是父元素也有了上邊距。

DOCTYPE html>
<html>
<head>
    <title>邊距重疊title>
    <meta charset="utf-8">
    <style type="text/css">
        html *{
            margin: 0;
            padding: 0;
        }

        .content{
            width: 500px;
            height:100px;
            background: green;
        }
        .parent{
            width: 300px;
            height: 300px;
            background: pink;
        }
        .child{
            width: 150px;
            height: 150px;
            background: yellow;
            margin-top: 50px;
        }
    style>
head>
<body>
    <div class="content">
        占位內(nèi)容區(qū)域
    div>
    <div class="parent">
        <div class="child">
            
        div>
    div>
body>
html>

?

下圖就是代碼運行結(jié)果：

解決邊距重疊-BFC

? ? ? 1、BFC概念：塊級格式化上下文

? ? ? 2、BFC的原理：

? ? ? ? ? ?BFC的區(qū)域不會與浮動區(qū)域重疊

? ? ? ? ? ?計算BFC區(qū)域高度時，浮動區(qū)域也參與計算

? ? ? ? ? ?BFC區(qū)域是獨立的一個區(qū)域，不與其他區(qū)域相互影響

? ? ? 3、如何創(chuàng)建BFC

? ? ? ? ? ? 脫離文檔流：float不為none；position為absolutely或fixed

? ? ? ? ? ? overflow不為visible（如overflow：hidden）

? ? ? ? ? ? display為“table-cell”, “table-caption”, ?“inline-block”中的任何一個

? ? ? 4、BFC應(yīng)用場景

? ? ? ? ? ? 自適應(yīng)兩欄布局

? ? ? ? ? ? 清除浮動

? ? ? ? ? ? 防止垂直margin重疊

?

-ＴＨＥ　ＥＮＤ-

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1467.html

相關(guān)文章

  • 深入css布局 (1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內(nèi)元素，行內(nèi)塊級元素。行內(nèi)級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們...

    ky0ncheng 評論0 收藏0

  • 深入css布局(1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。規(guī)定元素和屬性是包含元素的邊框內(nèi)邊距內(nèi)容的。后來微軟也慢慢轉(zhuǎn)向了的標(biāo)準(zhǔn)，在以后支持了標(biāo)準(zhǔn)盒模型。行內(nèi)級元素屬性取的元素。 深入css布局（1）—— 盒模型 & 元素分類 ????在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重...

    blankyao 評論0 收藏0

  • CSS盒模型完整介紹

    摘要：盒模型的認(rèn)識基本概念標(biāo)準(zhǔn)模型模型。如圖由于盒模型的怪異模式，模型和標(biāo)準(zhǔn)模型的內(nèi)容計算方式不同。設(shè)置為標(biāo)準(zhǔn)模型，它的元素寬度。這里就不介紹，大家可以自行搜索。 盒模型的認(rèn)識 基本概念：標(biāo)準(zhǔn)模型+IE模型。 包括margin,border,padding,content 標(biāo)準(zhǔn)模型和IE模型的區(qū)別 css如何設(shè)置獲取這兩種模型的寬和高 js如何設(shè)置獲取盒模型對應(yīng)的寬和高 根據(jù)盒模型解釋邊距...

    qqlcbb 評論0 收藏0

  • CSS中盒模型的理解

    摘要：如圖為了方便大家理解和嘗試，我寫了一個小放上來方便大家嘗試顯示盒模型盒模型計算規(guī)則元素框的總寬度元素的的左邊距和右邊距的值的左邊距和右邊距的值的左右寬度元素框的總高度元素的的上下邊距的值的上下邊距的值的上下寬度。今天突然看到一篇關(guān)于CSS中盒模型的文章，忽然覺得自己竟然遺忘了很多小的地方，所以寫一篇文章來記憶一下 （摘抄于千與千尋寫的CSS盒子模型理解，并在自己基礎(chǔ)上添加了一些東西，希望更完...

    shmily 評論0 收藏0

  • 標(biāo)準(zhǔn)盒模型、怪異盒模型對比與應(yīng)用

    摘要：百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個塊的總寬度左右左右左右在怪異模式下，一個塊的總寬度左右既已經(jīng)包含了和值然后再介紹一下新屬性那么，到底這兩個公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說，上代碼先看標(biāo)準(zhǔn) 百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)在怪異模式下...

    keithxiaoy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<