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