Python全栈问答小技巧_2
HTML&CSS基础-长度单位
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长度单位</title> <style type="text/css">
/**
* 常见的长度单位:
* 像素(px):
* 像素是我们在网页中使用的最多的一个单位，一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，但是这些像素点，是不能直接使用肉眼看见的。
* 不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。一般情况下，电脑的一个像素是手机像素的4呗。
*
* 百分比(%):
* 也可以将单位设置为一个百分比的形式，这样浏览器会根据其父元素的样式计算该值。
* 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变。
* 在外面创建一个自适应的网页时，经常使用百分比作为单位。
*
* em:
* em和百分比类似，它是相对于当前元素的字体大小来计算的
* 1(em) = l(font-size),因此当我们使用em时，当字体大小发生改变，em也会随之改变。
* 当设置字体相关的样式时，经常会使用em
*/
.box{
width: 100px;
height: 100px;
background-color: red;
} .box1{
width: 50%;
height: 50%;
background-color: yellow;
} .hello{
width: 300px;
height: 300px;
background-color: blueviolet;
} .world{
font-size: 100px;
width: 1em; /**em和font-size大小有关，此时1em=100px*/
height: 50%;
background-color: deeppink;
} .linux{
width: 300px;
height: 300px;
background-color: blue;
} .bigdata{
font-size: 50px;
width: 1em; /**em和font-size大小有关，此时1em=50px*/
height: 50%;
background-color:chartreuse;
} </style>
</head>
<body> <div class="box">
<div class="box1"></div>
</div> <div class="hello">
<div class="world"></div>
</div> <div class="linux">
<div class="bigdata"></div>
</div>
</body>
</html>
二.浏览器打开以上代码渲染结果
Python全栈问答小技巧_2的更多相关文章
- Python全栈问答小技巧_1
Python全栈测试题 作者:尹正杰 声明:答案如有偏差,欢迎指正!欢迎加入高级运维工程师之路:598432640 本文答题用的Python版本是:Python 3.5.2,请知晓! 1.执行 Pyt ...
- python 全栈开发，Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
- Python全栈
Python基础 Python基础01 Hello World! Python基础02 基本数据类型 Python基础03 序列 Python基础04 运算 Python基础05 缩进和选择 Pyth ...
- Python全栈开发【面向对象进阶】
Python全栈开发[面向对象进阶] 本节内容: isinstance(obj,cls)和issubclass(sub,super) 反射 __setattr__,__delattr__,__geta ...
- Python全栈开发【面向对象】
Python全栈开发[面向对象] 本节内容: 三大编程范式 面向对象设计与面向对象编程 类和对象 静态属性.类方法.静态方法 类组合 继承 多态 封装 三大编程范式 三大编程范式: 1.面向过程编程 ...
- Python全栈考试-部分试题（精选）
Python全栈考试(一) Python全栈考试(一) 1.执行 Python 脚本的两种方式 答:1.>>python ../pyhton.py 2. >>python.py ...
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
- Python全栈【进程、线程】
Python全栈[进程.线程] 本节内容: 进程 线程 协程 I/O多路复用 进程 1.进程就是一个程序在一个数据集上的一次动态执行过程,进程是资源分配的最小单元. 2.进程一般由程序.数据集.进程控 ...
- python全栈开发-Day2 布尔、流程控制、循环
python全栈开发-Day2 布尔 流程控制 循环 一.布尔 1.概述 #布尔值,一个True一个False #计算机俗称电脑,即我们编写程序让计算机运行时,应该是让计算机无限接近人脑,或者说人 ...
随机推荐
- 解决AJAX session跨域失效
1.想实现的功能是登录时有个验证码,这个验证码后台提供,然后放在session中,前台把用户输入的验证码通过AJAX发给后台,后台把session中的验证码取出来然后比较不同,一样则通过. 问题出现在 ...
- github第一次作业链接
https://github.com/xuhuzi/test/blob/master/test1 https://github.com/xuhuzi/test/blob/master/test2 ht ...
- chrome启用flash不询问
69版本之后 打开 chrome://flags/#enable-ephemeral-flash-permission 把它从Default改为Disabled 重新打开Chrome,进入 chrom ...
- 利用ini_set()函数实现对php配置文件的修改
PHP的配置文件是php.ini,如果要开启或者关闭扩展,还有设置一些模块的相关配置是,就得对该文件进行修改, 修改的方法也很简单,打开php.ini找到对应项直接修改,修改之后需要重新启动才能生效. ...
- centos7 搭建svn服务器
1.安装svn服务器: yum install subversion 2.配置svn服务器: 建立svn版本库根目录及相关目录即svndata及密码权限命令svnpasswd: mkdir -p /a ...
- Linux基础学习（8）--权限管理
第八章——权限管理 一.ACL权限 1.ACL权限简介与开启: (1)ACL权限简介: (2)查看分区ACL权限是否开启: (3)临时开启分区ACL权限: (4)永久开启分区ACL权限: 2.查看与设 ...
- loadrunner基础学习笔记八-分析场景
analysis会话的目的是查找系统的性能问题,然后找出这些问题的根源 如: 是否达到了预期的测试目标,在负载下对用户终端的事务响应时间是多少 是否符合sla还是偏离了目标 事务的平均响应时间是多少 ...
- SpringMVC @SessionAttributes 使用
@SessionAttributes 只能作用在类上,作用是将指定的Model中的键值对添加至session中,方便在下一次请求中使用. 简单示例 目标是通过 @SessionAttributes 注 ...
- Nginx REWRITE阶段
rewrite_log on ;#每次rewrite都会记录一条记录在errorlog里 error_log logs/xxx.log notice; location /first { rewrit ...
- windows常见数据类型
一,常见数据类型 WORD: 16位无符号整形数据 DWORD: 32位无符号整型数据(DWORD32) DWORD64: 64位 ...