css小技巧总结(一)

由于我2019年重新开发配置了博客,之前的上百篇博客没有转移未免有点可惜,我打算转移一些历史精华博客,以下是我2017年末总结的css小技巧集合

前言

吐槽一下,前端工程师很多情况下都在后端工程师前低人一等,其实我的理解吧还是关键看自己,自己的重点在哪儿里,有木有你自己能做而其他人做不了了,比如交互设计很牛,或者vue+node我很熟练,都是工程师(我不大习惯程序猿这个称号)多学点干货,多做点实事比什么都重要!当然了,这也是我经常对自己说的

正文

外部框架布局小技巧

一般外部大框架我们喜欢自己设计不用现成的UI框架,有时很容易出现的问题是框架内部的溢出问题,这会导致页面浏览出现很多问题,我们需要注意不同终端的分辨率不一样,除了媒体查询的设置外,我们要注意设置最小高度和宽度自适应

这里有个小窍门,处理框架溢出的问题,我们可以给所有元素加个边框,这样那里溢出,一目了然

关于非块元素的水平居中

一般情况下,我们使一个div在父元素下水平居中显示,我们通常会给他一个宽度,然后margin:0 auto;(当然了兼容性要求不高的话,水平居中可以使用flex布局), 但是这样的设置有个前提,必须是display:block的情况下才会有效果

当我们改设置为inline-block的情况下,水平居中依旧不会正常实现,对于非块元素的水平居中的办法是给他的父元素添加文本水平居中(text-align:center;)

阻止多次点击框架文本被选中状态

summary {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

内容超出部分隐藏

overflow:auto(没超出不加滚动条,超出部分加滚动条);
overflow:hidden(无论如何隐藏滚动条,具体还可以设置横轴隐藏-x,和纵轴隐藏-y);

visibility:hidden;(隐藏,但依然占据着页面原有空间位置);
display:none;(隐藏,不占据空间位置,在页面中彻底消失);

background属性综合顺序

background:background-color,background-image,background-repeat,background-attachment,background-position

一般用的较多的是处理透明背景background-color:tranparent,还有半透明rgba,渐变等

关于图片绝对定位后依然无法置底问题

在父元素设置了相对定位position:relative后,子元素设置绝对定位置底,但是页面的显示效果依然还会有一点缝隙,这是文本默认占据的空间, 我们的处理方法是回到父元素,给文本添加font-size:0px;就ok了

关于浮动的理念理解

文档流一层,漂浮在一层,定位又是一层。所以想要元素在同一水平层,必须设置统一的属性样式

提供给用户的输入框

我们要注意input是支持单行输入,都用在表单,搜索等地方;但是涉及到评论,动态之类的需要多行文本输入的,换用textarea

使用这个标签有两点一定要注意,一个是value值若是开始不需要设置初始值,value里不要设置任何内容,多个空格都不行,空格会在页面中永远占着一定的位置;另外我们一般不需要textarea自带的右下角装饰效果,设置resize:none;可以样式重置取消

关于弹出模态框的原生开发思路

我说一下大概思维,不复杂。基本思路:弹出一个div,周围的其他事件不可操作,可以固定显示一个窗口

  • 整体的半透明灰色遮幕层;
    首先颜色上面采用rgba(128,128,128,0.7);
    宽高百分比设置(不能再框架内)
    绝对定位,默认隐藏;
  • 具体的内部窗口;
    固定宽高,margin居中,可以适当加入圆角;

我想起来点关于圆角的事,我们一般为了方便border-radius:2%;里面其实填写几像素更好,意思是在边角上画个以多少像素为半径的圆,多出来的尖角部分删除;

  • 外部激活的按钮 (jquery控制显示);

角标样式的处理

伪元素基本上我们经常用到比如清除浮动啊,这里我说一下那个发出消息框后指向头像的尖尖角问题

//这是指向右的角标
XXX:after{
    content:'';
    width:0;
    height:0;
    border:10px solid;
    border-color:transparent;
    border-left-color: #ededed;
    display:block;
    //自己随便挑挑位置就行
}

//左角标
XXX:after{
    content:'';
    height:0;
    width:0;
    border:10ps solid transparent;
    border-right-color:#ededed;
    display:block;
      //自己随便挑挑位置就行
}