块模型内联模型内联块模型

Posted 2020-09-23

块模型（block模型）

1.块模型被浏览器渲染执行的时候会独占一行空间

2.即使块模型的宽度小于页面的宽度，块模型也会独占一行，也就是说块模型独占与它的宽度有关

3.如果要为一个html控件设置高度和宽度，那么这个控件必须是块模型，加display:block变成块模型

如超链接：<a href="https://i.cnblogs.com" style="background-color: #dedef8; display:block"></a>

4.非块模型控件转换成块模型，使用display：block即可

5.常见的块模型：标题标签、段落标签(p标签)、列表标签(ul,li,ol)、图层标签(div)

6.某些控件，比如标题标签、列表标签以及段落标签都会在控件的上方和下方加上空白

 

内联模型（inline模型）

1.内联模型被浏览器渲染执行的时候不会独占一行空间

2.内联模型设置宽度和高度无效，内联模型的宽度和高度是控件内容的宽度和高度

如：<a href=“”>hello</a> 内的文字是16px，那么控件的高度都是16px

3.可以使用css的display：inline把块模型变成内联模型

4.内联模型占据了html标签的一多半，如：<a>、<span>、<label>、<img>、按钮、文本框等

 

内联块模型

1.内联块模型是介于块模型和内联模型的中间形态的模型，它排版的时候是内联模型的特征。

与其他控件排列成一行，但显示控件尺寸的时候是块模型特征，具备高度和宽度的设置

2.如果要把一个控件转换成内联块模型可以用下面的css代码实现，display：inline-block;

3.表单控件几乎都是内联块模型，比如文本框、密码框、按钮等。