块级元素行内元素
- 块级可以包含块级和行内，行内只能包含文本和行内
- 块级占据一整行空间，行内占据自身宽度空间
- 宽高设置、内外边距的差异
常见块级元素
div h1 h2 h3 h4 h5 h6 p hr
from ul dl ol pre table
li dd dt tr td th
常见行内元素
em strong span a br img
button iput label select textarea
code script
CSS的宽高
注意：只对块级元素设置生效，对行内元素设置无效
CSS边框
- border-width:边框的粗细
- border-color:边框的颜色
- border-style:边框的类型（solid实线、dotted小圆点、dash小横线）
CSS边框上下左右
- border-top:上边框
- border-left:左边框
- border-right:右边框
- border-bottom:下边框
实战
使用边框做三角形
CSS边距
盒模型
- margin:外边距,有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器、不是自身）还可以是负值
- margin-top
- margin-right
- margin-bottom
- margin-left
注意顺序：上右下左
border:边框，围绕在内边距和内容外的边框
padding:内边框，有四个方向的值，可以合写，值可以是数值也可以是百分比（相对于父容器，不是自身）
- padding-top
- padding-right
- padding-bottom
- padding-left
注意顺序：上右下左
paddiing只有对行内左右是生效的，上下是无效的
- content:内容，显示文本和图像
居中问题
对于块级 元素设置margin:0 auto可以达到居中目的
去除页面的默认元素
*{
margin:0;
padding:0;
}
display
- 块级：block、list-item、table
- 行内：inline、inline-table、inline-block
font字体
- font-size:字体大小
- font-family:字体、宋体、微软雅黑
- font-weight:文字粗度，常用的就是默认值regular和粗体bold
- line-height:行高，可以用百分比、倍数或者固定尺寸
- 以上属性都可继承给子元素
字体的原理
使用浏览器打开页面时，浏览器会读取HTML文件进行解析渲染。当读到文字时会转换成对应的unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML里设置的font-family（如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face,则加载对应字体文件）对应字体的字体文件。找到文件后根据unicode码去查找绘制外形，找到后绘制到页面上。
文本
- text-align:文本对其方式left、center、right、justify
- text-indent:文案第一行缩进距离
- text-decoration:none、underline、line-through、overline
- color:颜色
- text-transform:改变文字大小写none、uppercase、lowercase、capitalize
- word-spacing:可以改变字（单词）之间的标准间隔
- letter-spacing:字母间隔修改的是字符或字母之间的间隔
单行文本溢出加_
.card>h3{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
单位
- px: 固定单位
- 百分比（宽高？文字大小？lline-height?position?)
- em:相对单位，相对于根元素(html)字体大小
- vw vh:相对单位，1vw为屏幕宽度的1%兼容性
其他
a链接设置颜色
a{
color:red;
text-decoration:none;
}列表去掉点
ul{
list-style:none;
}
也可以这样
li{
list-style:none;
}隐藏或透明
- opacity:0;透明度为0，整体
- visibility:hidden;和opacity:0类似
- display:none;消失，不占用位置
- background-color:rgba(0,0,0,0.2)只是背景透明
