做完护工页面的收获

任务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，然后根据自己需要添加不同的样式，比如添加特殊背景图片，使列表显示不一样的风格。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/housheng/p/11946868.html