四舍五入两年前端取经归来（html+css常用基础篇）

题外话：

• 今天稍微整理了下工作中经常用的html+css，算是一个技术总结吧
• 消失了两个月，终于有小伙伴加了我qq，小伙子，你催更狠独特呀
• 待会儿，过两三个小时，还会有经历文章，如果没有，说明我偷懒了，等明天吧，哈哈

html篇

1.万能div（常用指数★★★★★）

讲道理，有一说一，div天下第一。
大家不会反驳吧

小徐，这里写个文案，好

<div style="
	 font-size:16px;
	 font-weight:500;
	 line-height:1.5;
	 color:#333" >好</div>

小徐，这里弄个图出来，好

<div style="
	 width:100px;
	 height:100px;
	 background:url(img.png) no-repeat;
	 background-size:cover" ></div>

图文都能搞出来，那还有什么弄不出来的呢。

---

2.文字span（常用指数★★★）

span是行内元素，宽高由里面的元素撑起来，所以适合放文字，想要固定宽高，在外套层div，就可以了。

<div style=" width:100px;height:100px;" >
   <span>文案文案</span>
</div> 

---

3.图片img，视频video，音频audio等等（媒体标签）（常用指数★★★）

这些媒体标签，对于我们来说还是经常用到的，这里就单纯写个经常用到的配置标签属性吧

 <img src="./img.png" 
   alt="图片未显示时的文字" 
   title="鼠标停留图片时显示文字" 
  />
   
 <video src="movie.ogg" 
   controls="controls"  
  />

更多请看
img标签属性 video标签属性 audio标签属性 iframe标签属性

---

css篇（重点）

1.absolute绝对定位（常用指数★★★）

 .parent{
   width: 100px;
   height: 100px;
   position: relative;
  }
 .child{
   width: 50px;
   height: 50px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
 }

推荐理由：当你犹豫不决，不知道选择哪个布局时，绝对定位，这个绝对用的挺好，绝对可以满足你的要求，当然层级元素多了，要用z-index排优先级。

---

2.fixed固定定位（常用指数★★）

推荐理由：和绝对定位一样的用法，只不过将absolute替换为fixed，适用于tab栏，页面滚动，其元素不动的情况下。

---

3.margin属性（常用指数★★★★）

 .box{
   margin: 100px auto 0;
  }

推荐理由：margin属性经常被拿来作，居中或者间距，如果你发现设计稿上某元素要居中，或者元素有间距的情况下，可以考虑用margin。

---

4.object-fit图片裁剪（常用指数★★★★）

 .img{
   object-fit: cover;
  }

推荐理由：只要你的图片不拉伸压缩，用这个宽裁剪，准没错了。

---

5.文字省略…（常用指数★★★★★）

  .sigle-h{ /*单行...*/
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap; 
   }
   
  .more-h{ /*多行...*/
	 overflow : hidden;
	 text-overflow: ellipsis;
	 display: -webkit-box;
	 -webkit-line-clamp: 2; /*行数*/
	 -webkit-box-orient: vertical;
  }

推荐理由：由于项目里充斥着大量的变量文字，多出某个固定的宽度，或者高度，经过样式处理，显示…，所以就不用我说，这个的重要性吧。

---

6. flex布局（常用指数★★★★★）

6.1 图文左右排列布局

  .parent{ 
     width: 300px;
     height: 200px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
  .right{ 
	flex: 1;
  }
  
  .left:{
    width: 100px;
    margin-right: 20px;
  }

6.2 子集靠左布局

  .parent{ 
     width: 300px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
   }
   
  .child{ 
	width: 140px;
	height: 200px;
  }

推荐理由：flex布局天下第一，用了flex布局，绝对定位和margin布局就觉得low，还有很多属性，阮一峰大神的flex布局

---

7.min-?占位属性（常用指数★★★）

  .wrapper{ 
     width: 100%;
     box-sizing: border-box;
     min-height: 100vh;
     background: #fff;
     position: relative;
   }

推荐理由：页面宽度都是100%，主要还是高度，显示器不同，高度也不同，所以一个页面的容器最小要有高度吧，也就是撑起一个满屏，所以经常在容器里使用

---

8.vw vh vmin vmax 自适应布局单位（常用指数★★★）

推荐理由：1vw 和 1vh 分别是显示器宽高的1%，vmin和vmax分别是取，显示器宽高最小值和最大值，适用于自适应场景。

---

9.placeholder自定义样式（常用指数★★★）

  input::placeholder {
    color: #ccc;
  }

  input::-moz-placeholder {
    color: #ccc;
  }

  inpit::-webkit-input-placeholder {
    color: #ccc;
  }

推荐理由：不管是哪个UI设计美工，都不喜欢它原来的样式，当设计稿上有input，textarea时，你就得，改改改。

---

• 以上都是经常用到的，像什么特殊的伪类，大家都耳濡目染的font-size都没必要写出来，所以写的不是很多，还需待完善，以后有空再补上，就先这样吧。