做完护工页面的收获

任务5:护工个人主页

Flex相关知识总结

特性

• 默认水平对齐
• 默认不换行
• 默认使所有子元素占满一行，并自动调整子元素的大小(改变默认宽度)

flex 容器属性

• 对齐属性flex-direction
  • row(主轴默认值)
  • column(侧轴)
  • row-reverse(主轴翻转)
  • column-reverse(侧轴翻转)
• 换行属性 flex-wrap :
  • wrap(换行)
  • nowrap(不换行默认值)
  • wrap-reverse(反向换行)
• 主轴布局属性justify-content:
  • flex-start(左对齐默认值)
  • flex-end(右对齐) ||
  • center(居中对齐)
  • space-between(两端对齐:平均分配中间距离)
  • space-around(让每个flex项目具有相同的空间)
• 侧轴布局属性
  • align-item: flex-start(上对齐)
  • flex-end(下对齐)
  • center(居中)
  • stretch(拉伸默认值: 占满整个高度)
  • baseline(基线对齐)
• 多行布局属性
  • align-content: flex-start(多行上对齐)
  • flex-end(多行下对齐)
  • center(多行居中)
  • stretch(拉伸默认值: 多行占满整个高度)
• flex项目属性
  • order : 允许flex项目在flex容器中重新排序。
    • 默认值为 0
    • 可以接受正值以及负值
    • flex项目根据 order 重新排序
    • 面对相同的值，由html文档顺序决定(与float相同)
  • flex-grow 与 flex-shrink: 允许设置flex项目在容器有多余的空间的时候如何放大，没有空间的时候如何缩小
    • 可接受 0 或者任意大于 0 的正数
    • flex-grow: 默认值为 0 flex-shrink: 默认值为 1
    • 0 和 正数 分别表示填充的关和开
    • flex-grow: 主轴 flex-shrink: 侧轴
  • flex-basis: 指定项目的 初始计算 大小
    • 默认值 auto， flex项目宽度基于内容物自动计算
    • 取值范围为 width属性的任意值 px || rem || em || % || vw || wh 等
    • 如果flex-basis 属性值为 0，也需要提供单位
  • 连写: flex: flex-grow flex-shrink flex-basis
    • flex: 0 1 auto //全为默认值
    • 绝对 flex项目 flex: 1 1
    • 相对 flex项目 flex-basis: 150px
    • flex: none flex: 0 0 auto 计算与内容物挂钩
    • flex: auto flex: 1 1 auto 初始计算与内容物挂钩，如有不要会自动缩放
    • flex: 'positive number' 正数可以代表任何正数(等价于 flex: 正数 1 0)
    • 多个 flex-grow 不同的值会按比例分配剩下的空间
  • algin-self: auto
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch(用于控制当前flex项目侧轴方向上的布局)

    auto 继承自父元素, 默认值为 stretch(实际还是继承自父元素的默认值)

Auto-margin对齐

• 使用 margin: auto 导致左右两方向会占据所有剩余空间
• 使用 margin: auto 会导致justify-content失效

切换 flex-direction

flex-direction: column 导致主轴与侧轴切换，致使 justify-content 与 algin-item 作用方向发生改变

CSS代码规范

css代码规范不局限于css对于其他的css预编译器也同样适用

缩进

使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。

空格

选择器与{之间必须包含空格。

属性名与之后的:之间不允许包含空格，:与属性值 之间必须包含空格

列表型属性值书写在单行时，,后必须跟一个空格。

行长度

每行不得超过120个字符，除非单行不可分割。

选择器

当一个rule包含多个 selector 时，每个选择器声明必须独占一行。

>、+、~ 选择器的两边各保留一个空格。

属性选择器中的值必须用双引号包围。

属性

属性定义必须另起一行。

属性定义后必须以分号结尾。

选择器

选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

清除浮动

当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

!important

尽量不使用 !important 声明。

长度

长度为 0 时须省略单位

颜色

RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

颜色值可以缩写时，必须使用缩写形式。

颜色值不允许使用命名色值。

颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

字号

需要在 Windows 平台显示的中文内容，其字号应不小于 12px。

字重

font-weight 属性必须使用数值方式描述。
CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

属性前缀

带私有前缀的属性由长到短排列，按冒号位置对齐。

深度思考

css可以绘制哪些常见的特殊形状？

圆形/椭圆形

circle{

10rem;

height:10rem;

border-radius:50%;

background:orange;

}

三角形/梯形

.triangle{

margin-top:5rem;

0;

border-bottom:5rem solid#00a000;

border-left:5rem solid transparent;

border-right:5rem solid transparent;

}

平行四边形

.parallelogram{

margin:5rem;

10rem;

height:5rem;

transform:skew(30deg);

background:orange;

}

适用css绘制图形时候常用到的属性

1. border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时，相对的是包含边框，padding后的尺寸。而不是单纯地相对于width/height值。
2. 旋转rotate
   用法：transform: rotate(n deg);单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转
3. 缩放 scale
   用法：transform: scale(0.5)或者transform: scale(0.5, 2);
   参数表示缩放倍数；
   一个参数时：表示水平和垂直同时缩放该倍率
   两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。
4. 倾斜 skew
   用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
   参数表示倾斜角度，单位deg
   一个参数时：表示水平方向的倾斜角度；
   两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。
5. 移动translate
   用法：transform: translate(45px) 或者 transform: translate(45px, 150px);
   参数表示移动距离

如何理解vertical-align与line-height？

line-height用来设置行高，vertical-align用来设置文本垂直方向的对齐方式，两种看似十分简单，但是其应用及原理却不简单

line-height定义是什么：

• 是指文本行基线baseline之间的垂直距离
• 基线并不是汉字的下端沿，而是英文字母“x”的下端沿。

line-height的属性	值
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

行高是可以被继承的，数字可以直接被继承，然后在计算行高；而百分比是先计算出行高，再以px继承。单位除了像素以外，行高都是文字大小的乘积

vertical-align定义是什么：

vertical-align的属性	值
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的底端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height"属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

解决图片底部留白方法：

• 设置img { display: block; }
• 使用其他vertical-align值，例如bottom/middle/top
• 直接修改line-height值，例如line-height：5px；
• line-height为相对单位即假如为1.5或是百分数
• 那么改font-size改为0也能控制

vertical 的对齐是文字对齐还是空间对齐？

vertical主要用于图标与文本之间的对齐。vertical指定行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式。 与text-align不同，vertical-align作用于当前元素。

title与h1、b与strong、i与em、img的alt与title、src与href有什么区别 ?

title与h1的区别:

定义：title是网站标题，h1是文章主题

作用：title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的

b与strong,i与em的区别:

从视觉上效果观看b与strong、i与em是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em标签、而不能识别b与i标签

建议：为了符合CSS3的规范，b应尽量少用而改用strong ,i应尽量少用而改用em

img中的alt与title属性区别:

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方

title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

src与href的区别:

href，是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。
src是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用
src通常用作“拿取”（引入），href 用作 “连结前往”（引用）

如何使用IconFont？

什么是iconfont？

iconfont，字体图标。通过使用字体格式的矢量图标来代替以往的图片格式的小图标。字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率下面，都可以做到完美缩放和扩大，不会像传统图片一样，增大到一定程度就会出现明显的锯齿或者变得模糊，影响展示效果。

如何使用icon font？

提供icon font的网站有很多，例如阿里巴巴矢量图标库、fontello、icomoon、Font-Awesome、Glyphicon Halflings、Icons8、

在阿里巴巴矢量图标库中，在web端有四种主要的引用方式，分别是icon单个使用、unicode引用、font-class引用、symbol引用。

• icon单个使用，单个图标用户可以自行选择下载不同的格式使用，包括png,ai,svg。此种方式适合用在图标引用特别少，以后也不需要特别维护的场景。
• unicode引用，批量引用的方法之一，在网页端最原始的应用方式。兼容性最好，支持ie6+，及所有现代浏览器。
• font-class引用，是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。使用class来定义图标，当要替换图标时，只需要修改class里面的unicode引用就可以，比较方便。多色图标还是不支持的。
• symbol引用，是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。支持多色图标了，不再受单色限制。支持 ie9+,及现代浏览器。浏览器渲染svg的性能一般，不如png。

iconfont相比于各种图片格式的小图标的优点和弊端？

优点

1. 轻量性：一个图标字体比一系列的图像要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。
2. 灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。
3. 兼容性：网页字体支持所有现代浏览器，包括IE低版本。

弊端：

1. 图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。（已经开始支持彩色图标）

2. 使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

3. 创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

HTML中DL、UL、OL用哪个比较好？

• ul标签：无序列表始于 u l 标签。
• ol标签：有序列表始于ol标签
• dl标签：dl标签是定义列表

ul经常用来实现轮播的小按钮，下拉菜单的各种要用来排列的列表，多个a标签排列等，实用范围非常广。

而ol因为它的有序属性，用的范围就比较小了，不是一定要用有序来排列的情况下，一般都是用ul

关于样式表中用list-style定义

• disc实心圆
• 默认值 circle空心圆
• square实心方块
• decimal阿拉伯数字
• lower-roman小写罗马数字
• upper-roman大写罗马数字
• lower-alpha小写英文字母
• upper-alpha大写英文字母

也可以去掉默认样式，设置list-style：none，然后根据自己需要添加不同的样式，比如添加特殊背景图片，使列表显示不一样的风格。