編寫HTML頁面常見的CSS樣式問題

img標籤底部留有空白

• 造成此問題的原因：
  • 因為行內元素預設的垂直對齊方式vertical-align為baseline造成的字型下方會有間隙
• 解決方法：
  • 修改img行內元素的垂直居中方式，讓它不在以基線對齊。vertical-align: bottom;、vertical-align: middle;
  • 修改父元素的行高，使行高變小，這樣基線下方的位置基本可以忽略。line-height: 0px;
  • 修改img行內元素的字型大小，基線的下方間隙是部分字型超過基線下方而產生的，如果把父元素的font-size變的超小，基線的下方距離將忽略不計。font-size: 0px;
  • 直接讓img變成塊級元素，不在受行內基線的影響。display: block;、float：left;、只要能變成塊級的屬性都可以
  • 修改img行內元素的margin-top值。margin-top: -4;
• 測試用例的css樣式如下：

.parent {
  border: 1px solid red;
  width: 100px;
  margin: 100px auto;
  /* font-size: 0; */
  /* line-height: 0; */
}
.pic {
  width: 100px;
  height: 50px;
  /* display: block; */
  /* float: left; */
  /* vertical-align: middle; */
  /* vertical-align: bottom; */
  /* margin-bottom: -4px; */
}
.child {
  width: 100px;
  height: 20px;
  background: blue;
}
複製程式碼

• 測試用例的HTML程式碼塊如下：

<div class='parent'>
    <img class='pic' src='https://user-gold-cdn.xitu.io/2018/11/26/1674d97d6108c569?w=1920&h=1200&f=jpeg&s=424670' />
    <div class='child'></div>
</div>
複製程式碼

• 效果圖對比如下：

  

  

給子盒子設定margin-top(或者是margin-bottom)值的時候，父盒子繼承了該margin-top(或者是margin-bottom)值

• 造成此問題的原因：
  • 當一個元素包含在另一個元素中時（假設沒有填充或邊框將邊界分隔開），它們的頂和底(頂或底)邊界會發生疊加
  • 注意：只有普通文件流中塊框的垂直邊界才會發生邊界疊加。行內框、浮動框或絕對定位框之間的邊界不會疊加
• 解決辦法：
  • 為父元素設定border
  • 為父元素新增overflow：hidden;樣式
  • 為父元素或者子元素宣告浮動或者宣告絕對定位
• 測試用例的css樣式如下：

.parent {
  width: 300px;
  height: 300px;
  background-color: pink;
  /* overflow: hidden; */
  /* border: 1px solid #ccc; */
  /* padding-top: 50px;
  box-sizing: border-box; */
}
.child {
  width: 200px;
  height: 200px;
  background-color: orange;
  margin-top: 50px;
  float: left;
  /* position: absolute; */
}
複製程式碼

• 測試用例的HTML程式碼塊如下：

<div class='parent'>
    <div class='child'></div>
</div>
複製程式碼

• 效果圖對比如下：

  

  

文字滿行，以...結束

• 注意：
  • 給父級DOM元素設定style='-webkit-box-orient: vertical'的行內樣式，必須是行內。
  • 給父級DOM元素新增樣式還有如下：

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; // 數值1表示文字僅僅顯示一行
  複製程式碼

  • 給父級DOM元素一定得設定width樣式屬性（不設定width，預設佔一行）
  • 給父級DOM元素最好不要設定height樣式屬性
• 測試用例的css樣式如下：

.box {
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
    }
複製程式碼

• 測試用例的HTML程式碼塊如下：

<div class='box' style='-webkit-box-orient: vertical'>
    我是文字滿行，以...結束的相關測試。我是文字滿行，以...結束的相關測試。我是文字滿行，以...結束的相關測試
</div>
複製程式碼

• 效果圖對比如下：

  

求父節點的scrollTop（scrollLeft）值需注意：

• 必須給父節點設定固定的高度height(width)
• 必須給父節點設定屬性overflow-y: auto;(overflow-x: auto;)
• 父節點的內容的height(width)要大於父元素的height(width)
• 測試用例的css樣式如下：

.parent {
    width: 300px;
    height: 500px;
    border: 1px solid #ccc;
    overflow: auto;
}
.child {
    width: 200px;
    height: 100px;
    margin-bottom: 10px;
    background-color: red;
}
複製程式碼

• 測試用例的HTML程式碼塊如下：

<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
</div>
複製程式碼

• 測試用例的JavaScript程式碼塊如下：

<script type="text/javascript">
    var parent = document.getElementsByClassName('parent')[0]
    parent.scrollTop = 100
    parent.addEventListener('scroll', function () {
        console.log('scrollEle', parent.scrollTop)
    })
</script>
複製程式碼

• 效果圖對比如下：

  

IOS微信點選事件出現閃爍

• 給點選的元素設定以下CSS樣式
• 其中ele是點選的元素

ele {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(200,200,200,0);
}
複製程式碼

改變input、textarea等文字輸入框的placeholder樣式

• 給指定的元素設定以下樣式
• 其中ele是對應的文字輸入框

ele::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #cfcfcf;
}
ele:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #cfcfcf;
}
ele::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #cfcfcf;
}
ele:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #cfcfcf;
}
複製程式碼

移動端使用overflow-y: auto; 當內容超過固定父盒子高時，可以滑動，但是不顯示滾動條

• 給指定的父盒子設定以下樣式
• 其中ele是相應的父盒子

ele {
    height: 234px;
    overflow-y: scroll;
}
ele::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
    border-left: 1px solid rgba(0, 0, 0, 0);
}
ele::-webkit-scrollbar {
    width: 3px;
    height: 13px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
ele::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-height: 28px;
}
ele::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
複製程式碼

如何防止iOS網頁中的數字被識別為電話號碼

• 不影響預設的a標籤設定的href屬性tel:187****8729

<meta name = "format-detection" content = "telephone=no">
複製程式碼