css 01

优先级是越精确优先级越高：

元素内联样式(直接写在html标签里面)优先级最高，是1000

使用id定位的优先级是100

使用class定位的优先级是10

使用标签定位的优先级是1

优先级可以累加

子元素会继承父元素的样式，但是当子元素自己指定了样式就会覆盖父元素的样式

使用空格分隔的选择器是后代的选择器例如d p{}只能选中p1不能选中p2,使用，分隔的话就是两个规则混用如.a,.b{}选择了p2

<div class="d">
    <P>p1</p>   
<div>
<p class="a b">p2</p>

！important放在样式的最后可以提高优先级到最高：*{background:red !important}可以使所有的元素背景为红色

css子元素选择器>:father:son这样写，只能管到子元素这一级，孙元素就管不到，而使用空格可以适用到所有的子孙

+可以选择兄弟元素，例如a+b可以选择a元素有相同父亲的下一个元素

<parent>
    <a />
    <b />
</parent>

伪类可以用来处理事件

p:hover{} 处理p元素的鼠标悬停

input:active{} 当文本框被点击之后应用不会消失，使用在其它元素上面的时候只有被点击的一瞬间会出现效果

ele:first-child{}和ele:last-child{} 指的是出现的一个元素中的，第一个ele元素和最后一个ele元素,对下例使用p:first-child{},会选择到p1和p2

<p>p1</p>
<div>
    <p>p2</p>
    <p>p3</p>
</div>
<p>p4</p>

使用伪元素可以设置同一标签内的文本的不同样式

:first-line设置第一行文本的样式

:first-letter设置第一个单词的样式

:before{content:url(‘图片url’)}可以在元素之前显示一张图片

:after{content:url(‘图片url’)}可以在元素之后显示一张图片

排列

display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

元素的框模型，由内到外分别是margin，border，padding，内容

html:
<div id="lt"></div>

css:
#lt{
    height: 100px;
    width:100px;
    padding: 100px;
    border: solid red 1px;
    margin-left: 10px;
}

以上的代码显示的框如下

元素的margin，padding使用百分比计算的时候只用父元素的width计算，例如下例：

html 
<div id="lt">
    <div id="intt"></div>
</div>
css
#lt{
    height: 100px;
    width:200px;
    padding: 100px;
    border: solid red 1px;
    margin-left: 10px;
}
#intt{
    padding-left: 30%;
    padding-bottom: 30%;
    height: 20%;
    width: 20%;
    background: darkkhaki;
    vertical-align: middle;
}

intt的padding-left和padding-bottom都是60px，但是width是40px，height是20px

设置background和border的时候padding的内容也会被计算进去，margin不会

外边距(margin)合并

简单地说，外边距合并指的是，当两个垂直外边距相遇时（中间没有border和padding），它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

定位方式

static 默认方式

relative 元素相对父元素偏移一些距离（设置top，left实现）

absolute 元素相对于body元素定位

fixed 元素相对于当前显示的部分定位

fixed和absolute的区别

没有滚动条的情况下没有差异

在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

就是当定位到文档的最上面，内容滚出窗口之外之后fixed内容还会显示，但是absolute不会显示

同时定义了left，right的时候看left，相同的还有top和bottom

写了margin：auto之后，上下左右的偏移量的0的话，absolute和fixed都会定位到当前文档的正中央（上下和左右都居中），relative会水平居中

浮动

浮动使元素相对父元素定位，浮动可以的属性有四个：left（居左），right(居右)，none(不浮动)，inherit（继承父元素）

框的浮动，框浮动之后其原本占据的位置会被其它的元素占据，例如本来水平居左的元素设置向左浮动会导致元素

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

关于p元素的换行，使用中文文本会自动换行，但是使用英文文本不会换行，会出现滑动条，要实现英文文本换行需要指定word-break:break-all;

属性继承详解

overflow需要在一个高度固定的容器内才能发生，就是要设置了height属性才能overflow，出现滚动条