這篇文章帶給大家的內容是關於CSS中盒模型中四個屬性的介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。 一、替換元素與非替換元素 #根據「外在盒子」是內聯還是區塊級我們可以把元素分成內嵌元素和區塊級元素，而根據是否具有可替換內容，我們也可以把元素分成替換元素和非替換元素 1.1 替換元素定義 透過修改某個屬性值呈現的內容就可以被替換的元素就稱為“替換元素”，常見的替換元素有：、、 、或表單元素<textarea>和<input></textarea> 1.2 替換元素的特徵 ##1、內容的外觀不受頁面上的CSS 的影響；如單複選框的內間距、背景色等樣式2、有自己的尺寸；如、都有自己的尺寸#3、在許多CSS 屬性上有自己的一套表現規則；vertical-align中，替換元素預設為baseline（字母x下邊緣），替換元素的基線就被硬生生定義成了元素的下緣 1.3 替換元素的尺寸計算規則 替換元素的尺寸從內而外分為3 類:固有尺寸、HTML 尺寸和CSS 尺寸 ##固有尺寸指的是替換內容原本的尺寸；例如，圖片、影片、input作為一個獨立檔案存在的時候，都是有著自己的寬度和高度的；#HTML 尺寸，「HTML 尺寸」只能透過HTML原生屬性改變，這些HTML原生屬性包含 的width和height屬性、 的size屬性、的cols 和rows 屬性 #CSS 尺寸特指可以透過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： 设置src属性显示图片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'); } });}CSS：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時，::before和::after可以生效；給圖片加上一個src位址時，圖片從普通元素變成替換元素，原本都還支援的::before和::after此時全部無效 案例2：content 引入圖片rrreee 案例3：hover 實作圖片替換img { content: url(1.jpg); }案例4：優雅實作h1的SEO img:hover { content: url(laugh-tear.png); } 案例5：載入中動畫 《CSS 世界》 h1 { width: 180px; height: 36px; background: url(logo.png); /* 隐藏文字 */ text-indent: -999px; } 案例6：計數器(了解) 正在加载中... 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); } } 我是王小二 我是王小二的大儿子 我是王小二的二儿子 我是王小二的二儿子的大孙子 我是王小二的二儿子的二孙子 我是王小二的二儿子的小孙子 我是王小二的三儿子 我是王小三 我是王小四 我是王小四的大儿子 三、padding屬性 #padding 對內聯元素水平和垂直方向上都有影響 #padding 寬高百分比都是基於父元素的寬度計算 #很多很多的前端同事有這麼一個錯誤的認知:內聯元素的padding 只會影響水平方向，不會影響垂直方向。這種認知是不準確的，內聯元素的 padding 在垂直方向上同樣會影響佈局，影響視覺表現。只是因為內聯元素沒有可視寬度和可視高度的說法(clientHeight 和 clientWidth 永遠是 0)，垂直方向的行為表現完全受 line-height 和 vertical-align 的影響，視覺上並沒有改變和上一行下一行內容的間距，因此，給我們的感覺就會是垂直 padding 沒有起作用。 案例1：增大點擊區域CSS： .reset { padding-left: 20px; counter-reset: wangxiaoer;}.counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer;}案例2：任意高度的分隔符號 a { padding: .25em 0; } 案例3：等比例盒子 用於實現自適應佈局，如網頁banner等比例大小圖片rrreee案例4：圖形繪製 登录注册 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負值應用（1）增大盒子尺寸只有元素是「充分利用可用空間」狀態的時候，margin 才可以改變元素的可視尺寸 /* 矩形 */ div { padding: 50%; } /* 正方形 */ div { padding: 25% 50%; }（2）經典無相容兩欄佈局 /* 菜单 */ .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; }佈局原理：預設情況下，垂直方向塊級元素上下距離是0，一旦margin-bottom:-9999px 就意味著後面所有元素和上面元 素的空間距離變成了-9999px，也就是後面元素都往上移動了 9999px。此時，透過神來一筆 padding-bottom:9999px 增加元素高度，這正負一抵消，對佈局層並無影響，但卻帶來了我們 需要的東西— 視覺層多了 9999px 高度的可使用的背景色。 ######4.2 margin合併#########區塊級元素的上外邊距(margin-top)與下外邊距(margin-bottom)有時會合併為單一外邊距，這樣的現象稱為“margin 合併”###。 ###兩個條件：區塊級元素和僅發生在垂直方向上#########margin合併的3種場景#########（1）相鄰兄弟元素margin 合併。這是margin 合併中最常見、最基本的###/* 无法改变尺寸 */ .father { width: 300px; margin: 0 -20px; } /* .son 尺寸变化 */ .father { width: 300px; } .son { margin: 0 -20px; }###（2）父級和第一個/最後一個子元素###.column-box { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; }###（3）空區塊級元素的margin 合併# ##.father { overflow: hidden; } .son { margin: 1em 0; } 此时.father 所在的这个父级元素高度仅仅是 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应用 .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属性 几个特点： border属性值不支持百分比 border-style 默认值为none 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等高布局的局限性： 由于 border 不支持百分比宽度，因此，适合至少一栏是定宽的布局 等高布局的栏目有限制。基本上，border 等 高布局只能满足 2~3 栏的情况，除非正好是等比例的，那还可以使用 border-style:double 实现最多 7 栏布局 相关文章推荐： CSS中流体布局、元素以及尺寸的介绍 css box-sizing属性（盒子模型）的用法介绍
