CSS规则由两部分组成：选择器+声明 声明包括 属性：值
CSS书写位置
1 内嵌式，
顾名思义，内嵌式就是直接嵌在html文件中。
就是在标签对中，写标签对，然后在标签对中写CSS语句。
2 外链式
- 所谓外链式，就是把CSS代码保存在单独的.css文件中，然后用标签引入这个文件。
<link rel =''stylesheet'' href=''css/css.css''>
外链式的优点：多个HTML文件，可以共用一个CSS样式表文件。 在.css文件中写css代码，就不需要写style标签了，直接写css语句就行了。
3 导入式
注意：页⾯被加载时，link 会同时被加载，⽽ @import 引⽤的 CSS 会等到页⾯被加载完再加载
<style> @import url(css/style.css)</style>
4 行内式
直接写在标签上
<h1 style="color: red;">自学之路CSS</h1>
常用选择器
1 标签选择器，
也称为元素选择器
h1{ color:red }
所有html标签都可以看成盒子，有 border 边框 padding 内边距，height高度
width宽度
2 id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义
<div id='box'> </div>
3 class选择器
.box{width: 200px; height: 200px; background-color: black; color: white;}<div class='box'> </div>
4 通配符选择器
在css中，通配符选择器使用“ * ”定义，它表示所有的元素。
它的书写规范是
* { 属性: 属性值; }
5 复合选择器
在css中，复合选择器是建立在基础选择器上，对基本选择器进行组合形成的。
- 复合选择器可以更准确，更有效地选择目标元素。
- 复合选择器由两个或多个基础选择器通过不同的方式结合
6 并集选择器
并集选择器可以选择多组标签，将他们同时定义成相同的样式。
书写规范为
元素1,元素2 {
样式声明
}
- 注意各个元素之间需用 , 隔开，但最后一个元素后不需要加逗号。
7 链接伪类选择器
伪类是用户赋予的，像点击，悬浮。。。。
a:link, 初始状态
a:hover，鼠标划过状态
a:visited,被点击后的状态
a: active,鼠标按下去时的状态
注意书写的顺序
a:link {
color: red;
/* font-size: 50px; */
}
伪元素 无中生有
:：before
::after
a::before {
content: "☆";
}
a::after {
content: "❤";
}
CSS display属性
块级元素
- 1.对于块级元素display默认值为：block；
- 2.块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
- 3.常用的块状元素有
：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<form>； - 4.块级元素特点：
- 5.每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;
- 6.元素的高度、宽度、行高以及顶和底边距都可设置;
- 7.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度;
行内元素
- 1.对于行内元素display默认值为：inline；
- 2.行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、外边距等属性，是无效的；
- 3.常用的行内元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>； - 4.行内元素特点：
- 5.和其他行内元素在同一行上;
- 6.元素的高度、宽度及顶部和底部外边距不可设置;
- 7.元素的宽度就是它包含的文字或图片的宽度，手动设置无效;
行内块元素
将元素设置为inline-block时，被隐藏的元素会变为行内块元素并显示； inline-block既具有block的宽高特性又具有inline的同行元素特性。 通过inline-block结合text-align: justify 还可以实现固定宽高的列表两端对齐布局； 转换：
display:block转为块级元素
display:inline转为行内元素
display:inline-block转为行内块级元素
元素隐藏；display:none
float浮动
-
概念：最本质功能实现 并排，初衷实现文字环绕图片效果
-
使用要点：要浮动，并排的盒子都要浮动
-
父盒子要有足够的宽度，否自盒子会掉出去，
-
垂直的盒子不要设置浮动，只有并排的盒子才要设置浮动，
-
大盒子带着小盒子跑，浮动没有继承，即是大盒子内部可以继续浮动，
-
不要怕使用大盒子div
-
清除浮动带来的影响 的知识；
-
基本方法：1浮动元素底部插入 clear :both;
-
2父元素BFC，设置overflow:hidden( IE8+; 高级浏览器特有的概念)；或haslayout(IE6 / IE7)
-
float使元素的display block化，即砌砖头，固定尺寸，加浮动属性；容易出问题，
定位
相对定位
盒子可以相对原来的位置进行调整，老家留坑，
新位置不过是影子
如
position: retivle;
top:10px;
left:10px
绝对定位
盒子以坐标进行位置精准描述，拥有自己绝对的位置
绝对定位的元素脱离标准文档流，对其他元素不会产生干扰，而是对他们进行压盖
如
position:absolute;
堆叠顺序 z-index属性 没有单位的正整数，数值大的压盖数值小的
绝对定位用来制作 压盖 遮罩效果；结合css精灵图使用；结合js实现 动画效果
固定定位：position:fixed
以页面为参考点，应用场景 返回顶部；楼层导航等等，脱离标准文档流
边框 border属性
border属性，三个要素
border:1px solid red 分别是 线宽度，线型，线颜色
线型，实线solid，虚线dashed，点状线dotted 等等
上下左右 border-top: ;等等
border radius:50% 圆形
值若为宽度的一半为胶囊型
盒子阴影
box-shadow :10px 20px 30px ragb()
分别表示 x轴 y轴 模糊量 颜色
内阴影 在值的前面加 inset
过渡属性和旋转
transition为一个元素在不同样式之间变化自动添加 补间动画
如，一个正方形变成一个圆形中间的变化
transition属性四个要素
transition:width 1s linear 0s;
四个要素分别是 ：属性；动画总时长带单位s 仅有这个单位s；
变化速度的曲线；延迟时间。
所有数值类型的属性都可以参与过渡，如，width,
height,left,top ,border-radius,背景颜色和文字颜色都可以被过渡
所有的变形含2d3d都能过渡
如果所有属性都要变化 用all
/* transform: rotate(45deg);旋转变形 45度 */
/* transform-origin: 0 0;自定义设置变形的原点，这里表示以左上角为原点，结合 transform使用*/
/* transform: scale(3);缩放变形，括号里面是倍数 */
/* transform: skew(10deg,20deg);斜切变形 */
/* transform: translate(100px,200px);位移变形，这里表示向右移动100px;向下移动200px; 与相对定位有点相似 */
margin外边距
-
margin是 盒子与盒子之间的距离
-
标准流中，容易出现外边距合并，导致父盒子移动（倒塌）
-
解决方法：给父盒子添加边框，或给父盒子添加内边距，
-
或给父盒子添加overflow:hidden
padding 内边距
-
padding是盒子的内边距， 即是盒子 到文字的距离；有上下左右四个方向指定填充
-
水平paddiin值影响尺寸，垂直padding值不影响尺寸，但会影响背景颜色（占据空间）
-
应用场景：高度可控的分隔线
-
paddiing不支持负值，可百分比，是相对于宽度计算，
-
遇到装文字 的字数不一样的，不设置宽度，统一给一个padding,会撑开盒子；
-
不会撑开盒子的情况：没有设置宽度/高度
