前端学习路上的小技巧

在日常排版中总会遇到各种各样的小问题，比如说网页自身的间距，图片排版也带有一定间距等等，以及有些常用属性，今天就给大家介绍一下各种问题的处理方法，常用属性的操作方法。
一.网页取消自带间距：

*{
margin：0px；
padding：0px；
}

二.行内元素和块元素的互转（display的部分属性）：

1.显示块元素：
 display：block；（可把行内改成块元素）

2.显示行内元素：
display：inline；（可把块元素改成行内）

3.显示行内块元素：
display：inline-block；（可把行内转成行内块元素）

三.去除搜索框（input，button）的蓝色边框，搜索状态下的边框：

border：none；
outline：none；

四.首选样式生效：

！important

五.块元素ul，ol下的li取消默认样式（取消前缀，展示为普通的标签样式）：

list-style：none；

六.文本装饰text-decoration（属性）：

text-decoration：none；（取消行内元素a标签的默认下划线）

七.图片取消默认间距：

1.display：block；
  float：left；
2.font-size：0px；（给父元素）
   然后给所添加文字另设大小，也可单独做一个盒子；

八.文本省略：

1.单行文本省略：white-space：nowrap；（强制一行显示）
              overflow：hidden；（溢出隐藏）
              text-overflow：ellipsis；（对向内文本溢出时显示省略标记）
2.多行文本省略：display：-webkit-box；（转化为老弹性盒）
              -webkit-box-orient：vertical；（排列方式为垂直）
              -webkit-line-clamp：3；（块元素显示文本行数）
              overflow：hidden；（溢出隐藏）

九.三种元素隐藏方式：

1.opacity：0；（透明度，隐藏，占位）
2.display：none；（隐藏，不占位）
3.visbility：hiddle；（隐藏，占位）

十.某些盒子设边框后，会超出父盒子的距离，解决方法：

box-sizing：border-box；
box-sizing：content-box；

学习时间有限，今天就先写出这些，日后继续完善，也欢迎大家前来补充。