发表于： 2019-03-08 20:38:49
1 658
今天完成的事情：任务八首页媒体查询和运用bootstripe4框架导航栏完成
明天计划的事情：进行任务八首页主题部分
遇到的问题：bootstripe框架很多内容搞不清楚，运用起来很困难。
收获：学习了bootstripe4框架
任务三深度思考：
1.如何利用PS切图以及从UI图中获取所需信息？
通过字符栏看到文字的字体，文字的大小，字间距，行间距等信息，可以通过吸管工具选中图标，从拾色器中看到颜色的六位编码，可以通过标尺工具测量图标的大小，间距等。
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
1、px
px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
2、em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3、rem
css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
4、%
一般宽泛的讲是相对于父元素，但是并不是十分准确。
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
3、vw
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
4、vh
css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
4、vm
css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
3.如何进行自适应网页设计？
1、在网页代码的头部，加入一行viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：
1）width=device-width ：表示宽度是设备屏幕的宽度
2）initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%
3）minimum-scale=1.0：表示最小的缩放比例
4）maximum-scale=1.0：表示最大的缩放比例
5）user-scalable=no：表示用户是否可以调整缩放比例
2、宽度不要用绝对的
width:auto; / width:XX%;
3、字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”
4、流动布局
5、选择加载CSS
6、图片自适应，"自适应网页设计"还必须实现图片的自动缩放。
4.css有哪些选择器，优先级如何计算？
类别选择器
标签选择器
ID选择器
通用选择器
后代选择器
子选择器
群组选择器
相邻同胞选择器
优先级，权重
！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
同一级别中后写的会覆盖先写的样式
5.什么时候用margin好，什么时候用padding好？
元素水平分为3种：block水平，inline-block水平，inline水平，3种元素各有不同的表现。
block水平默认情况下，水平竖直方向上的padding,margin有效。
inline元素水平排列，竖直方向上的padding,margin无效。
inline-block水平元素，水平竖直方向上的padding,margin有效。
6.手机分辨率和网页中的px是一回事吗？
px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；
1px就是1个像素，而1个像素就是屏幕上一个点的大小，这个点究竟有多大，是由显示器的分辨率以及显示器的物理尺寸来决定的，比如电脑的显示器有1920像素的（指宽度），手机的屏幕也有1920像素的（指高度），但是手机屏幕的物理尺寸却比电脑显示器小得多，这就是说手机上的1个像素大小要比电脑显示器的1个像素要小得多。
返回列表
评论