盒子模型应用

<!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. 小白学 Python 爬虫（28）：自动化测试框架 Selenium 从入门到放弃（下）

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  2. 从头学pytorch(五) 多层感知机及其实现

    多层感知机 上图所示的多层感知机中,输入和输出个数分别为4和3,中间的隐藏层中包含了5个隐藏单元(hidden unit).由于输入层不涉及计算,图3.3中的多层感知机的层数为2.由图3.3可见,隐藏 ...

  3. sso系统登录以及jsonp原理

    登录的处理流程: 1.登录页面提交用户名密码. 2.登录成功后生成token.Token相当于原来的jsessionid,字符串,可以使用uuid. 3.把用户信息保存到redis.Key就是toke ...

  4. gitlab回退到某次commit——本地+远程

    ## 查看所有commits记录$ git log ## gitlab回退到某次commit$ git reset --hard 3018a546427e1f865524b82b488d6a2721d ...

  5. XCOJ1250: 语言战争

    1250: 语言战争 时间限制: 1 Sec  内存限制: 64 MB提交: 203  解决: 46 标签提交统计讨论版 题目描述 llc和yrc语言的优劣一直都是大家所争论的焦点,但它们之间最大的区 ...

  6. C++11⾥⾯很好⽤的auto声明

    本文摘录于柳神笔记: auto 是C++11⾥⾯的新特性,可以让编译器根据初始值类型直接推断变量的类型.⽐如这样: 当然这个在算法⾥⾯最主要的⽤处不是这个,⽽是在STL中使⽤迭代器的时候, auto ...

  7. 洛谷 P3009 [USACO11JAN]利润Profits

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P3009 这是DP的另一个功能,求最大子段和(最大子段和模板:https://www.luogu.or ...

  8. WPF TreeGrid Binding 简易实现方式

    在設計TreeView編輯狀況下,希望 TreeItemName 后续的编辑框 复选框 可以整齐排列. 参考微软提供的TREELISTVIEW,发现它是根据层级关系调整Margin 属性. 我这边按照 ...

  9. SqlService 并发测试

    使用Sql QueryStress 可输入需要的线程数量,执行次数,对SQL 语句或存储过程进行测试,可查看执行时间及资源耗用.

  10. 第七届蓝桥杯javaB组真题解析-方格填数（第六题）

    题目 /* 方格填数 如下的10个格子 +--+--+--+ | | | | +--+--+--+--+ | | | | | +--+--+--+--+ | | | | +--+--+--+ (如果显 ...