一、块级元素、行内元素

• 块级（block-level）；行内（内联inline-level）
• 块级可以包含块级和行内；行内只能包含文本和行内
• 块级占据一整行空间；行内占据自身宽度空间，
• 宽高设置、内外边距的差异

1、block-level

div h1 h2 h3 h4 h5 h6 p hr（线）
form ul dl ol pre table 
li dd dt tr td th 

2、inline-level

em strong span a br img
button input label select textarea 
code script

如图：

image

二、宽高-width、height

只对块级元素设置生效，对行内元素设置无效

image

三、边框-border

1、涉及边框的几个元素

粗细、颜色、类型（实线、虚线、点线）
border-width、border-color、border-style

/*简写：*/
p,span{
 border:2px blue solid;
  }

如图：
第一个：

image

第二个：

image

第三个：

image

第四个：

image

第五个：

image

2、如何使用边框做三角形？

image

第一个：

image

第二个：

image

第三个：

image

四、边距

1、盒模型

image

2、padding-内边距

代表内边距，有四个方向的值，可以合写，值可以是数值、百分比（相对于父容器，不是自身）

padding-top padding-right padding-bottom padding-left

image

3、margin-外边距

代表外边距，有四个方向的值，可以合写，值可以是数值、百分比（相对于父容器，不是自身），还可以是负值
外边距合并问题
在行内元素中，使用margin和padding左右生效，上下不生效，如图：

image

margin-top、 margin-right、 margin-bottom 、 margin-left

3.1 margin:0 auto 块级元素居中

.box{
/* margin: 0 auto; 实际上是下面两个起了作用 */
margin-left:auto;
margin-right:auto;
}

对于块级元素设置margin:0 auto（即：margin:0 auto 0 auto;）可以达到居中目的

image image

4、* 去除元素默认样式的margin 和padding

*{
 margin:0;
 padding:0;
}

由于页面元素在浏览器会有自身的默认样式：如图:

image

用于清除浏览器的固定样式，重新设置宽高,如图可加：

image

注：默认样式1em=16px

五、display

1、块级和行内的display：

• 块级：block,list-item,table
• 行内：inline，inline-table，inline-block
  注：一个元素在默认情况下是一个
  display：inline

display'
|Value:   | inline | block | list-item | inline-block | table | inline-t|able | table-row | table-cell | none | inherit
|Initial:  |  inline
|Applies to:  | all elements
|Inherited:  |  no

注： **
display：inline-block的布局，有相关资料可以了解一下：CSS之使用display:inline-block来布局

2、CSS继承和不继承

继承：
每一个元素都是文档树的一部分，每个元素都有其对应的父级元素，每一个父级元素的CSS属性值都可以被应用到它的子元素中。可继承属性一般为：font-size、font-family、color

反之，CSS不继承通常为页面的细节元素，如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: 垂直高度（行+文字占据的垂直空间）
  注： 以上属性为可继承给子元素

1、如何使用：

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 码去查找绘制外形，找到后绘制到页面上

（2）了解
这里有一篇老师写的关于字体方面的实现原理，以前学过一点设计看了，以后如何配合设计师进行字体需求上还是蛮受用的，可以看看：
若愚：「每日一题」聊一聊字体图标的实现原理

（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的字体，可参考以下解决方案：islittle/Web-Developer

七、文本

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：字母间隔修改的是字符或字母之间的间隔
  演示如图所示：
  image

2、几种情况：

（1）行内元素居中，如：

<style> 
   .box{
    text-align: center;
       }
</style> 

<div class="box"> 
    <img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/6673909a-098c-4202-8b80-f4aad64e0262.png"> 
</div>

（2）display：inline-block元素居中，如：

<div style="text-align: center;"> 
      <img  style="margin: 0 auto" src="XXX.png"> 
</div>

（3）单行文本溢出，关键代码如：

.card > h3{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

如图：

image

八、颜色

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中涉及）

九、单位

1、px：固定单位

2、em：相对长度单位，相对于当前元素的字体大小。如图：

image

3、rem：相对单位，相对于根元素（html）字体大小，即1rem = html设置的font-size，移动端较常用。

关于rem的好处我查了资料这个我比较理解，分享出来：
css3的字体大小单位[rem]到底好在哪？

4、vw vh：相对单位，1vw为屏幕宽度的1% 兼容性较差

image

5、百分比：（涉及宽高？文字大小？line-height、position）

十、其他

1、a链接设置颜色

注：

• 当鼠标放置a链接，本身就会出现“手”指针的形状效果
• a有默认颜色和样式，会覆盖继承的样式

a{
color：red；
text-decoration: none;
}

image

2、列表去掉点

/* 设定列表样式为：无 ,即没有顺序数字、圆点出现*/

ul{
  list-style: none;
}

/也可这样/

li{
  list-style: none;
}

如图：

image