盒子模型应用

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>盒子模型应用</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .top {

            width: 100%;

            height: 50px;

            background-color: black;

        }

        .top_content {

            width: 75%;

            height: 50px;

            margin: 0px auto;

            background-color: blue;

        }

        .body {

            margin: 20px auto;

            width: 75%;

            height: 1500px;

            background-color: blanchedalmond;

        }

        .body_img {

            width: 100%;

            height: 400px;

            background-color: darkorange;

        }

        .body_content {

            width: 100%;

            height: 111px;

            background-color: blueviolet;

        }

        .body_no {

            width: 100%;

            height: 50px;

            background-color: aqua;

        }

        .footing {

            width: 75%;

            height: 400px;

            background-color: indigo;

            margin: 0px auto;

        }

        .footing_content {

            width: 100%;

            height: 330px;

            background-color: darkseagreen;

        }

        .footing_subnav {

            width: 100%;

            height: 70px;

            background-color: black;

        }

    </style>

</head>

<body>

    <div class="top">

        <div class="top_content">

        </div>

    </div>

    <div class="body">

        <div class="body_img"></div>

        <div class="body_content">

            <div class="body_no"></div>

        </div>

    </div>

    <div class="footing">

        <div class="footing_content"> </div>

        <div class="footing_subnav"> </div>

    </div>

</body>

</html>

css 盒子模型应用的更多相关文章

  1. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  2. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

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

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

  4. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  5. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  6. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  7. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  8. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  9. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  10. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

随机推荐

  1. STUN和TURN协议解析

    在现实Internet网络环境中,大多数计算机主机都位于防火墙或NAT之后,只有少部分主机能够直接接入Internet.很多时候,我们希望网络中的两台主机能够直接进行通信,即所谓的P2P通信,而不需要 ...

  2. cnblogs 自定义主题字体渲染方案

    渲染效果图 由于我一直偏好衬线字体,所以在采用 Silence 主题 之后,还参照谢益辉的博客字体方案进行了改进 首先,在页首代码中添加盘古之白,如果你同时编写 中/英 文博客,你当然应该学习谢益辉的 ...

  3. ABC156D

    [题目链接]https://atcoder.jp/contests/abc156/tasks/abc156_d 简单数论问题,题意就是有n个数,不能组成a与b个数,问有多少种组合方式 那就是C(n,1 ...

  4. 4_5 追踪电子表格中的单元格（UVa512）（选做）

    在电子表格中的数据都存储在单元格中,它是按行和列(R)(C).一些在电子表格上的操作可以应用于单个单元格(研发),而其他的可以应用于整个行或列.典型的单元操作包括插入和删除行或列和交换单元格内容.一些 ...

  5. Python爬虫：requests模块的基本使用

    官方文档:https://requests.readthedocs.io/zh_CN/latest/ 基本使用 基本结构 发送请求,获取响应:r = requests.get(url) 爬取网页的通用 ...

  6. Java 9 New Features

    Java 9 概述 1. jdk 9 的发布.经过 4 次跳票,历经曲折的 java 9 终于终于在 2017 年 9 月 21 日发布. 2. Java 9 中哪些不得不说的新特性?java 9 提 ...

  7. 显ipQQ

    链接:https://pan.baidu.com/s/1l1WN4b3jT8n4e66DH8d-cg 提取码:kjm4

  8. 杭电 1772 cake

    Cake Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  9. ES-9200端口与9300端口

    (1)Elasticsearch是基于lucene的全文检索服务器 (1)9300:ES节点之间的通讯使用 (2)9200:ES节点和外部通讯使用

  10. leetcode 0211

    目录 ✅ 1217. 玩筹码 描述 解答 c java py ✅ 206. 反转链表 描述 解答 c java py ✅ 922. 按奇偶排序数组 II 描述 解答 c 双指针soldier tddo ...