发表于： 2020-08-15 23:44:39
1 1426
今天完成的事情：完成了任务三，主要了解了一些css基础知识，包括css选择器，颜色，还有字体，长度单位，还有css定位问题
css有：元素选择器，选择器分组，类选择器，ID选择器，属性选择器，后代选择器，子元素选择器，兄弟选择器，伪类和伪元素
常用的有元素选择器和类选择器，以及css选择器可以嵌套使用，例如类选择器前可以放元素选择器，元素选择器可以嵌套属性选择器使用。
学习到了伪类，其中锚伪类
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
link：链接颜色，visited:鼠标悬停时的颜色，hover:鼠标点击时的颜色，active:鼠标点击后的颜色
css定位分为相对定位绝对定位和浮动，在任务二中左上角的返回按钮可以用绝对定位来实现，语法为：
.box1 {
position: absolute;
left: 1vw;
top: 1vw;
}
css长度单位主要分为：绝对长度单位，相对字体长度单位，可视区百分比长度单位
绝对长度单位主要包括：px(像素)，in(英寸)，cm(厘米)，mm(毫米)，换算比例为 1px=1/96in=1/37.8cm=1/3.78mm.
相对字体长度单位:Em,Rem,points,pica,ex需要注意的是
Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。
在没有任何CSS规则的前提下，1em的长度是：
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
引用官方说法：当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）。这意味着即使一个元素设置为10em，这个元素也不会在他出现的每个地方都是10em。如果font-size变化了，它可能会宽点，也可能会窄点。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css/the-lengths-of-css.html © w3cplus.com
Rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。
可视区百分比长度单位：需要注意的vw
w是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。
关于任务三的页面设计，首先整个北京为湖蓝色设计<html>元素的background为#68cdd5
最左上角image扣下来之后设置其大小为1vw
.box2 {
display: flex;
justify-content: center;
margin-top: 10em;
margin-bottom: 10em;
}
中间葡萄藤部分仍然是图片，可以利用div块级元素的属性使其自动换行
.box3 {
text-align: center;
font-size: 1.6rem;
margin-bottom: 10em;
line-height: 200%;
padding: 0 10vw 0 10vw;
}
用margin和padding属性调整上下位置，text-align属性使其居中
最后左右两个可以用flex使其排列在同一行
.box4 {
float: left;
text-align: center;
font-size: 1.2rem;
margin-left: 10vw;
}
.box5 {
float: right;
text-align: center;
font-size: 1.2rem;
margin-right: 10vw;
}
明天计划的事情：继续学习任务4
遇到的问题：浏览器适配需要加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
以及对于css选择器没有详细的了解，不了解其分别的作用域，需要继续深入学习
收获：
深度思考
1.如何利用PS切图以及从UI图中获取所需信息？
利用图层的直接导出，或者魔棒工具，对于颜色不复杂的可以使用ps通道功能调整颜色反选抠图
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
见上文
3.如何进行自适应网页设计？
应该需要考虑不同浏览器，甚至手机，选择合适的长度单位，和定位让页面不变性
4.css有哪些选择器，优先级如何计算？
不太清楚，没有做demo
5.什么时候用margin好，什么时候用padding好？
margin使用的时候有一点需要注意就是margin的上下会折叠，这是在网页设计的时候需要考虑的点，
6.手机分辨率和网页中的px是一回事吗？
不是一回事
返回列表
评论