编写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;
}
复制代码