HTML/CSS基础

HTML/CSS基础

目录

• 盒模型
• margin叠加
• 块级元素和内联级元素
• z-index属性
• 浮动

盒模型

盒模型

content-box（默认）

• 布局所占宽度Width Width = width + padding-left + padding-right + border-left + border-right
• 布局所占高度Height Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

• 布局所占宽度Width Width = width(包含padding-left + padding-right) + border-top + border-bottom
• 布局所占高度Height Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

• 布局所占宽度Width Width = width(包含padding-left + padding-right + border-left + border-right)
• 布局所占高度Height Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

margin叠加

一种情况-父子元素叠加

子元素的外边距隔着父元素的内边距和边框. 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加.

解决方法

• 添加父元素的内边距和边框任何一项即可取消叠加
• 给父元素加上样式即可

overflow: hidden;

块级元素和内联级元素

根据display属性，可以将元素分为块级元素(block)和内联级元素(inline)。

最大区别

• block元素 可以设置宽度，独占一行。
• inline元素 宽度由内容决定，与其他元素并列在一行。

元素举例

• block元素

div, h1-h6, ul, li, ol, dl, dd, dt

• inline元素

span, a, em

inline-block

宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline. 常用于设置垂直居中.

z-index属性

定义

设置元素的堆叠顺序

用法

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

注意

• 可拥有负的 z-index 属性值
• 仅能在定位元素上奏效

浮动

定义

使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来

清除浮动

.clearfix:after {
    content:'';
    display:block;
    clear:both;
}
.clearfix {
    *zoom:1;
}