001-盒模型、行内元素、块元素

来源：互联网发布：淘宝美工基础教程编辑：程序博客网时间：2024/05/12 19:36

1. 盒模型是什么

盒模型是CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，
那么页面元素也对应的有内容、边框、内外边距等组成。
这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的属性。

2. 盒模型的种类

目前有：标准盒子模型和IE盒子模型 2种盒模型

标准盒模型:
这里写图片描述

IE盒模型：

根据上图可以看出他们的不同：

标准盒模型：元素的 width和height = content

IE盒模型：元素的 width和height = ( content+border+padding )

因为存在这样的差异，所以要满足跨浏览器的时候就会比较麻烦。当然两种方式肯定是标准盒模型比较好，这里有一个解决跨浏览器的方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这样会使所有浏览器按照W3C标准盒模型去解析页面元素，就满足了跨浏览器的要求了。

上面还提到了盒子模型是有空间的，主要表现在组成盒子的各个部分的层次不同。他们从上到下的顺序是:

所以在处理页面元素的样式时还需要注意到这点。

3. Div + css 布局较 table 布局有什么优点
用div css来设计和制作页面，新型的web设计标准，网页布局的时候，页面的结构和表现分离。
优势：

1 . 结构和表现分离，使得代码便于维护
2. 提高了百度爬虫收录的效率
3. 提高了页面刷新速度，对搜索引擎友好，使得网站在同类中在百度排名靠前
4. Div css 结构清晰，单个页面代码减少，精简代码，批量添加相同的属性，提高了网页运行效率。

Table ：结构属性表现在同一个页面中，页面代码冗长，不利于维护，不利于百度搜索引擎优化

4. 行内元素和块级元素的区别和他们的特点是什么？总结如下：

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.

块级元素可以设置width,height属性.
行内元素设置width,height属性无效，它的长度高度主要根据内容决定.
块级元素即使设置了宽度,仍然是独占一行.
块级元素可以设置margin和padding属性.
行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
块级元素对应于display:block.
行内元素对应于display:inline.

display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性

阅读全文

0 0