编写HTML页面常见的CSS样式问题

星梦花随0823
726 阅读5分钟

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://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/11/26/1674d97d6108c569~tplv-t2oaga2asx-image.image' />
    <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">
avatar
文章
阅读
粉丝