1:从 html 元素继承 box-sizing
html {
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
2:使用 :not() 选择器来决定表单是否显示边框
//第一种方式
ul li {
float: left;
width: 50px;
border-right: 1px solid #666;
}
li:last-child {
border-right: none;
}
//第二种方式
li {
width: 50px;
height: 50px;
float: left;
margin-left: 30px
}
li:not(:last-child) {
border-right: 1px solid #666;
}
3:body 元素添加行高 ,精确计算元素标签设置,字体之后的高度。
body {
line-height: 1.5;
}
//测试元素 h1,h2,h3,h4,h5,h6 p ,div span st
//左侧设置字体大小 ,右侧对象该元素的高度
16px 24px
20px 30px
30px 45px
40px 60px
// 多出的部分减去设置字体大小,上下各占一半
4:display flex 水平 垂直居中
// 在要想垂直元素的父元素设置即可,注意兼容性
display: flex;
display: -webkit-flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
5:逗号分隔列表
li:not(:last-child)::after {
content: ',';
}
// 还没有真实用过,下次试试
6:使用负的 nth-child 可以选择 1 至 n 个元素。
li:nth-child(-n+3) {}
li:not(:nth-child(-n+3)) {}
7:相邻兄弟选择器 +
// 挺好用的
li + a {}
8 :使用 max-height 来建立纯 CSS 的滑块
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
9:table-layout: fixed 可以让每个格子保持等宽:
table {
table-layout: fixed;
}
10:利用 Flexbox 去除多余的外边距 (适合单行 ,并没有发现有多好 ,列之间的间隙总是均匀相等)
.list {
display: flex;
justify-content: space-between;
}
.list .item {
flex-basis: 23%;
}
11:利用属性选择器来选择空链接
a[href^="http"]:empty::before {
content: attr(href);
}
12:用 rem 来调整全局大小;用 em 来调整局部大小
rem // 是相对HTML元素设置大小
em // 相对父级元素的大小进行设置
13:隐藏没有静音、自动播放的影片
video[autoplay]:not([muted]) {
display: none;
}
// 还没有用过 有机会一定尝试一下
14 :为更好的移动体验,为表单元素设置字体大小
//当触发<select>的下拉列表时,为了避免表单元素在移动浏览器(ios Safari 等等)上的缩放,加上font-size:
input[type="text"],
input[type="number"],
select,
textarea {
font-size: 14px;
}