CSS&HTML实用知识点

一 CSS：

1.float浮动元素产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们

产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素

2.BFC （block format context）

Block fomatting context = block-level box + Formatting Contex

Box:即盒子模型

Formatting context：是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。

BFC 定义：直译为"块级格式化上下文"。通过特定的手段触发BFC让其中的一个或者某些盒子的渲染规则发生改变。

如何触发BFC：

设置定位position=absolute；

display:inline-block;

float:left/right;

overflow:hidden;

3.block，inline和inline-block

tips：css中设置了position：absolute；或者display：inline-block 内部会默认将当前标签元素的display设置为inline-block

3.1. block类型（块）

这种盒模型的组件默认占据一行，允许通过CSS设置宽带、高度。

这种盒模型的组建默认占据一行，允许通过CSS设置宽带、高度

例如：<div .../>、<p ../.> 、<form../>、<table../、<h1>到<h6>、<ul../>等。

• display：block

1. block 元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度会自动填满其父元素的宽度。
2. block元素可以设置width,height属性。块级元素及时设置了宽度，仍然是独占一行。
3. block元素可以设置margin和padding属性。

3.2. inline类型（内联）

这种盒模型的组件不会占据一行，不可以调整宽度、高度。

例如：<span../>、<a../> <strong../>、<em../>、<label../>、<input../>、<select../>、<textarea../>、<img../>、<br../>。

CSS为display属性提供了block、inline两个属性值，可以改变HTML组件默认的盒模型。

• display：inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height均无效。
3. inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向上的padding-top、padding-bottom、margin-top和margin-bottom不会产生边距效果。

3.3. inline-block类型

CSS还提供了一种inline-block盒模型，这种盒模型是inline模型和block模型的综合体：inline-block盒模型的元素不会占据一行，同时也支持width、height指定宽带及高度。并且允许它的左边和右边出现其他内容。

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

应用场合

很多时候我们必须让一些块元素并排显示，一般会想到浮动，但是块元素浮动设边距的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里，然后给这个内敛元素浮动和边距。通过设置：display：inline-block，就将对象呈递为内联对象，但对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

说明：

1. block元素可以包含block元素和inline元素，但inline元素只能包含inline元素。要注意这个是一个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如p元素，只能包含inline元素，而不能包含block元素。
2. 一般来说，可以通过display:inline和display：block的设置来改变元素的布局级别。
3. 兼容性问题：IE6、IE7不支持inline-block，所以在IE中对内联元素使用display：inline-block理论上IE是不识别的，但会在IE下触发layout，从而使内联元素拥有了display：inline-block属性的表象

4.权重

！important

行间样式

id

class | 属性 | 伪类

标签 | 伪元类

通配符

 

5.元素嵌套规则

1.行级元素只能嵌套行级元素
2.块级元素可以嵌套任何元素
3.p标签不能放div元素 （规定）

 

6.标准盒模型和IE盒模型（怪异盒模型）

有时候给一个元素盒子容易设置了宽度200 高度100，但是如果又设置了padding ： 10px 10px 10px 10px ，这样的话如果是在标准盒模型下，总宽度就是220px，但是如果切换为怪异盒模型，那总宽度依然是200，padding依然是10px 10px 10px 10px，只是内容content区域变小啦

开启怪异盒模型方式：box-sizing: border-box；

1.标准盒模型

总宽度=border（左右）+ width + padding（左右）

总高度=boder（上下）+ height + padding （上下）

2.IE盒模型（怪异盒模型）

总宽度=width

总高度=height

 

二.经典问题

1.Margin塌陷

 

2.Margin合并 （父元素内部都是浮动元素的话）

使用块级元素block来清除浮动解决问题

.clear {

   clear: both;

}

也可以在伪元素::after中clear：both；display：block，因为伪元素默认是inline行级元素。

设置了position:abolute；float:left/right属性的元素会打内部把元素转化成inline-block