part1.CSS初识
--学习平台：https://www.imooc.com/learn/9
一、元素分类
1、块状元素：eg.<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<address>、<blockquote>、<form>
特点：独占一行，默认元素宽度与父容器的宽度保持一致；高、宽、行高级顶和底边距都可设置
如：p{display:inline;} 使得块状元素变为内联元素
2、内联元素：eg.<a>、<span>、<br>、<i>、<em>、<strong>、<lable>、<q>、<var>、<cite>、<code>
如：a{display:block;} 使得内联元素变为块状元素
特点：与其他元素同在一行，默认元素宽度为其包含的文字或图片的宽度；高、宽、行高级顶和底边距都不可设置
3、内联块状元素：eg.<img>、<input>
display:inline-block 使得元素变为内联块状元素，
特点：与其他元素同在一行；高、宽、行高级顶和底边距都可设置
PS：想要隐藏元素，设置display:none
二、盒子模型
1、原理：盒子= 元素内容+填充（padding-top/right/bottom/left）+边框（border-top/right/bottom/left）+边界（margin-top/right/bottom/left）
2、元素实际的宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界；高度同理
3、设置背景色：background-color : ***
设置边框（border）：
1）border-style: dashed （虚线）| dotted （点线）| solid （实线）
2）border-width:**px （还可设置为：thin | medium | think ，但不常用）
3) border-color:****（十六进制颜色）
4）设置边框为圆角：border-radis:*px
三、布局模型
1、3种基本的布局模型：
1）流动模型（flow）
默认的网页布局模式；特点：块状元素会在所处的包含元素内自上而下地按顺序垂直延伸发布
2）浮动模型（float）
使得元素一行显示，float:left / right
3)层模型
使得图层能够精确定位操作；
形式：绝对定位（position:absolute）， 相对单位（position:relative）， 固定定位（position:fixed）
2）浮动模型（Float）
3）层末模型（Layer）
四、弹性盒模型
1、设置display:flex属性 --只能是整数，表示占比多少
--> 特点：可以把块级元素在已排显示；flex需要添加在父元素上，改变子元素的排队序列；默认从左到右依次排列，且和父元素左边没有间隙
设置横轴：justify-content:flex-left | flex-end | flex-center | space-between | space-arround ;
分别是：交叉轴起点对齐 / 右对齐 / 居中 / 两端对齐，项目之间的间隔相等 /每个项目两侧的距离相等
设置竖轴：align-items:flex-left | flex-right | flex-end | center | baseline | stretch ;
分别是：左对齐 /交叉轴的终点对齐 /中点对齐 /项目的第一行文字的基线对齐 / 未设置高度或设为auto，占满整个容器的高度
五、样式设置技巧
1、水平居中设置：
行内元素：text-align:center; 实现文本、图片等行内元素的水平居中
定宽块状元素：margin:auto; 实现宽度为固定值的块状元素的水平居中