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