原博：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. 单例模式与静态变量在PHP中

    在PHP中,没有普遍意义上的静态变量.与Java.C++不同,PHP中的静态变量的存活周期仅仅是每次PHP的会话周期,所以注定了不会有Java或者C++那种静态变量. 1. 静态变量在PHP中 在PH ...

  2. 反射+自定义注解---实现Excel数据列属性和JavaBean属性的自动映射

    简单粗暴,直奔主题.   需求:通过自定义注解和反射技术,将Excel文件中的数据自动映射到pojo类中,最终返回一个List<pojo>集合? 今天我只是通过一位使用者的身份来给各位分享 ...

  3. 使用awk进行日志信息的分组统计

    起因 这是今天我线上出了一个bug,需要查看日志并统计一个我需要的信息出现的频率,可以叫做分组统计. 日志文件部分内容 00:09:07.655 [showcase_backend][topsdk] ...

  4. MySQL删除表方式差异

    数据库删除语句 Drop/Delete/Truncate比较 Delete :删除数据表中的行(可以删除某一行,也可以在不删除数据表的情况下删除所有行). 删除某一行:Delete from 数据表名 ...

  5. JAVA类型擦除

    Java泛型-类型擦除 一.概述 Java泛型在使用过程有诸多的问题,如不存在List<String>.class, List<Integer>不能赋值给List<Num ...

  6. 2.如何使用matlab拟合曲线

    输入数据 做数据曲线拟合,当然该有数据,本经验从以如下数据作为案例.   添加数据到curve fitting程序 这一步就是将你要拟合的数据添加到curve fitting程序中,同时给你拟合的曲线 ...

  7. 1.如何安装matlab2016a

    下载:见网盘 安装教程: 解压安装文件,安装文件为 iso 格式,但是不能通过虚拟光驱安装,需要将 iso 文件用解压软件解压.注意,R2016b_win64_dvd1.iso 和 R2016b_wi ...

  8. 2.如何修改apache的默认端口

    打开apache的conf文件夹,找到server.xml,修改里面这段的port即可,重启apache,修改成功

  9. Python3.5学习笔记-列表、元组、字典

    Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象的类型 ...

  10. 正则表达式获取body内容

    最近项目需要,要弄个正则表达式获取body的内容. 用过angularjs就知道,很多时候要写指令时引用templateUrl的时候.template的内容root是不能包含多个节点的,否则就报错. ...