首页 > 编程知识 正文

js计算百分比,css计算高度calc

时间:2023-05-06 01:24:52 阅读:46750 作者:4417

----从牛人部落中自己的相关文章转载----

前端css定位中经常遇到的一个问题是,百分比定位是针对谁的?

一. margin、padding的比例

首先从css的设计意图说起,在浏览器中默认的writing-mode: horizontal-tb; 和direction: ltr; 的情况下,CSS的基本需求是排版,但通常我们看到的水平文字,其水平宽度是一定的(请仔细回忆。 如果未明确定义宽度或强制显示在一行中,则会遇到边界换行而不是水平换行),则可以在垂直方向无限扩展。 所以:

1.margin :自动; 不能垂直于纵向居中对齐,其实也是上述原因。 因为纵向无限扩展,所以没有固定的值可用于计算。

2 .如果使用边距(包括边距顶、边距底、边距左和边距右)百分比,则相对于父元素的宽度放置。

3 .填充(包括填充顶、填充左、填充底、填充右) :使用率也相对于父元素的宽度定位。

具体请参考这篇文章:

33558 www.I turing.com.cn/article/64581

二、总结如下。

相对于父元素的宽度() (如果自身已经是最外层元素,则相对于视口) )。

[max/min-]width、left、right、padding (包括padding-top、padding-bottom )、margin-top、margin-bobot

相对于父元素的高度((如果自己已经是最外层元素,则相对于视口) ) ) ) ) ) )。

[max/min-]height、top、bottom等;

在此,关于height定位的一个冷漠的知识是,如果包容的核桃仁元素的亲元素没有决定高度,就不能有效地使用height=XX%的样式。 此时,它基于视口,除非此元素已经是最外层的元素。

有关详细信息,请访问http://www.cn blogs.com/vajoy/p/3730014.html

相对于继承大小:

字体大小等;

相对于自身尺寸:

线路-高度等;

相对于自己的宽度高:

border-radius、background-size、transform: translate (、transform-origin、zoom、clip-path等;

特殊算法的:

背景位置(方向长度/除该方向背景图以外的部分的全长* 100 ),

filter系列函数等;

如果您自己设置position: absolute,最接近它的position将相对于视口,而不是静态的祖先元素。

对于position :固定,“父元素”指向视口。

深刻理解CSS定位中的偏移

目录(1)对齐)2)块)3)偏移属性)4)绝对对齐)5)格式)6) auto前面的CSS有三种基本对齐机制:的常规流程。 浮动和绝对对齐。 通过利用对位,可以对要素框的正常位置进行正确的定义.

【转】深刻理解CSS对准中的偏差

在前一个故事里,CSS有三种基本的定位机制:普通流。 浮动和绝对定位。 利用定位,可以准确定义元素框应该相对于其正常位置出现的位置,或者相对于父元素的位置。 另一个元素也是浏览器窗口本身的位置。 但是,要素如何定位,还要决定.

css布局中的百分比布局

1 .在说百分比之前,首先基本单位英寸(英寸) :英寸1英寸1英寸=2.54厘米(厘米) :厘米(磅) point ) :pt 1pt=1/7 .

CSS定位中的OpenCurlyDoubleQuote; 父子俩断绝了”

一、定位介绍定位有三种:相对定位(定位: relative )、绝对定位(定位: absolute )、固定定位(定位: fixed )2. 3种定位用法.

CSS配准中的盒模型、定点、z索引学习体会

在开始整体之前需要说明两个概念: 第一,一切都是框架。 这意味着,在HTML中,无论是块级别还是内联,都可以将其视为块。 唯一的区别是块单独占一行。 第二个文档流:的网页是.

了解CSS定位中的堆栈z索引

目录(1)定义)2)堆栈规则)3)堆栈上下文)4)兼容的上一个故事,对于所有位置,如果最后两个元素试图位于同一位置,则不可避免。 很明显,一个必须覆盖另一个。 但是,如何控制哪些要素位于上层,这是.

selenium - css定位

前言: CSS

(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的表现. CSS 使用选择器来为页面元素绑定属性.这些选择器可以被 selenium ...

Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析

加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

CSS中属性百分比的基准点

1.属性百分比的基准点 1.1.基于包含块 以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...

随机推荐

android camera 自定义开发

1.检测是否有摄像头 /** Check if this device has a camera */ private boolean checkCameraHardware(Context cont ...

Oozie和Azkaban的技术选型和对比

1 两种调度工具功能对比图 下面的表格对上述2种hadoop工作流调度器的关键特性进行了比较,尽管这些工作流调度器能够解决的需求场景基本一致,但在设计理念,目标用户,应用场景等方面还是存在区别 特性 ...

C# Http请求(GET/HTTP/HTTPS)

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

用Thread类创建线程-2

支持原创,本系列文章均转自:http://www.blogjava.net/nokiaguy/category/38172.html 在Java中创建线程有两种方法:使用Thread类和使用Runna ...

sql server 2005中IMAGE类型的BUG问题

目的:在sql server 2005数据库上筛选出那些有照片的员工 由于客户之前的数据库是sql server 2000,定义的photo字段的数据类型为image, 在sql 2005数据库上,用 ...

myeclipse笔记(3):导入的项目切换jdk版本

有时候,从外面导入的javaweb项目会访问不了,这个时候改变jdk版本就是其中解决的方法之一. 右键点击项目 --> bulid path --> configure​ ​​​ 选择需要 ...

MocorDroid编译工程快速建立编译环境

function sprdLunch(){    declare -a arrProj    arrProj=`find out/target/product -name previous_build ...

numpy 基础操作

Numpy 基础操作¶ 以numpy的基本数据例子来学习numpy基本数据处理方法 主要内容有: 创建数组 数组维度转换 数据选区和切片 数组数据计算 随机数 数据合并 数据统计计算 In [1]: ...

Confluence 6 使用 JConsole 监控本地 Confluence

如果你遇到了一些特定的问题,或者你仅仅是希望在一个很短的时间内监控你 Confluence 的运行,你可以使用本地监控.本地监控将会对你的服务器性能产生影响,所以我们并不推荐你使用本地监控来长时间的监 ...

centos7执行umount提示:device is busy或者target is busy解决方法

问题描述: 因为挂载错了,想取消挂载,但是umount报告如下错误: [root@zabbix /]# umount /dev/sdc1 umount: /data1: target is busy. ...

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。