1. 和相邻行内元素在一行上。
2. 高、宽无效、但水平方向的padding和margin可以设置。
3. 默认宽度就是它本身内容的宽度。
4. 行内无素只能容纳文本或其他行内元素。（a特殊，a里面可以放块级元素）
   注意：
5. 只有文字才能组成段落，因此p里面不能放块级无素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，它
   们都是文字类块级标签，里面不能放其他块级元素。
6. 链接里面不能再放链接

12.行内块元素（inline-block)
在行内元素中有几个特殊的标签——< img />< input />< td>可以对它们设置宽度和对齐属性。
行内块元素的特点：
1、和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。
2、默认宽度就是它本身内容的宽度。
3、高度，行高，外边距以及内边距都可以控制。

13.标签显示模式转换display
块转行内： display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;

14.CSS背景 （background）
background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动

参数：
repeat：背景图像在纵向和横向平铺（默认的）
no-repeat：背景图像不平铺
repeat-x：背景图像在横向平铺
repeat-y：背景图像在纵向平铺
设置背景图片埋，默认把图片在水平和垂直方向平铺以铺满整个元素。

15.背景位置（position)
例：background-position： center top;
例:background-position：15px top; 则15px是X坐标 ，top是Y坐标

16.背景附着
设置或检索背景图像是随对象内容滚动还是固定的
background-attachment： scroll / fixed

17背景简写
background: transparent url(image.jpg) repeat-y scroll center;

18.背景透明（ CSS3)
background: rgba(0,0,0,0.3);
background: rgba(255,255,255,0.3);

19.盒子模型（CSS重点）
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是盛装内容的容器。每个矩形都
由元素的内容、内边距（padding）、边框（border）和外边距(margin)组成。
网页布局的本质：把网页元素比如文字图片等等，放入盒子里面然后利用CSS摆放盒子的过程，就是网
页布局。
CSS三大模块：盒子模型，浮动，定位。

20盒子边框（border）
border: border-width/ border-style/ border-color

边框样式用于定义页面中边框的风格，常用属性值如下：
none：取消边框（默认值）
solid：边框单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
border-top（上边框） /border-bottom（下边框） / border-left （左边框） / border-right （右边
框）

21.行高的设置(line-height): 文字高度==行高，则是垂直居中

22表格的细线边框
在表格中，table是一个外边框，td是里面的网格线，会出现边框重叠，可用border-collapse: collapse;
来合并相邻边框。

border-collapse: collapse;

23.内边距（padding）
padding属性用于设置内边距，是指边框与内容之间的距离。
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

24.just color picker 颜色取值器

25.外边距（margin）
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
取值顺序跟内边距相同。

• {
        margin: 0; /*清除内外边距 */
        padding: 0;
    }

25外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足两个条件：
1、必须是块级元素
2、盒子必须指定了宽度（width）
然后就给左右外边距都设置为auto，就可使块级元素水平居中。

26.外边距合并
解决办法：
1、可以为父元素定义1像素的上边框或上内边距。在.father中写入：
border-top: 1px solid; 或者
padding-top: 1px;
但是这个方法有一个缺点，会撑大盒子，要减去相应的width的值
2、可以为父元素加overflow: hidden.（溢出隐藏）

26.圆角边框
border-radius: 50%;
border-radius: 10px 20px;
取值为50%则为圆形

27.盒子阴影
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
例： box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.4);

28.浮动（float）：是块级元素能在一行显示，脱离了标准流的限制。
float：加了浮动的元素盒子是浮起来的，漂浮在其他标准流盒子上面。加了浮动的盒子，不占位置，它
浮起来了，原来的位置漏给了标准流的盒子。有浮动的盒子需要和标准流的父级搭配使用，需注意，浮
动可以使元素显示模式体现为行内块特性。
float: left;

28.版心和布局
版心：960px/980px/990px/1190px/1210px
版心是指网页中主体内容所在区域，一般在浏览器窗口水平居中显示，常见的宽度值为 960px / 980px /
1190px / 1210px 等

28.1一列固定宽度且居中
28.2 两列左窄右宽型:左右型布局时要注意两盒子之间的浮动，盒子的宽度设置
28.3 通栏平均分布型

29.清除浮动
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题
选择器 { clear: 属性值；} clear 清除

属性值 描述
left 不允许左侧有浮动元素（清除左侧浮动的影响）
right 不允许右侧有浮动元素（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响

.clear {
      clear: both;
  }

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化较差。

30父级添加overflow属性方法
可以为父级添加：overflow: hidden;
别加错位置，给父盒子加，不是所有的浮动都需要清除，谁影响布局，清除谁。
.father {
          border: 1px solid blue;
          width: 300px;
          overflow: hidden;
      }

使用:after伪元素清除浮动
.clearfix:after { /* 正常浏览器清除浮动 /
          content:"";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }
      .clearfix { / zoom 1 就是ie6 清除浮动方式 *表示ie7以下的版本所识别 */
          *zoom: 1;
      }

三.CSS书写规范
1、选择器与 { 之间必须包含空格。
示例：.nav { }
2、属性名与之后的 ：之间不允许包含空格，：与属性值之间必须包含空格。
示例：font-size：12px;
选择器规范
当一个rule包含多个selector时，每个选择器声明必须独占一行。
选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
例：.nav li p { }
属性规范
属性定义必须另起一行，定义后必须以分号结尾。
行高的设置(line-height)
行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。做法就是文字的行高等于盒
子的高度。
.demo {
      font-size: 16px;
}

30.定位（position）
元素的定位属性主要包括定位模式和边偏移两部份

边偏移属性 描述
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底端偏移量，定义元素相对于其父元素下边线的距离
left 左端偏移量，定义元素相对于其父元素左边线的距离
right 右端偏移量，定义元素相对于其父元素右边线的距离

定位模式（定位的分类）
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器 { position: 属性值;}
position属性的常用值

值 描述
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位。

position: relative; /*相对定位以自己的左上角定位，top盒子移动后仍保留原来的位置
*/
      top: 100px;
      left: 100px;

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
若所有父元素都没有定位，以浏览器当前屏幕为准对齐

31.fiex

四.CSS三大特性
CSS层叠性:相同的样式声明取并集样式
CSS继承性:子元素继承父元素的样式
CSS优先级：经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题

总结优先级：

1. 使用!important声明的规则。
2. 内嵌在HTML元素的style属性里面的声明。
3. 使用了ID选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含了一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。
8. 继承的权重是0

!important > style > id选择器>类选择器>标签选择器>*通配符或继承