编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
   -> Html-Css -> absolute和relative元素 设置百分比宽高的差异 -> 正文阅读

[Html-Css]absolute和relative元素 设置百分比宽高的差异

  一般元素在页面所占的空间包括:magin border padding content。以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的。但是当子元素的position不同时,却是不同的结果。
demo
  用如下小demo测试:

  <aside class="container">
    <div class="test">
    </div>
  </aside>


    .container{
      position: relative;
      margin: 100px auto;
      padding: 20px;
      height: 100px;
      width: 100px;
      border : 10px solid green;
      background-color: red;
    }

    .test{
      height: 20%;
      width: 20%;
      position: relative;
      top: 0;
      left: 0;
      background-color: #000000;
    }

  效果如下:
  

  子元素以父元素的content宽度100px为基准计算的20%为20px 且是以content为参考进行的偏移(虽然这里为0)
  若子元素position为absolute时,效果如下:


  此时子元素的百分比宽度是以 父元素的 padding + content的值进行计算的 为28px; 而且也是以padding为基础进行偏移的。
结论
  absolute元素的百分比宽高 计算时按照的包含块的 padding + content的值算的,偏移的参考也要加上padding那部分
  relative元素的百分比宽高 计算时按照的包含块的 content的值算的.
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
上一篇文章      下一篇文章      查看所有文章
加:2017-12-07 23:30:03  更:2017-12-07 23:30:08 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 龙发科技 开发 中国文化 阅读网 日历 万年历 2020年9日历
2020-9-25 15:26:23
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识