总结一些css知识点和小技巧

one大饼
908 阅读5分钟

前言：总结一些自己经常忘记的css知识点和小技巧，方便自己在开发过程中能快速查阅，文中的有些地方是自己的一些理解，日后要是遇到更多的小技巧会持续总结，文中如有不对的地方，请谅解和指正，如果觉得不错的话，麻烦点个赞，这对作者也是一种鼓励，不喜勿喷，感谢jym。

1、 盒子模型，盒模型分为IE盒模型和W3C标准盒模型。
  • W3C标准盒模型 （box-sizing: content-box）：属性width，height只包含content，不包含border和padding。（个人理解：改变padding和border这两个的值能改变盒子宽高）
  • IE盒模型 （box-sizing: border-box）：属性width，height包含border和padding，指的是padding + content + border。（个人理解：改变padding和border这两个的值不能改变盒子宽高） 在当前W3C标准中盒模型是可以通过box-sizing(css3)自由的进行切换的。
2、 定位（position），参照阮一峰老师的文章来总结的，因为个人经常混淆相对定位和绝对定位的概念，所以得记在本子上。

position属性用来制定一个元素在网页上的位置，一共有5种定位方式。

  • relative，相对默认位置（即static时的位置）进行偏移，即定位基点是元素的默认元素。
  • absolute，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定为基点就会变成整个网页的根元素html。注意，absolute定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占空间为零，周边元素不受影响。（脱离文档流）
3、 css选择器的优先级

!important > 行内样式 > @media（媒体查询） > #id > 类名、伪类、属性 > 元素、伪元素 > 继承 > 通配符

4、 简单总结一下常用的CSS单位
  1. px（像素），相对长度单位。像素px是相对于显示器屏幕分辨率而言的，是我们网页设计常用的单位，也是基本单位；
  2. rpx，微信小程序解决自适应屏幕尺寸的尺寸单位，可以根据屏幕宽度进行自适应，微信小程序规定屏幕的宽度为750rpx，例如宽度，相当于把屏幕宽度分为750份，1份就是1rpx；
  3. em，相对长度单位，相对父级元素的font-size，具有继承的特点。如果父级元素字体没设置大小，则会相对浏览器的默认字体大小，所以1em = 16px；
  4. rem，相对长度单位，CSS3新增的一个相对单位（root em，根em），相对的只是HTML根元素；
  5. %（百分比），相对长度单位，相对于父级元素；
  6. vw，css3新单位，view width的简写，是指可视窗口的宽度。1vw等于viewport宽度的1%；
  7. vh，css3新单位，view height的简写，是指可视窗口的高度。1vh等于viewport高的的1%；
  8. calc()，css3新单位，calc()语法非常简单，就像学加 （+）、减（-）、乘（*）、除（/） 一样，使用数学表达式来表示：width: calc(100% - 20px)；
  9. 还有一些其他的单位，例如pt（point，大约1/72寸）、vmax（vw和vh中比较大的值）、vmin（vw和vh中比较小的值）、in（寸）、cm（厘米）、mm（毫米） 等等。
5、用css属性word-spacing控制文本之间的空格距离

注意：文本中必须包含空格才起效

.elemt{
   word-spacing: 5px;
}
6、一行或者多行文本超出省略
.elemt{
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1; // 控制一行或这个多行省略，把1换成自己要想的行数
}

效果如下：

7、弹性布局flex下的margin-left: auto的神奇用法
//HTML
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

// CSS
ul{
  box-sizing: border-box;
  width: 92%;
  height: 110px;
  margin: 20px auto;
  border: 1px solid #dcdcdc;
  display: flex;
}

li{
  width: 13%;
  height: 100%;
  background-color: #da8484;
  border: 1px solid #eee;
  list-style: none;
}

li:last-child{
  margin-left: auto;
}

效果如下：

8、用:active写一个点击效果的按钮
.btn{
  width: 150px;
  height: 70px;
  line-height: 70px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(#3d7384,#7bbdbd);
  border: none;
  outline: none;
  box-shadow: 0 8px 0 #1e423d,0 8px 8px grey;
  margin-bottom: 20px;
  margin-left: 20px;
  border-radius: 12px;
  cursor: pointer;
}

.btn:active{
  box-shadow: 0 4px 0 #1e423d,0 4px 7px grey;
  transform: translate(0,2px);
}

效果如下：

9、简便实现内边框
.outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #ee6352;
  padding: 1.25em 2em;
  color: white;
  outline: 2px solid white;
  outline-offset: -10px;
}

效果如下：

10、巧用background-repeat

.content{
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/star.svg');
  background-size: 75px;
  padding-top: 100px;
  width: 70%;
  margin: 100px auto;
  resize: both;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

效果如下：

11、width的max-content/min-content，前者让内容尽可能地展开，后者让内容尽可能地收缩

效果如下：

12、巧用设计稿的SVG

问题说明：在还原设计稿过程中会经常遇到一些小的icon图标，虽然是可以通过第三方的库找资源，但是难免会找到100%相似的icon，而且还会浪费不必要的时间，所以在多次的实践中，总结了一下快速100%还原设计稿的icon图标。 步骤如下：

  1. 从PS中导出SVG文件，然后拖拽到浏览器中打开；
  2. F12打开控制台，就可以看到SVG的HTML代码，然后copy到自己代码；
  3. 最后，如果有带有中文值的属性去掉。 gif效果图：
13、解决iPhoneX安全区域(Safe Area)
// 加上meta标签的声明
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,viewport-fit=cover">

// 然后设置body高度为100vh
body{
  height: 100vh;
}
15、animate动画停留在最后一帧的属性
.elemt{
   animate-fill-mode: forwards;
}

如果想了解更多H5问题，请点击这里

如果想了解一些规则的css图案，请点击这里

avatar
文章
阅读
粉丝