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 #计算机俗称电脑,即我们编写程序让计算机运行时,应该是让计算机无限接近人脑,或者说人 ...
随机推荐
- git心得
使用Git得到了以下体会: github在新的目录下添加新的文件 git init //在相应的目录下添加 git add //添加目录 git commit -m "first commi ...
- is interest important？
学习是不是一定要看兴趣呢?高中时觉得只要肯学即使不喜欢又能如何,大学之后被深深打脸,面对一周那么多的实习和报告,我悄悄告诉自己不是这块料 有一些事情我就是学不会.我却很容易相信一个人. 因此,无论我如 ...
- NSLog debug时打印 release时不打印
创建.h文件,添加以下代码 #ifdef DEBUG #define NSLog(...) NSLog(__VA_ARGS__) #else #define NSLog(...) {} #end ...
- spring-web-4.3.3与spring-webmvc-4.3.3的区别
spring-web-4.3.3 http(http协议的实现类)和web包(应用,上下文,会话,cookies,过滤器等等) spring-webmvc-4.3.3 主要是一些view层的核心封装, ...
- Java的Vector源码阅读
* The {@code Vector} class implements a growable array of * objects. Like an array, it contains comp ...
- 关于js中this指向的理解总结！
关于js中this指向的理解! this是什么?定义:this是包含它的函数作为方法被调用时所属的对象. 首先,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁 ...
- 小程序的wx.onAccelerometerChange
https://www.2cto.com/kf/201802/724174.html(copy) 也许有人会问,小程序中都是竖直app形态,要横竖屏判断有什么用?即使判断出了横屏状态,你能把小程序横过 ...
- ubuntu查看本地ip
1.下载net-tools sudo apt-get install net-tools 2.终端输入命令 ifconfig
- jquery stop()、callback、鏈接
stop(stopAll,goToEnd) stop適用於所有的效果,包括顯示隱藏.滑動.淡入淡出和動畫. stopAll默認值為false,清除當前動畫,可以向後執行下一動畫調用,黨改為true,清 ...
- Conjugate Function
共轭函数 共轭函数的定义: 设函数f:Rn→R,定义函数f∗:Rn→R为: f∗(y)=sup(<y,x>−f(x)) x∈D 此函数称为函数f的共轭函数.即函数yx和函数f(x)之间差 ...