編寫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>
複製代碼

• 效果圖對好比下：

  

  

文字省略

• 注意：
  • -webkit-box-orient: vertical 在使用 webpack 打包的時候這段代碼會被刪除掉，緣由是 optimize-css-assets-webpack-plugin 這個插件的問題。
  • 因此，方法一是：該段代碼要內嵌到父級DOM元素中，以下

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

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

  • 方法二是以下

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;  // 數值1表示文字僅僅顯示一行
  複製代碼

  <div class='box'>
  我是文字滿行，以...結束的相關測試。我是文字滿行，以...結束的相關測試。我是文字滿行，以...結束的相關測試
  </div>
  複製代碼

  • 給父級DOM元素添加樣式還有以下：
  • 給父級DOM元素必定得設置width樣式屬性（不設置width，默認佔一行）
  • 給父級DOM元素最好不要設置height樣式屬性
• 效果圖對好比下：

  

文字兩端對齊

• 測試用例css樣式以下：

div {
    margin: 10px 0;
    width: 100px;
    border: 1px solid red;
    text-align: justify;
    /* 規定如何對齊文本的最後一行 */
    text-align-last: justify;
}
複製代碼

• 測試用例的html代碼以下：

<div>姓名</div>
<div>手機號碼</div>
<div>帳號</div>
<div>密碼</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">
複製代碼