盒子模型



边框 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. 环境篇：Atlas2.0.0兼容CDH6.2.0部署

    环境篇:Atlas2.0.0兼容CDH6.2.0部署 Atlas 是什么? Atlas是一组可扩展和可扩展的核心基础治理服务,使企业能够有效地满足Hadoop中的合规性要求,并允许与整个企业数据生态系 ...

  2. 错误：Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use.

    Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are already in use. The ...

  3. 超过百万的StackOverflow Flutter 问题-第二期

    老孟导读:一个月前分享的<超过百万的StackOverflow Flutter 问题-第一期>受到很多朋友的喜欢,非常感谢大家的支持,在文章末尾有第一期的链接,希望此文能对你有所帮助. N ...

  4. 搜索引擎优化（SEO）

    一.SEM SEM(Search Engine Marketing)即搜索引擎营销.SEM是一种新的网络营销模式.SEM所做的就是全面有效地利用所搜引擎来进行网络行销推广.SEM追求最高的性价比,以最 ...

  5. 黑马程序员_毕向东_Java基础视频教程——java语言组成部分（随笔）

    java语言组成部分 Java是一种强类型语言,所谓强类型语言就是对具体的数据进行不同的定义.对类型的划分的十分细致,对内存中分配了不同大小的内u你空间 关键字 标识符 注释 变量和常量 运算符 语句 ...

  6. PAT 1010 Radix (25分) radix取值无限制，二分法提高效率

    题目 Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The ...

  7. helm使用

    helm 0. helm安装 基本上到github上面,下载二进制就行.mac的话用brew安装. https://github.com/helm/helm brew: brew install ku ...

  8. 「雕爷学编程」Arduino动手做（32）——雨滴传感器模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...

  9. mysql小白系列_07 锁与事务

    1.MySQL参数autocommit生产环境设1还是0?为什么? 2.MySQL参数tx_isolation生产环境上大多数是设什么值,为什么? 3.与MySQL锁相关的有哪些因素? 1.MySQL ...

  10. 仙人掌图判定及求直径HDU3594 BZOJ1023

    https://wenku.baidu.com/view/ce296043192e45361066f575.html   //仙人掌图基础知识3个判定条件 http://blog.csdn.net/y ...