css中百分比高度是相对于父元素的高度么

2023-03-05 20:07:02html-css019

css中百分比高度是相对于父元素的高度么,第1张

答案是：

除了height以外的样式，padding,margin中的百分比都是相对于父元素context的宽度而非是高度。

以下是一个简单的例子：

如图child的高度是50%，padding-bottom:50%但是两者的高度是显而易见不同的；说明

基准不是同一个东西；

而100px 刚好是父元素宽度的1/2

模型html

书写手机网页时，必须约束视口宽度（320-420左右）： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" /> width=device-width 约束视口 initial-scale=1.0 初始视口倍数是1倍 minimum-scale=1.0 最小允许视口宽度是1倍 maximum-scale=1.0 最大允许视口宽度是1倍 user-scalable=no不允许用户缩放视口书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。一、百分比布局 width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。 height:高度的百分比是相对于父盒子height内容高的比。 padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。 border：不能书写百分数子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）； padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；例：div{ width: 50%overflow: hidden} p{ width: 50%height: 100pxfloat: leftbackground-color: pink} p:last-child{ background-color: green}二、box-sizing:border-box css2中的盒模型是外扩的。 css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。）例：内减盒模型：书写的width、height就是盒子真正占有的宽和高。讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！三、弹性盒 display的属性值：block ,inline,inline-block,none -webkit-box:弹性盒容器。例：书写：3个P，宽度比是1:2:3。（X+2X+3X=100%）抽象公式：四、固比固模型固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。例：1和3部分宽度是120px，2自动撑开。 1、利用浮动 2、绝对定位（推荐） 3、弹性盒五、max-width 和 min-width 移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。例：

css div怎么设定高度 height就是设定高度的，写上正确的类名，就可以把对应的div的高度设定好了

css 设定div 高度无效

只需要把HTML或BODY的高度设定为100%，然后在body内的任意DIV的高度用百分比表示，就可以了。具体程式码如下：

<head>

<style>

body{height:100%}设定网页高度为百分之百

.login_wrapper{height:100%}设定整体布局高度为网页高度的百分之百

.login_header,.login_footer{background-color:blackheight:20%}设定顶部和底部高度为百分之二十

.login_content{height:60%}设定内容区高度为百分之六十

</style>

</head>

<body>

</div>

</body>

</>

CSS 设定DIV 最小高度

一个东西必然得有最小的限制啊，如果没有限制的话，那么div的高度如果为0，那它存在还有什么意义呢？他是个容器，容易里面放东西肯定得有最小的限制呀。。。

div ui li 不呼叫 CSS 怎么设定高度

.slider-promo J_Slider J_TWidget ul li { } 这样就可以。这样就不呼叫，直接写的就是你slider-promo J_Slider J_TWidget这个类下ul li 里的样式。！前面有个点，类的基本格式，别忘了哦。

css怎样设定div高度随浏览器

用js设定更好

var ss

window.onload=function()

{

var w=document.documentElement.clientWidth 可见区域宽度

var h=document.documentElement.clientHeight可见区域高度

ss=document.getElementById('ha')

alert(w)

ss.style.width=w+"px"

ss.style.height=h+"px"

}

css设定div高度，但div的高度无法自适应内容

首先确保这个div是不是是block。预设情况下，div是block。可能在设定某些css样式的时候更改了也不一定。

可以如果设定了高度，他的高度就会固定下来。可以这样改。不设定他的高度，设定它的overflow：hidden属性就可以自适应内容了、

jquery怎么设定div高度

JQ中height() 方法返回或设定匹配元素的高度。

$("div").height(300)直接设定元素的高$("div").css("height", "300px")通过设定CSS属性来设定元素的高

Jquery是一个优秀的Javascript库，还相容各种浏览器。jQuery使使用者能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX互动。

怎么设定div的高度

高度例项原始码:

<!DOCTYPE ><><head><meta charset=utf-8 /><title>固定高度</title><style>.div-height{border:1px solid #F00width:300pxheight:200px} </style></head><body><div class="div-height"></div></body></>

DIV高度怎么设定全屏？

DIV最外层全屏100%宽度

其实DIV全屏即宽度值设定为100%，如果对网页最外层的DIV盒子不设定宽度，这样盒子依然是全屏相当于100%宽度。

如果对DIV设定全屏，一般我们就设定其width宽度样式为100%。

这里为了方便理解，DIVCSS5例项讲解DIV全屏实现对最外层DIV给予id引入CSS命名为warp同时为了便于观察，我们对div设定一个css背景为黑色，高度为80px。

完整+css程式码：

<!DOCTYPE >

<xmlns=":w3./1999/x">

<head>

<title>div全屏例项</title>

<style>

#warp{ width:100%height:80pxbackground:#000}