css中属性设置成百分比
结论:
- 标准流中的元素,看其属性有没有继承性。对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块);对于height,它没有继承性,父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的)。
- 绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体如何去实现)。但实际上,大部分浏览器将可视区当作绝对定位的包含块。
- 固定定位参照可视区
width设置成百分比
一般子元素通常将继承父元素计算过的值当作百分比的参照,对于不可继承的属性和根元素,则使用初始值作为参照
比如.box没有设置宽度,但默认继承了body计算过的值,又因为.box是.item的父元素,因此.item又继承了.box计算过的值。当一个块级元素不设置宽度时,则它的宽度默认为全屏,就是因为它继承了包含块的宽度。
height设置成百分比
结论
高度设置成百分比时,高度不像宽度一样会继承父元素或者祖先元素,相反,父元素或者祖先元素会根据子元素的实际高度(高度计算值)来自适应,一般为所有子元素的内容加起来的高度和。而子元素会根据文字行高来设置高度具体值(在子元素高度不设置具体值的情况下)。对于有absolute定位的元素,其高度为百分比时会参照父元素或祖先元素的高度,绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体要如何实现)。但实际上,大部分浏览器将可视区当作绝对定位的包含块。
我们一般喜欢将宽度设置成百分比,但在将高度设置成百分比的时候要注意。
<style>body,div{margin:0;padding:0;}.box{width:100px;height:100%;background-color: #58d3e2;}</style>
<div class="box">height 100%</div>
复制代码
html为什么会出现height等于21呢?是不是这21是从祖先元素继承过来的?当我们把body的高度设置成100%结果还是一样。其实这里的高度为行高的高度,**也就是说,在高度为0或者不设置高度的情况下,高度是文字的行高,**当我们在.box中加上line-height:20px;时,box,body和html的高度都会变成20px;当我们把.box高度设置成具体值时:
<style>body,div{margin:0;padding:0;}.box{width:100px;height:100px;background-color: #58d3e2;}</style>
<div class="box">height 100%</div>
复制代码
可以发现,body和html竟然跟.box高度一样为100px.所以可以得出父元素在不设置高度的情况下,是自适应子元素高度的(在不设置高度的情况下,html和body的高度是所有内容加起来的高度),如果父元素设置了高度,则是另外一种情况了:
<style>body,div{margin:0;padding:0;}.d{height: 100px;width: 200px;background-color: #9d9d9d;}.box{width:100px;height:100px;background-color: #58d3e2;}</style>
<div class="d">
<div class="box">height</div>
</div>
复制代码
可以发现d,body,html的高度都变成了100px(本来应该是200px),说明父元素或祖先元素时被动自适应子元素高度的,它们的高度值不会继承给自元素。
当有absolute定位时
1.绝对定位没有定位的祖先元素
这时绝对定位参照的是一个视口的高度,注意视口这个概念。
<style>body,div{margin:0;padding:0;}.box{position:absolute;width:100px;height:100%;//改变百分比为50%background-color: #58d3e2;}</style>
<div class="box">height 100%</div>
复制代码
改变height分别为100%和50%,可以发现html的高度为0,并没有自适应div的高度,因为div已经彻底脱离标准流了,我们说过,如果绝对定位没有定位的祖先元素,则包含块为初始包含块,这里的初始包含块即为可视区,所以这里的百分比是参照可视区的大小来计算的。所以为50%时占视口的一半。注意这只是一个视口的高度,把滚动条往下拉拉就知道了。
2.绝对定位的元素在另外一个定位元素里面(除static外)
这时百分比参照的是父元素生成的包含块计算出来的值
所以想让定位元素的高度占满整个屏幕,可以:
body{position:relative;
}
复制代码
margin-left设置成百分比
<style>body,div{margin:0;padding:0;}.box{position:absolute;width:100px;height:100px;margin-left: 100%;background-color: #58d3e2;}</style>
<div class="box">margin-left</div>
复制代码
这时出现了滚动条,这是因为将div的margin-left设置成了100%,而百分比是参照其包含块body的宽度,body又是参照的html(某些浏览器将它当作初始包含块)。而html的初始包含块是可视区,所以可视区的宽度再加上元素的100%,自然就超出了屏幕了。
解决方法:
(1)利用calc函数
<style>body,div{margin:0;padding:0;}.box{position:absolute;width:100px;height:100px;margin-left: calc(100%-100px);background-color: #58d3e2;}</style>
<div class="box">margin-left</div>
复制代码
(2)让body的宽度减去100px,因为div的百分比是参照其父元素的宽度计算的,因此这里将它的父元素的宽度减小,那么它的margin-left的100%自然就小了
<style>body,div{margin:0;padding:0;}body{margin-right;100px;}.box{position:absolute;width:100px;height:100px;margin-left: 100%;background-color: #58d3e2;}</style>
<div class="box">margin-left</div>
复制代码
css中属性设置成百分比相关推荐
- css中如何设置hr的样式?css hr标签多种样式(图文)
在对html网页进行美化的时候,肯定少不了要用的hr标签进行修饰页面,但默认的hr标签样式对页面的修饰起不到什么好的作用,有经验的前端工作者就会通过使用css样式来对hr标签进行一些美化的操作.那么如 ...
- HTML和CSS中如何设置中文字体
你是不是也遇到过这个问题:在HTML或CSS中怎么设置字体为宋体或楷体或黑体等等中文字体呢?下面就来解决这个问题. 用font-family:字体英文名 即可. fon标记是HTML里最常用的文字格式 ...
- html语言字体间距怎么设,css中如何设置字/行间距?
css中如何设置字/行间距?下面本篇文章给大家介绍一下使用css设置字间距和行间距的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用css设置字间距 letter-spac ...
- Flex4 css中skin设置报错解决
Flex4 css中skin设置 header-background-skin:"MySkin"; 运行时报错: TypeError: Error #1034: 强制转换类型失败: ...
- html中加粗的字体如何改细,css font-weight 属性设置文本字体的粗细
css font-weight介绍 在CSS中,font-weight属性用来定义字体粗细.font-weight属于css1版,所以所有主流浏览器都支持font-weight属性. 初学者要注意,字 ...
- CSS中属性的值和单位
CSS中值的单位 1.颜色值 被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示. 百分比表示 color: rgb(100%, 100%, 100%); 这个声明将红. ...
- CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max
前言 现在 HTML5/CSS3 很流行罢,也是未来时代的趋势.在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢. 动画 animation 转化 transform 过 ...
- css如何设置文本垂直居中显示,css中怎么设置文本居中?css文本垂直居中的设置方法...
在网页设计的过程中,有时候可能为了布局美观可能需要让文本居中,那么,怎么设置文本居中呢?本篇文章将给大家介绍关于css设置文本垂直居中的方法. 首先我们要知道通过css实现元素的水平居中较为简单:对文 ...
- html5首字母大小写,css中如何设置英文首字母大写
css中可使用text-transform属性来设置英文首字母大写.text-transform属性可控制文本的大小写,只需要给包含英文字母文本的元素设置"text-transform:ca ...
最新文章
- ALV 层级分组显示报表
- Linux的解压报错tar: Error is not recoverable: exiting now
- 注册中心ZooKeeper、Eureka、Consul 对比
- 关于php的问题有哪些,关于PHP的报错问题?
- 机房线路故障,引发多家公司不能上网,和自己de经历有感
- java定向输出程序日志(输出到txt文件中)
- 从0到1带你手撸一个请求重试组件,不信你学不会!
- python历史5分钟数据_python每5分钟从kafka中提取数据的例子
- 原来程序员的大部分时间并不是写代码
- ecshop调用文章显示上一篇下一篇_无需整理
- iPad 读不到 USB,在 Mac 上如何进行 USB 格式化?
- 拓端tecdat|python对NOAA天气数据格式转换
- CCS5.5.0编译问题之” XDAIS_CG_ROOT ”
- 推荐使用maven生成mybatis代码
- GBASE监控工具简介
- Python仿黑客帝国代码雨
- 2019个人年度总结:平凡的我,仍然在平淡的生活里打拼,寻找未来的曙光。
- 十年前开发的平板游戏:HyllCube 三维四子棋游戏,获得了全国一等奖
- 数据加密存储---加密文件系统(EFS)介绍
- 江西赣州计算机应用中心,赣州计算机应用与维修专业学校