• CSS盒子模型


    盒子模型

    1. 什么是盒子模型

    img

    margin:外边距

    padding:内边距

    border:边框

    2. 边框

    1. 边框的样式
    2. 边框的粗细
    3. 边框的颜色
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            /*常见操作,初始化0*/
            h1, ul, li, a, body{
                /*body总有一个默认的外边距,这里使之为0*/
                margin: 0;
                padding: 0;
                text-decoration: none;
            }
            /*border: 粗细 样式 颜色*/
            #box{
                 300px;
                border: 1px solid red;
            }
    
            h2{
                font-size: 16px;
                background-color: rosybrown;
                line-height: 30px;
                margin: 0;
            }
    
            form{
                background: greenyellow;
            }
            /*solid实线*/
            div:nth-of-type(1) input{
                border: 3px solid black;
            }
            /*dashed虚线*/
            div:nth-of-type(2) input{
                border: 3px dashed yellow;
            }
            div:nth-of-type(3) input{
                border: 2px dashed violet;
            }
        </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="text">
            </div>
        </form>
    </div>
    
    </body>
    </html>
    

    3. 内外边距

    外边距的妙用:居中元素
    margin: 0 auto;

    利用margin居中的要求

    1. 块元素(div)
    2. 块元素有固定的宽度
    3. 写在style的div中

    margin顺时针旋转

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <!--
        外边距的妙用:居中元素
            margin: 0 auto;
    	margin顺时针旋转
        -->
        <style>
            #box{
                 300px;
                border: 1px solid red;
                margin: 0 auto;
            }
    
            h2{
                font-size: 16px;
                background-color: rosybrown;
                line-height: 30px;
                margin: 0;
            }
    
            form{
                background: greenyellow;
            }
            input{
                border: 1px solid black;
            }
        </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="text">
            </div>
        </form>
    </div>
    
    </body>
    </html>
    

    盒子的计算方式:当前元素到底多大?

    margin+border+padding+内容宽度

    4. 圆角边框

    4个角

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                 100px;
                height: 50px;
                border: 10px solid red;
                border-radius: 50px 50px 0px 0px;
                margin: 0 auto;
            }
            /*图片削圆角*/
            img{
                border-radius: 200px;
            }
        </style>
    </head>
    <body>
    
    <div></div>
    
    <img src="images/book_cover.jpg" alt="">
    
    </body>
    </html>
    

    5. 盒子阴影

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            div{
                 500px;
                height: 1000px;
                margin: 0 auto;
            }
            img{
                 100px;
                height: 100px;
                border: 10px solid red;
                border-radius: 200px;
                box-shadow: 10px 10px 100px yellow;
            }
        </style>
    </head>
    <body>
    
    <div>
        <img src="images/book_cover.jpg" alt="">
    </div>
    
    </body>
    </html>
    
  • 相关阅读:
    【玩转开源】制作Docker镜像
    【玩转开源】Linux C 检测网口热插拔
    【玩转开源】BananaPi R2 —— 第四篇 Openwrt Luci 初探
    【玩转开源】BananaPi R2 —— 第二篇 Openwrt 网口配置分析
    .NET Core 中AutoMapper使用配置
    ElementUI 中控件 Select 大数据量渲染处理
    Echart处理X轴显示不全问题
    C#WebAPI中中log4net的配置步骤
    iis7.5 部署WebAPI
    core2.2部署IIS
  • 原文地址:https://www.cnblogs.com/wang-sky/p/13427004.html
Copyright © 2020-2023  润新知