web前端的随性笔记 CSS篇
CSS基础笔记
切图仔的那两句话（前言）
你好！ 这是我一个切图仔的回顾笔记，从自学到自我否定，在从否定的路上回归初心，慢慢从基础回顾的记录。感谢喜欢网页的你，还有哪些在前端道路上一路陪伴的伙伴。
CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”
ps：百度百科
CSS代码语法
h1{ color:blue }
选择器 : 标签 类 id
声明：{ }
属性和值分隔 “：”
选择器
子选择器
div>strong{ color: aqua; } “>” 逗号隔开
<div>这是一般内容<strong>加粗了</strong>没有加粗的</div>
后代选择器
div strong{ color: aqua; } “ ” 逗号隔开
<div>这是一般内容<strong>加粗了</strong>没有加粗的</div>
分组选择符
div,strong{ color: aqua; } “,” 逗号隔开
<div>这是一般内容<strong>加粗了</strong>没有加粗的</div>
伪类选择符
strong:hover { color: aqua; } 鼠标悬停显示效果
<div>这是一般内容<strong>加粗了</strong>没有加粗的</div>
权值 优先级
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100.
ps：
- div strong {color: aqua } 权值是1+1=2
- 继承也有权值虽然极低，
div strong {color: aqua }
div>strong {color: aqua } 这个起效果 - 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
- 最高优先级
div strong {color: aqua!important; }
块状与内联 ****很重要
块状元素 block
块级元素独占一行 可以设置宽高继承父类宽度
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>
内联元素 inline
和其他元素都在一行 不可以设置宽度
<a>、<span>、<br>、<i>、<em>、<strong>、<label>
内联块状元素 inline-block
内联的块状元素
<img>、<input>
css布局模型 ****很重要
流动模型（Flow）
默认的网页布局模式 内联从左到右 块状从上到下
浮动模型 (Float)
float:left; 就做左浮动 同理 float:right;能让块元素同一行，
ps：浮动要大小 要小于父类容器，
层模型（Layer）
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
ps：这块做项目理解就是不透彻，独立在做一个笔记。
来源：CSDN
作者：有猫饼的树
链接：https://blog.csdn.net/q85793683/article/details/103579554