CSS基础---盒子模型

盒子模型

width和height指内容区域的宽度和高度

元素实际宽度=左右外边距+左右边框+左右内边框+width；

元素实际高度=上下外边距+上下边框+上下内边距+height；

margin外边距

1.围绕在元素边框周围的空白区域

2.语法：margin：value；

  属性：

margin：value     四个方向的外边距

margin-left：     左外边距

margin-right：    右外边距

margin-top：      上外边距

margin-bottom：   下外边距

 

 取值：1）具体数值（px）

           2）% 百分比

           3）值为auto，由浏览器自动计算 左右外边距，上下无效

           允许让块级元素 ， 呈现出水平居中的表现效果，前提：块级元素必须设置宽度

3.举例

margin：0；                取消默认外边距

margin：10px 20px ；       上下各10像素外边距，左右各20像素外边距

margin：5px 10px 15px；    上外边距：5像素，左右外边距：10，下外边距：15

margin：1px 2px 3px 4px ； 上 1，右 2，下 3，左4

padding内边距

1.内容区域与边框之间的区域

2.语法：

属性：

 

padding：value            四个方向的内边距

padding-left：1px；       左内边距

padding-right：2px；      右外边距

padding-top：3px；        上内边距

padding-bottom：4px；     下内边距

 

取值：数值，%

用法与margin相似

border边框

    定义四条边框的格式： 宽度，样式，颜色
                         border:    width   style    color;

1.  width:宽度
2. style:边框线条样式 ：solid ：实线       dotted ：虚线        dashed ：虚线
3. color:颜色 ，还可以取值为透明  transparent