学以致用三十五-----像素的困惑

在设计前端页面的过程中。经常会为width,height设置多少像素而感到困惑。

今天就来捋一捋这里的像素。

我的笔记本的分辨率是1920x1080像素

测试了浏览器满屏的像素大概是 1920x960

在一个div下设置 width：1920px height：960px 刚好填满浏览器

width：960px height：480px 则发现只有浏览器的四分之一大小 1/2 * 1/2 = 1/4

width:480px height：240px 则为浏览器的十六分之一 1/4 * 1/4 = 1/16

那要把div放在正中间。则考虑如下

譬如。

1 width:640px;
2 height: 320px;
3
4 position: absolute;
5 left:640px;
6 top:320px;

想想九宫格最中间的格子。因此是分成 9等分，I/3 * 1/3 = 1/9

1920* 1/3 = 640 , 960 *1/3 = 320

因此width 和 height的值如上设置

left,top 需要和 position 一起使用，否则 left 和 top 没有效果。

当然，如果设置成 left 50%； top：50%

需要修正，添加

margin-left:-240px;

margin-top:-120px;

margin-left ：设置元素的左边距，可以为负数

margin-left 和 left 的区别：margin-left 可以为负数，且不需要和position一起使用

right：整体往左边移动，当整体移动到左边边界后，无法再往左边移动。

margin 和 padding的区别：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

转载于:https://www.cnblogs.com/liongong/p/9943685.html

学以致用三十五-----像素的困惑相关推荐

NeHe OpenGL第三十五课：播放AVI
NeHe OpenGL第三十五课:播放AVI 在OpenGL中播放AVI: 在OpenGL中如何播放AVI呢?利用Windows的API把每一帧作为纹理绑定到OpenGL中,虽然很慢,但它的效果不错. ...
[Python从零到壹] 三十五.图像处理基础篇之OpenCV绘制各类几何图形
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
【正点原子FPGA连载】第三十五章双目OV5640摄像头HDMI显示实验摘自【正点原子】DFZU2EG/4EV MPSoC 之FPGA开发指南V1.0
1)实验平台:正点原子MPSoC开发板 2)平台购买地址:https://detail.tmall.com/item.htm?id=692450874670 3)全套实验源码+手册+视频下载地址: h ...
微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...
Gradle 1.12用户指南翻译——第三十五章. Sonar 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
Python编程基础：第三十五节文件删除Delete a File
第三十五节文件删除Delete a File 前言实践前言我们这一节来介绍如何删除一个文件,这里需要用到函数os.remove(path)用于删除指定路径下的文件,os.rmdir(path) ...
东枝戛古舍利佛塔群（缅三十五）
东枝戛古舍利佛塔群(缅三十五) 撰文.摄影/张源 http://szju2000.blog.163.com/blog/static/16995144420115137370192/ 有2000 ...
三十五、深入Java中的泛型（下篇）
@Author:Runsen @Date:2019年10月26日 17:10:34 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件 ...
鲁迅散文——随感录三十五
随感录三十五从清朝末年,直到现在,常常听人说"保存国粹"这回一句话. 前清末年说这话的人,大约有两种:一是爱国志士,一是出洋游历的大官.他们在这题目的背后,各各藏着别的意思.志士 ...

学以致用三十五-----像素的困惑

学以致用三十五-----像素的困惑相关推荐

最新文章

热门文章