目录介绍：

• 1、在制作网页时，块级元素和行内元素分别有哪些？
• 2、css中一个框的实际宽度是由哪几部分组成的
• 3、width属性的合法值
• 4、块级元素实际占用的宽度与它的什么属性有关
• 5、行内元素 行内块级元素和块级元素的区别

在制作网页时，块级元素和行内元素分别有哪些？

1、块级元素

2、行内元素

扩展内容：

1.块级元素特性

（1）总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。

（2）宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。

2.行内元素特性

（1）和相邻的行内元素在同一行。

（2）宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，按照文字或图片的大小显示。

3.可变元素

（1）可变元素可根据上下文语境决定该元素为块元素或者内联元素。

css中一个框的实际宽度是由哪几部分组成的

一个div 就是由div/div组成，

它可以由css定义：

width宽度

height高度

border边框

margin外边距

padding内边距

background背景

float浮动方式

position定位方式

等等。。。

块级元素和行内元素最明显的就是，

块级元素会换行，行内元素不会换行。。

其实字面就可以解释这个了，块级，就是一块东西，行内的话，就是在一行字或者一行别的元素里应用，它是不会换行，

比如span,i,b,这些就是行内元素。。。

div这些就是块级元素

width属性的合法值

1 .width作用在内在盒子，也就是容器盒子

auto是width的默认值，尽管这样，却也是一个深藏不漏的家伙

如图，不设置white-space:nowrap的时候，宽度不会超，只会向下

如图，如果加了white-wrap:nowrap;会超出容器限制

1 .在css世界中，盒子分为“内在盒子”，‘外在盒子’，显示也分为“内部显示”，‘’外部显示‘。尺寸也分为“内部尺寸”，’外部尺寸‘

2 .内部尺寸英语是'intrinsic sizing',表示尺寸由内部元素决定，外部尺寸“extrinsic sizing”,宽度由外部元素决定

1 .正常流宽度.当我们往页面中添加一个div元素，div的尺寸就像是流铺满元素一样，会铺满整个容器，但是这并不等于这个div的宽度是width:"100%".所以当把一个元素设置为display:block的时候，在加一条width:100%是不对的。这俩是互斥的，给一个元素添加宽度是会破坏他的流动性

2 .格式化宽度：在绝对定位模型中，默认是包裹性，宽度由内容决定，但是如果有以下属性，left/righ或top/bottom对立方位的属性值同时存在的时候，他的宽度表现为格式化宽度，宽度大小由最近的具有定位特性(position的值不是static)的祖先元素计算而来

1 .尺寸的大小由内部的元素决定。如果一个元素没有内容的时候他的宽度是0，那么这个元素就是由内部元素决定

3 .内部尺寸的三种表现形式

1 .元素尺寸由内部元素决定，会永远小于“包含块”容器的尺寸。对于一个元素如果display：inline-block，那么即使里面内容再多，只要是正常文本，宽度也不会超过容器

2 .Button元素，按钮就是最具代表性的inline-block元素。按钮文字越多，宽度越高，如果文字足够多，则会在容器的宽度处自动换行。

1 .也就是css不会在width:auto的时候，并且有图文的时候不会是0的。会选最小宽度的

2 .汉字的时候，最小宽度是一个汉字的宽度

3 .英语单词的时候，最小宽度有额定的英文字符单元决定

4 .使用情况，画一些图形:利用连续单词不换行的特性，可以控制什么时候换行，什么时候正常显示，所以可以非常方便实现这些凹凸的形状

1 .最大宽度就是元素可以有的最大宽度。实际上最大宽度实际等同于“包裹性”。如果设置了withe-space:nowrap。那就是最后没有换行的宽度。如果内部没有块级元素或块级元素没有设置宽度值，那么最大宽度实际上是最大的连续内联盒子的宽度

2 .连续内联盒子就是全部都是内联级别的一个或一堆元素，中间没有任何的换行标签br或其他块级元素

3 .实际用处:实现滚动

1 .上面全部都只是说了width:auto的点，别的都没说

2 .width宽度直接作用在内在盒子上，内在盒子是由content box，padding box,border box,margin box。

3 .margin的背景永远是透明的，因此不能作为background-clip,background-origin属性值出现。

4 .100px作用在了content box上，但是由于div默认的padding,border,margin都是0，因此div所呈现的宽度就是100像素.如果此时padding，border也有值的话，那么最后的表现就不是100px.一定比这个大

1 .流动性丢失，对于块状元素来说，如果是width:auto的话，元素会如水流般充满整个元素，一旦设定了width具体数值，元素的流动性就会被阻断，因为元素给定宽度就像河流中间竖起两个大闸一样，流动性丢失

2 .与现实世界表现不一致.包含padding或border会让元素宽度变大。我们设置100像素宽度，其实希望是整个元素的最终宽度是100px,而不是最后比这个大.-解决方式-宽度分离原则:和宽度有关的属性要分在两个地方写，比如父元素写width属性，子元素做padding,border这些属性

3 .解决方式2，使用box-sizing属性：他可以改变width作用的细节.box-sizing属性值

4 .注意box-sizing不持之margin,只有当元素没有水平margin的时候，box-sizing才能真正无计算，上面提到的宽度分离元素是可以真正解决这个问题的

5 .唯一离不开box-sizing的元素就是input和textarea元素,让他们实现100%自适应宽度

块级元素实际占用的宽度与它的什么属性有关

margin-bottom却不会产生边距效果,padding-bottom,margin-top:inline.

行内元素的margin和padding属性,height属性无效,padding-right,height属性.

行内元素对应于display,其宽度自动填满其父元素宽度,相邻的行内元素会排列在同一行里,其宽度随元素的内容而变化:block.

块级元素可以设置margin和padding属性,水平方向的padding-left,仍然是独占一行,直到一行排不下.

块级元素可以设置width.

块级元素对应于display,才会换行,但竖直方向的padding-top.

行内元素不会独占一行.

块级元素即使设置了宽度,margin-right都产生边距效果,margin-left　块级元素会独占一行.

行内元素设置width,默认情况下

行内元素 行内块级元素和块级元素的区别

一、块级元素：block element

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；

块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如form只能包含块级元素。其他的块级元素则可以包含 行级元素如P.也有一些则既可以包含块级，也可以包含行级元素。

DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

二、行内元素：inline element

也叫内联元素、内嵌元素等；行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母 之间横向排列，到最右端自动折行。

对行内元素，需要注意如下

设置宽度width 无效。

设置高度height 无效，可以通过line-height来设置。

设置margin 只有左右margin有效，上下无效。

设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。