安静的敲着键盘，已势不可挡的姿势逼近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. kali linux 网络渗透测试学习笔记（一）Nmap工具进行端口扫描

    一.利用Nmap扫描网站服务器的端口开放情况 首先打开我们的kali linux才做系统,再打开其命令行模式,输入:nmap www.csdn.net 如下图所示: 因此,通过这个结果可以表明csdn ...

  2. [Swift]LeetCode628. 三个数的最大乘积 | Maximum Product of Three Numbers

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  3. [Swift]LeetCode821. 字符的最短距离 | Shortest Distance to a Character

    Given a string S and a character C, return an array of integers representing the shortest distance f ...

  4. mysql与PHP建立连接实现增删查改

    mysql与PHP连接的查询写法: <?php //1.建立与数据库的连接 //类似于宽字符集问题,mysqli是额外的扩展 //需要找到配置文件去开启扩展 //如果需要在调用函数 之前忽略错误 ...

  5. 发布core到linux

    1.安装虚拟机之后,发现可以ping通但是telnet提示失败 CentOS 7.0默认使用的是firewall作为防火墙(我们需要把防火墙关掉) 查看防火墙状态 firewall-cmd --sta ...

  6. Python内置函数(13)——complex

    英文文档: class complex([real[, imag]]) Return a complex number with the value real + imag*1j or convert ...

  7. 祝雷（依乐祝）：一份来自29岁.NET老程序员的自白

    潘老师的文笔果然了得,经过潘老师的妙笔生花后,文章的阅读体验果然好了很多!这里再次感谢潘老师的支持! 祝雷(合肥.NET 俱乐部发起人) [个人介绍] 博客园知名博主(依乐祝).6年以上.NET技术栈 ...

  8. 查询运营商的ip段

    查询运营商的ip段 所有的IP地址都是通过国际组织NIC(Network Information Center)统一分配的,目前世界上有三个这样的网络信息中心: InterNic: 负责美国及其他地区 ...

  9. [转]基于.NET平台常用的框架整理

    自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到,就 ...

  10. Nancy in .Net Core学习笔记 - 视图引擎

    前文中我们介绍了Nancy中的路由,这一篇我们来介绍一下Nancy中的视图引擎. Nancy中如何返回一个视图(View) 在ASP.NET Mvc中,我们使用ViewResult类来返回一个视图.N ...