前端开发之盒子模型

目录

盒子分类

display属性

盒子内部结构特征

padding填充区

border边框区

margin外边距

盒子width和height边界

---

盒子分类

块级盒子（又叫块级元素、块级标签） 特征：独占一行，对宽度高度支持 如：p div ul li h1~h6

内联级盒子 特征：不独占一行，对宽度高度不支持 如：a span

内联块级盒子 特征：不独占一行，对宽度高度支持 如：图片img 输入框input

弹性盒子 特征：一个父级元素设置成弹性盒子，其子元素默认始终横向布局

display属性

可以通过display属性将块级盒子改变为内联级盒子

display：block 块级盒子 inline内联级盒子 inline-block 内联块级盒子 flex 弹性盒子

index.css格式

盒子内部结构特征

盒子内部结构特征都是相同的

实际内部结构特征如下

一般除内容区外，其他区域默认为0，对盒子设置高度height宽度width时默认设置的是内容区

padding填充区

整体的设置：padding后面从上开始，顺时针转，没有的时候直接对称

填充区的单独设置

border边框区

边框区为复合属性，由三方面组成

边框样式 border-style:solid;

边框颜色 border-color:black;

边框宽度 border-width:10px;

边框简化写法，无顺序要求

边框也有自己的方向，如：border-top 边框上 border-bottom 边框下 border-left 边框左 border-right 边框右

margin外边距

margin后面从上开始，顺时针转，没有的时候直接对称

如：margin:40px 50px 60px;

可结合四个方向单独设置 如：

margin-top: 上； margin-bottom: 下； margin-left: 左; margin-right: 右；

margin: 50px auto;可表示

距离页面上端50px

auto可实现页面的左右居中

注意：margin: 50px auto;和margin:40px 50px 60px;不可同时使用

盒子width和height边界