CSS笔记2

本地预览

打开gitbash
cd到目录
http-server -c-l 回车

image.png

知识点一

1. 高度是由什么决定的

• 内联元素
• 块级元素

2. line-box 是啥
3. box是啥
4. 宽度是由什么决定的
5. position的5个取值
6. z-index

今天内容

1. 大背景图
2. 大名片
3. 下载按钮
4. 进度条
5. 非线性布局

简历模板

简历模板
图片编辑软件 下载 paint.net 图片编辑软件
壁纸天堂/好看的图片wall haven

css核心知识

1. 一个元素高度是由什么决定的？
   由内容决定的！
   div块级元素 高度由其内部文档流元素 的高度 总和决定！！！！！！
   span内联元素 高度由字体及字体设计师决定的
2. 文档流: 文档内元素的流动方向。

• 内联元素从左往右流动。如果流动遇到阻碍，会换行继续流。
• 块级元素：每一个块都各占一行。所有块一次从上往下流。
  小细节：word-break: break all(全都可以打断); break word(只有在单词分割的地方可以打断。)

3. 脱离文档流

• 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

CSS Tricks

image.png

工具网站 iconfont.cn