## 公共樣式
公共屬性的優點:
在HTML中盒子元素中大家如果有一個共同的事件,比如一起設置顏色高低等,就可用一起操作了。就可以都設置一個共同的樣式。
列如DIV盒子中寫法:
```
<div class="xos xob"> </div>
```
## **在同一個元素中 同時設有 .a 和.b屬性**
<h3>假如 div 中.a設置了寬100px;高度100px;
那么同時設置 .a .b
```
<div class="a b">
```
.a{
width: 100px;
height: 100px;
}
這個時候b屬性也是width: 100px;
height: 100px;
如果給.b設置一個邊框
那么就會圍繞盒子一圈。
這就是公共類的繼承性。
.a的屬性和.b的權重是一樣的。</h3>
<h3><p style="color:red"> 如果給a設置了寬高等等屬性,那么給b進行定位屬性,那么等同于給a進行定位。</p></h3>
## 代碼案例:
```
<style>
.bos{
width: 500px;
height: 500px;
margin:100px auto;
background-color: rgb(104, 141, 129);
}
.csc
{
border:5px solid red;
color:rgb(248, 203, 0);
}
</style>
<body>
<div class="bos csc">
<div class="s">你好</div>
<div class="p">我是</div>
<div class="c">公共類</div>
</div>
```
如圖:

- 簡介
- 文字三屬性(顏色,字號,字體)
- 盒子三屬性(width , height, background-color)
- CSS引入方法
- CSS選擇器
- css高級選擇器
- CSS的繼承性
- 顏色屬性color
- 字體font-family
- 字號font-size
- 文字在盒子行高 line-height
- 字體加粗font-weight
- 字體樣式font-style
- 文本段落對齊text-align
- 文字修飾(上劃線下劃線中劃線 text-decoration)
- 文字縮進text-indent
- 盒子模型的寬度與高度width,height
- 內邊距padding
- 邊框border
- 外邊距margin
- 清除默認樣式
- 盒子height高度屬性拓展
- 文字在盒子里居中text-align:center
- 盒子在盒子里的水平居中
- margin塌陷
- 標準文檔流display
- 浮動float
- 浮動元素性質
- 浮動貼邊原理
- 浮動元素的標準流問題(文字圍邊效果)
- 清除浮動
- 清除浮動影響二: clear屬性
- 清除浮動overflow方法
- 偽類標簽
- background-color背景顏色屬性
- background-image 背景圖片調用
- background-repeat 背景圖平鋪狀態
- background-position背景定位
- background-attachment背景附著
- background綜合語法
- 相對定位position:relative
- 絕對定位position:absolute
- 定位壓蓋順序
- CSS制作LOGO超鏈接妙招
- CSS公共類的繼承性
- em單位
- 媒體查詢
- flex布局