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

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负值的情况下。反方向移动盒子

原文地址:https://www.cnblogs.com/sxd0425/p/6551464.html