今天完成的事情： 完成任务6及深度思考 、复习了背景属性、浮动、弹性盒子、定位
今日计划
完成任务6的深度思考
1、去除inline-block间距有哪几种方法？
真正意义上的inline-block水平呈现的元素之间，换行显示或空格分割的情况下会有间距
1.利用负margin
2.HTML里移除空格（假设<a>是inline-black）
<a>内容
</a><a>内容</a>
3.最后一个标签才闭合
<a>内容
<a>内容</a>
4.使用letter-spacing或者word-spcing负间距
父级{word-spacing:-6px; } 子级{word-spacing:0px;}
2.css有哪些属性可以继承？
继承就是指子级继承父级的样式属性
1.字体系列样式属性：字体、大小、粗细、装饰
2.文本系列属性：行高、缩进、间距、颜色、对齐、大小写、方向
3.列表/表格布局属性：宽度、高度、方向等
...
背景属性
1、background-color背景颜色
color_name / # / transparent(透明) / inherit(继承)
2、background-image背景图
背景图片在背景色的上层，可以设置单个背景图和多个背景图，重复、大小、位置、
1.backgroud-image（背景图引入）
1.单图引入{backgroud-image:url("图片地址")}
2.多图引入{backgroud-image:url(图片地址),url(图片地址)}上下位置按照前后顺序排列
2.background-repeat（重复）
1.repeat(默认值，xy轴都充满) / repeat-x / repeat-y / no-repeat
2.space / round（两端对齐 多余空间空白填充 / 多余空间图片拉伸填充）
3.background-size（背景图大小）
1.具体值（只设置一个值时，等比例缩放）
2.百分比（以自身的容器的宽高为基准，只设置一个值时，等比例缩放）
3.cover（放大至直到尺寸最小一边充满容器，图片会显示不完整）
4.contain（放大至尺寸最大一边充满容器，背景图片不会充满容器）
4.background-position（图片位置）
1.数值（默认左上角为起点）雪碧图就是用这个
2.方位(left top bottom right center） 可以单方向和双方向 也可以配合数值使用
复习浮动
内联元素设置浮动后自动变成行内块元素
复习定位
relative（相对定位）：不脱离文档流，基于自身定位经常用作绝对定位的父级盒子
absolute（绝对定位）：脱离文档流 基于父级盒子位置定位
弹性盒子
display: flex
flex-direction（排列方向---切换主轴）
父级{ row（横） row-reverse（反向） colum(竖) 反向竖}
flex-wrap（折行）
父级{ nowrap wrap wrap-reverse}
justify-content决定横轴对齐方式
父级{ flex-start首 flex-end尾 center中间 space-between两端 space-arounnd做操}
align-items决定竖轴对齐方式
父级{flex-start首 flex-end尾 center中间 bseline(元素第一行文字的基线对齐) stretch（未设置高度将占满屏幕） }
好多属性 用一点记一点吧
明天计划的事情：开始做任务7
遇到的问题：select写了一个图标进去，点击无效
解决办法：
1.设置图标设置为背景图片
2.设置穿透{pointer-events: none;}
收获：复习了前边的知识点，对任务6有了一个更深的认识
任务总结之任务6：
任务6比想象中的复杂，多了一些图标元素，再加上这几天状态不太好，做的比较慢
任务六其实用到的东西挺多的，新用到的有雪碧图、ul、层叠、下选框、溢出隐藏
看雪碧图文档的时候因为不细心 漏看掉了关键知识点，导致浪费了半天时间，状态今天有所回暖
ul
看雪碧图的时候别人示例里边用到的，发现挺好用，京东淘宝侧边栏文字+小图标用的就是ul 我也就用了用，挺好使
里边的<i>标签用的浮动，取消浮动后<i>标签里边的图片就不见了，昨天才想明白，浮动会默认让内联元素变成内联块元素，取消后就自动变成内联元素，设置的尺寸就也失效了
<ul>
<li>
<i class="icon2 "></i><h3 class="color-999" >服务日期</h3>
</li>
<li >
<i ></i><h3 class="time">2015-7-5 至 2015-7-12</h3>
</li>
<li>
<i class="icon3 " ></i><h3 class="color-999" >北京.通州.果园</h3>
</li>
</ul>
层叠
因为设置了相对定位后 相对定位的层级关系比固定定位高
下选框
因为苹果自带的是上下三角图标，所以我就清除默认样式后改用图片小图标最开始也是用<i>标签做的，做完后发现它遮挡点击区域，最后改成了背景图的做法，今天肖明明师兄提到了另一种做法{pointer-events: none;}给这个按钮做个穿透也是可以解决的。
溢出隐藏
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
返回列表
评论