css3-盒子模型、内外边距、圆角边框

1uuue

于 2022-08-29 21:11:24 发布

阅读量341

点赞数

分类专栏： CSS3 文章标签： css3 html 前端

本文链接：https://blog.csdn.net/qq_61727355/article/details/126585975

版权

CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.盒子模型及边框的应用

1.1 什么是盒子

margin：外边距

padding：内边距

border：边框

1.2 什么是边框

1）边框的粗细

2）边框的样式

3）边框的颜色

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*body总有一个默认的外边距*/
      margin: 0px;
    }
    #box{
      width: 300px;
      /*粗细 样式 颜色*/
      border: 1px solid skyblue;
    }
    /*标题默认也有外边距*/
    h2{
      font-size: 16px;
      background-color: #8EC5FC;
      line-height: 30px;
      color: whitesmoke;
      margin: 0px;
    }
    form{
      background: blanchedalmond;
    }
    div:nth-of-type(1) input{
      border:3px solid black;
    }
    div:nth-of-type(2) input{
      border:3px dashed palegreen;
    }
    div:nth-of-type(3) input{
      border:3px dashed lightcoral;
    }
  </style>

</head>
<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

2.内外边距及div居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化

3.圆角边框及阴影

测试圆角边框

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            margin: 30px;
            background: paleturquoise;
            border-radius: 50px 0px 0px 0px;
        }
        img{
            border-radius: 85px;
        }
    </style>
</head>
<body>
<div></div>
<img src="images/a.PNG" alt="">
</body>
</html>

测试盒子阴影：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    margin:0 auto 作用：居中
        要求：1.块元素
             2.块元素有固定的高度
-->
    <style>
        img{
            border-radius:85px ;
            /*x轴偏移量 y轴偏移量 模糊半径 颜色*/
            box-shadow:10px 10px 100px yellow ;
        }
    </style>
</head>
<body>
<div style="width: 1000px;height:1000px;display: block;text-align: center">
    <img src="images/a.PNG " alt="">
</div>

</body>
</html>

1uuue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-盒子模型、内外边距、圆角边框

1.盒子模型及边框的应用 1.1 什么是盒子 margin：外边距 padding：内边距 border：边框 1.2 什么是边框 2.内外边距及div居中 margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下 margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针盒子的计算方式：margin+border+padding+内容的大小总结：body总有一个默认的外边距 margin:0常见操作：初始化 3.圆角边框及...
复制链接

扫一扫

专栏目录