CSS3

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

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

兩個參數(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)兩個框不同，.border-box那個計算方式為　80（隨著內(nèi)邊距和邊框的增加而減少） + 10 * 2 （內(nèi)邊距兩邊）= 100 （不變），

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

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

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

若有雷同，可能我是從您那里學來的。

GPU云服務器云服務器 css3 css3氣泡 css3動畫 JS+CSS3

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

轉載請注明本文地址：http://m.hztianpu.com/yun/1352.html

CSS重塑計劃（一）：選擇符

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

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

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

HollisChuang 2019-08-30 14:10 評論0 收藏0
雜談：漸進增強與優(yōu)雅降級

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

hiyang 2019-08-29 16:12 評論0 收藏0
雜談：漸進增強與優(yōu)雅降級

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

王軍 2019-08-23 10:29 評論0 收藏0
雜談：漸進增強與優(yōu)雅降級

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

SimonMa 2019-08-02 11:03 評論0 收藏0