CSS基础

[NextBoy]

CSS基础

盒模型

课外资料
腾讯IMWEB结一：盒模型详解

• 标准盒模型: 实际宽高 = padding + content(width) + border
• IE盒模型: 实际宽高 = width

##视觉格式化模型
课外资料
腾讯IMWEB结一： 视觉格式模型

• 块级盒(BFC)
  • 渲染规则:
    • 块级盒在垂直方向一个一个排列,每个都独占一行
    • 相邻的margin会发生重叠
    • 计算BFC的高度时,浮动的元素也参与计算
    • 内部元素与外部元素互不影响
• 行内级盒(IFC)
  • 渲染规则:
    • 盒子一个接一个水平排列,满则换行
    • 水平方向上的margin padding border 都有效
    • 垂直方向的margin padding border都不会撑开高度
    • 默认的对齐方式是vertical-align:baseline

flexbox布局

• 6个容器的基本属性

  • flex-direction 设置方向
  • flex-wrap 是否换行
  • flex-flow 前面两个的简写
  • justify-content :flex-start|flex-end|space-between|space-around|center 在主轴方向的对齐方式
  • align-items :flex-start | flex-end | center | baseline | stretch;
  • align-content :flex-start | flex-end | center | space-between | space-around | stretch;

• item的属性

  • order 定义排列的顺序
  • flex-grow 如果有剩余空间,放大的比例
  • flex-shrink 如果空间不足,缩小的比例
  • flex-basis 定义项目占据主轴的空间(就是width)
  • flex : grow shrink basis 简写
  • align-self 自身的对齐方式,可覆盖align-items

响应式布局

• viewport视窗

• 媒体查询

@media screen and (max-width: 500px){
/*书写样式*/
}

清除浮动详解

清除浮动主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题

• 清除前面兄弟元素的浮动(避免重叠)

  • clear:both
    在 CSS2 以前，clear 的原理为自动增加元素的上外边距（margin-top）值
    在 CSS2.1 中引入了一个清除区域（clearance）——在元素上外边距之上增
    加的额外间距，使之最后落在浮动元素的下面。所以如果需要设置浮动元素与
    clear 元素的间距，得设置浮动的元素的 margin-bottom，而不是 clear元
    素的 margin-top。

  • 闭合子元素浮动(防止坍塌)

    • 给最后一个元素设置 clear: both
    • 给父元素新建一个 BFC(块格式化上下文)