发表于： 2016-03-27 22:12:35
2 1174
今天完成的事情：
1、把TASK5完成了，传到了服务器上，地址http://119.10.57.69/ptt006/task5/task5-1.html和http://119.10.57.69/ptt006/task5/task5-2.html；
2、总结task5。明天计划的事情：
1、开始task6；
2、把flex在仔细看一下。
遇到的问题：
1、最大的问题就是UI给出的PSD和最终效果的对应关系是如何确定的，有些时候会一点一点测量PSD里面的px数，然后转化成为百分比，结果在iphone上看比例完全不太对，还有就是高度方向的自适应，究竟是用百分比的padding还是给出PSD里面的固定的高度，弄不清楚。我决定不再一点一点去PSD里面测量像素数了，先大概搞出一个差不多的，然后赶快往下进行任务，做得多了见的多了也许就会有答案；
2、还是自适应的问题，切图的图标在电脑上看着大小很合适，可是到了手机上看比例就很不舒服，还没找到办法调整图片尺寸自适应；或许是单独写一个CSS根据屏幕大小选用么？
3、用float布局，如果父元素高度固定，怎么让元素垂直居中，用margin-top只能是大概居中，没有办法准确的居中；
4、<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">这行命令貌似加不加没起作用；
5、下拉菜单<select><option>的文字样式、位置还有下拉箭头的样式怎么都更改不了，顶多使用{appearance:none;-webkit-appearance: none;}去除自带的箭头。
收获；
1、关于相对定位和绝对定义以及固定定位；
相对定位（relative）是相对元素自己本身进行移动，移动后不脱离文档流，保留移动前的位置；
绝对定位（absolute）是相对于第一个position不为static的祖先元素定位，没有这样的祖先元素时参照浏览器左上角定位，移动后脱离文档流，移动前的位置不保留。利用position：absolute定位，应该将其父元素设定为relative，在其内部定位。
固定定位（fixed）使用相对浏览器html左上角定位，不随窗口变化，增大z-index令其至于其他元素上方；
2、垂直居中的集中方法：
①单行文字：令line-height等于父容器的height；
②父容器高度不确定时：父容器padding{2% 0}；
③父容器高度确定或不确定都可：父容器{position：relative}，子元素{position：absolute；top；transform：translateY（-50%）}：不能与float混用
④父容器高度确定或不确定都可：父容器{display：flex;align-items：center}--flex不能与float混用；
⑤不推荐使用的是display：table。
3、width是内容宽度，padding不属于width，定位是相对于padding+border+width的左上角定位；
4、元素的widht、margin和padding的百分比是相对于父元素的width确定，即使是margin/padding-top/bottom也是相对于width定位，而不是height；
5、margin可以是负值，padding不能为负，刻意利用margin为负值造成出去一半的效果；
6、在真正的link之前拿一个base.CSS垫底，对环境进行初始化，初始化的内容包括：
①所有元素的内外边距为零；
②字体大小为62.5%，字体选择；
③图像最大尺寸100%；
④清除列表样式；
⑤清楚链接样式；
⑥@media screen and (max-width: 480px) { html { font-size: 40%; } }用来将屏幕尺寸小于480px时缩小字体；
7、@在CSS中是一种选择符，常用的场景有：
①@import base.css：引入base.css；
②@media screen and （max-width:480px):媒体选择，表示定义不同媒介下的样式；
③@charset：utf8：选择字符集，但是在html文件头部的中的声明会覆盖掉@的规则；
8、用chrome调试比较好，在360里面选择移动设备调试，有时候会自动把页面缩放到刚刚好，但是真的用手机访问时却不是那么回事，在chrome中的表现和手机访问的情况是一致的；
9、后代选择器a b{}，a和b之间要有空格，ID和类选择器#a符号和ID名之间没有空格，多个并列的被选择元素之间要加逗号；
10、backgound-size：cover将背景图像拉伸充满覆盖整个区域，contain是将图片尺寸拉伸到适应内容区域的尺寸；
11、a：befor和a：after是伪元素，给网页中在a前和后增加内容；
12、min-width防止屏幕过小时布局乱掉，小于设置的值就不再变小；max-width和overflow防止元素过大，打乱布局；
13、令一个div的高度和宽度相等的方法：
①{width：X%; padding:X/2% 0;}
②{width：Xvw;height：Xvw}
14、vw：viewpoint width，1vw等于视窗宽度的1%；vh：viewpoint height，1vh等于视窗高度的1%，有点类似于rem的意思；
15、利用vh和vw（其实百分比也可以）再加上一个min-width就可以实现图片得自适应，并且不会缩小到看不清楚；但是用vw有一点要注意，如果是多层且嵌套时，每个里面的一层如果用vw确定宽度，一定要加上min-width限制最小宽度，否则就会无限制缩小，但是如果用百分比的话只要在body里约定min-width就可以。
16、inline-block：对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。可以用来处理行内非替换元素的高宽问题的，比如span、a等标签，正常情况下不能设置宽高，加上该属性之后，就可以触发让这类标签表现得如块级元素一样，可以设置宽高；
17、{box-sizeing：content-box}用CSS2.1规定的宽度，width不包括padding、border，宽度和高度分别应用到元素的内容框。，在宽度和高度之外绘制元素的内边距和边框;
{box-sizeing：border-box}widht包括padding和border，元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;
可以在base.css中声明如下格式。
html{
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit;}
当一个box宽度为100%，又想要两边有内间距，这时候用boder-box比较好。
百分比为宽度的容器设置padding时,容器的宽度就会像外扩展相应的padding值,要使宽度不被撑开,那么就是用box-sizing:border-box控制这种情况；
18、letter-spcaing设定字间距，word-spacing设定词间距；
19、PS里ctrl+鼠标右键，快速选择图层；
20、养成多写注释的好习惯。
返回列表
评论