盒子模型

盒子模型

盒子模型_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body
        {
      
            /*body 总有一个默认的外边距margin*/
            margin: 0px;
            padding : 0px;
            text-decoration: none;
        }
        div[id="box"]{
      
            width: 300px;
            /*border边框 : 边框大小 边框样式 边框颜色*/
            border: 1px solid red;
        }
        form{
      
            background: chartreuse;
        }
        h2{
      
            font-size: 18px;
            background-color: #C850C0;
            line-height: 30px;
            margin: 0;
            padding : 0;
        }
        div:nth-of-type(1) input{
      
            /*solid实线*/
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
      
            /*dashed 虚线*/
            border: 3px dashed pink;
        }
        div:nth-of-type(2) input{
      
            border: 3px solid purple;
        }
    style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<form action="#">
    <div>
        <span>用户名:span>
        <input type="text">
    div>
    <div>
        <span>密码 :span>
        <input type="password">
    div>
    <div>
        <span>邮箱span>
        <input type="email">
    div>
form>
div>
body>
html>

外边距margin

外边距可以使得元素居中 margin : 0 atuo

上下外边距为0 左右auto自动调整 ——> 居中

margin : x1 x2 x3 x4 ; 
/*四个参数 : 上下左右*/
margin : x1 x2;
/*两个参数 : 上下 、 左右*/

内边距 padding

和外边距 margin 相似

边框圆角 border-radius

例如 : 正方形 ———> 圆形

盒子阴影 box-shadow


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框title>
    <style>
        body{
      
            margin:0;
            padding:0;
        }
        div{
      
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*每个radius的四个值分别是 左上角 右上角 左下角 右下角*/
            border-radius : 50px 50px 50px 50px ;
            box-shadow: 10px 10px 10px yellow;
        }
        img{
      
            width: 100px;
            height: 100px;
            border-radius : 50px 50px 50px 50px ;
        }
    style>
head>
<body>
<div>
    <img src="./头像.png" alt="">
div>
body>
html>

盒子模型_第2张图片

你可能感兴趣的:(前端)