這篇文章主要介紹“css3框模型有哪些屬性”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“css3框模型有哪些屬性”文章能幫助大家解決問題。
為景縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及景縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、景縣網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
css3框模型有5種屬性:1、width屬性,設(shè)置內(nèi)容的寬度;2、height屬性,設(shè)置內(nèi)容的高度;3、padding屬性,設(shè)置內(nèi)邊距;4、margin屬性,設(shè)置外邊距;5、border屬性,設(shè)置邊框。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
盒模型又叫框模型,是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。 盒子模型(Box Modle)可以用來對元素進(jìn)行布局,包括內(nèi)邊距,邊框,外邊距,和實(shí)際內(nèi)容這幾個(gè)部分。
盒子中的區(qū)域
一個(gè)盒子中主要的屬性就5個(gè):width、height、padding、border、margin。如下:
width和height:內(nèi)容的寬度、高度(不是盒子的寬度、高度)。
padding:內(nèi)邊距。
border:邊框。
margin:外邊距。
為了更好理解,如下生活中的舉例:
常見盒模型區(qū)域
盒模型的屬性中,根據(jù)不同屬性的效果,可以劃分區(qū)域:
(1)書寫元素內(nèi)容區(qū)域:width+height
(2)盒子可以實(shí)體化的區(qū)域:width+height+padding+border
(3)盒子實(shí)際占位的位置:width+height+padding+border+margin
學(xué)習(xí)過程中,學(xué)會(huì)查看瀏覽器控制臺(tái)中的盒模型圖:
一、寬度 width
寬度 width屬性 | 說明 |
---|---|
屬性名 | width |
作用 | 設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度 |
屬性值 | 屬性值說明 |
---|---|
auto(默認(rèn)值) | 瀏覽器可計(jì)算出實(shí)際的寬度 |
px像素值 | 定義的寬度 |
% | 定義參考父元素寬度 width 的百分比寬度 |
(1)如果一個(gè)元素不添加width 屬性,默認(rèn)屬性值為auto;不同的元素瀏覽器會(huì)根據(jù)其 特點(diǎn)自動(dòng)計(jì)算出實(shí)際寬度;
例如
元素等獨(dú)占一行的,其 width 屬性的值會(huì)自動(dòng)撐滿父元素的 width 區(qū)域;
如果是元素等不需要獨(dú)占一行的,其
width
屬性的值是內(nèi)部元素內(nèi)容自動(dòng)撐開的寬度。
(2)元素比較特殊,不需要設(shè)置
width
屬性,寬度會(huì)自動(dòng)適應(yīng)瀏覽器窗口的寬度。二、高度 height
高度 height屬性 說明 屬性名 height 作用 設(shè)置可以添加元素內(nèi)容的區(qū)域的高度
屬性值 屬性值說明 auto(默認(rèn)值) 瀏覽器可計(jì)算出實(shí)際的高度 px像素值 定義的高度 % 定義參考父元素高度 height 的百分比寬度 特殊應(yīng)用 如果一個(gè)元素不添加
height
屬性,默認(rèn)屬性值為auto
,瀏覽器會(huì)自動(dòng)計(jì)算出實(shí)際高度,也就是是內(nèi)部元素內(nèi)容自動(dòng)撐開的高度。元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度。三、內(nèi)邊距 padding
內(nèi)邊距 padding屬性 說明 屬性名 padding 作用 設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離 特點(diǎn) 可以去加載背景,不能書寫嵌套的內(nèi)容
內(nèi)邊距 padding 屬性值 說明 常用px為單位的數(shù)值 ①可以根據(jù)內(nèi)邊距的方向不同劃分為四個(gè)方向的單一屬性 padding-top 上內(nèi)邊距 padding-right 右內(nèi)邊距 padding-bottom 下內(nèi)邊距 padding-left 左內(nèi)邊距 padding四個(gè)方向單一屬性示例: p {padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}
內(nèi)邊距 padding 屬性值 說明 ②化簡書寫 將四個(gè)方向的單一屬性進(jìn)行合寫 可以有 1-4 個(gè)值,值之間用空格進(jìn)行分隔 padding 有多種值的書寫表示方法 根據(jù) padding的屬性值的個(gè)數(shù)不同,有四種表示法: 四值法 設(shè)置四個(gè)屬性值,分配方向上、右、下、左 三值法 設(shè)置三個(gè)值分配給上、左右、下 二值法 設(shè)置兩個(gè)值,分配給上下、左右 單值法 設(shè)置屬性值只有一個(gè),分配方向上右下左,四邊的值相同 padding四值法示例: p {padding: 10px 20px 30px 40px;}padding三值法示例: p {padding: 10px 20px 30px;}padding二值法示例: p {padding: 10px 20px;}padding單值法示例: p {padding: 10px;}四、邊框 border
邊框 border 屬性 說明 是一個(gè)復(fù)合屬性 作用 設(shè)置的是內(nèi)邊距外面的邊界區(qū)域,作為盒子的實(shí)體化的最外層 ①復(fù)合屬性值 由三個(gè)值組成,分為線的寬度、線的形狀、線的顏色 寬度,屬性值:常用px形式的數(shù)值 形狀,屬性值:形狀的單詞 顏色, 屬性值:顏色名或顏色值 舉例 border: 1px solid red; ②單一屬性值 a.按照屬性值的類型劃分 線寬:border-width 屬性值:常用px形式的數(shù)值。四個(gè)方向都有邊框?qū)挾?,屬性值類似?padding,也有四種值的寫法。舉例:border-width:1px 2px 3px 4px; 線型:border-style 屬性值:形狀的單詞。詳細(xì)常見屬性值見下方補(bǔ)充;總體也是類似 padding 的綜合屬性寫法。舉例:border-style: solid; 顏色:border-color 屬性值:顏色名或顏色值??傮w也是類似 padding 的綜合屬性寫法。舉例:border-color: #00f #f00 #0f0 #ff0; b.根據(jù)邊框的方向劃分 每個(gè)單一屬性都必須與復(fù)合屬性 border 一致,設(shè)置三個(gè)屬性值。 上邊框:border-top 舉例: border-top: 1px solid blue; 右邊框:border-right 舉例: border-right: 1px solid blue; 下邊框:border-bottom 舉例: border-bottom: 1px solid blue; 左邊框:border-left 舉例: border-left: 1px solid blue; c.根據(jù)方向和類型,進(jìn)一步細(xì)分 border-方向-類型 注意 細(xì)分時(shí)必須先寫方向劃分再寫類型劃分,否則屬性名錯(cuò)誤 舉例 border-top-color: #ff0; border-bottom-width: 2px; 補(bǔ)充:border-style屬性值可能性:
五、外邊距 margin
外邊距 margin屬性 說明 屬性名 margin 作用 設(shè)置的是盒子與盒子之間的距離 特點(diǎn) 不能渲染背景 屬性值 常用 px 為單位的數(shù)值 外邊距的設(shè)置方式與內(nèi)邊距 padding 一模一樣的: ①單一屬性:
p { margin‐top: 20px; margin‐right: 20px; margin‐left: 20px; margin‐bottom: 10px; }②綜合寫法:
四值法
margin: 10px 20px 30px 40px;
三值法margin: 10px 20px 30px;
二值法margin: 10px 20px;
單值法margin: 10px;
關(guān)于“css3框模型有哪些屬性”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
網(wǎng)站題目:css3框模型有哪些屬性
文章網(wǎng)址:http://weahome.cn/article/pccdph.html