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 #计算机俗称电脑,即我们编写程序让计算机运行时,应该是让计算机无限接近人脑,或者说人 ...
随机推荐
- “数学口袋精灵”App的第三个Sprint计划----开发日记
一.现状 上一阶段基本完成一个小游戏,游戏具有:随机产生算式,判断对错功能.通过轻快的背景音乐,音效,给玩家提供一个良好的氛围. 二.任务认领 完成界面,基本功能后的后续任务: 冯美欣:设计&qu ...
- 响应数据传出（springMVC）
1. SpringMVC 输出模型数据概述 提供了以下几种途径输出模型数据: ModelAndView: 处理方法返回值类型为 ModelAndView 时, 方法体即可通过该对象添加模型数据 ...
- ASP.NET Forms验证
/// <summary> /// 执行用户登录操作 /// </summary> /// <param name="config">授权配置信 ...
- 利用ini_set()函数实现对php配置文件的修改
PHP的配置文件是php.ini,如果要开启或者关闭扩展,还有设置一些模块的相关配置是,就得对该文件进行修改, 修改的方法也很简单,打开php.ini找到对应项直接修改,修改之后需要重新启动才能生效. ...
- Linux列举所有隐藏文件
ll 命令是 ls -l的缩写 ls -a是列举所有(all)文件,包含隐藏文件,以.开头的文件. ls -l是以列表(list)方式列举文件. http://bbs.chinaunix.net/th ...
- C#中byte[] 与string相互转化问题
using System; using System.IO; using System.Security.Cryptography; namespace ShareX.UploadersLib.Oth ...
- 转帖--计算机网络基础知识大总汇 https://www.jianshu.com/p/674fb7ec1e2c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
计算机网络基础知识大总汇 龙猫小爷 关注 2016.09.14 23:01* 字数 12761 阅读 30639评论 35喜欢 720 一.什么是TCP/IP 网络和协议 1. TCP/IP是 ...
- [转载]oracle 高水位线详解
一.oracle 高水位线详解 出处: https://www.cnblogs.com/linjiqin/archive/2012/01/15/2323030.html 一.什么是水线(High Wa ...
- 解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题
在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由于Ubuntu预装的是vim-tiny,而我们需要使用vim-full,解决 ...
- XQN number format
Q Numbers FormatAn XQN format number is an 1+X+N bit twos complement binary number; a sign bitfollow ...