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 #计算机俗称电脑,即我们编写程序让计算机运行时,应该是让计算机无限接近人脑,或者说人 ...
随机推荐
- Spring IOP 面向切面编程
Spring IOP 面向切面编程 AOP操作术语 Joinpoint(连接点):所谓连接点是指那些被拦截到的点.在spring中,这些点指的是方法,因为spring只支持方法类型的连接点.(类里面 ...
- MySQLi面向对象实践--multi_query
使用multi_query可以实现执行多条SQL语句,每一条SQL语句通过分号分隔. 需要注意的是: 多条用分号分隔的SQL语句中,只要有一条SQL语句执行失败,那么这一条SQL语句以及之后的SQL语 ...
- JavaScript中的cookie
cookie本身没什么可介绍的,但是cookie在JavaScript中,有很多需要注意的 首先,cookie在JavaScript中,是window.document对象的一个属性,所以访问cook ...
- 在Windows命令行中编译运行C/C++程序
此处运行环境是在Windos下,运行cmd命令进入DOS界面 现在有一段简单C++代码(文件名为 demo.cpp),用于计算a*b的值 #include<iostream> using ...
- Use curl with uuid(uuidgen) under shell
#!set uuidtmp = uuid.tmp #!uuidgen > $uuidtmp #!set uuid=<$uuidtmp #!rm $uuidtmp #!echo $uuid ...
- python自动化运维笔记3 —— dns处理模块dnspython
1.3 DNS处理模块 dnspython是python实现的一个DNS工具包,它支持几乎所有的记录类型,可以用于查询.传输并动态更新ZONE信息,同时支持TSIG(事物签名)验证消息和EDNS0(扩 ...
- 二本毕业，我是如何逆袭成为BAT年薪40W的Java工程师的？
身边的师弟师妹经常问到:非计算机专业出身,你是在2年内如何逆袭成BAT年薪40W的资深开发工程师的.其实很简单——努力! 我16年毕业于普通的二本学校,非计算机专业出身,只因为对软件开发感兴趣,所以找 ...
- Python中正则表达式的巧妙使用
字符串的匹配查询 re模块中的findall函数可以对指定的字符串进行遍历匹配,获取字符串中所有匹配的子串,并返回一个列表结果.该函数的参数含义如下: findall(pattern, string, ...
- 【题解】N皇后
题目描述 相信大家都听过经典的“八皇后”问题吧?这个游戏要求在一个8×8的棋盘上放置8个皇后,使8个皇后互相不攻击(攻击的含义是有两个皇后在同一行或同一列或同一对角线上). 桐桐对这个游戏很感兴趣,也 ...
- ceph 搭建nginx负载3个对象网关
nginx.conf user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid ...