盒子模型



边框 border …外边距 margin…

内容与边框距离padding【会撑大div边框】…

宽width…高height。

div的奇特玩法

1.把div弄成圆形

【css设置border-radius: ?px;】

例子：<div class="circle" id="c1"></div>

css：

.circle{ width: 100px; height: 100px; border-radius: 50px; background: black； }



2.div画三角形

【1.设置宽高为0，设置边框大小与颜色，要三边透明色transparent】；

例如：<div id="top" class="trdiv"></div>

css：.trdiv{ width: 0px; height: 0px; margin: 0 auto; } #top{ border-bottom: 50px green solid; border-left: 50px transparent solid; border-right: 50px transparent solid; }

3.用1，2方法画画。【门窗可用表格实现更简单】



代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #top{

            width: 0px;

            height: 0px;

            border-bottom:160px brown  solid;

            border-left: 300px transparent solid;

            border-right: 300px transparent solid;

            float: left;

        }

        #moon{

            width: 60px;

            height: 60px;

            border-radius: 30px;

            float: left;

            margin-left: 1360px;

            background: darkblue;

        }

        #moon2{

            width: 80px;

            height: 80px;

            border-radius: 40px;

            /*float: left;*/

            margin-left: 1340px;

            background: yellow;

        }

        #rom{

            width: 400px;

            height: 300px;

            background: darkgrey;

            margin-left: 100px;

            margin-top: 50px;

            padding-top: 25px;

        }

        #yc1{

            width: 50px;

            height: 15px;

            background: gray;

            margin-left: 355px;

            border: 1px solid black;

        }

        #yc2{

            width: 40px;

            height: 80px;

            background: gray;

            margin-left:360px;

        }

        #window{

            width: 100px;

            height: 100px;

            border: 2px solid white;

            margin-left: 30px;

            float: left;

            margin-top: 50px;

        }

        #window td{

            border: 5px solid white;

            background: aqua;

        }

        #door{

            width: 100px;

            height: 200px;

            border: 5px solid white;

            float: left;

            margin-top: 100px;

            margin-left: 100px;

        }

        #door td{

            border: 5px solid white;

            background: aqua;

        }

        .trdiv{

            width: 0px;

            height: 0px;

            margin: 0 auto;

        }

        #treetop{

            border-bottom: 80px green solid;

            border-left: 50px transparent solid;

            border-right: 50px transparent solid;

        }

        #mid{

            border-bottom: 120px green solid;

            border-left: 100px transparent solid;

            border-right: 100px transparent solid;

        }

        #btm{

            border-bottom:250px green  solid;

            border-left: 200px transparent solid;

            border-right: 200px transparent solid;

        }

        #shugan{

            width: 50px;

            height: 200px;

            background: brown;

        }

        #house{

            margin-top: 178px;

            margin-left: 200px;

        }

        #tree,#house{

            float: left;

        }

        #tree{

            margin-top: 0px;

        }

        #hr1{

            clear: both;

        }

        .road{

            width: 100px;

            height: 100px;

            border: 20px dashed white;

            float: left;

            background: #5d5d5d;

        }

    </style>

</head>

<body bgcolor="#00008b">

    <div id="moon"></div>

    <div id="moon2"></div>

    <div id="house">

    <div id="top"></div>

    <div id="yc1"></div>

    <div id="yc2"></div>

    <div id="rom">

        <table id="window">

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

        </table>

        <table id="door">

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

            </tr>

        </table>

    </div>

    </div>

    <div id="tree">

        <div id="treetop" class="trdiv"></div>

        <div id="mid" class="trdiv"></div>

        <div id="btm" class="trdiv"></div>

        <div id="shugan" class="trdiv"></div>

    </div>

    <hr id="hr1"/>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

    <div class="road"></div>

</body>

</html>

前端HTML div标签的用法 盒子模型的更多相关文章

  1. DIV+CSS两种盒子模型（W3C盒子与IE盒子）

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  2. 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  3. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  4. DIV+CSS两种盒子模型

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.bord ...

  5. 前端-----margin用法(盒子模型里补充)

    margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...

  6. HTML之前端操作div标签布局

    事例图片: div元素是用于分组HTML元素的块级元素 上图代码示例如下: <!DOCTYPE html> <html lang="en"> <hea ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  9. js中的盒子模型

    说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...

随机推荐

  1. Linux时间的相关的操作

    时间(修改时区,修改时间,同步网络时间) 查看当前系统时间 date 修改时区 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 修改当前系统时间 ...

  2. python语法学习第一天--变量、运算符、数据类型

    变量:计算机中的一块内存,给变量赋值意味着将值存入内存中 python中变量不用类型声明(根据赋的值决定类型),但使用时(创建时)必须赋值(=赋值). 多个变量的赋值: ①a=b=c=1; ②a,b, ...

  3. js前端获取当前日期，日期格式为yyyy-mm-dd HH:MM

    var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1; var day = date. ...

  4. 通过PAML中的CODEML模块计算dnds的过程以及踩坑

    最近帮女朋友做毕业设计的时候用到了 PAML这个软件的codeml功能,发现网上相关的资料很少,于是把自己踩的一些坑分享一下,希望能帮到其他有相同困难的人 一.下载与安装 PAML软件下载地址 htt ...

  5. &#128075;嗨，你有一份微信好友报告待查收～

    全部代码都已上传至我的KLab-

  6. easytornado

    0x01 进入网站,发现3个文件 逐一查看 flag.txt url:?filename=/flag.txt&filehash=d3f3ff3f92c98f5f0ff4b8c423e1c588 ...

  7. GitHub 热点速览 Vol.20：VSCode 插件全家桶新增画图小能手

    作者:HelloGitHub-小鱼干 摘要:后浪,这个五月热词用来概括 GitHub 本周热点无疑是最佳词汇.Deno 这个 Node.js 作者制造出来的后浪,掀起了 GitHub Trending ...

  8. ClickHouse基本操作（二）

    一.先来说一下,ClickHouse为啥快 MySQL单条SQL是单线程的,只能跑满一个core,ClickHouse相反,有多少CPU,吃多少资源,所以飞快: ClickHouse不支持事务,不存在 ...

  9. Redis安装启动（linux系统）

    Redis简介 redis是以kv存储的nosql非关系型数据库 sql支持事务性,nosql不支持 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间 ...

  10. CF #459 D. MADMAX

    D. MADMAX time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...