学习笔记---CSS使用技巧

1、CSS重置

*{
     box-sizing:border-box;
     margin:0;
     padding:0
}

2、继承盒模型

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

3、flex避免margin问题

.flex-container{
  display:flex;
  justify-content:space-between; 
  /* 横向对齐方式
    flex-start : 居左
    flex-end : 居右
    center : 所有元素作为一个整体 居中
    space-between : 不同元素分开 居中
    space-around : 不同元素分开 居中（first之前、last之后）
    initial : 默认
    inherit : 跟随父元素
  */
}
.flex-container .item{              
  flex-basis:23%;
}

4、:not() 解决list边框问题

ul li:not(:last-child) {    
    border-right: 1px solid #666;  /* ul下的除了最后一个li元素  其他li元素都增加的样式 */
}
#first_ul li + li {
    border-left: 1px solid #f00;
}
#first_ul li:first-child ~li {
    border-left: 1px solid #f00;
}
/* 以上三个都可以满足，但not更具语义化也更容易理解 */

5、body增加line-height样式

body {
    line-height: 1.5; /* 渲染行高是 渲染字体大小的1.5倍 */
}

6、垂直居中任何元素

html, body {
    height: 100%;    
    margin: 0;
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex;    
    display: flex;  
}

7、“OWL选择器”

* + * {    
    margin-top: 1.5rem;  /* 跟在其他元素后面的元素，他们之间至少1.5rems的间距 */
}

8、一致的垂直结构

.intro > * {   
   margin-bottom: 1.25rem;  
}

9、针对同一元素中的内容换行样式不和谐的处理方法

.p {
  display: inline-block;
  width:100px;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

10、使用属性选择器显示空链接

<a href="https://www.baidu.com"></a>

a[href^="http"]:empty::before {    
    content: attr(href);  
}

11、等宽表格单元格

.calendar {    
    table-layout: fixed;  
}

12、样式‘默认’链接

a[href]:not([class]) {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

13、隐藏未静音的视/音频

video[autoplay]:not([muted]) {    
    display: none;  
}

14、表单元素设置字体大小

input[type="text"],  
input[type="number"],  
select,  
textarea {    
    font-size: 16px;  
}

15、CSS变量

:root {
  --main-color: #06c;
  --accent-color: #999;
}

h1, h2, h3 {
  color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
 color: var(--accent-color);
}