CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）

1.CSS的元素显示模式

1.1 什么是元素显示模式

就是元素（标签）以什么方式显示，比如

自己占一行，比如一行可以放多个。
HTML元素一般分为块元素和行内元素两种类型。

1.2 块元素

常见块元素有

~

、

、

（最典型）、

、
、
1. 等。
   特点：
   • 霸道，自己独占一行。
   • 高度、宽度、外边距以及内边距都可以控制
   • 宽度默认是容器（父级宽度）的100%
   • 是一盒容器及盒子，里面可以放行内或者块级元素
     （之后在写标签时发现具有以上特点，则一定是块元素）
     注意：
   1. 文字类的元素内不能使用块级元素

   2. 标签主要用于存放文字，因此

      里面不能放块级元素，特别是不能放
   3. 同理，

      ~

      等都是文字类块级标签，里面也不能放其他块级元素

   1.3 行内元素

   常见行内元素有、、、、、、、、、（最典型）等，也可以将行内元素称为内联元素。
   特点：

   • 相邻行内元素在一行上，一行可以显示多个。
   • 高、宽直接设置是无效的
   • 默认宽度就是它本身内容的宽度
   • 行内元素只能容纳文本或其他行内元素
     注意：
   1. 链接里面不能再放链接
   2. 特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

   1.4 行内块元素

   、、同时具有块元素和行内元素特点，称为行内块元素
   特点：

   • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
   • 默认宽度就是它本身内容的宽度（行内元素特点）
   • 高度、行高、外边距以及内边距都可以孔子（块级元素特点）
   • 用表单元素举例：

   <input type="text">
   <input type="text">
   

   1.5 元素显示模式总结

   元素模式	元素排列	设置样式	默认宽度	包含
   块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
   行内元素	一行可以放多个行内元素	不可以直接设置宽度高度，可以间接设置（转换模式）	它本身内容的宽度	容纳文本或其他行内元素
   行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

   1.6 元素显示模式转换

   特殊情况下需要元素模式的转换，即一个模式的元素需要另一种模式的特性，比如想要增加链接的触发范围

   • 转换为块元素：display:block;(使用最多)
   • 转换为行内元素：display:inline;
   • 转换为行内块：display:inline-block;

   2.盒子模型：网页布局的基础

   网页布局的核心：利用CSS摆盒子
   所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器，CSS盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容
   

   2.1 外边界/距（margin）

   盒子的边框与包含该盒子容器之间的距离
   margin:【上、右、下、左】

   属性	作用
   margin-top	上外边界
   margin-right	右边界
   margin-bottom	下边界
   magin-left	左边界

   2.1.1 外边距典型应用

   外边距可以让块级盒子水平居中，但是必须满足两个条件：

   1. 盒子必须指定了宽度（width）。
   2. 盒子左右的外边距都设置为 auto 。
      例：

   .header{ width:960px; margin:0 auto;}
   

   常见的写法，以下三种都可以：

   • margin-left: auto; margin-right: auto;
   • margin: auto;
   • margin: 0 auto;
     注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

   2.2 填充/内边距（padding）

   内补白（内边距），盒子中的内容与盒子边框之间的距离
   padding：【上、右、下、左】

   属性	作用
   padding-top	上边距
   padding-right	右边距
   padding-bottom	下边距
   padding-left	左边距

   • 当给盒子指定 padding 值之后，发生了 2 件事情：
   1. 内容和边框有了距离，添加了内边距。
   2. padding影响了盒子实际大小。
      也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
   • 解决方案：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

   2.3 边框（border)

   2.3.1 盒子的边框线

   border（综合设置边框）：边框的宽度 边框的样式 边框的颜色
   语法：

   border : border-width || border-style || border-color
   

   边框样式 border-style 可以设置如下值：

   • none：没有边框即忽略所有边框的宽度（默认值）
   • solid：边框为单实线(最为常用的)
   • dashed：边框为虚线
   • dotted：边框为点线
     边框简写：

   border: 1px solid red; 没有顺序
   

   边框分开写法：

   border-top: 1px solid red;   /* 只设定上边框， 其余同理 */
   

   属性	作用
   border-width	定义边框粗细、宽度【上、右、下、左】
   border-style	边框的样式【上、右、下、左】
   border-color	边框颜色【上、右、下、左】
   border-radius	（圆角边框）：水平半径参数/垂直半径参数

   2.3.2 表格的细线边框

   border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
   语法：

   border-collapse:collapse;
   

   • collapse 单词是合并的意思
   • border-collapse: collapse; 表示相邻边框合并在一起

   2.4 清除页面元素的默认内外边距

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

   ‘*’：通配符，代表所有元素
   注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

   3. 背景

   3.1 背景颜色

   background-color 属性定义了元素的背景颜色。
   一般情况下元素背景颜色默认值是 transparent（透明），也可以手动指定背景颜色为透明色。

   background-color:transparent;
   

   3.2 背景图片

   background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

   background-image : none | url (url)
   

   参数值	作用
   none	无背景图（默认的）
   url	使用绝对或相对地址指定背景图像

   注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

   3.3 背景平铺

   如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

   background-repeat: repeat | no-repeat | repeat-x | repeat-y
   

   参数值	作用
   repeat	背景图像在纵向和横向上平铺（默认）
   no-repeat	不平铺
   repeat-x	在横向上平铺
   repeat-y	在纵向上平铺

   3.4 背景图片位置

   利用 background-position 属性可以改变图片在背景中的位置。

   background-position: x y;
   

   参数代表的意思是：x 坐标和 y 坐标。 可以使用方位名词或者精确单位

   参数值	说明
   length	百分数 由浮点数字和单位标识符组成的长度值
   position	top cenyer bottom left center right 方位名词

   1. 参数是方位名词
   • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
   • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
   2. 参数是精确单位
   • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
   • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
   3. 参数是混合单位
   • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

   3.5 背景图像固定（背景附着）

   background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
   background-attachment 后期可以制作视差滚动的效果。

   background-attachment : scroll | fixed
   

   参数	作用
   scroll	背景图像是随对象内容滚动
   fixed	背景图像固定

   3.6 背景复合写法

   background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
   例：

   background: transparent url(image.jpg) repeat-y fixed top ;
   

   3.7 背景总结

   属性	作用	值
   background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
   background-image	背景图片	url(图片路径)
   background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
   background-position	背景位置	length/position 分别是x 和y 坐标
   background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
   背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景外置；
   背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3); 后面必须是四个值