css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例

前端写样式时我们为了满足自适应通常会使用百分比来设置元素的宽高间距等，只有明确的知道设置百分比是相对哪个元素的哪个属性而言的才能正确的得到期望的效果。

说在前面，包含块的W3C解释

1.width:相对包含块（父元素）的width

width定义为50%即为父元素宽度的50%，有时候我们可能会定义width为100%，但是发现实际上该元素的宽度是被其子元素的宽度撑大了，这时候就需要注意其父元素是不是设置了width,如果没有就会出现这种情况。
注意：如果设置宽度为百分比的元素同时设置了position:absolute/fixed，则其包含块，就不能简单的理解为其父元素了。其中定位为fixed时其包含块可以理解为视图窗口，定位为absolute时，其包含块为离其最近的定位为relative/absolute/fixed的祖先元素。具体参考W3C

2.height:相对其包含块的高度

3.margin:相对其包含块的width（元素设置了定位时其包含块的定义参考第1条的注意点)
注意：这里无论是margin-left/right/top/bottom设置为百分比时都是相对其父元素的宽度的百分比。具体参考W3C

4.padding:相对于包含块的width（元素设置了定位时其包含块（这里说的父元素）的定义参考第1条的注意点)

同样无论是padding-left/right/top/bottom设置为百分比时都是相对其父元素的宽度的百分比，参考W3C

css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例相关推荐

CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
css几种常见的单位
css几种常见的单位 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在 ...
js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别，常用的元素的属性操作，仿电脑系统时间问好，表单元素的属性操作，案例：仿京东显示隐藏密码，样式属性操作
文章目录操作元素改变元素内容有两种方式: interText 和 innerHTML的区别常用的元素的属性操作案例:仿电脑系统时间问好表单元素的属性操作案例:仿京东显示隐藏密码样式属性操 ...
CSS几种常见的文字动态效果
前言:要实现CSS字体动态效果,就要用到CSS3的animation和@keyframes属性.关于这两个属性就不过多的解释了,在我上上上篇文章有过讲解在目录的'动画和过滤样式'进入 ,想了解的,可以 ...
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%) 像素(Pixel) 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点. 早年的pc端展示的页面基本都用这个 ...
html怎么创建数组,js创建数组的三种方法 JS数组去重的几种常见方法
JS数组有哪几种定义方式? js 里创建一个数组那几种方式有什么区别吗?a = new Array(); b = []; 性能问题吗?? function clear(arr) { // 1 如何获 ...
用JS来动态设置CSS样式的常见8种方式。
转自:微点阅读 https://www.weidianyuedu.com 如何用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important ...
html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...

css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例

css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例相关推荐

最新文章

热门文章