页面布局

页面布局

css注意点：

有些CSS属性，后代元素会继承祖先元素的设置。font类型、color、文本属性

有些CSS属性，不会继承祖先元素。布局相关、border、背景

1 盒子模型

1.1 定义

• 任意一个元素都可以当做盒子模型
• 盒子的大小 内容宽高(width/height) + 边距(padding)+边框(border)
• 盒子有外边距，影响盒子的位置

1.2 块状元素和内联元素

块状（块级）

• 能够独占一行
• 默认宽度是父元素的宽，高度是自动（被内容撑开）

内联（行内）

• 不能独占一行
• 默认宽度是自动(被内容撑开)，高度也是自动
• 大部分内联元素设置宽高无效，设置内边距有效但是影响其他元素
• margin可以设置左右，不能设置 上下的
• CSS的文本属性 会对内联元素生效

1.3 盒子模型和盒子模型之间的关系

document树

父元素  子元素   后代元素   祖先元素    兄弟元素

标准文档流

• 块状元素 独占一行
• 内联共享一行

盒子在文档模型的位置

• 给盒子设置边距， 前面有兄弟元素，距离兄弟元素的距离。 没有距离父元素的内容的距离
• 垂直方向的margin会塌陷。 上（margin-bottom）下（margin-top）两个元素之间的距离，取最大。 水平方向没有这个问题
• 父子元素，给子元素设置垂直方向的margin，同样会产生塌陷。 解决： 给父元素设置边框 或者 overflow:hidden
• margin可以设置为负值

1.4 布局相关属性

display

• block 内联-->块
• inline 块-->内联
• inline-block 兼具两者默认就是inline-block的有img，input，textarea，td，th
• none 隐藏

布局相关

• visibility:visible/hidden
• overflow:hidden/auto/scroll/visible
• overflow-x
• overflow-y

尺寸

• width/max-width/min-width
• height/max-height/min-height