发表于： 2022-08-01 19:13:06
1 907
昨天遗留的问题：为什么不能居中显示
原因：是因为编码中多添加了一个浮动
float: left;导致一直不能显示居中：删除后添加margin属性问题解决
margin: 0 auto;
在nginx.conf文件添加配置：
server {
listen 80;
server_name weixiao.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root "D:\xuexi\qiandua2";
# proxy_pass http://localhost:9090/weixiao01_war/;
index index.html index.htm Mojing.html Mojing.htm;
}使用域名访问：
手机上访问：
px、em、rem 的概念及其之间的区别
在 css 中的单位长度使用中，比较常用的是 px、em、rem，三个单位的概念和区别是：px 是绝对值，em 与 rem 都是相对值
1. px：px 是固定像素单位，设置以后，在页面发生改变时，无法适应页面而去改变值的大小
2. em: em 相对于父元素，是相对父级元素字体大小的倍数
例如，父级 div 中字体设置了 12px， 在设置 2em 之后，该元素的字体大小就变成了 24px
3. rem: rem 相对于根元素(html)，是相对 html 根元素字体大小的倍数
例如， html 默认的字体大小是 16px。所以，1rem 就相当于 16px。rem 的值最终取决于根元素默认值，其值是可以设置的
总结：
px、em、rem 作为绝对尺寸和相对尺寸，其核心体现在所选择的参照物本身
什么是自适应布局？
所谓自适应布局我们从百度上可以搜到如下的定义自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
简单的来说自适应就是让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。
示例：
<style>
.top{
position: absolute;
width: 100%;
height: 120px;
background-color: orange;
}
.middle{
position: absolute;
width: 100%;
top: 120px;
bottom: 120px;
height: auto;
background-color: aqua;
}
.bottom{
position: absolute;
width: 100%;
height: 120px;
bottom: 0;
background-color: green;
}
</style>
<body>
<div class="top">上</div>
<div class="middle">自适应</div>
<div class="bottom">下</div>
</body>
深度思考：
1.如何利用PS切图以及从UI图中获取所需信息？
用切片工具框选所需要的图标，保存成web格式的图片。
选中所需图标的图层后，右键可以直接快速导出png格式
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
1、px
px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，
表示的是水平方向是1024个像素点，垂直方向是768个像素点。
是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
2、em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），
整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
3、rem
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
4、%
一般来说就是相对于父元素的，
（1）对于普通定位元素就是我们理解的父元素
（2）对于position: absolute;的元素是相对于已定位的父元素
（3）对于position: fixed;的元素是相对于ViewPort（可视窗口）
5、vw
css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。
6、vh
css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。
7、vm
css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。
兼容性太差 ，现在基本上没人用，我试了一下Chrome就用不了。
3.如何进行自适应网页设计？
1、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
2、流动布局（fluid grid）：
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，
不会在水平方向overflow（溢出），避免了水平滚动条的出现
4.css有哪些选择器，优先级如何计算？
什么是CSS选择器
就是指定CSS要作用的标签，那个标签的名称就是选择器。
关于css属性选择器常用的有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
内联 > ID选择器 > 类选择器 > 标签选择器
5.什么时候用margin好，什么时候用padding好？
使用margin值的情况：需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。
如15px + 20px的margin，将得到20px的空白。(margin折叠）。需要使用负值对页面布局时(margin值可以取负，padding不行)。
使用padding时的情况：需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。
如15px + 20px的padding，将得到35px的空白。margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。
6、 手机分辨率和网页中的px是一回事吗？
像素即px，是画面中最小的点（单位色块）。像素的大小是没有固定长度值的，不同设备上1个单位像素色块的大小是不一样的。
px是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。
分辨率(Resolution)，是一个表示平面图像精细程度的概念，它通常是以横向和纵向点的数量来衡量的，
表示为水平点数垂直点数的形式，例如1366px768px。
分辨率的概念在具体的划分中，有分为显示分辨率、打印分辨率、扫描分辨率等概念。
显示分辨率：
显示器在显示图像时的分辨率，用点来衡量，在这里，点的概念其实就是物理像素。跟屏幕大小和显示部件的技术有关。
不同的设备，其图像基本单位是不同的，比如显示器的点距，可以认为是显示器的物理像素。
明天计划：开启下一个任务。
返回列表
评论