原博：http://www.webhek.com/post/7-tips-web-front-developer-must-know__trashed.html

1.元素的margin-top、margin-bottom及padding-top、padding-bottom使用百分比作为单位时，其是相对父元素的宽度width，而不是我们想象的高度height；如图

<style type="text/css">

        .parent{

            outline: 1px solid orange;

            width: 200px;

            height: 300px;

            padding: 10px;

            margin: 10px;

        }

        .child{

            outline: 1px solid purple;

            width: 200px;

            height: 80px;

            padding-top: 10%;    　　/*20px = 父容器的width值200px * 10% */

            padding-bottom: 5%;     /*10px = 200px * 5% */

            margin-top: 20%;    　　/*40px = 200px * 20%*/

            margin-bottom: 15%;    /*30px = 200px * 15%*/

        }

<body>

    <div class="parent">

        <div class="child"></div>

    </div>

</body>

子盒子参数如下：

2.含有定位属性的元素，其top、bottom单位为百分比时，该百分比是相对父元素的高度height。left、right则是相对父元素的宽度width.

.parent{

            outline: 1px solid orange;

            width: 200px;

            height: 300px;

            padding: 0px;

            margin: 0px;

            position: relative;

        }

        .child{

            outline: 1px solid purple;

            width: 200px;

            height: 80px;

            position: absolute;

            top: 5%;　　/* 15px = 300px * 5% 上边框离父盒子上边框15px的距离*/

            left: 20%;　　/*　　40px = 200px * 20% 左边框离父盒子左边框40px的距离　　
　　　　　　　　　　　　　　　　　　 也就是子盒子左上角的坐标为x=15,y=40（父盒子左上角为原点）  */ 

        }

3.边框宽度不能用百分比表示

4.width:100%

4.1当父容器里有绝对定位的子元素时，子元素设置width:100%实际上指的是相对于父容器的padding+content的宽度。

r如图：

 <style type="text/css">

     .parent{

         outline: 1px solid orange;

         width: 200px;

         height: 300px;

         padding: 10px;

         margin: 10px;

         position: relative;

     }

     .child{

         outline: 1px solid purple;

         width: 100%;　　/* width = 220px = 父容器的padding+content*/

         height: 80px;

         position: absolute;

         top: 0;

         left: 0;

     }

 </style>

4.2 当子元素是非绝对定位的元素时（可以是相对定位）,或者如果都没有定位，width:100%才是指子元素的 content ，其等于父元素的 content宽度。

.parent{

    outline: 1px solid orange;

    width: 200px;

    height: 300px;

    padding: 10px;

    margin: 10px;

}

.child{

    outline: 1px solid purple;

    width: 100%;  /* width:200px = 父盒子的content*/

    height: 80px;

}
.parent{

    outline: 1px solid orange;

    width: 200px;

    height: 300px;

    padding: 10px;

    margin: 10px;

    position: relative;

}

.child{

    outline: 1px solid purple;

    width: 100%;

    height: 80px;

    position: relative;

}

5. 设为flex布局后，子元素的float、clear和vertical-align属性将失效

6. vertical-align直接使用将失效，要搭配display:inline-block使用；或者将line-heigth设置的和height一样高，文字也可以垂直居中。

css中的几个小tip（一）的更多相关文章

  1. css中的几个小tip（二）

    margin的塌陷现象 (一)在标准文档流中, 垂直方向存在margin的塌陷现象 先上段代码: <style type="text/css"> .box{ width ...

  2. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  3. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

  4. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  5. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  6. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  7. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

  8. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  9. 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

随机推荐

  1. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

  2. 【译】Reflection.Emit vs. CodeDOM

    原文:http://ayende.com/blog/1606/reflection-emit-vs-codedom Both technologies allow you to generate ex ...

  3. Codewars练习笔记·1 - 6.23

    Codewars地址:https://www.codewars.com/ 笔记资料来源:JavaScript高级程序设计. 欢迎和大家一起来讨论~   基础练习(1):   我的解答为: class ...

  4. HTML5 中的拖放

    今天,给大家整理一个html5 拖放. 首先,我们先了解一下什么是拖放? 拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HT ...

  5. SQL Server事务的隔离级别和锁

    背景        当用户并发尝试访问同一数据的时,SQL Server尝试用锁来隔离不一致的数据和使用隔离级别查询数据时控制一致性(数据该如何读取),说起锁就会联想到事务,事务是一个工作单元,包括查 ...

  6. .Net上传文件大小配置

    1.起因 今天同事在上传文件的时候,发现一直失败,说文件比较大.一听就明白了,肯定是上传文件大小的问题啊.然后查看web.config文件,发现设置过文件上传的大小限制.配置文件上传大小,分为2部分. ...

  7. iOS10 相关的隐私设置，

    最近下载了几个demo,总是一运行就崩,看了下崩溃日志,有几个是因为没在plist里设置因此权限,而现在iOS 10 开始对隐私权限更加严格, 如需使用隐私权限需要在工程的info.plist文件中声 ...

  8. Ext viewport的渲染

    Ext viewport的渲染 1.在app.js里创建 Ext.application({ name: 'MySecurity', extend: 'MySecurity.Application', ...

  9. Win10安裝weblogic12C

    一.系统环境 Win10系统 Jdk1.8 64位 二.安装Weblogic      第一步:用系统管理员身份打开CMD命令提示符,用CMD方式进入"fmw_12.1.3.0.0_wls. ...

  10. web前端CSS2学习2017.6.17

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...