1、文档流
块元素和行内元素
2、盒子模型
- content 内容区
- padding 内边距 四个方向padding-top,right,bottom,left 简写:padding:10px 20px 30px 40px(注意:内边距的设置会影响盒子的大小,背景颜色会延伸到内边距上)
- border 边框 需要设置border-width,border-color,border-style,不过可以简写border:solid red 30px;
- margin 外边距(会影响盒子占用空间的大小)用法和内边距一样
盒子是有以上几个部分组成的;盒子的可见大小由:边框,内容区,内边距三者相加决定
3.水平布局
元素水平方向的布局:元素在其父元素中水平方向的位置由以下几个属性共同决定
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
一个元素在其父元素中的水平布局必须满足这个等式:7个属性相加=父元素内容区的宽度(必须满足)如:0+0+0+200+0+0+0=800
如果等式不成立,则成为过度约束,会自动调整:
如果7个值中没有auto的情况下,会调整margin-right;七个值中有三个可以设置为auto:width,margin-left,margin-right;如果两个外边距设置为auto则居中;如果是宽度是auto,那么宽度会最大,外边距为0
4、垂直布局
子元素在父元素的内容区排列,如果子元素的大小超过父元素,则会溢出
使用overflow属性来设置父元素如何处理溢出的子元素部分,可选值:
- visible 默认值,直接在外部显示
- hidden 溢出部分会被裁剪掉
- scroll 生成两个滚动条
- auto 根据需要生成滚动条
5、外边距的重叠
相邻的垂直方向的外边距会发生重叠现象:
兄弟元素:兄弟元素相邻的外边距会选较大的值(两正数)特殊情况:如果一正一负,取它们的和;如果两都是负数,取绝对值较大的
父子元素之间相邻的外边距,子元素会传递给父元素(上外边距);父子元素外边距的重叠对页面布局由影响,所以必须处理;
6、行内元素的盒模型
- 行内元素不支持设置width和height属性,不会影响页面布局
- 可设置padding 但是垂直方向的padding不会影响页面布局
- 可设置border 垂直方向的,不会影响页面布局
- 可设置margin 垂直方向的,不会影响页面布局
用display来设置元素显示的类型,可选值:
- inline 设置为行内元素
- block 设置为块元素
- inline-block 行内块元素:既可以设置高度和宽度又不会独占一行
- table 设置为表格
- none 不显示元素
visibility用来设置元素的显示状态:
- visible 正常显示
- hidden 隐藏,但是仍占着位置