《CSS世界》筆記二：盒模型四你們族

時間  2019-11-08
標籤 CSS世界 筆記 模型 你們 欄目 快樂工作 简体版
原文   原文鏈接

上一篇：《CSS世界》筆記一：流/元素/尺寸
下一篇：《CSS世界》筆記三：內聯元素與對齊php

寫在前面

在讀《CSS世界》第四章以前，粗淺的認爲盒模型無非是margin/border/padding/content而已，再多無非在不一樣box-sizing下的表現不一樣而已；可是書中記錄的替換元素與非替換元素、content的一些用法、margin合併等等，讓我對「盒模型四你們族」有了全新的認識css

1、替換元素與非替換元素

根據「外在盒子」是內聯仍是塊級咱們能夠把元素分爲內聯元素和塊級元素，而根據是否具備可替換內容，咱們也能夠把元素分爲替換元素和非替換元素

1.1 替換元素定義

經過修改某個屬性值呈現的內容就能夠被替換的元素就稱爲「替換元素」，常見的替換元素有：<img>、<object>、<video>、<iframe>或者表單元素<textarea>和<input>html

1.2 替換元素的特色

  1. 內容的外觀不受頁面上的 CSS 的影響；如單複選框的內間距、背景色等樣式
  2. 有本身的尺寸；如<video>、<img>都有本身的尺寸
  3. 在不少 CSS 屬性上有本身的一套表現規則；vertical-align中，替換元素默認爲baseline（字母x下邊緣），替換元素的基線就被硬生生定義成了元素的下邊緣

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

替換元素的尺寸從內而外分爲 3 類：固有尺寸、HTML 尺寸和 CSS 尺寸前端

  1. 固有尺寸指的是替換內容本來的尺寸；例如，圖片、視頻、input做爲一個獨立文件存在的時 候，都是有着本身的寬度和高度的；
  2. HTML 尺寸，「HTML 尺寸」只能經過HTML原生屬性改變，這些HTML原生屬性包括<img>的width和height屬性、<input> 的size屬性、<textarea>的cols 和 rows 屬性
  3. CSS 尺寸特指能夠經過 CSS 的width和height或者max-width/min-width和max-height/min-height設置的尺寸，對應盒尺寸中的content box

圖片描述

尺寸計算優先級: CSS 尺寸 > HTML 尺寸 > 固有尺寸segmentfault

1.4 替換元素與普通元素的轉換（理論上）

猜測1：html中src屬性，img/video去掉src屬性後也就成了普通元素
猜測2：css中的content屬性，普通元素經過content屬性也能夠展現元素中本來沒有的文字或圖片瀏覽器

2、content屬性

注意，content屬性不只能用於::before/::after中，還能用於元素中，不過有必定兼容性。ide

在 Chrome 瀏覽器下，全部的元素都支持 content 屬性，而其餘瀏覽器僅在::before/::after 僞元素 中才有支持

案例1：基於僞元素的圖片內容生成技術佈局

圖片描述

原理：img標籤有src時不支持僞類，沒有src時支持僞類；圖片沒有src時，::before和::after能夠生效；給圖片添加一個src地址時，圖片從普通元素變成替換元素，本來都還支持的::before和::after此時所有無效動畫

案例2：content 引入圖片url

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

案例3：hover 實現圖片替換

<img src="laugh.png">

img:hover {
    content: url(laugh-tear.png);
}

案例4：優雅實現h1的SEO

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

案例5：加載中動畫

正在加載中<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); }
}

原理：content中有三行內容，分別是‘...’，‘..’，‘.’；動畫位移dot便可實現正在加載的效果

案例6：計數器(瞭解)

3、padding屬性

  1. padding 對內聯元素水平和垂直方向上均有影響
  2. padding 寬高百分比都是基於父元素的寬度計算
不少不少的前端同事有這麼一個錯誤的認識: 內聯元素的 padding 只會影響水平方向，不會影響垂直方向。這種認知是不許確的，內聯元素的 padding 在垂直方向一樣會影響佈局，影響視覺表現。 只是由於內聯元素沒有可視寬度和可視高度的說法(clientHeight 和 clientWidth 永遠是 0)，垂直方向的行爲表現徹底受 line-height 和 vertical-align 的影響，視覺上並無改變和上一行下一行內容的間距，所以，給咱們的感受就會是垂直 padding 沒有起做用。

案例1：增大點擊區域

a { padding: .25em 0; }

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

<a href="">登陸</a><a href="">註冊</a>

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

案例3：等比例盒子

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

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

案例4：圖形繪製

/* 菜單 */
.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;
}

4、margin屬性

margin特色：

  1. 與padding不一樣，margin能夠爲負值；
  2. 與padding相同，margin的百分比也是相對於其父元素的width

4.1 margin負值應用

（1）增大盒子尺寸

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

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

/* .son 尺寸變化 */
<div class="father">
    <div class="son"></div>
</div>

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

（2）經典無兼容兩欄佈局

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

佈局原理：

默認狀況下，垂直方向塊級元素上下距離是 0，一旦 margin-bottom:-9999px 就意味着後面全部元素和上面元 素的空間距離變成了-9999px，也就是後面元素都往上移動了 9999px。此時，經過神來一筆 padding-bottom:9999px 增長元素高度，這正負一抵消，對佈局層並沒有影響，但卻帶來了咱們 須要的東西— 視覺層多了 9999px 高度的可以使用的背景色

4.2 margin合併

塊級元素的上外邊距(margin-top)與下外邊距(margin-bottom)有時會合併爲單個外邊距，這樣的現象稱爲「margin 合併」。
兩個條件：塊級元素和僅發生在垂直方向上

margin合併的3種場景

（1）相鄰兄弟元素 margin 合併。這是 margin 合併中最多見、最基本的

<p>第一行</p>
<p>第二行</p>

p { margin: 1em 0; }

（2）父級和第一個/最後一個子元素

<div class="father">
    <div class="son" style="margin-top:80px;"></div>
</div>

<div class="father" style="margin-top:80px;">
    <div class="son"></div>
</div>

<!-- 這種情形也只表現爲上邊距80px，margin發生了合併 -->
<div class="father" style="margin-top:80px;">
    <div class="son" style="margin-top:80px;"></div>
</div>

（3）空塊級元素的 margin 合併

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

<div class="father">
    <div class="son"></div>
</div>

此時.father所在的這個父級<div>元素高度僅僅是 1em，由於.son這個空<div>元素的 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 class="father">
    <div class="son"></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 合併。

5、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世界》筆記三：內聯元素與對齊

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程