盒模型
- HTML中,万物皆是盒模型
- 只要HTML中的标签,你都可以通过设置盒模型相关的内容,对这个元素产生影响
盒模型的组成
- 月饼 content :width;height
- 填充物 padding:内边距
- 月饼盒 border:边框
- 月饼盒外 margin:外边距
content
- width
- height
背景
- 设置背景颜色:background-color 颜色的写法
- 1、英文
- 2、#ffffff
- 3、rgb()
- 4、rgba()
- 设置背景图片:background-image url()
- 设置背景重复方式:background-repeat
- 1、repeat(重复)
- 2、repeat-x
- 3、repeat-y
- 4、no-repeat
- 设置背景定位:background-position:如果设置了一个数值,另外一个数值默认是center
- 背景的复合写法:background
- 书写顺序:
- 1、颜色
- 2、图片
- 3、定位
- 4、重复方式
- 背景随着页面的滚动:background-attachment,会造成偏移
- scroll:滚动,默认值
- fixed:固定的
- 设置背景图片尺寸:background-size: CSS 3 的属性,可以设置背景图片的大小
padding
- 用于控制 盒子内容 和 盒子边框 之间的位置
- 内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
- 复合写法
- 如果四个值,分别对应:上、下、左、右
- 如果三个值,分别对应:上、左右、下
- 如果两个值,分别对应:上下、左右
- 如果一个值,四周都相同
border
- 边框
- border
- 书写顺序
- 宽度
- 样式
- 颜色
- 样式
- solid:实线
- double:如果宽度为1px,无效果
- dotted:点状线,在大部分浏览器显示为实线
- dashed:虚线,在大部分浏览器显示为实线
- border-width
- border-color
- border-style
- border-radius:CSS3的属性
margin
- 外边距
- 专门用于控制盒子和盒子之间的一个位置
- 可以设置负数
- margin有两种特殊情况:
- 如果两个元素是兄弟关系:第一个元素的 margin-bottom 和第二个元素的 margin-top 会产生叠压(去绝对值最大值)
- 如果两个元素是父子关系:子级第一个元素的margin-top会传递给父级
- 解决方案:
- 给父级设置边框
- 给父级设置 overflow:hidden
- 给父级设置 padding 注意盒子的大小
盒模型的实际大小
横向:border-left + padding-left + width + padding-right + border-right
纵向:border-top + padding-top + height + padding-bottom + border-bottom