【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一致
