CSS基础知识 |青训营笔记

这是我参与[第四届青训营] 笔记创作活动的第1天

代码样例：

h1{
   color:white;  属性值
   font_size:14px;  
}    //规则

使用的三种方式

内联样式
嵌入式写法
外联式写法

代码的工作原理

graph TD
加载HTML -->解析HTML-->加载css-->解析css-->创建DMO树-->展示页面
解析HTML-->创建DMO树

浏览器打开页面的时候，会加载页面的HTML进行渲染，解析出HTML的DOM树，同时加载出css并且解析css，然后浏览器会把DOM树的每个节点解析出来，再将对应的css样式渲染到DOM树里面，最终展示设置好的效果

选择器的类型

统配选择器
属性选择器用[disable] ^表示以什么开头 $表示以什么结尾
标签选择器
类选择器 5.伪类选择器

优先级的高低为：ID选择器>类选择器>标签选择器>统配选择器>属性选择器

伪类选择器语法

标题	语法	标题	说明
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B,如果它是A的子元素	section>p
兄弟选择器	A~B	选中B,如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B,如果它紧跟在A后面	h2+p

同类的选择器可选择在一起
选择器的特异度越高，优先级越高
initial可以将属性设置为初始值

flex box

display:flex;

flex的一些属性

flex-direction 主轴方向
flex-wrap 主轴一行满了换行
flex-flow 1和2的组合
justify-content 主轴元素对齐方式
align-items 交叉轴元素对齐方式//单行
align-content 交叉轴行对齐方式//多行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>