厦门维护网专业提供网站维护,网站修复,快速建站,公众号托管,小程序,,微信分销商城,网站推广优化等,服务热线:0592-6020133
  • 首页
  • DIV+CSS
  • 盒子模型,块级元素和行内元素特性与区别

盒子模型,块级元素和行内元素特性与区别

发布:厦门维护网2018-3-6 8:31分类: DIV+CSS

盒模型到底是什么?

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

盒模型的概念明白了,就该注意盒模型的种类了

目前有:标准盒子模型和IE盒子模型 2种盒模型。他们各自长这样:

01.png02.png

 

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

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

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

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

在网页顶部增加DOCTYPE的声明:

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  


这样会使所有浏览器按照W3C标准盒模型去解析页面元素,就满足了跨浏览器的要求了。

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

border----->content、padding----->background-image----->background-color----->margin

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


行内元素和块级元素的区别和他们的特点是什么?

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化. 另外

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

块级元素常见的有:div......行内元素常见的有:aspan

如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block。

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 0/467 人参与

发表评论:

欢迎使用手机扫描访问本站,还可以关注微信哦~