CSS中盒模型中四個屬性的介紹（附程式碼）

1.3 替換元素的尺寸計算規則

替換元素的尺寸從內而外分為3 類:固有尺寸、HTML 尺寸和CSS 尺寸

2. ##固有尺寸指的是替換內容原本的尺寸；例如，圖片、影片、input作為一個獨立檔案存在的時候，都是有著自己的寬度和高度的；#HTML 尺寸，「HTML 尺寸」只能透過HTML原生屬性改變，這些

   HTML
原生屬性包含

3. 的width和height屬性、<input> 的size屬性、<textarea></textarea>的cols 和

   rows
屬性

#CSS 尺寸

width和height

max-width/min-width

max-height/min-height設定的尺寸，對應盒子尺寸中的content box

#尺寸計算優先級: CSS 尺寸> HTML 尺寸> 固有尺寸 二、content屬性

注意，content屬性不只能用於::before/::after中，還能用於元素中，不過有一定相容性。 在Chrome 瀏覽器下，所有的元素都支援content 屬性，而其他瀏覽器僅在::before/::after 偽元素中才有支援案例1：基於偽元素的圖片內容產生技術HTML：

<img alt="美女沉思图" data-src="1.jpg">
<p><button>设置src属性显示图片</button></p>

var eleButton = document.querySelector('button'),
    eleImg = document.querySelector('img');if (eleButton && eleImg) {
    var initValueButton = eleButton.innerHTML;    // 图片地址
    var srcImage = eleImg.getAttribute('data-src');    // 移除该属性
    eleImg.removeAttribute('data-src');    // 按钮点击事件
    eleButton.addEventListener('click', function() {
        if (this.innerHTML == initValueButton) {
            this.innerHTML = '移除src属性';            // 图片显示
            eleImg.setAttribute('src', srcImage);        } else {
            this.innerHTML = initValueButton;            // src属性移除
            eleImg.removeAttribute('src');        }
    });}

img {
    display: inline-block;    width: 256px; height: 192px;    /* 隐藏Firefox alt文字 */
    color: transparent;    position: relative;    overflow: hidden;}img:not([src]) {
    /* 隐藏Chrome alt文字以及银色边框 */
    visibility: hidden;}img::before {
    /* 淡蓝色占位背景 */
    content: "";    position: absolute; left: 0;    width: 100%; height: 100%;    background-color: #f0f3f9;    visibility: visible;}img::after {
    /* 黑色alt信息条 */
    content: attr(alt);    position: absolute;    left: 0; bottom: 0;    width: 100%;    line-height: 30px;    background-color: rgba(0,0,0,.5);    color: white;    font-size: 14px;    transform: translateY(100%);    /* 来点过渡动画效果 */
    transition: transform .2s;    visibility: visible;}img:hover::after {
    transform: translateY(0);}

：圖片沒有src時，

和

可以生效；給圖片加上一個

位址時，圖片從普通元素變成替換元素，原本都還支援的
1. ::before

   和::after此時全部無效

案例2：content 引入圖片
2. r​​rreee

   案例3：hover 實作圖片替換

   img { content: url(1.jpg); }

   案例4：優雅實作h1的SEO

   <img  alt="CSS中盒模型中四個屬性的介紹（附程式碼）" >
   
   img:hover {
   content: url(laugh-tear.png);
   }

案例5：載入中動畫

<h1>《CSS 世界》</h1>
h1 {
    width: 180px;
    height: 36px;
    background: url(logo.png); /* 隐藏文字 */
    text-indent: -999px;
}

案例6：計數器(了解)

正在加载中<dot>...</dot>

dot {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

<div class="reset">
    <div class="counter">我是王小二        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div></div>

三、padding屬性

1. #很多很多的前端同事有這麼一個錯誤的認知:內聯元素的padding 只會影響水平方向，不會影響垂直方向。這種認知是不準確的，內聯元素的 padding 在垂直方向上同樣會影響佈局，影響視覺表現。只是因為內聯元素沒有可視寬度和可視高度的說法(clientHeight 和 clientWidth 永遠是 0)，垂直方向的行為表現完全受 line-height 和 vertical-align 的影響，視覺上並沒有改變和上一行下一行內容的間距，因此，給我們的感覺就會是垂直 padding 沒有起作用。

案例1：增大點擊區域

2. CSS：
   .reset { 
     padding-left: 20px; 
     counter-reset: wangxiaoer;}.counter:before { 
     content: counters(wangxiaoer, '-') '. '; 
     counter-increment: wangxiaoer;}

   案例2：任意高度的分隔符號

   a { padding: .25em 0; }

案例3：等比例盒子

用於實現自適應佈局，如網頁banner等比例大小圖片

案例4：圖形繪製

<a>登录</a><a>注册</a>

a + a:before {
    content: "";
    font-size: 0;
    padding: 10px 3px 1px;
    margin-left: 6px;
    border-left: 1px solid gray;
}

四、margin屬性margin特點：

#與padding不同，margin可以為負值；

與padding相同，margin的百分比也是相對於其父元素的width

4.1 margin負值應用

只有元素是「充分利用可用空間」狀態的時候，margin 才可以改變元素的可視尺寸

/* 矩形 */
div { padding: 50%; }
/* 正方形 */
div { padding: 25% 50%; }

/* 菜单 */
.icon-menu {
    display: inline-block;
    width: 140px; height: 10px;
    padding: 35px 0;
    /* 默认border-color:currentColor; */
    border-top: 10px solid;
    border-bottom: 10px solid;
    /* 核心 */
    background-color: currentColor;
    background-clip: content-box;
}

/* 无法改变尺寸 */
.father {
    width: 300px;
    margin: 0 -20px;
}

/* .son 尺寸变化 */
<div>
    <div></div>
</div>

.father { width: 300px; }
.son { margin: 0 -20px; }

.column-box {
    overflow: hidden;
}
.column-left,
.column-right {
    margin-bottom: -9999px;
    padding-bottom: 9999px;
}

.father { overflow: hidden; }
.son { margin: 1em 0; }

<div>
    <div></div>
</div>

此时.father 所在的这个父级<p></p>元素高度仅仅是 1em，因为.son 这个空

元 素的 margin-top 和 margin-bottom 合并在一起了

如何阻止margin发生合并？

对于 margin-top 合并，可以进行如下操作(满足一个条件即可):

• 父元素设置为块状格式化上下文元素;

• 父元素设置 border-top 值;

• 父元素设置 padding-top 值;

• 父元素和第一个子元素之间添加内联元素进行分隔。

对于 margin-bottom 合并，可以进行如下操作(满足一个条件即可):

• 父元素设置为块状格式化上下文元素;

• 父元素设置 border-bottom 值;

• 父元素设置 padding-bottom 值;

• 父元素和最后一个子元素之间添加内联元素进行分隔;

• 父元素设置 height、min-height 或 max-height。

margin 合并的计算规则：

“正正取大值”“正负值相加”“负负最负值”

4.3 margin:auto深入

margin:auto 的填充规则如下
(1)如果一侧定值，一侧 auto，则 auto 为剩余空间大小。
(2)如果两侧均是 auto，则平分剩余空间。

一侧auto应用

<div>
    <div></div>
</div>

.father {
    width: 300px;
}
.son {
    width: 200px;
    margin-right: 80px;
    margin-left: auto;
}

两侧auto，水平垂直居中

.father {
    width: 300px; height: 150px;
    background-color: #f0f3f9;
    position:relative;
}
.son {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    background-color: #cd0000;
    margin: auto;
}

注意：

display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素， 垂直 margin 有效，并且没有 margin 合并的问题，所以图片永远不会发生 margin 合并。

五、border属性

几个特点：

1. border属性值不支持百分比

2. border-style 默认值为none

3. border-color 默认值为currentColor

应用1：图片上传hover变色

.add {
    color: #ccc;
    border: 2px dashed;
}
.add:before {
    border-top: 10px solid;
}
.add:after {
    border-left: 10px solid;
}
/* hover变色 */
.add:hover {
    color: #06C;
}

应用2：优雅增加点击区域

/* box-sizing非border-box时 */
.icon-clear {
    width: 16px;
    height: 16px;
    border: 11px solid transparent;
}

应用3：三角形绘制

div {
    width: 0;
    border: 10px solid;
    border-color: #f30 transparent transparent;
}

border能构成三角形和梯形的原理如下：

通过改变width/height以及border-width在不同方位的尺寸，可以改变三角形的倾角方位和尺寸

应用4：border等高布局

.box {
    border-left: 150px solid #333;
    background-color: #f0f3f9;
}
.box > nav {
    width: 150px;
    margin-left: -150px;
    float: left;
}
.box > section {
    overflow: hidden;
}

border等高布局的局限性：

1. 由于 border 不支持百分比宽度，因此，适合至少一栏是定宽的布局

2. 等高布局的栏目有限制。基本上，border 等 高布局只能满足 2~3 栏的情况，除非正好是等比例的，那还可以使用 border-style:double 实现最多 7 栏布局

相关文章推荐：

CSS中流体布局、元素以及尺寸的介绍

css box-sizing属性（盒子模型）的用法介绍