css盒子模型的深入理解,在块级、行内元素的区别和特性

更新日期: 2017-11-27阅读: 5.8k标签: 盒子

css盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。


内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

* {
  margin: 0;
  padding: 0;
}


css盒子模型到底的思想是什么?

CSS实现页面布局的一种思想:把页面的所有元素都看成一个类似于礼品盒的盒子,礼品盒可能会有好多层包装组成,那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下,盒模型是要把元素看成立体的,它确实有空间的3D属性,css盒子3D模型从上到下分为5层:1、border;2、content+padding;3、background-image;4、background-color;5、margin

目前有:标准盒子模型和IE盒子模型 2种盒模型 ,区别在于:

标准盒模型:元素的width和height = content //内容
IE盒模型:元素的width和height =content+border+padding  //内容+边框+内边距

为了满足跨浏览器的差异,我们比较肯定的方式是使用标准盒模型,这里通过在网页顶部增加DOCTYPE的声明,来解决跨浏览器兼容方案(或者使用css3的声明方式):

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


CSS盒子模型对行内元素和块级元素的区别和特点

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

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

块级元素可以设置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。

块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table...

行内元素(内联元素):a ,   span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite....

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


Box-sizing说明

CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值:

box-sizing:content-box:  W3C标准盒模型,默认属性。padding和border不被包含在定义的width和height之内。

box-sizing:border-box:IE6混杂模式盒模型, padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。

box-sizing:inherit  从父级元素中继承该属性。

如果设置box-sizing:border-box来使用IE6混杂盒模型 ,那么

.demo {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box; /*增*/

-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

}


设置padding与border后,内容区的宽度和高度被压缩为70px*70px,盒子的原尺寸仍然是100px*100px  


Box-sizing 的应用场景?

当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的。如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果是非常实用的。


链接: https://fly63.com/article/detial/180

css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box、border-box、inherit,其中inherit表示box-sizing的值应该从父元素继承。

css中border-sizing属性详解和应用

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值,inherit指的是从父元素继承box-sizing表现形式。根据项目中的使用经验和w3c的建议,推荐将box-sizing属性设置为border-box。

css盒子模型_css全局设置border-box

border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width,height内的。全局设置 border-box 很好,更符合我们通常对一个「盒子」尺寸的认知。让有边框的盒子正常使用百分比宽度。

CSS3中的box-sizing(content-box与border-box)

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:现代浏览器和IE9+默认值是content-box。 content-box:padding和border不被包含在定义的width和height之内。

DOM盒子模型常用属性client,offset和scroll

在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的),clientWidth & clientHeight:获取当前元素可视区域的宽高

css3动画之两面翻转的盒子

利用伪元素before、after,只创建一个div,一个盒子里面装两个同宽高的盒子,利用backface-visibility设置元素背面是否可见的属性,达到两面翻转的效果

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!