CSS基礎選擇器

（1）id選擇器:? ?#? ? ? ?=》? 標簽擁有 id="user"? 屬性

<style>#user {width: 200px;}</style><div id="user"></div>

（2）( class ) 類選擇器 :? .? ? ? ? =》 標簽擁有 class="user" 屬性

<style>.user {width: 200px;height: 50px;} </style><div class="user"></div>

(3) 標簽選擇器? （ 通過標簽名來控制 ）

<style>div {width: 200px;height: 50px;} </style><div></div>

(4)通配選擇器? ?*

<style>* {background-color: red;}</style>

選擇器的優先級

控制范圍越精確，優先級越高 通配 < 標簽 < class < id < 行間式 < !important 行間式優先級高于內聯，外聯所有選擇器的優先級，但是低于 !important <style>.name {background-color: red!important;} </style><div class="name"></div>

?

樣式塊

1.長度： 單位（ px像素 mm毫米 cm厘米 em一個字寬，跟父級字體大小相關 rem跟跟標簽html相關 vw視圖寬 vh視圖寬 i n英寸） <style>.name {width: 100px;}
</style> 2.顏色：#00 00 00 - #FF FF FF rgb(0-255,0-255,0-255) rgba(0-255,0-255,0-255,透明度(0-1)) <style>
.name {
background-color: #FF0000;
}
</style>

<div class="name"></div>

3.控制標簽的顯示方式? ?display

display: none 不顯示
display: inline 同行顯示，只支持部分css樣式（不支持寬高）
display: block 塊級顯示，支持所有css樣式，寬高也有默認的特性
display: inline-block 同行顯示，支持所有css樣式

嵌套關系
inline-block 類型不建議嵌套任意標簽，
inline 類型只嵌套inline類型的標簽
block類型可以嵌套任意類型的標簽 4.文本樣式?
vertical-align: baseline | top | middle | bottombaseline: 文本底端對齊top: 標簽頂端對齊middle:中線對齊bottom: 標簽底端對齊
<style>.name {
　　　　vertical-align: baseline;
　　}
</style>

?

盒模型

組成: margin + border + padding + content

1.margin：外邊距,控制盒子的位置（布局），跟邊框一樣　
　　左右移動正常疊加，上下重疊取大值

　　父級的第一個子集會重疊邊距，怎樣解決此問題？
　　　　利用父級的padding來解決 margin: 上，右，下，左 （四值） margin: 上，左右，下 （三值） margin: 上下，左右 （二值） margin:20px 上右下左都是20px (一值)

margin-top:-80px;
margin-left:-80px;
margin-left:calc( 80px * 2 ) 利用算法來算距離
2.邊框 border: 邊框樣式 ，邊框大小，邊框顏色 border-style: solid實線 | dashed虛線 | dotted點狀線 border-width: 20px 邊框寬度 border-color:transparent; 邊框顏色 border: solid 20px red;
transparent 透明色
3.內邊距 padding 控制文本內移，想保持顯示區域不變，相應減少content的區域 padding:20px 上右下左都是20px （一值） padding: 上，右，下，左 （四值） padding: 上，左右，下 （三值） padding: 上下，左右 （二值） 4.content 內容

?

盒模型布局

1.上下兩個盒子的margin-bottom和margin-top功能相同, 同時出現, 取大值 2.第一個有顯示區域的子級會和父級聯動(margin-top重疊), 取大值 解決方法：
　　1.父級設置border-top
　　2.父級設置padding-top

?

盒模型-block

block1.子集沒有設置寬，寬自適應父級的寬 （子集的 border + padding + content = content）2.父級沒有設置高，高適應子集的高3.沒有設置高，高由內容撐開 子集自適應父級的寬度:margin-left:auto; 水平居右margin:0 auto; 水平居中margin:auto; 上下居中，水平居中

?

?

?

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/liu--huan/p/10278949.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。