前端進(jìn)階：Css必知的幾個(gè)底層知識和技巧

者：徐小夕來源：趣談前端

學(xué)習(xí)方法推薦

問題學(xué)習(xí)法：帶著問題去學(xué)習(xí)，有利于集中注意力，目的明確，這既是有意學(xué)習(xí)的要求，也是發(fā)現(xiàn)學(xué)習(xí)的必要條件。心理學(xué)家把注意分為無意注意與有意注意兩種。有意注意要求預(yù)先有自覺的目的，必要時(shí)需經(jīng)過意志努力，主動(dòng)地對一定的事物發(fā)生注意。它表明人的心理活動(dòng)的主體性和積極性。問題學(xué)習(xí)法就是強(qiáng)調(diào)有意注意有關(guān)解決問題的信息，使學(xué)習(xí)有了明確的指向性，從而提高學(xué)習(xí)效率。

在介紹完問題學(xué)習(xí)法之后，進(jìn)入我們今天的主題，接下來我會介紹css的一些底層的知識和比較詭異的現(xiàn)象，借此來讓大家對css有更深入的理解。

一.css尺寸

1.首選最小寬度–實(shí)現(xiàn)復(fù)雜圖形效果

在css中，圖片和文字的權(quán)重遠(yuǎn)大于布局，因此當(dāng)width:0時(shí)表現(xiàn)出來的寬度就是“首選最小寬度”。中文的最小寬度為每個(gè)漢字的寬度，西方文字取決于連續(xù)的英文字符單元。

因此，我們可以根據(jù)這個(gè)特性，去實(shí)現(xiàn)一些復(fù)雜的圖形，如下：

當(dāng)鼠標(biāo)經(jīng)過時(shí)，變成了下面的樣子：

代碼如下：

.minW{
display: inline-block;
width: 0
}

.minW::before {
content: "love 你 love";
color: transparent;
outline: 2px solid #cd0000;
}

.minW:hover::before{
content: "你 love 我";
color: transparent;
outline: 2px solid #cd0000;
}

我們會發(fā)現(xiàn)，當(dāng)容器寬度設(shè)置為0后，由于首選寬度的影響，出現(xiàn)了基于文字空間的形狀。

2.子元素寬度設(shè)為100%時(shí)的奇怪現(xiàn)象原理探究

父元素的寬度 = 圖片寬度 + 文字內(nèi)容寬度
瀏覽器渲染原理：先下載文檔內(nèi)容，加載頭部樣式資源，然后按從上到下、自外而內(nèi)的順序渲染dom內(nèi)容。本例的現(xiàn)象產(chǎn)生的原因就是：當(dāng)渲染到父元素時(shí)，子元素的width:100%并沒有渲染，寬度就是圖片加文字內(nèi)容的寬度;等渲染到文字這個(gè)子元素的時(shí)候，父元素的寬度已經(jīng)固定，此時(shí)的width:100%就是以固定好的父元素的寬度，寬度不夠只能溢出。

.box{
display: inline-block;
white-space: nowrap;
}
.text{
display: inline-block;
width: 100%;
}

理論上父元素寬度應(yīng)該是子元素寬度之和，但是卻出現(xiàn)了上圖的現(xiàn)象，原因歸根就在于瀏覽器渲染的順序：自外而內(nèi)，這點(diǎn)十分重要。

3.如何讓元素支持height:100%效果

知識點(diǎn)：絕對定位的寬高百分比是基于padding-box的，而非絕對定位的寬高百分比是基于content-box

方法如下：

* 1.設(shè)置顯示的高度值
*2.使用絕對定位

4.任意高度元素的展開收起動(dòng)畫(max-height/min-height)

1.min-height/min-width的初始尺寸為auto, max-height/max-width的初始尺寸為none
2.min-height/min-width的優(yōu)先級高于max-width/max-height

要想實(shí)現(xiàn)如上圖所示的展開收起動(dòng)畫，就可以使用max-height/min-height：

.nav > .sub-nav{
max-height: 0;
overflow: hidden;
transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
max-height: 400px;
}

二.內(nèi)聯(lián)元素深入探究

常見的內(nèi)聯(lián)元素有：display設(shè)置為inline,inline-block,inline-table的元素內(nèi)聯(lián)盒模型:

內(nèi)容區(qū)域：可以理解為文本選中的背景色區(qū)域(重點(diǎn))
內(nèi)聯(lián)盒子：內(nèi)聯(lián)標(biāo)簽或者純文本
行框盒子：由內(nèi)聯(lián)盒子組成的一行，每一行就是一個(gè)行框盒子
包含盒子：由行框盒子組成的盒子幽靈空白節(jié)點(diǎn)：在HTML5文檔聲明中，內(nèi)聯(lián)元素的解析和渲染表現(xiàn)就像每個(gè)行框盒子的前面有一個(gè)空白節(jié)點(diǎn)一樣。如下案例所示：

三.深入理解content

1.在web中，很多替換元素在沒有明確尺寸設(shè)定的情況下，其默認(rèn)的尺寸(不包含邊框)為300*150，如video,iframe,canvas等，少數(shù)為0，如img,而表單元素的替換尺寸和瀏覽器自身有關(guān)。

2.對于img元素，如果有css尺寸，則最終尺寸由css尺寸決定(css尺寸 > html尺寸 > 固有尺寸)

3.當(dāng)圖片的src屬性缺省時(shí)，圖片不會有任何請求，是最高效的實(shí)現(xiàn)方式，如下展示的是使用此方式的圖片占位代碼(對于firefox瀏覽器，src缺省的img是一個(gè)普通的內(nèi)聯(lián)元素，寬高設(shè)置無效)：

img { visibility: hidden; }
img[src] { visibility: visible; }

content內(nèi)容生成技術(shù)

1.實(shí)現(xiàn)換行

::after{
content: '\A';
white-space: pre;
}

2.實(shí)現(xiàn)正在加載動(dòng)畫

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

3.屬性值內(nèi)容生成

<div class="icon" data-tip="江小白"></div>
/* 可以使用原生屬性和自定義屬性 */
.icon::after{
content: attr(data-tip);
}

4.計(jì)數(shù)器屬性---純css實(shí)現(xiàn)計(jì)數(shù)器效果

.box1{
counter-reset: count1;
}
.xigua:checked::before{
content: counter(count1);
counter-increment: count1;
position: absolute;
color: transparent;
}
.box1::after{
content: counter(count1);
}
</style>
<div class="counter">
<div class="box1">
<div>西瓜<input class="xigua" type="checkbox" /></div>
<div>香蕉<input class="xigua" type="checkbox" /></div>
<div>蘿卜<input class="xigua" type="checkbox" /></div>
</div>
</div>

四.padding深入研究

1.對于盒模型設(shè)置為box-sizing: border-box的元素，如果padding足夠大，那么width將失效:

width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;

2.對于內(nèi)聯(lián)元素，padding對視覺層和布局層都會有影響，如果父元素設(shè)置overflow:auto,則內(nèi)聯(lián)子元素的垂直padding可能會使父元素出現(xiàn)滾動(dòng)條，否則如果父元素不設(shè)置設(shè)置overflow，只會在垂直方向上發(fā)生重疊，不會影響布局:

/* 父元素設(shè)置 */
.pd-2-1{
overflow: auto;
}
.pd-2-1 > span{
padding-top: 1em;
padding-bottom: 1em;
}

3.padding的實(shí)際應(yīng)用(具體實(shí)現(xiàn)可自行思考)

1.增加鏈接或按鈕的點(diǎn)擊區(qū)域的大小2.利用內(nèi)聯(lián)元素的padding實(shí)現(xiàn)高度可控的分割線3.用內(nèi)聯(lián)元素實(shí)現(xiàn)瞄點(diǎn)定位距離

4.利用padding百分比值實(shí)現(xiàn)等比例縮放圖片效果:

.pd-3{
padding: 10% 50%;
position: relative;
}
.pd-3 img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

** 注：內(nèi)聯(lián)元素的垂直padding會讓幽靈空白節(jié)點(diǎn)顯現(xiàn),此時(shí)可考慮設(shè)置font-size:0

5.padding與圖形繪制

/* 菜單 */
.icon-menu{
display: inline-block;
width: 120px;
height: 10px;
padding: 35px 0;
border-bottom: 10px solid;
border-top: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
/* 雙層圓點(diǎn) */
.icon-dot{
display: inline-block;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 50%;
border: 10px solid;
background-clip: content-box;
background-color: currentColor;
}

五.margin深入研究

1.使用:nth-type-of(3n)去除子元素尾部margin

.mg-item:nth-of-type(3n){
margin-right: 0;
}

注：如果容器可以滾動(dòng)，在IE和firefox下會忽略padding-bottom的值，chrome則不會，此時(shí)可以通過margin-bottom實(shí)現(xiàn)滾動(dòng)容器的底部留白

其本質(zhì)區(qū)別在于：chrome是子元素超過父元素content box尺寸觸發(fā)滾動(dòng)條顯示，而IE和Firefox瀏覽器是超過padding box尺寸時(shí)觸發(fā)滾動(dòng)條顯示

2.margin合并條件

塊級元素，但不包含浮動(dòng)和絕對定位元素
在默認(rèn)文檔流下只出現(xiàn)在垂直方向

margin合并的三種場景

相鄰兄弟元素
父級和第一個(gè)/最后一個(gè)子元素

* 解決方案：父級設(shè)置為塊級格式化上下文元素
父元素設(shè)置border-top/bottom值
父元素設(shè)置padding-top/bottom值
父元素設(shè)置高度

空塊級元素margin合并

3.margin合并的計(jì)算規(guī)則

“正正取大值”，”正負(fù)值相加”，”負(fù)負(fù)最負(fù)值”

4.深入理解margin:auto

如果一側(cè)定值，一側(cè)auto，則auto為剩余空間大小
如果兩側(cè)均是auto，則平分剩余空間
觸發(fā)margin:auto計(jì)算的前提：width或height為定值時(shí)，元素是具有自動(dòng)填充特性的

/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;

4.絕對定位元素利用margin:auto實(shí)現(xiàn)水平垂直居中(兼容到ie8+)

.father{
position: relative;
}
.child-2{
position: absolute;
left: 0; bottom: 0; right: 0; top: 0;
width: 40px;
height: 20px;
margin: auto;
}

*** margin無效情形分析:

display計(jì)算值為inline的非替換元素的垂直margin是無效的
對于內(nèi)聯(lián)替換元素，垂直margin有效，并且沒有margin合并問題，所以永遠(yuǎn)不會發(fā)生margin合并
內(nèi)聯(lián)特性導(dǎo)致margin失效：一個(gè)容器里面有一個(gè)圖片，圖片設(shè)置margin-top,隨著margin-top負(fù)值越來越大，達(dá)到某一具體負(fù)值時(shí)，圖片將不再往上偏移

六.字母x與css中的基線

基線字母x的下邊緣
x-height 指字母x的高度
ex：ex指小寫字母x的高度，是相對單位
vertical-align:middle 指的是基線往上1/2 x-height高度

內(nèi)聯(lián)元素設(shè)置對齊方式時(shí)，是基于最前面的內(nèi)聯(lián)元素的基線，然后根據(jù)自己的vertical-align來調(diào)整對齊的

七.BFC–塊級格式化上下文

1.表現(xiàn): 元素內(nèi)部的布局變化不會影響外部的元素.所以不會出現(xiàn)margin合并,可用來清除浮動(dòng)的影響.

2.觸發(fā)BFC的條件:

根元素
float的值不為none
overflow的值為auto,scroll,hidden
display的值為table-cell,inline-block
position的值不為static或者relative

3.若元素具備BFC特性,則無需clear:both去清除浮動(dòng)

4.display:table-cell的特性: 寬度設(shè)置的再大,也不會超過表格容器的寬度

5.overflow裁切界限:border box: 一個(gè)設(shè)置了overflow: hidden的元素同時(shí)設(shè)置了padding和border,則子元素超出容器寬高設(shè)置時(shí),裁切的邊界是border box內(nèi)邊緣而不是padding box內(nèi)邊緣

6.在PC端,默認(rèn)滾動(dòng)條均來自,PC端滾動(dòng)高度可以用document.documentElement.scrollTop獲取,在移動(dòng)端用document.body.scrollTop獲取

7.PC端滾動(dòng)條寬度約為17px

8.讓頁面滾動(dòng)條不出現(xiàn)晃動(dòng)的方法:

html{
/* ie8 */
overflow-y: scroll;
}
:root{
overflow-y: auto;
overflow-x: hidden;
}
:root body{
position: absolute;
}
body{
width: 100vw;
overflow: hidden;
}

9.多行文本溢出顯示省略號的css方法:

.ell-rows-2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

八.relative難點(diǎn)解析

1.relative的定位位移是相對于自身的，如果left/top/right/bottom的值為百分比單位，則計(jì)算尺寸是基于父元素

2.如果left/right 或top/bottom這些對立屬性同時(shí)出現(xiàn)時(shí)，只有一個(gè)方向的屬性會生效，優(yōu)先級與文檔流的順序有關(guān)，默認(rèn)的文檔流是自上而下，從左到右的，所以top優(yōu)先級高于bottom,left優(yōu)先級高于right

3.relative的最小化原則

盡量不使用relative,可以采用無依賴絕對定位解決某些問題
如果一定要使用relative,則relative務(wù)必最小化(最小包含區(qū)域) –為了避免層級覆蓋等問題

4.層疊上下文

定位元素的默認(rèn)z-index:auto;此時(shí)和普通元素一樣，一旦z-index設(shè)置為任意數(shù)值，就創(chuàng)建了一個(gè)層疊上下文，順序?yàn)椋?/li>
層疊上下文 < 負(fù)z-index < block < float < inline < z-index:auto < 正z-index
css3新屬性的層疊上下文：

1.flex
2.opacity不為1
3.transform不為none
4.mix-blend-mode不為normal
5.filter不為none
6.isolation是isolate
7.will-change為上面2-6的任意一個(gè)
8.元素-webkit-overflow-scrolling設(shè)為touch

z-index負(fù)值在block下面，實(shí)際應(yīng)用：

1. 可訪問性隱藏

2. ie8下的多背景隱藏

好啦，關(guān)于css的知識還有很多，有些問題也很難通過表象去解決，這個(gè)時(shí)候，讓你脫穎而出的就是你對代碼底層更深入的理解了。

多特效代碼請?zhí)砑親TML5前端交流群581549454

需要文檔版本源碼，可以加我的HTML5前端交流群111645711

JS源碼：

(function() {

"use strict";

// Shortcut to get elements

var el = function(element) {

if (element.charAt(0) === "#") { // If passed an ID...

return document.querySelector(element); // ... returns single element

}

return document.querySelectorAll(element); // Otherwise, returns a nodelist

};

// Variables

var viewer = el("#viewer"), // Calculator screen where result is displayed

equals = el("#equals"), // Equal button

nums = el(".num"), // List of numbers

ops = el(".ops"), // List of operators

theNum = "", // Current number

oldNum = "", // First number

resultNum, // Result

operator; // Batman

// When: Number is clicked. Get the current number selected

var setNum = function() {

if (resultNum) { // If a result was displayed, reset number

theNum = this.getAttribute("data-num");

resultNum = "";

} else { // Otherwise, add digit to previous number (this is a string!)

theNum += this.getAttribute("data-num");

}

viewer.innerHTML = theNum; // Display current number

};

// When: Operator is clicked. Pass number to oldNum and save operator

var moveNum = function() {

oldNum = theNum;

theNum = "";

operator = this.getAttribute("data-ops");

equals.setAttribute("data-result", ""); // Reset result in attr

};

// When: Equals is clicked. Calculate result

var displayNum = function() {

// Convert string input to numbers

oldNum = parseFloat(oldNum);

theNum = parseFloat(theNum);

// Perform operation

switch (operator) {

case "加上":

resultNum = oldNum + theNum;

break;

case "減去":

resultNum = oldNum - theNum;

break;

case "乘以":

resultNum = oldNum * theNum;

break;

case "除以":

resultNum = oldNum / theNum;

break;

// If equal is pressed without an operator, keep number and continue

default:

resultNum = theNum;

}

// If NaN or Infinity returned

if (!isFinite(resultNum)) {

if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators

resultNum = "You broke it!";

} else { // If result is infinity, set off by dividing by zero

resultNum = "Look at what you've done";

el('#calculator').classList.add("broken"); // Break calculator

el('#reset').classList.add("show"); // And show reset button

}

// Display result, finally!

viewer.innerHTML = resultNum;

equals.setAttribute("data-result", resultNum);

// Now reset oldNum & keep result

oldNum = 0;

theNum = resultNum;

};

// When: Clear button is pressed. Clear everything

var clearAll = function() {

oldNum = "";

theNum = "";

viewer.innerHTML = "0";

equals.setAttribute("data-result", resultNum);

};

/* The click events */

// Add click event to numbers

for (var i = 0, l = nums.length; i < l; i++) {

nums[i].onclick = setNum;

}

// Add click event to operators

for (var i = 0, l = ops.length; i < l; i++) {

ops[i].onclick = moveNum;

}

// Add click event to equal sign

equals.onclick = displayNum;

// Add click event to clear button

el("#clear").onclick = clearAll;

// Add click event to reset button

el("#reset").onclick = function() {

window.location = window.location;

};

}());

網(wǎng)站樣式代碼

<!DOCTYPE html>

<html>

<head>

<title>扁平風(fēng)格加減乘除網(wǎng)頁計(jì)算器js代碼</title>

</head>

<h1>js加減乘除計(jì)算器代碼</h1>

</div>

<button id="reset">Reset Universe?</button>

<p>適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下瀏覽器。</p>

</div>

</body>

</html>

十種編程語言開發(fā)計(jì)算器應(yīng)用

C語言
C#（windows桌面軟件）
Swift （ios應(yīng)用）
python
Dart（Flutter應(yīng)用，跨平臺，適用安卓、ios、mac、windows、web）
Java（安卓App）
Kotlin （安卓App）
Js+Html+Vue（H5應(yīng)用）
微信小程序
抖音小程序

image

h5版

image

開發(fā)工具

IntelliJ IDEA

image

工程截圖

image

關(guān)鍵代碼文件

index.html 界面及計(jì)算邏輯

完整代碼比較長，博客正文就不貼了，詳見下方鏈接。

完整源代碼

https://gitee.com/hspbc/calculators

image

系列文章

用十種編程語言開發(fā)計(jì)算器應(yīng)用-第一篇-C語言

用十種編程語言開發(fā)計(jì)算器應(yīng)用-第二篇-Java

用十種編程語言開發(fā)計(jì)算器應(yīng)用-第三篇-Python

用十種編程語言開發(fā)計(jì)算器應(yīng)用-第四篇-Kotlin

用十種編程語言開發(fā)計(jì)算器應(yīng)用-第五篇-Flutter

用十種編程語言開發(fā)計(jì)算器應(yīng)用-第六篇-iOS

關(guān)于我

廈門大學(xué)計(jì)算機(jī)專業(yè)|華為八年高級工程師
十年軟件開發(fā)經(jīng)驗(yàn)，5年編程培訓(xùn)教學(xué)經(jīng)驗(yàn)
目前從事編程教學(xué)，軟件開發(fā)指導(dǎo)，軟件類畢業(yè)設(shè)計(jì)指導(dǎo)。
所有編程資料及開源項(xiàng)目見https://cxyxy.blog.csdn.net/article/details/120405881

在線咨詢

上一篇：html 5教程之默認(rèn)行為和拖拽思路
下一篇：網(wǎng)頁轉(zhuǎn)pdf，這個(gè)工具真好用

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

前端進(jìn)階：Css必知的幾個(gè)底層知識和技巧

需要文檔版本源碼，可以加我的HTML5前端交流群111645711

JS源碼：

網(wǎng)站樣式代碼

十種編程語言開發(fā)計(jì)算器應(yīng)用

h5版

開發(fā)工具

工程截圖

關(guān)鍵代碼文件

完整源代碼

系列文章

關(guān)于我

您的項(xiàng)目需求