1.盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

2.盒模型分为：标准盒模型和非标准盒模型

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

两者区别：计算宽高的方式不一样

1）标准盒模型：除IE以外的所有浏览器都是标准盒模型

width=content的宽；

height=content的高；

2）非标准盒模型：又称怪异盒模型，只有IE是使用该模型

width=content的宽+padding*2+border*2；

height=content的高+padding*2+border*2；

3.盒模型体系

4.盒模型详细说明

5.熟练盒模型：做一个如下效果图

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box1{

                border:dotted;margin:0px auto;padding:25px;width:350px;

            }

            .box2{

                border:5px solid blue;padding:20px

            }

            .box3{

                background:#ffa0df;padding:48px;

            }

            .box4{

                border:1px dotted white;padding:5px;

            }

            .box5{

                border:1px dotted white;padding:40px;

            }

            .box6{

                width:100px;height:100px;border:5px solid yellow;background:greenyellow;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2">

                <div class="box3">

                    <div class="box4">

                        <div class="box5">

                            <div class="box6">

                            </div>

                        </div>

                    </div>

                </div>

            </div>

    </body>

</html>

一天搞定CSS：盒模型content、padding、border、margin--06的更多相关文章

  1. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  2. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  3. 深入理解CSS盒模型

    如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种 ...

  4. Python-html css 盒模型

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>ht ...

  5. CSS 盒模型、解决方案、BFC 原理讲解--摘抄

    PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...

  6. CSS盒模型总结（一）

     一.基本概念 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版,盒模型的组成:content padding border margin 二.盒模型的分类 盒子模型有两种,分别是 ie ...

  7. 深入理解CSS盒模型（转）

    转自:https://www.cnblogs.com/chengzp/p/cssbox.html 基本概念 盒模型的组成大家肯定都懂,由里向外content,padding,border,margin ...

  8. 深入理解CSS盒模型【转载】

    下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基 ...

  9. css盒模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...

  10. 前端之CSS盒模型介绍

    css盒模型 css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距); 1.content: width:数值+单位 ...

随机推荐

  1. for xml path 如何将字段转换为xml的属性

    for xml path 如何将字段作为xml的属性: 可在查询时 别名用 as ＇@．．＇ 如'@value' 如下实例: SELECT A.GiftSetGUID AS '@value',A.Gi ...

  2. angular 过滤排序

    <table class="table"> <thead> <tr> <th ng-click="changeOrder('id ...

  3. jwt token Example - Python

    0 Pre Install Python3 Install PyCrypto Install PyJWT 1 token 由三部分组成 header, payload, sign 并用逗号连接各部分 ...

  4. vue学习笔记-one

    学习vue基础以来,看各种教程,练习,随手写写,有错误请大家指导, 目前vue已经升级到2.0的版本,学习也最好是2.0的版本开始. 先看vue的几个特点:1,简单,2,轻量,3,模块友好 4, 组件 ...

  5. Linux -atime、mtime、ctime

    Linux中,文件都有其自身的atime.mtime.ctime,在不同的命令下,各时间发生相应的改变.下面,我们来简单的介绍一下: atime (access time):表示最后一次访问文件或目录 ...

  6. 十二个 ASP.NET Core 例子

    原文地址:http://piotrgankiewicz.com/2017/04/17/asp-net-core-12-samples/ 作者:Piotr Gankiewicz 翻译:杨晓东(Savor ...

  7. Java项目中的一些注意事项

    一.关于包命名方式 例如:com.sun.spring.xxx.service.impl 第一级:公司域名的倒序com.sun 第二级:项目名称spring 第三级:模块信息xxx 第四级:功能顶层包 ...

  8. Java基础之equals方法和"= ="的区别

    ==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...

  9. 解决ajax跨域的方法原理详解之Cors方法

    1.神马是跨域(Cross Domain)   对于端口和协议的不同,只能通过后台来解决.   一句话:同一个ip.同一个网络协议.同一个端口,三者都满足就是同一个域,否则就是 跨域问题了.而为什么开 ...

  10. innobackup全备与恢复

    前提:xtrabackup.mysql安装完成,建立测试库reading.测试表test,并插入三条数据. 1.全备:      innobackupex --user=root --password ...