这是我参与「第四届青训营 」笔记创作活动的的第二天
今天是css专场
css的引入方式
1.外链
<link rel="stylesheet" href="./style.css">
2.嵌入
.amiss {
position: relative;
width: 100%;
height: 100%;
}
3.内联
<div class="amiss" style="color: #ff5777"></div>
css是如何工作的
选择器
可以使用多种方式选择元素：标签名，类名，id
通配选择器：*（表示所有元素）
css标签组合顺序
例如：
<style>
article p{
color: red;
/*表示article的后代p标签*/
}
article>p{
color: pink;
/*表示article的子代p标签*/
}
h2+p{
color: #42b983;
/*表示跟h2标签相邻的p标签*/
}
</style>
<body>
<article>
<h1>蒙德</h1>
<p>稻妻</p>
<section>
<h2>提瓦特大陆</h2>
<p>凯瑞雅</p>
<p>哈哈哈哈</p>
</section>
</article>
</body>
关于字体font-family
font-size
关键字：small、medium、large
长度
px、em、rem、vh
百分数
相对于父元素字体大小
font-weight：100~900 表示字体粗细大小
line-height：行高
表示两行文字的基准线高度
关于调试css
F12,右击点击等查看属性
深入css
关于选择器的优先级
对于选择器的优先级：
标签选择器、伪元素选择器：1
类选择权、伪类选择器、属性选择器：10
id选择器：100
内联样式：1000
这里可以注意下：！important声明的样式优先级最高
如果优先级相同，则最后出现的样式生效（就是优先级相同，后面的会覆盖前面的）
继承（inherit）得到的样式优先级最低：
会继承的属性（从父级继承）：color、font-size等
不可继承的属性：width、height，border等
初始值：当一个元素不可继承，并且没有设置属性就会用到初始值
css中，每个属性都有一个初始值，例如：
backgrou-color 的初始值为transparent
maring-left的初始值为0
布局的相关技术
常规流、浮动、绝对定位
盒模型：一切的基础
块级 VS 行级
块级（diaplay:block）：不和其他盒子并排摆放，适用于所有的盒子模型
行级（diaplay:inline）：和其他行级盒子放在一起或拆开成多行,不适用于所有的盒子模型
块级排版上下文（BFC）
某些容器会创建一个BFC：
根元素、浮动、绝对定位、inline-block、flex、overflow：hidden
排版规则：盒子从上到下摆放，BFC内盒子的margin不会与外面div的margin的合并、不会与浮动元素重叠
margin
指定元素的四个方向的外边距
margin：auto 水平居中，浏览器自动识别居中
关于margin外边距合并问题？
box-sizeing: content-box | border-box
标准盒子与怪异盒子的区别
content-box 表示内容区域宽高与内外边距是相互独立的
border-box 表示内容区域与内外边距是包含在一起的
Flex Box布局
justify-content :设置主轴的对齐方式
align-items：基线对齐方式
Flexibility：弹性
Grid布局
关注作者，后续持续更新~~~
