css盒子模型

一、盒模型简介

1.我们看到的网页其实是布局大大小小的盒子组合而来
2.盒子由以下几部分组成:
(1)内容区(content)
(2)内边距(padding)
(3)边框(border)
(4)外边距(margin)
在这里插入图片描述

二、内容区(content)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;//此处设置的宽度仅为content区的宽度为200px,高度同理
      height: 200px;
    }

  </style>
</head>
<body>
<div class="box">盒子模型</div>

</body>
</html>

三、边框(border)

1.边框会撑开盒子,影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{//此时盒子的大小为240px*240px
      width: 200px;
      height: 200px;
      border-width: 20px;
      border-color: red;
      border-style: solid;
      

    }

  </style>
</head>
<body>
<div class="box">盒子模型</div>

</body>
</html>

2.边框属性(不同的浏览器会有不同的默认的boder-width,boder-height)
在这里插入图片描述

在这里插入图片描述
3.表格的细线边框
在这里插入图片描述

四、内边距(padding)

1.盒子的内边距会撑开盒子,影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      padding: 20px;
      background-color: #00a4ff;
    }
    .inner{
      width: 100%;
      height: 100%;
      background-color: #00b38a;
    }

  </style>
</head>
<body>
<div class="box">//此时盒子大小为260px*260px
  <div class="inner">内容区</div>
</div>

</body>
</html>

在这里插入图片描述

五、外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
    }
    .inner{
      width: 100%;
      height: 100%;
      background-color: #00b38a;
      margin-top: 20px;

    }

  </style>
</head>
<body>
<div class="box">
  <div class="inner">内容区</div>
</div>

</body>
</html>

在这里插入图片描述

1.外边距不会影响盒子可见框的大小,但会影响盒子实际占有空间的大小
2.注意:元素在页面中是按照自左向右的顺序排列的,所以默认情况下,我们设置左和上外边距会移动元素自身,而设置右和下外边距则会移动其他元素
3.外边距可以使块级元素居中但必须满足以下两个条件:
 (1)盒子的宽度确定
 (2)盒子的左右外边距设为:auto
4.外边距的折叠问题:条件:垂直方向且相邻的盒子
 (1)兄弟元素折叠问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
    }
    .first{
      width: 50px;
      height: 50px;
      background-color: #00b38a;
      margin-bottom: 40px;//两元素外边距不叠加,取二者较大值

    }
    .second {
      width: 50px;
      height: 50px;
      background-color: #1c036c;
      margin-top: 40px;
    }

  </style>
</head>
<body>
<div class="box">
  <div class="first">盒子一</div>
  <div class="second">盒子二</div>
</div>

</body>
</html>

运行结果:
在这里插入图片描述

(2)父子元素:父子元素间相邻外边距,子元素的上外边距会传递给父元素
解决折叠问题前:
在这里插入图片描述

解决折叠问题后:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;//解决折叠问题方案一:给父元素加边框
      background-color: #00a4ff;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: #00b38a;
      margin-top: 40px;

    }

  </style>
</head>
<body>
<div class="box">
  <div class="son">盒子</div>
</div>

</body>
</html>

在这里插入图片描述
解决问题方案:
 (1)给子元素添加margin-top
 (2)给父元素加边框(这两种方法的本质都是把父元素和子元素隔开,但需修改父元素盒子大小)

六、行内元素的盒模型

1.行内元素不支持设置高度和宽度
2.可为行内元素设置padding、margin、border,但这些样式只会在水平方向影响水平方向的盒子,不会影响垂直方向盒子的布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
      /*display: inline-block;*/
    }
    div{
      width: 50px;
      height: 50px;
      background-color: #00b38a;

    }

  </style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>

</body>
</html>

运行结果:
在这里插入图片描述

3.针对行内元素上述的特征,我们可以使用display将行内元素转换为块级元素,进行样式的设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
      display: inline-block;//display:inline(转换为行内元素)/block(转换为块级元素)/inline-block(行内块元素)
    }
    div{
      width: 50px;
      height: 50px;
      background-color: #00b38a;

    }

  </style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>

</body>
</html>

运行结果:
在这里插入图片描述
4.行内块元素:行内块元素具有块级元素的所有特性,同时行内块元素并不独占一行
5.补充:display还可设置元素的隐藏效果

display
table
nonedisplay属性值设为none时,隐藏元素且不占有位置

6.补充visibility属性

visibility
visible元素正常显示在页面
hidden隐藏元素,且占据位置

七、盒子大小

1.box_sizing属性

属性值
content-box设置height、width属性来设置盒子的内容区大小
border-box设置height、width属性来设置盒子的可见框大小

八、轮廓、阴影和圆角

1.outline(轮廓):用法与border一只,与border不同,设置元素的轮廓不会影响其他盒子的布局
2.box-shadow(阴影):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    div{
      width: 100px;
      height: 100px;
      background-color: #00b38a;
      box-shadow: 10px 10px rgba(255,145,223,.3);//水平偏移 数值大小 阴影颜色及透明度
    }

  </style>
</head>
<body>
<div>块级元素</div>

</body>
</html>

运行结果:
在这里插入图片描述
3.border-radius(圆角)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    div{
      width: 100px;
      height: 100px;
      background-color: #00b38a;
      border-radius: 10px;//设置半径大小
    }

  </style>
</head>
<body>
<div>块级元素</div>

</body>
</html>

运行结果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值