首頁
大數(shù)據(jù)可視化設(shè)計
B端UI設(shè)計
系統(tǒng)UI設(shè)計
移動端UI設(shè)計
圖標(biāo)設(shè)計
軟件開發(fā)
高端網(wǎng)站設(shè)計
logo設(shè)計
平面設(shè)計
關(guān)于我們
公益活動
設(shè)計每日一帖
SS之盒子模型與背景屬性————每天一遍小知識
2020-3-31
seo達(dá)人
盒子模型與背景屬性
一.盒子模型
1.介紹
元素的總寬度和總高度
二.自定義邊框——border
1.基本設(shè)置
2.邊框?qū)挾取狟order Width
3.邊框顏色——Border Color
4.邊框樣式——Border style
5.CSS的邊寬和高度——width height
三.背景——background
1.背景顏色——background color
2.背景圖像—— background image
3.背景重復(fù)—— background repeat
4.背景的附件(固定與滾動)——background attachment
一.盒子模型
1.介紹
所有HTML元素都可以視為方框。
CSS邊框模型代表網(wǎng)站的設(shè)計和布局。
它由邊緣(margins),邊框( borders),內(nèi)邊距(paddings),和內(nèi)容(content)組成的。
這些屬性以什么的順序工作:top->right->bottom->left。
小知識:
網(wǎng)頁的每個元素都是一個盒子(box)。 CSS使用盒子模型來確定盒子有多大以及如何放置它們。
框模型還用于計算HTML元素的實際寬度和高度。
元素的總寬度和總高度
(1)總寬度等于左右邊緣,邊框,邊距相加:
(2)總高度:上下相加
二.自定義邊框——border
1.基本設(shè)置
border屬性允許您自定義HTML元素的邊框。
為了向元素添加邊框,您需要指定邊框的大小,樣式,顏色。
p {
padding: 10px;
border: 5px solid green;
}
2.邊框?qū)挾取狟order Width
使用border-width屬性可以 單獨設(shè)置邊框?qū)挾?br />
p{
padding: 10px;
border-style: solid;
border-width: 2px;
}
3.邊框顏色——Border Color
可以使用顏色名稱,RGB或十六進(jìn)制值定義元素的邊框顏色。
p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: blue;
}
小知識:除非設(shè)置border-style屬性,否則所有border屬性都不會起作用。
4.邊框樣式——Border style
默認(rèn)值為none
多種樣式:
dotted(點), dashed(虛線), double(雙邊框)
等。
p {border-style: none;}
p {border-style: dotted;}
p{border-style: dashed;}
p{border-style: double;}
p {border-style: groove;}
p {border-style: ridge;}
p{border-style: inset;}
p{border-style: outset;}
p {border-style: hidden;}
5.CSS的邊寬和高度——width height
要設(shè)置<div>元素的總寬度和高度為100px:
div {
border: 5px solid green;
width: 90px;
height: 90px;
}
框的總寬度和高度將為90px + 5px(邊框)+ 5px(邊框)= 100px;
可以使用百分比 進(jìn)行分配。
div {
border: 5px solid green;
width: 100%;
height: 90px;
}
3.要設(shè)置元素的最小和最大高度與寬度,可以使用以下屬性:
min-width-元素的最小寬度
min-height-元素的最小高度
max-width-元素的最大寬度
max-height-元素的最大高度
p{
border: 5px solid green;
min-height: 100px;
}
三.背景——background
1.背景顏色——background color
background-color屬性用來指定一個元素的背景色。
列:
body {
background-color: #C0C0C0;
}
h1 {
background-color: rgb(135,206,235);
}
p {
background-color: LightGreen;
}
2.背景圖像—— background image
background-image屬性中的元素可以設(shè)置一個或幾個背景圖像。
URL指定路徑的圖像文件。相對路徑和絕對路徑均受支持。
默認(rèn)情況下,背景圖像放置在元素的左上角,并在垂直和水平方向重復(fù)以覆蓋整個元素。
列;為<p>元素設(shè)置背景圖片。
p {
padding: 30px;
background-image: url("1.jpg");
color: white;
}
小知識
要指定多個圖像,只需用逗號分隔URL。
3.背景重復(fù)—— background repeat
repeat-x:圖片延x軸復(fù)制
repeat-y:圖片延y軸復(fù)制
Inherited:繼承父級屬性相同的指定值
no-repeat:不重復(fù),只有單個圖片
列:
body {
background-image: url("1.png");
background-repeat: repeat-x;
}
p {
background-image: url("1.png");
background-repeat: inherit;
margin-top: 100px;
padding: 40px;
}
4.背景的附件(固定與滾動)——background attachment
有效值
fixed:固定背景圖片
scroll:向下滾動頁面是,背景也隨著滾動
Inherit:繼承
列:
body {
background-image: url("1.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
分享本文至:
«
教父靳埭強(qiáng)的故事——香港設(shè)計史(中集)——【設(shè)計史太濃】
設(shè)計萌芽與平面設(shè)計之父石漢瑞——香港設(shè)計史(上集)——【設(shè)計史太濃】
»
分類
大數(shù)據(jù)可視化設(shè)計文章及欣賞(122)
B端ui設(shè)計文章及欣賞(579)
系統(tǒng)UI設(shè)計文章及欣賞(68)
移動端UI設(shè)計文章及欣賞(680)
圖標(biāo)設(shè)計文章及欣賞(117)
網(wǎng)站設(shè)計文章及欣賞(476)
平面設(shè)計(251)
行業(yè)趨勢(457)
設(shè)計資源(870)
交互設(shè)計及用戶體驗(895)
前端及開發(fā)文章及欣賞(1031)
隨筆的一些文章(60)
設(shè)計思維(1865)
用戶研究(238)
設(shè)計管理與成長(332)
seo優(yōu)化(494)
日歷
鏈接
個人資料
藍(lán)藍(lán)設(shè)計的小編
http://m.820esy.cn
存檔
2024年10月(166)
2024年9月(145)
2024年8月(165)
2024年7月(108)
2024年6月(65)
2024年5月(73)
2024年4月(44)
2024年3月(50)
2024年2月(58)
2024年1月(44)
2023年12月(47)
2023年11月(41)
2023年10月(14)
2023年9月(27)
2023年8月(88)
2023年7月(62)
2023年6月(58)
2023年5月(28)
2023年4月(47)
2023年3月(37)
2023年2月(90)
2023年1月(78)
2022年12月(45)
2022年11月(69)
2022年10月(51)
2022年9月(135)
2022年8月(60)
2022年7月(111)
2022年6月(162)
2022年5月(143)
2022年4月(86)
2022年3月(119)
2022年2月(53)
2022年1月(99)
2021年12月(105)
2021年11月(83)
2021年10月(101)
2021年9月(153)
2021年8月(147)
2021年7月(149)
2021年6月(157)
2021年5月(124)
2021年4月(185)
2021年3月(144)
2021年2月(35)
2021年1月(103)
2020年12月(95)
2020年11月(76)
2020年10月(31)
2020年9月(45)
2020年8月(50)
2020年7月(46)
2020年6月(33)
2020年5月(78)
2020年4月(69)
2020年3月(100)
2020年2月(59)
2020年1月(31)
2019年12月(50)
2019年11月(57)
2019年10月(48)
2019年9月(48)
2019年8月(57)
2019年7月(58)
2019年6月(58)
2019年5月(31)
2019年4月(37)
2019年3月(43)
2019年2月(25)
2019年1月(45)
2018年12月(41)
2018年11月(40)
2018年10月(29)
2018年9月(40)
2018年8月(87)
2018年7月(107)
2018年6月(86)
2018年5月(109)
2018年4月(40)
2018年3月(35)
2017年8月(35)
2017年7月(45)
2017年6月(7)
2017年5月(27)
2017年4月(51)
2017年3月(69)
2017年2月(65)
2017年1月(69)
2016年12月(55)
2016年11月(111)
2016年10月(92)
2016年9月(53)
2016年8月(9)
2016年7月(4)
2016年6月(9)
2016年3月(19)
2016年2月(26)
2016年1月(29)
2015年12月(34)
2015年11月(35)
2015年10月(46)
2015年9月(43)
2015年8月(40)
2015年7月(33)
2015年6月(46)
2015年5月(58)
2015年4月(70)
2015年3月(55)
2015年2月(17)
2015年1月(33)
2014年12月(21)
2014年11月(83)
2014年10月(94)
2014年9月(6)
2014年8月(1)
2014年7月(13)
2014年6月(66)
2014年5月(99)
2014年4月(88)
2014年3月(101)
2014年2月(67)
2014年1月(83)
2013年12月(106)
2013年11月(111)
2013年10月(61)
2013年9月(20)
2013年7月(13)
2013年6月(27)
2013年5月(48)
2013年4月(39)
2013年3月(8)
2013年2月(20)
2013年1月(31)
2012年12月(33)
2012年11月(31)
2012年10月(22)
2012年9月(8)
2012年7月(14)
2012年6月(15)
2012年5月(31)
2012年4月(24)
2012年2月(4)
2012年1月(8)
2011年12月(35)
2011年11月(32)
2011年10月(13)
2011年8月(1)
2011年6月(1)