• 做完护工页面的收获

    任务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，然后根据自己需要添加不同的样式，比如添加特殊背景图片，使列表显示不一样的风格。
  • 相关阅读:
    redis redis-cli 操作指令
    Apache 配置默认编码
    Apache 查找httpd.conf文件
    Apache 错误日志
    dataTable 自定义排序
    bootstrap select2 参数详解
    获取元素滚动条高度
    TP5 操作DB is null is not null 条件
    TP5 自带分页类的传参
    jquery 获取 file 表单 上传的文件名
  • 原文地址：https://www.cnblogs.com/housheng/p/11946868.html
Copyright © 2020-2023  润新知