box-sizing的初步认识

盒子模型


W3C 的标准 Box Model:
1
2
3
4
5
6
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/*内盒尺寸计算（元素大小）*/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

IE 传统 Box Model:

1
2
3
4
5
6
/*外盒尺寸计算（元素空间尺寸）*/
Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
/*内盒尺寸计算（元素大小）*/
Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

Read More

媒体查询

媒体查询是一种通过检测用户屏幕分辨率不同大小来应用不同 CSS 样式的 CSS3 属性，基本语法如下：

1
2
3
@media screen and (max-width||min-width: ···px) {
	css样式表···
}

通过 max-width 及 min-width 来表示分辨率“小于等于”或“大于等于”，也可以同时应用两个来表示一个区间，如：

1
2
3
@media screen and (min-width: ···px) and (max-width: ···px) {
	css样式表···
}

一般媒体查询写在样式表最前面，一样的 css 样式写在后面。

bootstrap的基本语法及引用

基本语法


Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
1
2
3
4
<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

Bootstrap 是移动设备优先的。

为了确保适当的绘制和触屏缩放，需要在 head 之中添加 viewport 元数据标签。

Read More

Flexbox的属性及基本用法

Flexbox的定义及适用范围


Flexbox 即弹性盒子，应用时在 CSS 里写上 display : flex;

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

Read More