1.实现三角形,四种颜色的三角形拼接成正方形

.trigle {      
   border-width: 50px;   
   border-radius: 10px; 
   border-top: 25px goldenrod solid;     
   border-bottom: 25px green solid;     
   border-left: 25px rgb(205, 63, 162) solid;     
   border-right: 25px plum solid;  
}

注:当只选择其中一条边框设置颜色其余三条设置成透明色transparent即可获得三角形

2.增加可点击区域

当按钮本身的区域的比较小,但又想扩大该按钮能够点击的区域时,可以给这个按钮设置透明边框,且边框的宽度决定了扩大的区域面积.

3.自定义属性

平时使用的w3c文档中定义好了的属性,比如background-color叫普通属性.自定义属性和普通属性一样,在本级和子元素中适用,但自定义属性定义和使用时稍有不同.比如,设定一个自定义属性theme-color:

定义自定义属性(定义的位置决定了它能够使用的范围,本级和子级)
:root {
    --theme-color: green;//必须以 --propertyName形式
}
使用自定义属性
.div {
    backgorund-color: var(--theme-color);
}

4.内容超长省略

a.单行显示

div {
   white-space: nowrap;   
   overflow: hidden; 
   text-overflow: ellipsis;
}

b.多行显示

div {
     overflow: hidden;   
     text-overflow: ellipsis; 
     -webkit-line-clamp: 2;  
     display: -webkit-box;   
     -webkit-box-orient: vertical;
}

c.元素块省略

div {
    display: -webkit-box;     
    -webkit-line-clamp: 1;     
    overflow: hidden;    
    text-overflow: ellipsis;   
   -webkit-box-orient: vertical;
}

span {
   display: inline-block;
}

5.水平垂直居中

元素水平垂直居中粗略的划分只有3种情况:

a.单行文本和其他line行内元素,以及inline-block行内块级元素

水平居中:

.parent {
    text-align: center;
}

垂直居中:

.child { //高和行高一样
    line-height: 100px;
    height: 100px;
}

b.固定宽高的块级元素

方法一: absolute + 负margin

.parent {
    position: relative;
}
.child {
    width: w;
    height: h;
    position: absolute;
    left: 50%;
    right: 50%;
    margin: -1/2宽度w 0 0 -1/2高度h;
}

方法二: absolute + margin auto

.parent {
    position: relative;
}
.child {
    width: w;
    height: h;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    right: 0;
    margin: auto;
}

方法三: absolute + calc

.parent {
    position: relative;
}
.child {
    width: w;
    height: h;
    position: absolute;
    left: calc(50% -1/2宽度w);
    right: calc(50% - 1/2高度h);
}

c.不固定宽高的块级元素

方法一: absolute + transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}

方法二: flex

.parent {
    display: flex;
    just-content: center;
    align-items: center;
}

方法三: grid

.parent {
    display: grid;
}
.child {
     just-self: center;
     align-self: center;}

方法四: line-height + vertical-align

.parent {
    line-height: h;
    height: h;
    text-align: center;
}
.child {
     display: inline-block;
     line-height: initial;
     vertical-align: middle;
}

方法五: table-cell

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child {
     display: inline-block;
}

6.@import和link的区别

@import用于告诉css引擎引入一个外部样式表.

link标签的ref属性值非常多,描述了外部文档与本html文档的关系,除了引入css样式表以外,还可以引入图片脚本等.

区别:

link 是 HTML 标签，除了能导入 CSS 外，还能导入别的资源，比如RSS、图片、脚本和字体等；而 @import 是 CSS 的语法，只能用来导入 CSS；
link 导入的样式会在页面加载时同时加载，@import 导入的样式需等页面加载完成后再加载；建议使用link方式引入css
link 没有兼容性问题，@import 不兼容 ie5 以下；
link 可以通过 JS 操作 DOM 动态引入样式表改变样式，而@import不可以。

7.一个区域两个部分,中间有间隔

// html
.box
    .box-a
    .box-b
// css
.box {
    background-color: gray;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
}
.box-a, .box-b {
    background-color: #fff;   
}
.box-a {
    margin-bottom: 20px;//两个元素之间有间隙
}

CSS基础