CSS(一)| 青训营笔记

65 阅读1分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

今天看了看CSS的课程,一些之前学css加上后边开发中有些用法着实少用或者不知道,所以把一些之前不知道的点记录一下

一些概念

image.png

颜色的少见表示

image.png

求值过程

image.png

image.png

image.png

三种方法使用css

不推荐第三种(感觉代码会比较多,修改起来也麻烦)

image.png

选择器

可以选中type="password"的input标签 image.png 还可以选中指定字符串开头或者结尾的属性有的标签 image.png 还有组合 image.png

font-family

image.png

font-size三种写法

居然可以用百分数 image.png

white-space

处理换行常用

image.png

属性都有初始值

image.png

布局

image.png

盒模型

content-box(默认) image.png border-box image.png

image.png

image.png 可以利用border实现三角形

image.png

块级元素和行内元素

image.png

image.png

image.png

flex布局

Flex 布局教程:语法篇 - 阮一峰的网络日志 image.png image.png

image.png

grid布局

CSS Grid 网格布局教程 - 阮一峰的网络日志 image.png

image.png

浮动&定位

有了flex浮动主要用来实现图片环绕文字了,浮动会让盒子“飘”,浮于文档流上

绝对定位一般在子绝父相中使用

image.png