真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css3框模型有哪些屬性

這篇文章主要介紹“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電腦。

css3框模型

盒模型又叫框模型,是在網(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:外邊距。

為了更好理解,如下生活中的舉例:

css3框模型有哪些屬性

常見盒模型區(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)中的盒模型圖:

css3框模型有哪些屬性

一、寬度 width

寬度 width屬性說明
屬性名width
作用設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度
屬性值屬性值說明
auto(默認(rèn)值)瀏覽器可計(jì)算出實(shí)際的寬度
px像素值定義的寬度
%定義參考父元素寬度 width 的百分比寬度
特殊應(yīng)用

(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;}

css3框模型有哪些屬性

內(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;}

css3框模型有哪些屬性

padding三值法示例:
p {padding: 10px 20px 30px;}

css3框模型有哪些屬性

padding二值法示例:
p {padding: 10px 20px;}

css3框模型有哪些屬性

padding單值法示例:
p {padding: 10px;}

css3框模型有哪些屬性


四、邊框 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屬性值可能性:

css3框模型有哪些屬性


五、外邊距 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

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部