盒子模型



边框 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. etcd环境安装与使用

    etcd简介 etcd是开源的.高可用的分布式key-value存储系统,可用于配置共享和服务的注册和发现,它专注于: 简单:定义清晰.面向用户的API(gRPC) 安全:可选的客户端TLS证书自动认 ...

  2. SwiftUI - 一起来仿写微信APP之一首页列表视图

    简介 最近在学习 SwiftUI ,我一般都是先去学习界面布局,所以就想着仿写一下经常使用的软件的界面,所以先拿微信开刀.因为不想一次性发太多的内容,所以只好将主题分解,一部分一部分地去讲,接下来我们 ...

  3. [hdu1506]单调队列（栈）

    题意:http://acm.hdu.edu.cn/showproblem.php?pid=1506看图一目了然.两个方向单调队列维护下. #include <iostream> #incl ...

  4. 第六次java上机作业

    .编写一个简单程序,要求数组长度为5,静态赋值10,,,,,在控制台输出该数组的值. package mm; public class Test { public static void main(S ...

  5. 4-JVM 参数

    JVM 参数 标准参数:不会随着jdk版本的变化而变化.比如:java -version.java -help 非标准参数:随着JDK版本的变化而变化. -X参数[用的较少]非标准参数,也就是在JDK ...

  6. mybatis 自定义缓存 cache

    缓存不管哪个框架都是显得特别的重要,今天自己测试实现了mybatis自定义缓存,从而理解mybatis缓存的工作原理. 首先缓存类要实现Cache接口:具体实现如下package com.ibatis ...

  7. 基于Memcached的Nginx服务器集群session共享

    原料:jdk1.8,tomcat7,nginx1.16,memcached-1.2.6,Mem-Tomcat需要的jar包,基于windows7.所有的点击以下链接可下载 链接:https://pan ...

  8. javascript----放大模式

    放大模式 1.介绍:放大模式降低模块之间直接的联系,降低耦合,当一个模块出现错误,不会影响另一个模块的功能

  9. MyEclipse安装后的配置

    一.Window-->Preferences-->General --> Workspace --> UTF-8 作用:从此以后,你创建的任何项目编码都是UTF-8,一次解决所 ...

  10. P2756 飞行员配对方案问题 网络流

    P2756 飞行员配对方案问题 #include <bits/stdc++.h> using namespace std; , inf = 0x3f3f3f; struct Edge { ...