安静的敲着键盘，已势不可挡的姿势逼近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. 开源播放器 ijkplayer (六) ：Android 下使用 ijkplayer 异常处理思路

    一. java.lang.IllegalStateException: mpjni: setOptionLong: null mp 根据已查到的资料看,目前是ijk内部的问题,只能通过try& ...

  2. java前后分离使用fetch上传文件失败500

    这次不是写什么技术要点,仅仅是记录一下 最近遇到的一个问题 背景 使用fetch向java后台上传文件时,前端调试报错500,后端的报错为multipart 无法解析,翻译过来大概是这个意思. 由于本 ...

  3. [Swift]LeetCode10. 正则表达式匹配 | Regular Expression Matching

    Given an input string (s) and a pattern (p), implement regular expression matching with support for  ...

  4. [Swift]LeetCode222. 完全二叉树的节点个数 | Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Note: Definition of a complete binary tree ...

  5. [Swift]LeetCode485. 最大连续1的个数 | Max Consecutive Ones

    Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: [1, ...

  6. 必须知道的Java八大排序算法

    冒泡排序.简单选择.直接插入.快速排序.堆排序.希尔排序.归并排序.基数排序. 将其按排序方式分类如下图所示: 1.冒泡排序: 基本思想——在要排序的一组数中,对当前还未排好序的范围内的全部数据,自上 ...

  7. HBase之Table.put客户端流程

    首先,让我们从HTable.put方法开始.由于这一节有很多方法只是简单的参数传递,我就简单略过,但是,关键的方法我还是会截图讲解,所以希望大家尽可能对照源码进行流程分析.另外,在这一节,我单单介绍p ...

  8. Python内置函数(29)——help

    英文文档: help([object]) Invoke the built-in help system. (This function is intended for interactive use ...

  9. PrismCDN 网络的架构解析，以及低延迟、低成本的奥秘

    5 月 19.20 日,行业精英齐聚的 WebRTCon 2018 在上海举办.又拍云 PrismCDN 项目负责人凌建发在大会做了<又拍云低延时的 WebP2P 直播实践>的精彩分享. ...

  10. IDEA搭建Spring Boot项目

    所需工具 新建项目 创建一个login控制器 写入两个注释 import导入项会自动添加@RestController@RequestMapping(value = "/login" ...