css盒子模型

css模型概述

<style>    .d1 {        /*盒子在网页中实际所占的宽度*/        /*300px + 20px + 2px*/        /*盒子在网页中实际所占有的宽度(高度):width+ padding*2 + border*2 */        width: 300px;        height: 300px;        padding:10px; /*内边距*/        border: 1px solid #ccc;        margin: 10px; /*外边距*/    }</style>

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
术语解释：

height：高度

width:宽度

padding：内边距

maigin:外边距

border:边框

CSS padding属性

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

* {        /*把网页中默认的margin和padding去掉*/        margin:0;        padding:0;    }    .d1 {        width: 160px;        height: 160px;        background-color: orange;        /*padding:10px ; 上下左右四个方向都为10px*/        /*padding:10px;*/        /*当padding:10px 20px ;设为两个值的时候，第一个表示上下，第二值表示左右*/        /*padding:10px 20px;*/        /*当padding:10px 20px 30px 设置为三个值的时候，第一个值表示上 第二个值表示左右，第三个值表示下*/        /*padding:10px 20px 30px;*/        /*四个值的时候，采用上右下左*/        padding:10px 20px 30px 40px;        /*padding:20px;        padding-left: 30px;*/    }

显示效果如下：

padding上右下左顺时针顺序依次为10px,20px,30px,40px。

CSS border边框

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。

.d1 {        border:10px solid red;    }

边框有很多属性可以自行设计篇幅有限这里不详细介绍。

CSS margin属性

设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。

p {margin: 20px 30px 30px 20px;}