CSS布局模式、盒模型、块与行、inline-block

爱前端的zzh

于 2022-10-13 18:18:38 发布

阅读量396

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_55498382/article/details/127306479

版权

本文详细介绍了CSS布局模式，包括普通流、表格布局、浮动布局、定位布局、多列布局、弹性盒布局和网格布局。重点讲解了盒模型的概念，包括content、padding、border和margin，并对比了IE盒模型与标准盒模型的区别。此外，还探讨了块级盒子与行级盒子的差异，以及如何使用inline-block解决布局问题。最后提到了inline元素间的缝隙问题及其解决方法。

摘要由CSDN通过智能技术生成

CSS 布局模式、盒模型、块与行、inline-block

布局模式

基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法

普通流：所有元素都是普通流中的一部分，除非用一些方式移出普通流。普通流包括块（block）布局和行（inline）布局。
表格布局：仅用来设置表格
浮动布局：用来让元素左右排放。过时
定位布局：用来定位元素，而不用和其他元素产生太多关联
多列布局：用来设置是多列。不常用
弹性盒布局：常用
网格布局：通过二维网格设置布局。可用

盒模型

盒模型是什么？哪些属性？

盒模型 box model

浏览器把每个元素当成矩形盒子来渲染，矩形盒子有这些特征

Content：这个区域是用来显示内容，大小可通过设置 width 和 height
Padding：包围在内容区域外部的空白区域；大小通过 padding相关属性设置
Border：边框盒包裹内容和内边距。大小通过 border相关属性设置
Margin：这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin相关属性设置

盒模型属性 margin

<style>
	.box {
     
    	margin-top：10px;
    	margin-right: 40px;
    	margin-bottom: 20px;
    	margin-left: 30px;
    
   	 	margin: 10px 20px 30px 40px; /*上 右 下 左*/
    	margin: 10px;
    	margin: 10px 20px;/*上下 左右*/
    	margin: 0 auto; /* 让块级盒子居中 */
	}
</style>
<div class="box">hello world</div>

盒模型属性border

<style>
	.box {
     
    	border-top: 10px solid #ccc; /* 上边框 */
 		border-bottom: 5px dashed yellow;
 		border-left: 10px solid transparent;
 		border-right: 1px dotted black; 
        
         border: 1px solid black; /* 四边边框，solid、dashed、d