本地预览
打开gitbash
cd到目录
http-server -c-l 回车
image.png
知识点一
- 高度是由什么决定的
- 内联元素
- 块级元素
- line-box 是啥
- box是啥
- 宽度是由什么决定的
- position的5个取值
- z-index
今天内容
- 大背景图
- 大名片
- 下载按钮
- 进度条
- 非线性布局
简历模板
简历模板
图片编辑软件 下载 paint.net 图片编辑软件
壁纸天堂/好看的图片wall haven
css核心知识
- 一个元素高度是由什么决定的？
由内容决定的！
div块级元素 高度由其内部文档流元素 的高度 总和决定！！！！！！
span内联元素 高度由字体及字体设计师决定的 - 文档流: 文档内元素的流动方向。
- 内联元素从左往右流动。如果流动遇到阻碍，会换行继续流。
- 块级元素：每一个块都各占一行。所有块一次从上往下流。
小细节：word-break: break all(全都可以打断); break word(只有在单词分割的地方可以打断。)
- 脱离文档流
- position: fixed;
如何用css画一个三角形
1.梯形
div{
border: 10px solid red;
width: 10px;
height: 10px;
border-top-color: black;
border-right-color: blue;
border-left-color: green;
}
image.png
div{
border: 10px solid red;
width: 0px;
height: 10px;
border-top-color: black;
border-right-color: blue;
border-left-color: green;
}
途中红色区域为三角形
div{
border: 10px solid red;
width: 0px;
height: 0px;
border-top-color: black;
border-right-color: blue;
border-left-color: green;
}
四个三角形
div{
border: 10px solid red;
width: 0px;
height: 0px;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
变成一个三角形
div{
border: 10px solid red;
width: 0px;
height: 0px;
border-top-color: black;
border-right-color: blue;
border-left-color: green;
border-top-width: 0px;
}
image.png
如何取左边绿色部分的三角形即下图颜色为#E6686A？
div{
border: 10px solid transparent;
width: 0px;
height: 0px;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: #E6686A;
border-top-width: 0px;
}
image.png
div{
border: 100px solid transparent;
width: 0px;
border-left-color: #E6686A;
border-top-width: 0px;
}
image.png
css-tricks
image.png
