CSS笔记2

本地预览

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

image.png

知识点一

  1. 高度是由什么决定的
  • 内联元素
  • 块级元素
  1. line-box 是啥
  2. box是啥
  3. 宽度是由什么决定的
  4. position的5个取值
  5. z-index

今天内容

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

简历模板

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

css核心知识

  1. 一个元素高度是由什么决定的?
    由内容决定的!
    div块级元素 高度由其内部文档流元素 的高度 总和决定!!!!!!
    span内联元素 高度由字体及字体设计师决定的
  2. 文档流: 文档内元素的流动方向。
  • 内联元素从左往右流动。如果流动遇到阻碍,会换行继续流。
  • 块级元素:每一个块都各占一行。所有块一次从上往下流。
    小细节:word-break: break all(全都可以打断); break word(只有在单词分割的地方可以打断。)
  1. 脱离文档流
  • 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • CSS格式化排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性,如下: 不...
    wq04200阅读 409评论 0 1
  • 盒子模型: padding为1个值代表上下左右四个值相同; padding为2个值:第一个代表上下内边距,第二...
    前端森林阅读 191评论 0 0
  • web端弹性盒子知识点 弹性容器属性 flex-direction 值:row | row-reverse | c...
    hammercui阅读 322评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,806评论 0 2