常用的css代码片段

sherlockkid7
155 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

1. input输入框

IOS系统手机端的输入框line-height不会起作用，无法实现文字居中，所以设置line-height为高度的一半（也可以不是一半），并且设置padding撑开剩余的高度

 input {
    display:block;
    width: 100%;
    line-height: 30px;
    padding: 10px 30px;
    color: #acacac;
}

注：input属于行内替换元素，height/width/padding/margin均可用，效果等于块元素。最好设置成块元素。

2. 图片自适应

对于会影响到布局的图片需要给该图片添加父元素，并且设置父元素宽高，图片设置自适应。object-fit属性来解决图片被拉伸或是被缩放的问题

img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

3. 去除a标签默认样式

a {
  text-decoration: none;
  color: inherit;  
  /* 去除移动端点击a标签的背景色*/
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  
}

3. 页面初始化

不同浏览器对于字体大小的默认设置，会导致某些元素设置的字体大小无效，需要对body做如下初始化操作:

body{
/*禁用Webkit内核浏览器的文字大小自动调整功能*/
-webkit-text-size-adjust:100%;
/* 根据font-size属性决定字体大小*/
font-size-adjust:none;
}

4. 去除select选择按钮默认样式

appearance的none值表示不应用任何特殊样式，相当于去除select的默认样式。 background相关属性设置选择框的下拉图标

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background-image:url('引入下拉图标');
background-repeat: no-repeat;
background-size: 4%;
background-position: 96%;

5.控制文本隐藏，超出部分省略号显示

单行文本（需要有宽度）

.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行文本

.comrow2{
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;/* 设置显示的行数 */
  overflow: hidden;
}

6.实现一个元素的水平垂直居中（元素宽高未知）

a. 定位（两种方法） 前提条件：父元素设置相对定位

  1. 元素设置绝对定位，left：50%;top:50%;，再使用css3的transform属性，设置为translate（-50%,-50%）;移动自身宽高的一半
  2. 元素设置绝对定位，并且left,right,top,bottom设置为0,margin:auto b. flex布局
  1. 父元素使用display:flex，再设置水平居中justify-content:center；垂直居中align-items:center;（可以不用设置元素的宽高，让元素内容撑开宽高）
  2. 父元素使用display:flex，子元素设置margin:auto;

7.清除浮动

清除浮动是为了解决子元素浮动而导致父元素高度塌陷的问题

清除浮动的常用方法：

  1. 父元素定义height

  2. 额外标签法

    在有浮动的子元素末尾插入一个没有内容的块级元素， 并添加样式clear:both

  3. 给父级元素使用伪元素

    .clearfix::after { content:"";display: block;clear:both;}

  4. 触发父元素BFC

    给父元素添加样式overflow为hidden或auto，通过触发BFC方式，实现清除浮动

avatar
文章
阅读
粉丝