标签：块元素 text box idt 代码 src 技术分享 覆盖 个数
特点：
1、外层元素身上的样式会被内层元素所继承。
2、如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖。
问：是不是所有的样式都能够被继承呢？
答：并不是所有的样式都能够被继承。只有文本与字体样式属性能够被继承。其它的样式属性都不可以被继承。
注意：
在实际工作中，我们往往会给body标签设置字体大小以及字体颜色。因为body标签是最外层的元素，内层的元素会继承外层的元素的样式。
行内样式>ID选择器>类选择器>标签选择器
一般而言，选择器指向的越准确，优先级就会越高。通常我们会用1来表示标签选择器的优先级，用10来表示类选择器的优先级，用100来表示ID选择器的优先级，用1000来表示行内样式。
标签选择器 1
类选择器 10
ID选择器 100
行内样式 1000
值越大表示其优先级越高。
不管是单个选择器还是多个选择器组合它们之前的优先级都可以通过上面这个公式来进行计算。我们将其值称之为权重值。权重值越大就表示其优先级越高。
语法格式：
属性:值 !important;
属性:值 !important;
注意：
1、!important它是提升的属性的权重，而不是提升选择器的权重！
2、!important它不能提升继承过来的权重！
类名：指的是class的属性值
一个标签内可以携带多个类名，指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。
举例：
<标签名 class=”值1 值2 值3”></标签名>
多个类名的优点：
注意：如果说一个标签内的多个类名，它们设置的样式是一样的话，就会存在样式的冲突！
注意：
background-color：用于给元素设置背景颜色 但是前提这个元素要么有内容，要么有宽度和高度才可以
background-image 用于给元素设置背景图片 图片的地址一定放在url(图片的地址) 但是前提这个元素要么有内容，要么有宽度和高度才可以 背景图片默认是平铺的
background-repeat 是用于设置背景图片是否平铺 repeat(是平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺)、no-repeat(不平铺)
background-position 用于设置背景图片的位置 如果要设置背景图片的位置 这个属性就会有两个值
background-position:水平位置 垂直位置 这两个位置的表示方式有三种 英文单词(top left) 固定值(50px 100px) 百分比(50% 20%) 这三种方式可以混合使用 可以同时使用英文单词或者是固定值或者是百分比
英文单词的表示方式
水平位置：left(居左)、center(居中)、right(居右)
垂直位置：top(居上)、center(居中)、bottom(居下)
固定值的表示方式
百分比的表示方式
background:简写属性 它可以同时设置多个样式 比如背景颜色、背景图片、背景图片是否平铺 水平位置 垂直位置
background：简写属性 其值的个数不定 顺序也不定 每一个值之前使用空格分隔
需求：
能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！
让多个元素排在同一行：行内元素的特性
给这些元素设置宽高：块级元素的特性
在标准文档流中的元素只有两种：
元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
浮动可以让元素脱离标准文档流 就可以实现让多个元素排在同一行 并且可以设置宽高！
浮动它是通过一个浮动属性来实现
float：这个属性有两个值 left(向左浮动) 向左移动 、right(向右浮动) 向右移动
浮动元素的特性：
浮动元素它脱离标准文档流 它不再占用空间了
我们可以把浮动元素理解为“漂”
浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
浮动元素它会向左或者向右进行浮动(移动)
浮动元素它遇到了父元素的边框然后就停止了浮动
浮动元素它还会遇到上一个浮动元素后就停止了浮动
浮动元素浮动以后 其父元素不会再包裹着浮动元素
我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素
注意：
只要有浮动 那么必须有清除浮动
为什么要清除浮动？
因为经过浮动了元素 它会影响到它下面的元素的排版布局 还有浮动元素的父元素没有将浮动元素包裹着
只要清除了浮动 不会影响到浮动元素的下面进行排版布局 浮动元素的父元素会将浮动元素从视觉上包裹着
清除浮动有以下三种方法：
给浮动元素的父元素设置一个固定的高度 但是这个方法不建议使用 因为一个元素的高度一般情况下不是手动设置的 它应该是由其自身的内容来撑高的！
使用清除浮动的样式属性 clear clear这个属性是专用于来清除浮动的 这个属性有三个值 clear:left;清除左浮动 clear:right; 清除右浮动 clear:both;两者都清除
这个属性一般是用在最后 一个浮动元素的下面 在最后一个浮动元素的下面新建一个空白的div 这个div什么都不要放 不要给这个div里面放置内容 它只做一件事件就是清除浮动
使用overflow:hidden 这个属性来清除浮动 overflow是一个属性
overflow:hidden 它原意是用来将溢出的部分进行隐藏 但是它还可以用于清除浮动
overflow:hidden 它一般主要是用来将列表的浮动给清除。
什么是盒子？
盒子是用来存储物品
思考一下：一个盒子是由哪些部分进行组成！
我们可以将一个盒子理解为一个快递的包裹：
有内容+有填充物+纸盒子
那我们如何去理解CSS中的盒子呢？
在CSS中一个盒子的组成部分：内容(content)+内填充(padding)+边框(border)+外边距(margin)
一个盒子中的主要属性：width、 height、padding、border、margin
width：指“宽度”的意思 但是这里的宽度指的盒子里面的内容的宽度 而不是盒子的宽度
height：指“高度”的意思 但是这里的高度指的盒子里面的内容的高度 而不是盒子的高度
padding：是“内填充”的意思，指的盒子里面的内容到盒子边框的距离
border：是“外边框”的意思 指的盒子的边框
margin：是“外边距”的意思 指的是盒子与盒子之间的间距
问：请回答如何计算一个盒子的总宽度？
一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度=盒子里面内容的高度+上下两边的填充+上下两边的边框线
注意：一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度它应该是由其内容来决定的。
padding是“内填充”的意思 指的是盒子中间的内容到边框的这一段距离
padding是有4个方向的 所以我们能够分别的描述这4个方向的padding
方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性
小属性：
padding-top：上内填充
padding-right：右内填充
padding-bottom：下内填充
padding-left：左内填充
简写属性：
margin它表示“外边距”的意思 它是指盒子与盒子之间的距离
margin它也是有4个方向的 所以我们也能够通过4个方向对其进行描述
方法有两种：第一种我们称之为小属性，第二种我们称之为简写属性
小属性：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
简写属性：
什么是margin的塌陷现象
1、在标准的文档流中 竖直方向的margin值不会叠加 它会取较大的值
2、横着方向是没有margin的塌陷现象
3、浮动元素它是没有margin的塌陷现象的
margin的值可以是auto auto表示“自动”的意思 当左外边距与右外边距的值都是auto时那么这个盒子就会水平居中
注意：
|
选择器 |
功能 |
|
E:first-child |
匹配第一个孩子 |
|
E:last-child |
匹配最后一个孩子 |
|
E:nth-child(n) |
匹配第n个孩子 |
|
E:nth-child(2n)或 E:nth-child(even) |
匹配偶数的孩子 如：2、4、6….. |
|
E:nth-child(2n+1) E:nth-child(odd) |
匹配奇数的孩子 如：1、3、5….. |
|
E:only-child |
匹配有且只有一个孩子 |
|
选择器 |
功能 |
|
:first-letter |
操作当前元素中第一个字 |
|
:first-line |
操作当前元素中第一行文字 |
|
::before |
在之前插入，在一个盒子内部的最前面 |
|
::after |
在之后插入，在一个盒子内部的最后面 |
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
描述：
文字阴影可以有多组值，多组之间用逗号隔开就可以
水平阴影正值阴影在右边 负值在左边
垂直阴影正值在下边，负值在上边
模糊强度，值越大越模糊
box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
水平阴影和垂直阴影必须的写，其余的是可以省略不写
盒子阴影可以有多组值，多组之间用逗号隔开就可以
水平阴影正值阴影在右边 负值在左边
垂直阴影正值在下边，负值在上边
模糊尺寸，值越大越模糊
标签：块元素 text box idt 代码 src 技术分享 覆盖 个数
原文地址：http://www.cnblogs.com/rechenai/p/7471831.html
