border,padding,margin盒模型理解

Posted lovemarvin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了border,padding,margin盒模型理解相关的知识,希望对你有一定的参考价值。

  安静的敲着键盘,已势不可挡的姿势逼近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盒模型理解的主要内容,如果未能解决你的问题,请参考以下文章

[CSS]盒模型(基本)

4.盒模型

盒模型的再认识

盒模型

标准盒模型与ie盒模型

什么是盒模型?