【JAVA WEB】盒模型

边框

内边距

基础写法

复合写法

外边距

基础写法

复合写法

块级元素的水平居中

弹性布局

设置行内元素的属性，span

每一个HTML元素就相当于是一个矩形的“盒子”

这个盒子由以下这几个部分构成：

1.边框 border

2.内容 content

3.内边距 padding

4.外边距 margin

边框

基础属性

粗细：border-width

样式：border-stytle 默认没边框， solid实线边框 dashed虚线边框 dotted点线边框

颜色：border-color

<style>

div{

width: 200px;

height: 100px;

//以下三行也可以写成 border:blue solid 10px; 这三个参数不区分先后顺序

border-color: blue;

border-style: solid;

border-width: 10px;

}

</style>

<div></div>

效果如下：

但是可以看出，我们的边框撑大了这个盒子，为了避免这种情况，我们使用

box-sizing:border-box

内边距

padding 设置内容和边框之间的距离。

基础写法

padding-top

padding-bottom

padding-left

padding-right

复合写法

padding：5px； //表示四个方向都是5px

padding：5px 10px ；//表示上下内边距5px 左右内边距10px

padding：5px 10px 20px；//表示上边距5px 左右内边距为10px 下内边距20px

padding：5px 10px 20px 30px；//表示上5px 右10px 下20px 左30px （顺时针）

外边距

控制盒子和盒子之间的距离。

基础写法

margin-top

margin-bottom

margin-left

margin-right

复合写法

//规则同padding

margin：5px； //表示四个方向都是5px

margin：5px 10px ；//表示上下5px 左右10px

margin：5px 10px 20px；//表示上5px 左右10px 下20px

margin：5px 10px 20px 30px；//表示上5px 右10px 下20px 左30px （顺时针）

块级元素的水平居中

//以下三种写法都可以

margin-left:auto; margin-right:auto;

margin:auto;

margin:0 auto;

弹性布局

设置行内元素的属性，span

<div>

<span>1</span>

<span>2</span>

<span>3</span>

</div>

<style>

div{

width: 700px;

height: 700px;

background-color: blue;

}

div span{

height: 100px;

width: 100px;

background-color: yellow;

}

</style>

当我们设置span属性时，因为span是行内元素，所以对他的设置并没有生效如下图，我们需要在span的父级标签中也就是div设置display：flex; 使其进入弹性布局模式

//添加display：flex；

<div>

<span>1</span>

<span>2</span>

<span>3</span>

</div>

<style>

div{

width: 700px;

height: 700px;

background-color: blue;

display: flex;

}

div span{

height: 100px;

width: 100px;

background-color: yellow;

}

</style>

常用属性

justify-content //设置主轴上的子元素排列方式水平方向

默认是start

效果如下：

当值为center

取值为end

取值为space-between，意味着行方向上元素均匀布局

align-items //设置侧轴上的元素排列方式垂直方向

取值与justify-content一致