安静的敲着键盘，已势不可挡的姿势逼近php，我想我是一个幸福的人，未来不可期，做好现在，偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识。

本文盒模型理解。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>border,padding,margin盒模型理解</title>

    <style>

        div{

            /*width: 50px;

            height: 50px;*/

            /*background-color: red;*/

            /*正常的情况下，我们给一个元素指定宽度和高度的时候，我们只是设置了内容区域的宽度和高度，像这个50*50的盒子*/

            /*border: 25px solid black;

            padding: 25px;

            margin: 25px;*/

            /*如果加上边框和内外边距，这个div的总宽度就会变成

            50+50（左右边框）+50（内边距）+50（外边距）*/

            /*当你在根据psd文件写效果的时候，用ps量尺寸的情况下，你就要细心量

            取内容区域了，要100%逼近效果图*/

            /*box-sizing: border-box;*/

            /*width: 300px;

            height: 300px;*/

            /*当然默认情况下一个盒子的box-sizing:content-box;,就是上述情况下盒子的总宽度是由宽度加上边框和内外边距。

            还有一种情况就是怪异盒模型，在css中加上box-sizing:border-box;

            这一种情况就是把盒子的大小固定，给到的width和height就是

            包含边框和内边距（无外边距），总宽度就要加上外面局*/

            /*此时这个盒子的width是50（左右边距）+50（内边距）+200（内容区域），总宽度需要加上外边距的100.*/

            /*我们可以总结默认情况下，width就是内容的宽度

            怪异合模型下，width包含border和padding加上内容宽度.*/

            /*给定一个div，让我们来对其边框可以有以下操作：*/

            /*border-style：none;*/

            /*默认情况下，边框样式是无边框

            solid表示实线；

            dashed虚边框；

            dotted点线边框，ie6下存在兼容性问题；*/

            /*border-width: 10px;*/

            /*这是边框宽度*/

            /*border-color: red;*/

            /*这是给定边框颜色*/

            /*对于单独设置一边或多边便不过多解释*/

            /*border:5px solid red;*/

            /*通常情况下我们简写边框样式*/

            /*padding-top: 10px;

            padding-right: 20px;

            padding-bottom: 30px;

            padding-left: 40px;*/

            /*这是对内边距的各个方向的设定（不多解释），直接用padding

            来书写会有一下几种格式*/

            /*padding: 10px;

            padding: 5px 10px;

            padding: 5px 10px 15px;

            padding: 5px 10px 15px 20px;*/

            /*margin同padding（写法一致）*/

            /*1,对于兄弟关系的相对margin值，会相对叠加，比如水平

            排列的两个div，a的margin-right为50px

            和b的margin-left为100px;a和b的间距就是100px(取大值)。*/

            /*2，对于父级来说，第一个子级的margin-top,会影响父级的布局，

            可以给父级加边框或者用padding-top代替；不建议用overflow:hidden;

            提示：对于第一个子级来说，避免用margin-top.*/

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

border，padding，margin盒模型理解的更多相关文章

  1. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  2. 面试汇总——说一下CSS盒模型

    本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高 根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...

  3. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  4. 深入理解CSS盒模型

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

  5. Uint 5.css继承权重,盒模型和border padding

    一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...

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

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

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

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

  8. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  9. CSS布局定位基础-盒模型和定位机制

    1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...

随机推荐

  1. Dubbo工作原理，集群容错，负载均衡

    Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. Registry:服务 ...

  2. MySQL 数据库字段类型使用说明

    简介 MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型以及字符串(字符)类型. 数值类型 下列用于描述的代码字母中: M表示最大的显示尺寸.最大的合法的显示尺寸是 255 .(注 ...

  3. [Swift]LeetCode390. 消除游戏 | Elimination Game

    There is a list of sorted integers from 1 to n. Starting from left to right, remove the first number ...

  4. [Swift]LeetCode962. 最大宽度坡 | Maximum Width Ramp

    Given an array A of integers, a ramp is a tuple (i, j) for which i < j and A[i] <= A[j].  The ...

  5. [Abp 源码分析]五、系统设置

    0.简要介绍 Abp 本身有两种设置,一种就是 上一篇文章 所介绍的模块配置 Configuration,该配置主要用于一些复杂的数据类型设置,不仅仅是字符串,也有可能是一些 C# 运行时的一些变量. ...

  6. Pycharm使用教程（三）（非常详细，非常实用）

    1. 汉化:把resources_zh.jar拷贝到PyCharm的安装目录下的lib目录,重启Pycharm即可. (resources_zh.jar汉化包关注本账号获取:链接: https://p ...

  7. MSSQL TABLE COPY TABLE

    SQL Server中,如果目标表存在: insert into 目标表 select * from 原表; SQL Server中,,如果目标表不存在: select * into 目标表 from ...

  8. 说一说MVC的CustomHandlerErrorAttribute（五）

    九月第一篇,呵呵 前言:最近刚入职了一家公司,上司让我维护一个项目,我接手了看了一下项目,try catch 严重影响我的视觉,我直接通过vs插件将其try catch全部替换掉占位符,呵呵. 所以我 ...

  9. Python爬虫入门教程 2-100 妹子图网站爬取

    妹子图网站爬取---前言 从今天开始就要撸起袖子,直接写Python爬虫了,学习语言最好的办法就是有目的的进行,所以,接下来我将用10+篇的博客,写爬图片这一件事情.希望可以做好. 为了写好爬虫,我们 ...

  10. [工具]PyCharm激活、注册码无效解决办法

    前言 我是个 Pythoner,开发工具一直使用的 JetBrains 的 PyCharm.我师傅告诉过我:一个程序员一定要有一个用的很 6 的 IDE,你的开发效率会提高很多,很多... 我从小白的 ...