diff --git a/03-CSS进阶/02-CSS中的非布局样式.md b/03-CSS进阶/02-CSS中的非布局样式.md index a5fdcc5..c758710 100644 --- a/03-CSS进阶/02-CSS中的非布局样式.md +++ b/03-CSS进阶/02-CSS中的非布局样式.md @@ -73,6 +73,18 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以 (2)有些 Mac 用户会安装 Office 等软件,安装这些软件后,系统会顺带安装微软雅黑字体。此时,写 css 代码时,如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序,可能导致有些 Mac 用户用微软雅黑来显示字体。 +### 常见的字体&文本属性 + +```css + font-style: italic; /* italic表示斜体,normal表示不倾斜*/ + font-weight: bold; /* 字体加粗,100至900 */ + text-decoration: underline; /* 下划线 */ + cursor: pointer; /*鼠标悬停时,光标显示为手形*/ + +``` + +`font-weight`属性:在设置字体是否加粗时,属性值既可以填写`normal`、`bold`这样的加粗字体,也可以直接填写 100至900 这样的数字。`normal`的值相当于400,`bold`的值相当于700。 + ### 其他 - 网络字体 @@ -95,18 +107,6 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以 当然,如果想让一段很长的文本不换行,可以直接设置`white-space: nowrap` 这一个属性即可。 -## 常见的字体&文本属性 - -```css - font-style: italic; /* italic表示斜体,normal表示不倾斜*/ - font-weight: bold; /* 字体加粗,100至900 */ - text-decoration: underline; /* 下划线 */ - cursor: pointer; /*鼠标悬停时,光标显示为手形*/ - -``` - -`font-weight`属性:在设置字体是否加粗时,属性值既可以填写`normal`、`bold`这样的加粗字体,也可以直接填写 100至900 这样的数字。`normal`的值相当于400,`bold`的值相当于700。 - ## CSS Hack - CSS Hack 的方式:不合法但可以生效的写法。 @@ -120,3 +120,4 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以 - 替代方案:针对性加 class + diff --git a/03-CSS进阶/03-CSS布局.md b/03-CSS进阶/03-CSS布局.md new file mode 100644 index 0000000..be00a3d --- /dev/null +++ b/03-CSS进阶/03-CSS布局.md @@ -0,0 +1,51 @@ + +## 前言 + +### CSS 布局的演化 + +- 早期以table为主 + +- 后来一技巧性布局为主(这些技巧原本并不是用于布局的) + +- flexbox/grid + +- 响应式布局 + +### 常见的布局方法 + +1、**table 表格布局**:早期使用的布局,如今用得很少。 + +2、**float 浮动 + margin**:问题较多。 + +3、**inline-block 布局**:问题较多。 + +对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。 + +4、**flex 布局**:为布局而生,非常灵活,是最为推荐的布局写法。唯一的缺点是兼容性问题: + +20191005_1200.png + +上图中可以看到, flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题,则可以放心大胆地使用 flex 布局。 + +### 常见的布局属性 + +(1)`display` 确定元素的显示类型: + +- block:块级元素。 + +- inline:行内元素。 + +- inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。 + +(2)`positon` 确定元素的位置: + +- static:默认属性值。 + +- relative:相对定位。相对于元素本身进行偏移,**不会改变它所占据的空间**。 + +- absolute:绝对定位。相对于父元素中最近的 relative/absolute 进行偏移,会脱离文档流。音标:[ˈæbsəluːt]。 + +- fixed:固定定位。相对于可视区域固定,会脱离文档流。 + +`relative`、`absolute`、`fixed`这三个属性,可以结合 z-index 来设置层级。 +