原博：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. 【解决】使用compass watch xxx.scss 失败

    原始日期:2016-01-25 16:49 在上一篇博客,我们终于安装好了compass,不过紧接着使用compass watch app.scss 结果失败,经过查询资料,是compass的版本问题 ...

  2. java利用反射获取类的属性及类型

    java利用反射获取类的属性及类型. import java.lang.reflect.Field; import java.math.BigDecimal; import java.util.Map ...

  3. jquery（select）下拉框 选取选中的值

    var get_date_type=$("#date_type").find("option:selected").val(); var get_date_ty ...

  4. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  5. angular.extend、angular.$watch、angular.bootstrap

    1.angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象. 直接上代 ...

  6. bcp和load table

    使用BCP和LOAD TABLE联合完成Sybase IQ 的数据导出和导入工作.说明: 表(视图)GN_TEST只有两个字段,TIMEID和MSISDN, 导出时我用'|'作为字段分隔符,'& ...

  7. 算法起步之kmp算法

    [作者Idlear  博客:http://blog.csdn.net/idlear/article/details/19555905]            这估计是算法连载文章的最后几篇了,马上就要 ...

  8. 391.FANUC宏程序编程

    运算符 运算符由2个字母组成,用于两个值的比较,以决定它们是相等还是一个值小于或大于另一个值.注意,不能使用不等号 运算符 含义 EQ 等于(=) NE 不等于 GT 大于 GE 大于或等于 LT 小 ...

  9. 部署服务能在Dynamics CRM Online上使用吗？

    部署服务有些时候有用,改动一些参数不需要重启IIS,也不需要去数据库中更改.比如,系统默认设置一个仪表盘(Dashboard)最多6个组件,不能超过这个数量,通过部署服务是可以更改的.部署服务既可以通 ...

  10. log4go的精确定时程序（带自动延迟补偿）

    程序设计目标是在程序启动10秒后执行某个任务,例如日志转储(rotate),以后每隔15秒执行一次. 初次的设计 package main import ( "time" &quo ...