CSS盒子模型

CSS盒子模型(Box Model):

盒子模型

元素的宽度 = width+leftpadding+rightpadding+leftborder+rightborder+leftmargin+rightmargin

元素的高度计算方法同上

块级元素(block)和行内(inline)元素:

默认情况下,块级元素会另起一行,并尽可能的充满整个容器。

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间,只能包含数据和其他行内元素

级元素和行内元素的区别

块级元素:

1.会另起一行,

2.可以设置width,height,margin,padding,border属性

3.默认宽度是容器的100%

行内元素:

1.和其他元素在同一行内

2.高度和宽度就是内容的高度和宽度

3.可以设置margin-left和margin-right属性,无法设置margin-top和margin-bottom属性

4.border和padding可以设置,但是border-top和padding-top到页面顶部后就不再增加

如何判断是block还是inline:看元素是否换行就行

inline-block

既有block的宽度高度特性,又有inline的同行特性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容