CSS零碎知识点

1、块负责结构,内联负责内容.

2、块级元素≠display:block 

3、IE浏览器不支持伪元素的display:list-item 

4、每个元素有两个盒子组成:外在盒子和容器盒子,width/height作用在容器盒子上。 

 display:block==display:block-block外在块级盒子+内在块级容器盒子 
 display:inline==display: inline – inline 外在块级盒子+内在块级容器盒子
display:table==display:block-table 外在块级盒子+内在块级容器盒子

5、write-space

值 描述 
 normal 默认。空白会被浏览器忽略。
 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
 nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
 pre-wrap 保留空白符序列,但是正常地进行换行。
 pre-line 合并空白符序列,但是保留换行符。
 inherit 规定应该从父元素继承 white-space 属性的值。

6、表现为“外部尺寸”的块级元素一旦设置了宽度就失去了流动性!(所谓流动性,并不是看上去的宽度100%显示这么简单,而是一种margin/border/padding 和content 内容区域自动分配水平空间的机制。)

7、a标签默认display是inline

8、按钮通常以如下两种形式出现在页面代码中: 

    <button>按钮</button>
    <input type="button" value="按钮">

    <button>标签按钮才会自动换行,<input>标签按钮,默认white-space:pre, 是不会换行的,需要将pre 值重置为默认的normal。按钮最大宽度就是容器的240 像素。

9、inline-block元素,浮动元素,table元素以及绝对定位元素都具有“包裹性”,即“收缩到合适”。

10、默认情况下,width大小作用在content-box上。

11、box-sizing 不支持margin-box

12、其一,无定位值的absolute元素可以使用margin定位;其二,无定位值的absolute元素是个没有实际宽度的浮动元素。例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div里面,但是一旦设置了left:0;top:0,这个absolute元素会立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。

13、width/height 的默认值是auto,min-width/min-height 的初始值是auto,max-width/maxheight 的初始值是none。

14、图片最后呈现的宽度是256px。style、!important 通通靠边站,因为max-width 会覆盖width。

<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }

15、是min-width覆盖max-width,.container 元素表现为至少1400 像素宽。

.container {
min-width: 1400px;
max-width: 1200px;
}

16、替换元素:根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否 具有可替换内容,通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。例如:

<img src="1.jpg">

如果我们把上面的1.jpg 换成2.jpg,图片就会被替换。

各个替换元素的默认display 属性值

元素  Chrome IEFirefox 
 <img> inline  inline  inline
 <iframe> inline  inline  inline
 <video> inline  inline  inline
 <select> inline-block  inline-block  inline-block
 <input> inline-block  inline  inline-block
 range|file <input> inline-block  inline-block  inline-block
 hidden <input> none  none  none
 <button> inline-block  inline-block  inline-block
 <textarea> inline-block  inline  inline-block

17、替换元素的尺寸从内而外分为 3 类:固有尺寸、HTML 尺寸和CSS 尺寸。

18、替换元素的display 是inline、block 和inline-block 中的任意一个,其尺寸计算规则都是一样的。例如:

img { display: block; }
<img src="1.jpg">

虽然图片此时变成了块级,但是尺寸规则还是和内联状态下一致,因此,图片呈现的宽高还跟原来一样。这也是为何图片以及其他表单类替换元素设置display:block 宽度却没有100%容器的原因。

19、由于我们平时使用图片肯定都会使用src 属性,所以难免会思维定式,认为<img>等同于图片,实际上完全不是的。如果我们把src 属性去掉,<img>其实就是一个和<span>类似的 普通的内联标签,也就是成了一个非替换元素。(Firefox 浏览器的案例很好地证明了“如果图片没有替换内容,图片就是一个普通的内联标签”。)
上一篇: jQuery选择方法
下一篇: float属性
作者邮箱: 203328517@qq.com