CSS3

RobinTang 發(fā)布于2019-04-23 11:55 / 3019人閱讀

摘要：說(shuō)白了，寬度就是包括內(nèi)邊距和邊框。而的計(jì)算方式為若有雷同，可能我是從您那里學(xué)來(lái)的。

兩個(gè)參數(shù)：

border-box和content-box

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizetitle>
    <style>
        .border-box{
            width: 100px;
            height: 100px;
            background-color: violet;
            box-sizing: border-box;
            padding: 10px;
        }
        .content-box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            box-sizing: content-box;
            padding: 10px;
        }
    style>
head>
<body>
<div class="border-box">div>
<div class="content-box">div>
body>
html>

在此不難發(fā)現(xiàn)兩個(gè)框不同，.border-box那個(gè)計(jì)算方式為　80（隨著內(nèi)邊距和邊框的增加而減少） + 10 * 2 （內(nèi)邊距兩邊）= 100 （不變），

無(wú)論內(nèi)邊距（10）和邊框（忘了加了）怎么變，它們相加的結(jié)果始終等于自己設(shè)置的寬度（100）。

說(shuō)白了，寬度就是包括內(nèi)邊距和邊框。

而　　.content-box的計(jì)算方式為? ?100 + 10 * 2 = 120?

若有雷同，可能我是從您那里學(xué)來(lái)的。

云服務(wù)器 GPU云服務(wù)器 css3 css3氣泡 css3動(dòng)畫(huà) JS+CSS3

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1352.html

相關(guān)文章

CSS重塑計(jì)劃（一）：選擇符

摘要：重塑計(jì)劃一選擇符元素選擇符通配選擇符，選擇所有元素對(duì)象。選擇符，以唯一標(biāo)識(shí)符屬性等于的對(duì)象作為選擇符。選擇具有屬性且屬性值為包含的字符串的元素。偽類(lèi)選擇符設(shè)置超鏈接在未被訪問(wèn)前的樣式。僅用于規(guī)則匹配不含有選擇符的元素。 CSS重塑計(jì)劃（一）：選擇符元素選擇符 *通配選擇符(Universal Selector)，選擇所有元素對(duì)象。E類(lèi)型選擇符(Type Selector)，以文檔語(yǔ)言...

lx1036 2019-08-29 12:23 評(píng)論0 收藏0
前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

摘要：一背景介紹漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)這兩個(gè)概念是在出現(xiàn)之后火起來(lái)的。二概念理解漸進(jìn)增強(qiáng)漸進(jìn)增強(qiáng)一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果交互追加功能達(dá)到更好的體驗(yàn)。一、背景介紹漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)這兩個(gè)概念是在 CSS3 出現(xiàn)之后火起來(lái)的。由于低級(jí)瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級(jí)瀏覽器中使用CSS3，而在低級(jí)瀏覽器...

HollisChuang 2019-08-30 14:10 評(píng)論0 收藏0
雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。作為一名前端開(kāi)發(fā)人員，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶(hù)體驗(yàn)，前端搬磚的我們不得不與...

hiyang 2019-08-29 16:12 評(píng)論0 收藏0
雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。作為一名前端開(kāi)發(fā)人員，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶(hù)體驗(yàn)，前端搬磚的我們不得不與...

王軍 2019-08-23 10:29 評(píng)論0 收藏0
雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

摘要：而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)。二者區(qū)別漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀點(diǎn)。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。作為一名前端開(kāi)發(fā)人員，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶(hù)體驗(yàn)，前端搬磚的我們不得不與...

SimonMa 2019-08-02 11:03 評(píng)論0 收藏0