1，HTML

1，尺寸的百分比

相對于元素參考系（包含塊）。

1，普通元素

相對于最近祖先塊元素（一般為父元素）的內(nèi)容區(qū)域（width | height）。

舉例

.box {
	width: 500px;
	height: 300px;
	padding: 50px; /* 沒有影響 */
}
.item {
	width: 50%; /* == 500px * .5 = 250px */
	height: 50%; /* == 300px * .5 = 150px */
}

.box {
	width: 500px;
	height: 300px;
	padding: 50px; /* 有影響 */
	box-sizing: border-box;
}
.item {
	width: 50%; /* == 500px * .5 - 50 = 200px */
	height: 50%; /* == 300px * .5 - 50 = 100px */
}

2，絕對（固定）定位元素

相對于祖先元素中，最近的 position 不是 static 的元素的內(nèi)邊距區(qū)域（(width | height) + padding）。

3，常見百分比

常見百分比，除了height 之外，都是相對于 width。

2，form 表單元素

1，form

具體參考 阻止表單提交

2，button

MDN - button

1，type。默認(rèn)值 submit。如果 button 在 form 標(biāo)簽內(nèi)，默認(rèn)行為會執(zhí)行提交表單操作?？稍O(shè)置為 button ，讓 button 沒有默認(rèn)行為。

2，form。表示關(guān)聯(lián)的 form 元素。值為 form.id，這樣讓 button 元素不用放在 form 元素內(nèi)。

3，reset，重置已選（不會重載頁面）。

3，label

MDN - label

可以通過 for="id" 來關(guān)聯(lián)，也可以通過 <label> 包裹來關(guān)聯(lián)。

<form>
  <div>
    <label for="basketball">喜歡籃球</label>
    <input type="checkbox" name="basketball" id="basketball" />
  </div>
  <div>
    <label>
      <span>喜歡足球</span>
      <input type="checkbox" name="football" />
    </label>
  </div>
</form>

4，outline

外邊框。表單元素一般設(shè)置 outline: none，再自定義樣式。

另外，outline不占用盒子尺寸。有的 UI 設(shè)計圖的尺寸用的是外邊框。所以前端開發(fā)對尺寸要求嚴(yán)格時，可以用這個。

5，text-indent

定義一個塊元素首行文本內(nèi)容之前的縮進量。效果和 padding-left 類似。

6，radio

通過 name 來關(guān)聯(lián)唯一性

<input type="radio" name="contact" value="mail" />
<input type="radio" name="contact" value="address" />

3，布爾屬性

在 html 標(biāo)簽中只需要寫屬性名即可，不用寫屬性值。該屬性就是 true。

舉例

<select multiple disabled>
  <option selected>123</option>
</select>

<input type="checkbox" checked>

4，contenteditable

contenteditable 表示元素是否可被編輯。富文本編輯器使用該屬性實現(xiàn)。

雖然是一個枚舉屬性，但可以像布爾屬性一樣，只寫屬性名默認(rèn)表示 true。

<div class="box" contenteditable></div>

.box {
  width: 200px;
  height: 200px;
  outline: 1px solid;
  overflow: auto;
  resize: both; /* 可調(diào)整尺寸 */
}

效果：

5，em 單位

在 font-size 中使用是相對于父元素的字體大小，在其他屬性（比如 width）中使用是相對于自身的字體大小。

2，CSS

1，透明度顏色樣式值

下面3種寫法效果相同

div {
  color: rgba(0, 0, 0, 0.5);
  color: rgb(0 0 0 / 50%);
  color: #00000080;
}

2，resize

resize

一般用于控制 <textarea> 是否可以調(diào)整尺寸。resize: none 禁止調(diào)整。

1，但也能夠單獨控制一個方向的尺寸變化 vertical horizontal both

2，也能控制其他元素。但不適用下列元素：

• 內(nèi)聯(lián)元素
• overflow 屬性設(shè)置為 visible 的塊元素

舉例：

<div class="box"></div>

.box {
  outline: 1px solid;
  width: 200px;
  height: 200px;
  overflow: auto;
  resize: both;
}

效果：

3，浮動

float 導(dǎo)致父級高度坍塌。
解決：

• 父級 overflow: hidden 形成BFC
• 父級增加子元素設(shè)置清除浮動 clear:both

一般會設(shè)置為通用類

clearfix::after {
  content: '';
  display: block;
  clear: both;
}

4，vertical-align

vertical-align

只對inline inline-block table-cell元素生效。用于控制垂直方向的對齊。

屬性值可以是具體數(shù)值

<div>
  <input type="checkbox">
  <span style="font-size: 14px;">這是value</span>
</div>

下面2種方式都可以對齊，具體情況微調(diào)即可。

input {
  vertical-align: -2px;
}
/* 或 */
span {
  vertical-align: 2px;
}

5，兄弟選擇器

CSS組合選擇器

/*  一般兄弟組合器，匹配同一父元素下，p 元素后的所有 span 元素。 */
p ~ span {}

/*  緊鄰兄弟組合器，緊鄰 p 元素的第一個 span 元素 */
p + span {}

6，偽類選擇器

1，nth-child，所有元素都參與計數(shù)，再找指定的元素。

<div>
  <span>span1</span>
  <p>p1</p>
  <span>span2</span>
  <span>span3</span>
</div>

span:nth-child(-n + 3) {
  color: red;
}

span:nth-child(2n + 1) {
  color: red;
}

上面2種展示效果一樣。

2，nth-of-type，先確定元素的類型，然后在相同類型的元素中計數(shù)。

<div>
  <div>div1</div>
  <p>p1</p>
  <p>p2</p>
  <div>div2</div>
  <p>p3</p>
  <p>p4</p>
</div>

p:nth-of-type(2n + 1) {
  color: red;
}

效果

7，精靈圖（雪碧圖）使用

sprite

降低圖片請求次數(shù)，提升瀏覽器加載效率。

通過 background-position 來確定目標(biāo)圖片位置。

div {
  width: 30px;
  height: 30px;
  background: url() no-repeat -100px -100px;
  /* 簡寫用的下面的屬性 */
  /* background-position: -100px -100px; */
}

8，定位

1，一個占滿全屏的蒙層。

/* 百分比相對視口 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

或

.mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

,2，絕對定位實現(xiàn)垂直水平居中，居中元素必須有寬高。left top 的百分比，相對于參考系（參考最上面的尺寸百分比）。

3，全屏彈窗 dialog 打開時，通過設(shè)置 body { overflow: hidden} 來阻止頁面滾動。

4，絕對定位和浮動元素，display: block 并無法更改。

以上，待續(xù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-674347.html

到了這里，關(guān)于HTML+CSS 查漏補缺的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！