CSS中的块(Block),是文档流中的一个矩形区域,它是指一组相关性很强的HTML元素的集合,这些元素有共同的展示方式和布局规则。
在CSS中,每一个块都有它自己的的Box模型。这个模型是由元素的内容,内边距,边框和外边距组成的。块元素的默认显示方式是在一个新的行上开始,占据着它的父元素宽度的全部空间,也可以通过CSS来修改它的显示方式和布局。
/* 排版效果 */ .block{ display: block; width: 300px; height: 150px; margin: 10px; /* 外边距 */ padding: 20px; /* 内边距 */ border: 1px solid black; overflow: hidden; /* 控制元素溢出 */ } /* 颜色、字体等效果 */ .block{ background-color: #ccc; color: #333; font-size: 16px; font-weight: bold; text-align: center; }
常见的块元素有div、h1~h6、p、ul、ol、li、form、header、footer、article、section等。在设计网站布局时,通过合理的块元素布局和设置,可以实现良好的可读性、美观性和体验性。