发表于: 2019-01-25 20:53:25
1 788
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
四:理解css单位px,em,rem的区别:
1. Px是css中最基本的长度单位,在PC端,设计稿多少像素,页面css就写多少像素。
2. em 是相对单位,相对于上下文元素而言,一般情况下,浏览器默认的字体大小是16px,也就是1em等于16px
3. rem也是相对单位。rem是相对于html根元素来计算的,这就是说只要在根节点设定好参考值,那么全篇的1rem都相等,计算方式同 em,默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px,
当一个p元素是24px的话,那么转换成rem为单位的话,那么只需要如下这样写即可:
p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }
五:元素未知宽度居中。
第一种方法:
只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。
第二种方法如下:
div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}
六:媒体查询标准写法:media queries
@media 设备类型 and (设备特性-宽度) {
// css 样式
}
可以指定的值 含义
all 所有设备
screen 显示器
print 打印用纸或打印预览视图
handled 便携设备
tv 电视机类型的设备
speech 语音和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 盲人打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介,比如电传打字机和终端
响应式web设计如何实践
1. 首先需要在页面头部引入这行meta代码,如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0" />
还要引入这一句:
<meta content="telephone=no,email=no" name="format-detection" />
我们的代码有类似于电话这样的数字的时候,因为有的手机上它会自动转换成可以拨打电话,所以我们加上这句就不会了。
明天计划的事情:(一定要写非常细致的内容)
继续做任务
遇到的问题:(遇到什么困难,怎么解决的)
对下拉框的不理解
收获:(通过今天的学习,学到了什么知识)
同今天完成的事情
评论