一． 权重问题
1.1同一个标签携带多个类名，有冲突的
|
<style type="text/css">
p{ color: black !important; font-size: 20px;!important; 这个是错误的使用方法，分号代表这句话已经结束了 font-size: 60px important; 这个错误使用，没有添加感叹号 font-size: 60px !important; 这个是正确使用 }
.spec1{ color: blue;
} .spec2{ color: red; } </style> |
Important是英文中重要的意思，我们可以通过语法：
|
color: yellow !important; 通过important提高一个属性的权重，这个属性的权重就是无穷大 |
注意：
一． ！important提升的是一个属性，而不是一个选择器
二． ！important无法提升继承的权重，该是0还是0
三． 当前的！important不影响就近原则
比如HTML结构
|
<div> <p>哈哈哈哈哈哈哈哈</p> </div> |
有CSS的样式
|
<style type="text/css"> div{ color: red !important; } p{ color: blue; } </style> |
由于div是通过继承性来影响文字颜色的，所有！important无法提升它的权重，权重依然是0，干不过p，p标签是实实在在选中文字，所以字体还是蓝色
二． 盒子模型
2.1、一个盒子主要属性就5个：width，height。Padding，margin，border
|
width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。 height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距”
|
下面的盒子真实占有的大小
|
div{ 200px; height: 200px; border: 1px solid red; padding: 10px; margin: 100px; float: left; } |
真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding
2.2、 认识padding
padding内边距，padding背景颜色一定和内容区域一样的，background-color将填充border以内所有的区域
|
padding-right: 10px; padding-left:20px; padding-top:30px; padding-bottom:40px; |
2.3、margin
|
margin-left: 100px; margin-top: 100px margin-bottom: 100px margin-left: 100px 注意：使用的时候与float会相互影响，可以使用clear：both，清除浮动 margin：0 aoto 这个盒子居中，不是居中文本，必须是有明确width， padding本质上指父子关系，margin是兄弟的关系 |
2.4、border
|
边框的三要素：粗细、线性、颜色 dashed、dotted、solid、double、groove、ridge、inset、outset |
|
1） 块级元素 ● 霸占一行，不能与其他任何元素并列 ● 能接受宽、高 ● 如果不设置宽度，那么宽度将默认变为父亲的100%。 2） 行内元素 ● 与其他行内元素并排 ● 不能设置宽、高。默认的宽度，就是文字的宽度。
|
|
|
|
Display:”显示模式”，用来修改元素的行内、块级的性质 Inline就是“行内” 一旦给当前一个便签设置 display：inline 这个标签立刻改变为行内元素与span类似没有区别 一旦给当前一个便签设置 display：block 这个标签立刻改变为块级元素与div类似没有区别
|
三． 浮动float
注意清除float的方法：
- clear：both（表示当前自己内部的元素不受其他盒子的影响）
- overflow：hidden（超出范围内就隐藏）
- 浮动的元素，只能被有高度的盒子高度，就是说，如果盒子的内部有浮动，那么浮动会在一定范围内互相影响（加高法）
3.1、line-height
css中的任何文本都有有行高（line-height）,行的高度，必须有元素对应的高度，才能使用line-height
text-indent:2em; 首行空二个汉字的格，单位比较奇怪，叫做em就是汉字的宽度。Indent-缩进的意思
3.2、font
font-size（尺寸） 、 line-height（行高）、 font-family(字体)
|
页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。英语：Arial 、 Times New Roman |
3.3、超级链接伪类
:link 表示， 用户没有点击过这个链接的样式。 是英语“链接”的意思。
:visited 表示， 用户访问过了这个链接的样式。 是英语“访问过的”的意思。
:hover 表示， 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。
:active 表示， 用户用鼠标点击这个链接，但是不松手，此刻的样式。 是英语“激活”的意思。
3.4、z-index
表示的是谁压着谁，数值大的压着数值的小
只有定位了元素，才能有z-index值，不管是绝对定位还是相对定位，注意float的东西不能使用
z-index默认是为0