盒子模型



边框 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. 【Kafka】Producer API

    Producer API Kafka官网文档给了基本格式 地址:http://kafka.apachecn.org/10/javadoc/index.html?org/apache/kafka/cli ...

  2. 【Hadoop离线基础总结】Hue与Hive集成

    目录 1.更改hue的配置hue.ini 2.启动hive的metastore以及hiveserver2服务 3.启动hue进程,查看Hive是否与Hue集成成功 1.更改hue的配置hue.ini ...

  3. Git、Github习笔记01——Git本地仓库

    作者:Eventi 出处:http://www.cnblogs.com/Eventi 欢迎转载,也请保留这段声明.谢谢! git简介 版本控制软件,由Linus(linux开发者)开发,最初用来对li ...

  4. 接口（API）测试理念

    什么是接口测试 接口测试就是针对软件对外提供服务的接口的输入输出进行测试,以及接口间相互逻辑的测试,验证接口功能与接口描述文档的一致性: 测试的重点是检查数据交互.传递.和控制管理过程以及系统间的相互 ...

  5. mysql 5.7.22安装

    1.解压目录. 2.安装 3.重新设置密码 set password=password('123456'); FLUSH PRIVILEGES;

  6. sh: react-scripts: command not found after running npm start

    今天遇到一堆bug,从早上10点到现在8成的时间都像是浪费了..... https://stackoverflow.com/questions/40546231/sh-react-scripts-co ...

  7. 14.2 Go性能优化

    14.2 Go性能优化 优化手段 1.减少HTTP请求数,合并CSS.JS.图片 2.使用CDN,就近访问 3.启用nginx gzip压缩,降低传输内容大小 4.优化后端api性能 api服务性能优 ...

  8. HDU-6393 Traffic Network in Numazu

    题意:给你一个n边n点的无向连通图,两个操作,操作一改变某个边的权值,操作二查询某两个点之间的路径长度. 题解:随便删掉环上一条边搞一棵树出来,因为两点间距离是两点各自到根的距离之和减去2*lca两点 ...

  9. GYM101635E Ingredients

    题目链接:https://vjudge.net/problem/Gym-101635E 题目大意: 给定一个有 \(N\) 条边的有向无环图(有多个起点),每条边都有其费用和收益,现要从一个或多个起点 ...

  10. 【Java】Scanner类nextInt后使用nextLine无法读取输入

    首先,我们先介绍一下,在学习Java语言,对于字符串的输入,由于Scanner.next()函数无法输入空格及回车,此时,我们就必须要用Scanner.nextLine()解决这类问题, 在使用过程中 ...