• 做京东页面遇到的问题总结


    1.1 京东阶段

    1.1.1 meta标签

    meta 标签的作用是 搜索引擎优化 增加关键词权重 

    1.1.2 京东项目目录

    网站实际开发中的标准目录结构

    1.1.3字体图标

    阿里巴巴矢量图标库 http://www.iconfont.cn/

    使用字体图标首先要引入css文件

    <link rel="stylesheet" href="font/iconfont.css">

    1.1.4定位问题

    子绝不一定父相

    只要父元素不是static 以外的其他定位,子元素都会按照父元素来定位

    top left、bottom、right同时出现 以top left 为准

    定位之后,不写left属性,默认的地方会出现的padding和a链接中的文字之后。

    绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。

    默认情况下relative的层级高于absolute的层级

    z-index 只有和定位配合使用才会生效

    绝对定位的块元素居中显示,首先left:50%,向右走父盒子的一半,

    然后再使用margin-left: 负值;  向左走自身的一半。

    1.1.5常见问题

       rgba   rgb的区别

    opacity: 0.5;   他可以让盒子半透明。(缺点:就是内容跟着一起半透明

    font合写:

    font: font-style font-variant font-weight font-size/line-height font-family

    font: 风格 变形 加粗 字号/行高 字体系列

    风格 变形 加粗 可以按照任意顺序书写 如果是normal可以不写

    但是 字号 / 行高 字体系列 必须写而且顺序必须按照要求

    1.1.6清除浮动

    原因:父盒子高度为0,子盒子不占位置。

    清除浮动目的:让父盒子有高度。

    推荐写法:

    清除浮动不是不浮动,是清除浮动产生的不利影响。

    小细节

    不管两个盒子之间的关系是什么。只要不是父子关系。他们相互都会受到浮动的影响。

    解决方法:让子盒子,浮动的子盒子,不要超出父盒子

    1.1.7行内元素

    行内元--span ,strong ,a  ,del,  ins

    • 行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
    • 行内元素的padding-left、padding-right、margin-left、margin-right属性设置是有效的

    行内--Img  , input

    块元素--div ,p,h1-h6,li

    1.1.8继承性

    • 文字的所有属性都可以继承。

    行高是可以继承的

    宽度是可以继承的

    • 特殊性:
    • h1-h6不继承文字大小。
    • a标签不继承文字颜色
    • 层级可以继承.

    1.1.9标签包含规范

    • div可以包含任意的标签。
    • p标签不能包含div,h1-h6,ul等标签。
    • h1不推荐包含p,div等标签。
    • 块元素可以嵌套行内元素和行内块元素。
    • 行内元素不能嵌套块元素和行内块元素。
    • 行内块元素可以嵌套行内元素。

    行内元素尽量里面包含行内元素

           不推荐不推荐不推荐:   <a href=”#”>   <h2> 标题 </h2 ></a>

    标题标签,段落标签不能包含div 

           尤其是P标签不能包含div

    规避脱标流:

    标准流可以解决的用标准流,标准流解决不了的用浮动,浮动解决不了用定位

    1.2.0盒子塌陷

          嵌套的盒子垂直方向外边距的塌陷

      ★解决外边距塌陷

         ☆给父盒子设置border

         ☆给父盒子使用overflow:hidden;  触发BFC

    http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

    ◆垂直方向外边距的合并

    并列关系的两个盒子,给上边的盒子设置底外边距,给下边的盒子设置顶外边距,2个盒子的距离,取的是设置比较大的外边距的值。一正一负取2者之和

    小细节:

    margin:0 auto 只能让在标准流的盒子居中

    Margin负值的情况下。反方向移动盒子

  • 相关阅读:
    自身哲学
    horovod
    nvidia-smi 关键知识
    7.22实习培训日志-JSP Servlet
    7.20实习培训日志-Java基础程序设计结构
    7.19实习培训日志- java进阶
    7.18实习培训日志-环境配置与设计模式
    7.17实习培训日志-java基础
    7.10实习培训日志-Maven 敏捷编程
    7.15实习培训日志 java题解
  • 原文地址:https://www.cnblogs.com/sxd0425/p/6551464.html
Copyright © 2020-2023  润新知