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