【CSS】笔记3-三大样式、盒子模型、PS、圆角、阴影
目錄
一、三大特性
1.層疊性
2.繼承性
3.優(yōu)先級(jí)
4.CSS權(quán)重疊加?
二、盒子模型
1.盒子模型
（1）邊框（border）
（2)border-collapse表格細(xì)線邊框
（3)邊框會(huì)影響盒子實(shí)際大小
（4）內(nèi)邊距padding
?（5）padding影響盒子大小
(7)padding不影響盒子大小情況
(8)外邊距margin
(9)外邊距典型應(yīng)用
(10)外邊距合并
（11）清除內(nèi)外邊距
三、PS基本操作
四、綜合案例
1.產(chǎn)品模塊
?2.快報(bào)模塊
新知識(shí)點(diǎn)
五、圓角邊框
六、盒子陰影
七、文字陰影
一、三大特性
1.層疊性
- 相同選擇器設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋另一個(gè)沖突的樣式。
- 層疊性主要解決樣式?jīng)_突的問(wèn)題
- 層疊性原則：
- 樣式?jīng)_突，遵循的原則是就近原則（離標(biāo)簽近的）
2.繼承性
- CSS中的繼承：子標(biāo)簽會(huì)繼承父標(biāo)簽里面的某些樣式
- 如文本顏色和字號(hào)等
子元素可以繼承父元素的樣式(text-,font-,line-這些開(kāi)頭的可以繼承，以及color屬性)
高度、盒子模型的內(nèi)外邊距就不會(huì)繼承
***行高的繼承性
body{ font:12px/1.5 Microsoft YaHei; }行高可以跟單位也可以不跟
如果子元素沒(méi)有設(shè)置行高，則會(huì)繼承父元素行高為1.5
此時(shí)子元素的行高是：當(dāng)前子元素文字大小*1.5
body行高1.5這樣寫(xiě)最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)化調(diào)整行高
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {color: pink;font: 12px/1.5 'Microsoft YaHei'}div {/*子元素繼承了父元素body的行高1.5*//*就是當(dāng)前元素文字大小font_size的1.5倍，所以當(dāng)前div行高14*1.5=21*/font-size: 14px;}/*li沒(méi)有指定文字大小 則會(huì)繼承父親的文字大小 body12px所有l(wèi)i的文字大小問(wèn)12px,當(dāng)前l(fā)i的行高就是12*1.5=18px*/</style> </head><body><div>粉紅色的回憶</div><p>粉紅色的回憶</p><ul><li>我沒(méi)有指定文字大小</li></ul> </body></html>3.優(yōu)先級(jí)
- 選擇器相同，則執(zhí)行層疊性
- 選擇器不同，則按權(quán)重
注意事項(xiàng)
- 權(quán)重是有4子數(shù)字組成，但是不會(huì)有進(jìn)位
- 等級(jí)判斷是從左到右，如果某一位數(shù)值相同，則判斷下一位數(shù)值
- 繼承的權(quán)重是0，如果該原始沒(méi)有直接選中，不管父親元素權(quán)重多高，子元素得到的權(quán)重都是0。所以以后我們看標(biāo)簽到底執(zhí)行哪個(gè)樣式，就先看這個(gè)標(biāo)簽有沒(méi)有直接被選出來(lái)
- a鏈接口瀏覽器默認(rèn)指定了一個(gè)顏色 藍(lán)色有下劃線
4.CSS權(quán)重疊加?
- 權(quán)重疊加：如果是復(fù)合選擇器，則會(huì)有權(quán)重的疊加，需要計(jì)算權(quán)重
小案例
<head> <style>/*.nav li權(quán)重11*/.nav li {color: red;}/*需求把第一個(gè)小li顏色改為粉色加粗*//*pink權(quán)重是10 .nav .pink權(quán)重是20*/.nav .pink {color: pink;font-weight: 700;}</style> </head><body><ul class="nav"><li class="pink">人生四大悲</li><li>家里沒(méi)寬帶</li><li>網(wǎng)速不夠快</li><li>手機(jī)沒(méi)流量</li></ul> </body>二、盒子模型
目標(biāo)
能改準(zhǔn)確闡述盒子模型4個(gè)組成部分
利用邊框復(fù)合寫(xiě)法給元素添加邊框
計(jì)算盒子實(shí)際大小
利用盒子模型布局模塊案例
給盒子設(shè)置圓角邊框
給盒子添加陰影
給文字添加陰影
1.盒子模型
頁(yè)面布局要學(xué)習(xí)三大核心
- 盒子模型
- 浮動(dòng)
- 定位
頁(yè)面布局步驟
1.先準(zhǔn)備好相關(guān)的網(wǎng)頁(yè)元素，網(wǎng)頁(yè)元素基本都是盒子
2.利用CSS設(shè)置好盒子樣式，然后擺放到相應(yīng)位置
3.往盒子里面裝內(nèi)容
盒子模型的組成：
- border(邊框)
- content(內(nèi)容)
- padding(內(nèi)邊距)
- margin(外邊距)
（1）邊框（border）
-
CSS 邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色
-
邊框由三部分組成：邊框?qū)挾?#xff08;粗細(xì)） 邊框樣式 邊框顏色
boder-width邊框的粗細(xì)，一般情況都用px
border-style solid實(shí)線邊框 dashed虛線 dotted點(diǎn)線
?簡(jiǎn)寫(xiě):無(wú)順序，通俗如下順序
border : borde-width || border-style || border-colorboder:5px solid pink
邊框分開(kāi)寫(xiě)法
border-top:1px solid red 只設(shè)定上邊框，其余同理
border-bottom下邊框
左右一樣的
（2)border-collapse表格細(xì)線邊框
-
border-collapse?屬性控制瀏覽器繪制表格邊框的方式，它控制相鄰單元格的邊框
-
border-coppapse?表格的細(xì)線邊框
border-collapse : collapse;
- 表示相鄰邊框合并在一起
- collapse 單詞是合并的意思
table,td,th{
? ? ? ? boder:1px solid pink
}
（3)邊框會(huì)影響盒子實(shí)際大小
邊框會(huì)額外增加盒子的實(shí)際大小，因此我們有兩種方案解決：
（4）內(nèi)邊距padding
padding?屬性用于設(shè)置內(nèi)邊距,即盒子邊框與內(nèi)容之間的距離
- padding屬性(簡(jiǎn)寫(xiě)屬性)可以有一到四個(gè)值
?（5）padding影響盒子大小
給盒子指定padding之后，
1.內(nèi)容和邊框有了距離，添加了內(nèi)邊距
2.padding影響了盒子實(shí)際大小
也就是盒子已經(jīng)有了寬度和高度，此時(shí)再指定內(nèi)邊框，會(huì)撐大盒子
解決方案：如果保證盒子和效果圖大小保持一致，則讓width、height 減去多出來(lái)的內(nèi)邊距大小
?新浪導(dǎo)航欄實(shí)例：
*1a標(biāo)簽轉(zhuǎn)為行內(nèi)塊元素
*2padding指的左右內(nèi)邊距，撐開(kāi)距離
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {display: inline-block;height: 41px;padding: 0 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.nav a:hover {background-color: #eee;color: #ff8500;}</style> </head><body><div class="nav"><a href="#">新浪導(dǎo)航</a><a href="#">手機(jī)新浪網(wǎng)</a><a href="#">移動(dòng)客戶端</a><a href="#">微博</a><a href="#">三個(gè)字</a></div> </body></html>(7)padding不影響盒子大小情況
- 如果盒子本身沒(méi)有指定width/height屬性，則此時(shí)padding不會(huì)撐開(kāi)盒子大小
(8)外邊距margin
- margin（外邊距）屬性用于設(shè)置外邊距，即控制盒子和盒子之間的距離
margin 簡(jiǎn)寫(xiě)方式代表的意義跟 padding 完全一致
(9)外邊距典型應(yīng)用
外邊距可以讓塊級(jí)盒子水平居中，但是必須滿足兩個(gè)條件
左右的外邊距都設(shè)置為 auto 有三種寫(xiě)法：
- margin-left：auto;margin-right：auto
- margin:auto
- margin:0? auto
注意：
以上方法是讓塊級(jí)元素水平居中，行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素添加?text-align: center?即可。
(10)外邊距合并
使用 margin 定義塊級(jí)元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。
主要有兩種情況：
①相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素（兄弟關(guān)系）相遇時(shí)，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top ，則他們之間的垂直間距不是 margin-bottom 與 margin-top 之和。取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并。
②嵌套塊元素垂直外邊距的塌陷
對(duì)于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊距同時(shí)子元素也有上外邊距，此時(shí)父元素會(huì)塌陷較大的外邊距值
解決方案：
還有其他方法，比如浮動(dòng)、固定、絕對(duì)定位的盒子不會(huì)有塌陷問(wèn)題。后面會(huì)進(jìn)行總結(jié)。
（11）清除內(nèi)外邊距
?頁(yè)元素很多都帶有默認(rèn)的內(nèi)外邊距，而且不同瀏覽器默認(rèn)的也不一致。因此我們?cè)诓季智?#xff0c;首先要清除下網(wǎng)頁(yè)元素的內(nèi)外邊距。
* { padding: 0;
margin: 0; }
注意：
行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不要設(shè)置上下內(nèi)外邊距。但是轉(zhuǎn)換為塊級(jí)和行內(nèi)塊元素就可以了
三、PS基本操作
因?yàn)榫W(wǎng)頁(yè)美工大部分效果圖都是利用 PS（Photoshop）來(lái)做的，所以以后我們大部分切圖工作都是在 PS 里面完成。
登錄ps網(wǎng)頁(yè)版即可
- 文件?打開(kāi) ：可以打開(kāi)我們要測(cè)量的圖片
- Ctrl+R：可以打開(kāi)標(biāo)尺，或者 視圖?標(biāo)尺
- 右擊標(biāo)尺，把里面的單位改為像素
- ==Ctrl+ 加號(hào)(+)==可以放大視圖， ==Ctrl+ 減號(hào)(-)==可以縮小視圖
- 按住空格鍵，鼠標(biāo)可以變成小手，拖動(dòng) PS 視圖
- 用選區(qū)拖動(dòng) 可以測(cè)量大小
- Ctrl+ D 可以取消選區(qū)，或者在旁邊空白處點(diǎn)擊一下也可以取消選區(qū)
四、綜合案例
1.產(chǎn)品模塊
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #f3f6f3;}.box {width: 298px;height: 500px;background-color: #fff;margin: 100px auto;}.box img {/*圖片和盒子占滿*/width: 100%;}.review {height: 50px;font-size: 14px;/*這個(gè)段落沒(méi)有width屬性 所有padding不會(huì)撐開(kāi)盒子的寬度*/padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #babebb;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;}.info em {font-style: normal;color: #e5e6e3;margin: 0 6px 0 15px;}a {color: #333;text-decoration: none;}</style> </head><body><div class="box"><img src="bg.png" alt=""><p class="review">快遞牛，整體不錯(cuò)藍(lán)牙可以說(shuō)秒懂。紅米給力</p><div class="appraise">來(lái)著125327738的評(píng)價(jià)</div><div class="info"><h4><a href="#">Redmi AirDots真無(wú)線藍(lán)...</a></h4><em>|</em><span>99.9元</span></div></div> </body></html>?2.快報(bào)模塊
shift+alt不放，鼠標(biāo)連續(xù)下滑，再松開(kāi)alt,輸入“#”，即可多行同時(shí)輸入
新知識(shí)點(diǎn)
去掉 li 前面的小圓點(diǎn)
li { list-style: none; }
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>* {margin: 0;padding: 0;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}.box1 {height: 32px;padding-left: 15px;border: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;}/*去掉小圓點(diǎn)*/li {list-style: none;}a {font-size: 12px;color: #666;text-decoration: none;}a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}ul {margin-top: 7px;} </style><body><div class="box"><h3 class="box1">品優(yōu)購(gòu)快報(bào)</h3><ul><li><a href="#">【特惠】爆款耳機(jī)5這秒！</a></li><li><a href="#">【特惠】母親節(jié)，健康好禮低至5折！</a></li><li><a href="#">【特惠】爆款耳機(jī)5折秒！</a></li><li><a href="#">【特惠】9.9元洗100張照片！</a></li><li><a href="#">【特惠】長(zhǎng)虹智能空調(diào)立省1000</a></li></ul></div> </body></html>五、圓角邊框
border-radius?屬性用于設(shè)置元素的外邊框圓角
border-radius:length;
- radius半徑（圓的半徑） 原理:(橢）圓與邊框的交集形成圓角效果
六、盒子陰影
CSS3 中新增了盒子陰影，我們可以使用?box-shadow?屬性為盒子添加陰影。
box-shadow: h-shadow v-shadow blur spread color inset;- 模糊距離：影子的虛實(shí)
- 陰影尺寸：影子的大小
注意：
?需求：文字經(jīng)過(guò)時(shí)出現(xiàn)陰影
.yinying:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3)}七、文字陰影
在 CSS3 中，我們可以使用?text-shadow?屬性將陰影應(yīng)用于文本。
text-shadow: h-shadow v-shadow blur color總結(jié)
以上是生活随笔為你收集整理的【CSS】笔记3-三大样式、盒子模型、PS、圆角、阴影的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C++实现麻将基本听牌胡牌的算法
- 下一篇： 你可能没注意的CSS单位 BY:色拉油啊