《了解CSS》
这是我参与「第四届青训营 」笔记创作活动的第2天。
css有三种使用方式
- 外链
<link rel="stylesheet" href="./dist/css/外链.css"> - 嵌入（推荐用这种方法）
<div class="content">嵌入</div> - 内联
<div style="width: 100%; height: 100%;">内联</div>
css是如何工作的：
加载html --> 解析html -->加载css --> 解析css --> dom树 --> 展示页面
选择器类型：
-
通配选择器：
*{}可以修改body里面的所有内容 -
标签选择器：
div{};p{};h1{}等
直接将HTML元素中的标签作为选择器，可以是p、h1、d1、strong等HTML标签，在CSS中直接展现。
3.id选择器： #{};
通过标签的定义的id，进行选择
4.类选择器 ：.{};
通过标签定义的class，进行选择
5.属性选择器： .[]{};
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
6.伪类选择器：:{}
通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。 例如:link:visited、:hover、:activer、:focus、:first-child，:last-child
颜色 - RGB
rgb（red，greed，bule） #FFFFFF hsla（%，%，%） 关键字 alpha（透明度）
字体 font-family
使用web fonts字体 @font-face{ font-family:"Megrim";//字体名字 sec:url（https://……）//字体地址 format('wofff2');//格式化为css字体 }
font-size 字体大小
关键字 small medium large 长度 px em 百分数 % 相对于父元素字体大小
font-style 字体风格
normal，italic font-weight 字体粗细 100-700 normal，bold line-height 文字行高
选择器的特异度（比较选择器的特殊程度，决定哪个选择器优先显示）
id选择器为1 、 类选择器为2 、 标签选择器为2
继承
某些属性会自动继承其父元素的计算值，除非显式指定要一个值 可继承的元素：color fant-style 等 不可继承：width height 等 让不可继承元素获得继承：box-sizing（显式继承）
初始值
css中，每一个属性都有一个初始值 background-color 的初始值为transparent margin-left的初始值为0 可以使用initial的关键字显式重置为初始值 background-color：initial
布局相关技术
常规流（行级 块级 表格布局 flexbox grid布局） 浮动 绝对定位
盒子模型box
width 盒子内部宽度 height 盒子内部高度 padding 盒子内边距 margin 盒子外边距 border 盒子边框
flex box
display：flex 默认从左到右 主轴（水平）justify-content ：flex-start左对齐 fiex-end右对齐 center中间对齐 侧轴（垂直）align-items：flex-star上对齐 flex-end下对齐 center中间对齐 flex-grow伸展 flex-wrap换行
标题：「理解 CSS」第四届字节跳动青训营 - 前端专场
