CSS3------盒模型

盒模型

每个标签在浏览器上都被渲染成一个矩形个盒子,这个盒子有一个标准都组成结构,我们称为标准盒模型

盒模型构成

CSS3------盒模型_第1张图片

 







盒模型基本构成



内容
内容: width height ,写在文档中标签中的部分所占的宽和高 content
内边距 padding 内容到边界之间到距离
(1)padding:
  • 1=>代表四个方向设置相同的内边距 padding:5
  • 2=> 上下 左右
  • 3=> 左右
  • 4=> 左(顺时针)
(2)top right bottom left
  • padding-left: 5px;
border 设置的区域
外边距 margin 定义方式和 padding 一致
盒子在界面上的渲染大小
  • 宽度 = width + 左右的padding +

你可能感兴趣的:(css3,前端,css)