左岸

1.添加一个新元素，添加一个div块，设置clear:both;同时不让它显示.clear { clear: both; font-size: 0; height: 0; line-height: 0;}2.给父元素添加overflow: hidden;当父层没有设置浮动，而子层设置了浮动时，父层很大可能受到浮动的影响缩成一条，这时使用clear: both;清除浮

一个<div>和一个<i>同一个层级使用vertical-align: middle;可以竖直方向对齐

盒模型元素宽度的计算方式IE没有标准盒模型元素宽度 = width + padding + border盒子总宽度 = 元素宽度 + marginCSS3中增加了一个计算盒模型的css属性box-sizingbox-sizing: content-box | padding-box | border-box;默认值：content-box为了避免盒模型大小变化造成网页排...

justify-content（在父元素设置） 设置弹性盒子元素在主轴（横轴）的对齐方式。取值：justify-content: flex-start | flex-end | center | space-between | space-around;flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。flex-end: 弹性

1.显示一行文本内容，多余的内容用省略号显示overflow: hidden;text-overflow: ellipsis;white-space: nowrap;2.显示指定行数的文本，多余的内容显示省略号display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;-w

使用CSS实现椭圆，三角形，五角星等图形

垂直居中是页面布局中非常常见的效果，那怎么使用CSS实现垂直居中呢？

CSS样式书写的一些规范，使项目代码更优雅。

探讨不同浏览器兼容问题

Element.getBoundingClientRect()Element.getBoundingClientRect()方法返回元素的大小及其相对于视口左上角的位置。返回的对象包含一组只读属性——top, bottom, left, right，单位为像素px。const ele = document.getElementById('target')const top = ele.get...