CSS 基本样式：宽高、边框、边距、display字体、文本、颜色
关键词：块级元素+行内元素、宽高、边框(制作三角形)、边距、display(CSS继承)、font、文本、颜色、单位、其他（a链接、小圆点）
注意：默认样式1em=16px
宽高-width、height 只对块级元素设置生效，对行内元素设置无效
边框-border 边框的几个元素 粗细、颜色、类型（实线、虚线、点线）
border-width 粗细
border-color 颜色
border-style style:solid 实线
style:dotted 点线
style:dashed 虚线
第一个：style：solid 实线
第二个：style：dotted 点线
第三个：style：dashed 虚线
第四个：组合
第五个：去掉一边
2、如何使用边框做三角形？
width:0; //中间的区域的宽和高 height:0;
//中间的区域的宽和高 border-top:30px solid transparent; border-left:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid blue;
第一个：
第二个：
第三个：transparent 透明
四、边距
1、盒模型
padding-内边距 四个方向的值，可以合写，值是数值、百分比（相对于父容器，不是自身）
padding-top padding-right padding-bottom padding-left
margin-外边距 四个方向的值，可以合写，值可以是数值、百分比（相对于父容器，不是自身），还可以是负值
外边距合并问题 行内元素中，使用margin和padding左右生效 块级元素居中 margin:0 auto清除元素默认样式的margin 和padding *{margin:0; padding:0;}
行内元素中，使用margin和padding左右生效，上下不生效，如图：
margin:0 auto 块级元素居中
对于块级元素设置 margin:0 auto（即：margin:0 auto 0 auto;）达到居中目的
清除元素默认样式的margin 和padding 由于页面元素在浏览器会有自身的默认样式
margin 和padding清除浏览器的固定样式，重新设置宽高
display-布局
1、块级和行内布局：
块级：block，list-item,table 行内：inline，inline-table，inline-block
display:inline
display:inline-block
2、CSS继承和不继承
继承：每一个父级元素的CSS属性值都可以被应用到它的子元素。可继承属性：font-size、font-family、color
C不继承：页面细节元素，border、padding、margin、background-color 、width、height
六、font（可继承）
font-size：字体大小 12px（较小）14px（正常）16px（浏览器默认）20px（标题大小）22、28、60px（大标题大小） font-family：字体 常用Arial font-weight：文字粗度 常用默认值：regular、bold line-height：行高（文字大小） 可以用百分比、倍数或者固定尺寸。 font-size*line-height ：垂直高度（行+文字占据的垂直空间）
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}
或者
p {
line-height: 1.5;
font-size: 14px;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: bold;
}
2、font-family
（1）字体原理
使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上
（3）font-family写法
在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8 等）不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示
宋体 | SimSun | \5B8B\4F53 （Unicode码）
黑体 | SimHei | \9ED1\4F53
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
？可打开控制台 escape('微软雅黑')，将 %u替换成 \
3、chrome最小字体
chrome 默认字体大小16px, 最小字体 12px
若需要小于12px的字体，可参考以下解决方案：Web-Developer/compatible-with-less-than-12px-fontsize.md at master · islittle/Web-Developer · GitHub
文本
1、类型
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：字母间隔修改的是字符或字母之间的间隔
图：
2、单行文本溢出
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
.card > h3{
white-space: nowrap; //规定段落中的文本不进行换行
overflow: hidden; //清除浮动
text-overflow: ellipsis;
}
颜色
1、单词： red、blue、pink、yellow、white、black
2、十六进制：
#ff0000 红色
#0000ff 蓝色
#008000 绿色
#000000（黑色）= #000
#ffffff（白色）= #fff
#eeeeee（淡灰色）= #eee
#cccccc（灰色）= #ccc
#666666（深灰色）= #666
#333333（深黑色）= #333
#f00（红色）
#0f0（绿色）
#00f（蓝色）
rgb: rgb(255,255,255)，rgb(0,255,0)
rgba: rgba(0,0,0,0.5) css3中涉及
九、单位
px 固定单位 em 长度单位（相对于当前元素的字体大小） rem 相对于根元素（html）字体大小，即1rem = font-size。移动端较常用。 vw vh 相对单位，1vw为屏幕宽度的1% 兼容性较差 百分比 涉及宽高？文字大小？line-height、position
1、px：固定单位
2、em：相对长度单位，相对于当前元素的字体大小。
3、rem：相对单位，相对于根元素（html）字体大小，即1rem = html设置的font-size。移动端较常用。
4、vw vh：相对单位，1vw为屏幕宽度的1% 兼容性较差
5、百分比：（涉及宽高？文字大小？line-height、position）
其他
a链接 text-decoration: none; ul/li(列表) list-style: none;
1、a链接设置颜色
当鼠标放置a链接，本身就会出现“手”指针的形状效果
a有默认颜色和样式，会覆盖继承的样式
a{
color：red；
text-decoration: none;
}
2、列表去掉点
/* 设定列表样式为：无 ,即没有顺序数字、圆点出现*/
ul{
list-style: none;
}
/*也可这样*/
li{
list-style: none;
}
如图：
CSS 基本样式：背景、隐藏&透明、inline-block、line-height
（一）CSS基本样式
关键词：背景、隐藏&透明、display:inline-block、（文本行高）line-height、
一、背景
属性 描述
background 简写属性，将背景属性设置在一个生命中
background-attachment背景图像是否固定或者随着页面的其余部分滚动
background-color 可设置元素的背景颜色
background-image 可把图像设置为背景
background-position 设置背景图像的起始位置（常用于图标在页面上的设置）
background-repeat 设置背景图像是否重复，以及如何重复
background-size 设置背景的大小（兼容性）（css3）
1、background-position：默认图片主要从左上角方向偏移
x y
x% y%
[top | center | bottom] [left | center | right]
2、background-repeat：背景图像是否重复或如何重复
no-repeat：背景图片在规定位置
repeat-x：图片横向重复
repeat-y：图片纵向重复
repeat：全部重复
3、background-size：背景图片大小的设置，用来拉伸、缩放
100px 100px
contain
cover
4、关于background相关元素的属性，
代码：
/*背景色和背景图片使用场景
场景1：两元素适用于页面大、背景图片小
场景2：背景图为.png格式的图片*/
background-color: #f00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
/*背景位置与页面窗口的宽、高成正相关*/
可缩写为一句：
background: #f00 url(background.gif) no-repeat fixed 0 0;
注：使用background-color和background-image，需要注意：
（1）将该页面撑开
（2）注意background-size使用
三、隐藏or透明
opacity: 0; 透明度为0，整体（透明度0-1，0.5为半透明）
visibility: hidden; 即元素看不见，但存在。 和opacity：0；类似
display：none； 消失，不占位置（页面上渲染的其他元素都察觉不到）
background-color：rgba（0，0，0，0.2） 只是背景色透明
四、inline-block
1、定义：既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可设置宽高，内外边距）
注：display:block;的布局下，块级元素的宽度是一个可忽视的问题
2、缝隙问题：如图，
3、行内元素对齐问题：如图，
在inline-block的布局下，可以看成文字对齐。默认情况下，行内元素对齐是以里面内容的底部为基线对齐（至少两个元素进行对比），其他则设置vertical-align：top（bottom、middle等）进行基线对齐（在表格中使用尤为明显）
五、line-height
1、定义：用于设置单行文本的行高。
2、几个问题：
（1）了解line-height和margin、padding在使用上的一个区别
line-height: 2，所占据的行高是本身文字高度的2倍。margin是外边距，padding则是内边距
（2）line-height的用法，数字和百分比的区别
line-height：2 VS line-height： 100%
line-height具有继承性。
line-height: 2，所占据的行高是本身文字高度的2倍。想要页面每个元素都拥有几倍的行高，则设置为数字。
line-height: 200% ，是其父元素文字高度的2倍。（注：百分比有一定的相对性，如本身无设置和设置百分比，便可看出差别）
3、height=line-heihgt
设置垂直居中单行文本，如图：
补充
一、让一个元素"看不见"有几种方式？有什么区别?
1、display: none;
给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。
2、visibility: hidden;
给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。
3、opacity: 0;
给元素设置opacity: 0;后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。
4、设置盒模型属性为0
将height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;来隐藏子元素。
.box1 {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
overflow: hidden;
}
5、设置元素绝对定位与top、right、bottom、left等将元素移出屏幕
如：
.box1 {
position: absolute;
left: 100%;
}
或:
.box1 {
position: absolute;
top: 100px;
}
6、设置元素的绝对定位与z-index，将z-index设置成尽量小的负数。
但z-index是相对而言的 ，用z-index就要设置其他元素的z-index值，且如果元素本身占据空间很大就不一定会被z-index值比它大的元素完全覆盖，所以不推荐这种方法。 如：
.box1 {
position: absolute;
z-index: -100;
}
.box2 {
position: absolute;
z-index: 1;
}
inline-block 元素对不齐 ——无解 —— 用 flex 或 float
inline-block 有空隙 ——用 flex 或 float