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

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

1.1 什么是盒子

1.2 什么是边框

2.内外边距及div居中

3.圆角边框及阴影

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

1.1 什么是盒子

margin：外边距

padding：内边距

border：边框

1.2 什么是边框

1）边框的粗细

2）边框的样式

3）边框的颜色


html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  <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.圆角边框及阴影

测试圆角边框


html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

测试盒子阴影：


html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

相关阅读:
快上车，LLM专列：想要的资源统统给你准备好了
Sketch for mac v98.2最新版修复了打开某些文档时导致 Sketch 崩溃的错误
【MySQL进阶】深入理解B+树索引底层原理
java程序员进阶必读书单
基于bootstrap，企业内部管理系统后台框架前端源码，响应式布局
Unity 3D 简易对象池
要学习使用 calib3D 模块在图像中创建 3D 效果-姿势估计
【MediaSoup---源码篇】（五）接收RTP数据的处理
线性表与链表的详解
《C++》继承

原文地址：https://blog.csdn.net/qq_61727355/article/details/126585975