标签：none   元素   mod   部分   css   min   exp   fence   解决   

页面布局

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

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

1盒子模型

1.1定义

• 任意一个元素都可以当做盒子模型

• 盒子可以通过CSS更改其大小，盒子宽度由宽高（width/height）+边距（padding）+边框（border）

• 盒子有外边距，影响盒子的位置

• margin是外边宽

1.2块状元素和内联元素

块状（块级）

• 能够独占一行

• 默认宽度是父元素的宽，高度是自动（被内容撑开）一般就是显示屏的宽度

内联（行内）

• 不能独占一行

• 默认宽度是自动（被内容撑开），高度也是自动

• 大部分内联元素设置宽高无效，设置内边距有效，但是会影响其他元素

• margin可以设置左右，不能设置上下

• CSS的文本属性会对内联元素生效

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

document树

父元素   子元素   后代元素 祖先元素 兄弟元素  都是组合关系

标准文档流

• 块状元素独占一行

• 内联共享一行

盒子在文档模型的位置

• 给盒子设置边距，前面有兄弟元素，就是距离兄弟元素的距离。没有兄弟就是距离父元素的内容的距离

• 垂直方向的margin会塌陷。上（margin-bottom）下（margin-top）两个元素之间的距离，取最大。水平方向两个距离相加

• 父子元素，给子元素设置垂直方向的margin,同样会产生塌陷。解决方案：给父元素设置边框或者overflow：hidden

• margin可以设置为负值

盒子布局相关属性

display

• block设置块

• inline设置为内联

• inline-block兼具两者 有些html元素，默认就是inline-block(img,input,textarea,td,th)

• none隐藏

布局相关

• visbility:visible/hidden

• overflow:hidden/auto/scroll/visible

• overflow-x

• overflow-y

尺寸

• width/max-width/min-width

• height/max-height/min-height

外边距

• margin 4个值 3 2 1

• margin-left

• margin-top

• margin-bottom

• margin-right

页面布局

标签：none   元素   mod   部分   css   min   exp   fence   解决   

原文地址：https://www.cnblogs.com/yf18767106368/p/9398500.html