css初级入门----篇二（书接上回）

11、标签显示模式（display）

（1）块级元素（block-level）每个块元素都会独自占据一行或多行，可对其设置宽高对齐等

属性，用于网页布局和网页结构的搭建

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，最经典的是<div>

特点：重新一行开始、高度行高外内边距都可以控制、宽默认为容器100%、可容纳内联元素和其他块元素

（2）行内元素（inline-level）又称内联元素，不占有 独立的区域，仅靠自身字体大小和

图像尺寸来支撑结构，一般不可设置宽高对齐等属性，常用于控制文本样式

          常见行内元素<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、经典<span>

特点：和相邻元素在一行、宽高无效但水平方向的padding内边距和margin外边距可以设置，垂直方向的无效、本身内容宽度即默认宽度、行内元素只能容纳文本或者其他行内元素<a>标签特殊

注：文字类块级标签里面不能放其他块级元素、链接里不能再放链接

（3）行内块元素（inline-block）有<img>、<input>、<td>可以对其设置宽高和对齐属性

          特点：和相邻行内块在一行，之间存在空白缝隙、本身内容宽度即默认宽度、

高度行高外边距都可控制

12、CSS复合选择器，由两个或者多个基础选择器通过不同的方式组合而成的，为了选择更     精准的目标元素标签

（1）交集选择器，由两个选择器构成，第一个为标签选择器第二个为class选择器，两个选择器之间不能有空格

（2）并集选择器（CSS选择器分组）各个选择器通过逗号连接，任何形式的选择器都可作为它的一部分，如果样式相同可以使用其为它们进行统一样式的定义

（3）后代选择器，又称包含选择器，用来选择元素或元素组的后代，写法是把外层标签写前面，内层标签写后面，中间使用空格隔开。当标签发生嵌套时，外面的就是长辈

（4）子元素选择器，只能选择作为某元素子元素的元素，写法把父级标签写前子标签写后，之间用>连接，符号左右都保留一个空格。子标签只包含亲儿子

（5）属性选择器，多个属性使用空格隔开，值的元素可以使用引号进行包裹

E[attr]		存在attr属性即可
E[attr=val]		属性值完全等于val
E[attr=val]		属性值里包含val字符并且在“任意”位置
E[attr^=val]		属性值里包含val字符并且在“开始”位置
E[attr$=val]		属性值里包含val字符并且在“结束”位置

（6）伪元素选择器  ":" 与 "::" 区别在于区分伪类和伪元素

 E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

 E::first-line 文本第一行；

 E::selection 可改变选中文本的样式；

注：E::before和E::after在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用

例     div::befor {content:"开始";}       div::after {content:"结束";}

13、CSS三大特性

  继承性，子标签会继承父标签的某些样式（text-，font-，line-这些元素开头的都可以继承，以及color属性；所有关于盒子的、定位的、布局的属性都不能继承）

  层叠性，多种CSS样式的叠加。如果一个属性通过两个选择器设置到同一个元素上，这时一个属性会将另一属性层叠掉。如果出现样式冲突，如果权重相同，则会按照CSS书写的顺序，以最后样式为准。如果权重不同就要统计权重：id的数量，类的数量，标签的数量

  注： CSS定义了一个!important命令，该命令被赋予最大的优先级，不管权重如何以及样式位置的远近，!important都具有最大优先级，它不影响就近原则

特殊性，CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 。用四位的数字串来表示，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值        0,0,0,0

每个元素（标签）贡献值为  0,0,0,1

每个类，伪类贡献值为      0,0,1,0

每个ID贡献值为           0,1,0,0

每个行内样式贡献值        1,0,0,0

   每个!important贡献值      ∞ 无穷大

14、CSS 背景(background)

background-color 背景颜色

background-image 背景图片地址     

background-repeat 是否平铺 （no-repeat不平铺repeat-x 横向上平铺repeat-y 纵向平铺）      

background-position 背景位置（top | center | bottom | left | center | right

设置或检索对象的背景图像位置时必须先指定background-image属性，默认值：(0% 0%)。）         

background-attachment 背景固定还是滚动

（scroll背景图像随对象内容滚动fixed背景图像固定）

15、背景图片(image)  background-image : none | url (url)

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

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。    如果有背景图片平铺，则会覆盖背景颜色。背景图片后面的地址，url不要加引号。

可以设置多背景，以逗号分隔可以设置多背景，可用于自适应布局

例   background-image: url('images/gyt.jpg'),url('images/robot.png');

16、背景透明background: rgba(0,0,0,0.3)

最后一个参数是alpha 透明度  取值范围 0~1之间

可以给文字和border边框透明都是 rgba 的格式来写。

17、背景缩放

设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。设置为contain自动调整缩放比例，保证图片始终完整显示在背景区域。

18、盒子模型（Box Model）    CSS三个大模块：盒子模型、浮动、定位

    把HTML页面中的元素看作是一个矩形的盒子，每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

19、盒子边框（border）设置边框样式（border-style）

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

dashed：边框为虚线   dotted：边框为点线   double：边框为双实线

表格的细线边框table{ border-collapse:collapse; } 表示边框合并一起

20、圆角边框  Border-radius: 水平半径/垂直半径；左上角  右上角  右下角  左下角;