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