安静的敲着键盘，已势不可挡的姿势逼近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. 搭建一个舒适的 .NET Core 开发环境

    最近,一直在往.Net Core上迁移,随着工作的深入,发现.Net Core比.Net Framework好玩多了.不过目前还在windows下开发,虽然VisualStudio是宇宙第一神器,但是 ...

  2. Asp.Net Core中使用Swagger，你不得不踩的坑

    很久不来写blog了,换了新工作后很累,很忙.每天常态化加班到21点,偶尔还会到凌晨,加班很累,但这段时间,也确实学到了不少知识,今天这篇文章和大家分享一下:Asp.Net Core中使用Swagge ...

  3. 【RL-TCPnet网络教程】第27章 DNS域名系统基础知识

    第27章      DNS域名系统基础知识 本章节为大家讲解DNS(Domain Name System,域名系统),通过前面章节对TCP和UDP的学习,需要大家对DNS也有个基础的认识. (本章的知 ...

  4. IntelliJ Idea 2017 免费激活方法

    1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入下面的license server: http://intellij.mandroid.cn/ http://ide ...

  5. ubuntu系统界面改变

    主题:https://gitzab.com/Anduin/GNOME-OSX-II-Theme.git图标:https://github.com/keeferrourke/la-capitaine-i ...

  6. MySQL 数据库在 Windows 下修复 only_full_group_by 的错误

    本机上新安装了个MySQL数据库,在插入数据的时候一直提示这个错误: [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY ...

  7. 推荐 | Vue 入门&进阶路线

    今儿跟大家聊聊 Vue . 不得不承认, Vue 越来越受欢迎了.对比 Angular 和 React,虽然三者都是非常优秀的前端框架,但从 GitHub 趋势看,Vue 已经排在第一位,达到了13万 ...

  8. [Swift]LeetCode336. 回文对 | Palindrome Pairs

    Given a list of unique words, find all pairs of distinct indices (i, j) in the given list, so that t ...

  9. [Swift]LeetCode871. 最低加油次数 | Minimum Number of Refueling Stops

    A car travels from a starting position to a destination which is target miles east of the starting p ...

  10. [Swift]LeetCode1025. 除数博弈 | Divisor Game

    Alice and Bob take turns playing a game, with Alice starting first. Initially, there is a number N o ...