安静的敲着键盘，已势不可挡的姿势逼近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. [Swift]LeetCode46. 全排列 | Permutations

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  2. [Bash]LeetCode194. 转置文件 | Transpose File

    Given a text file file.txt, transpose its content. You may assume that each row has the same number ...

  3. [Swift]LeetCode968.监控二叉树 | Binary Tree Cameras

    Given a binary tree, we install cameras on the nodes of the tree. Each camera at a node can monitor  ...

  4. iOS学习——浅谈RunLoop

    RunLoop的字面意思是运行循环.跑圈,一个App启动后能一直执行,就是因为启动后进入了一个循环,在这个循环中不断监听各种状态.手势动作,并做出相应的响应.这个循环就是我们今天要探究的RunLoop ...

  5. Nginx篇--解读nginx配置

    一.前述 之前讲解了Nginx的源码安装与加载到系统服务中去,http://www.cnblogs.com/LHWorldBlog/p/8298226.html今天详细讲解Nginx中的具体配置. 二 ...

  6. 运行PHP后台项目：xampp下载，安装，配置，运行PHP的web项目

    本来没有想着弄PHP,但是有同学叫我帮忙启动一下一个PHP写的后台.着实需要去学习一下. 想着安装xampp软件,一个集合了多个服务器,多个数据库,多个后台语言的管理软件. 一.xampp下载 二.安 ...

  7. 『NOIP2018普及组题解』

    标题统计 题目描述 凯凯刚写了一篇美妙的作文,请问这篇作文的标题中有多少个字符? 注意:标题中可能包含大.小写英文字母.数字字符.空格和换行符.统计标题字 符数时,空格和换行符不计算在内. 输入格式 ...

  8. 深入探究Lua的GC算法（上）-《Lua设计与实现》

    对于内存的管理,是程序在应用的时候的必需知识点,<Lua设计与实现>中对Lua语言的GC原理做了一个详细的讲解,云风的blog也对其进行了详尽的讲解Lua GC 的源码剖析 系列 给出作者 ...

  9. 可视化面板LogDashboard使用log4net源

    logdashboard现已支持log4net文件源,本示例源码在 https://github.com/liangshiw/LogDashboard/tree/master/samples/UseL ...

  10. leetcode — validate-binary-search-tree

    import apple.laf.JRSUIUtils; /** * Source : https://oj.leetcode.com/problems/validate-binary-search- ...