HTML5布局阶段--盒模型
一. 标准盒模型
默认情况下盒子的边框是无,背景色是透明的,所以在默认情况下看不到盒子
盒子由 margin , border , padding , content (盒子中的内容)四部分组成。
-
元素(块元素或者内联块)的实际大小 = 内容 + padding + border
-
width/height 只是去设置盒模型中的 内容区域
-
之前所学习的对齐方式: text-align,line-height,vertical-align 全部都是在 内容 区域中的对齐
-
而盒模型的属性是针对整个 内容区域 来布局调整
-
其中 padding 会增加元素的实际占位大小,padding用来调整自身 子元素 的位置
二. padding 内间距
-
padding: 内间距,用于控制内容与边框的距离
一个值: 上下左右
两个值: 上下,左右
三个值: 上,左右,下
四个值: 上,右,下,左 -
专门设定某一方向的 padding
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距
<!DOCTYPE html>
<html>
<head>
<title>padding</title>
<style type="text/css">
.box{
width