原博：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. 并发编程（三）：全视角解析volatile

    一.目录 1.引入话题-发散思考 2.volatile深度解析 3.解决volatile原子性问题 4.volatile应用场景 二.引入话题-发散思考 public class T1 { /*vol ...

  2. ThreadLocal经典分页

    package com.netease.live.admin.util; import com.netease.live.common.util.Constant; /** * * @author b ...

  3. linux 升级yum对应的python

    这里记录一下linux 系统升级python对yum带来影响的解决办法 很多人在使用linux系统执行python任务的时候需要升级linux系统自带的python到高级版本.具体如何升级python ...

  4. 12.引入依赖项目的时候，如果找不到jar

    原因是bin没有生成,先clean依赖包,再clean原工程包,就可以了

  5. 在线SVN仓库实现：金山快盘+TortoiseSVN(Win)+SCPlugin(Mac)

    前段时间一直在研究SVN在线托管,也尝试了网上推荐的免费托管网站. 但毕竟是是免费的,还是要受到比如空间大小.私有性等这样那样的限制,感觉有些麻烦. 而且,比较心疼自己在本地开发的时候积累的更新日志, ...

  6. 【Socket】Java Socket基础编程

    Socket是Java网络编程的基础,了解还是有好处的, 这篇文章主要讲解Socket的基础编程.Socket用在哪呢,主要用在进程间,网络间通信.本篇比较长,特别做了个目录: 一.Socket通信基 ...

  7. 【ESP8266】发送HTTP请求

    一.ESP8266简介 ESP8266 是深圳安信可科技有限公司开发的基于乐鑫ESP8266的超低功耗的UART-WIFI模块的模组,可以方便进行二次元开发,接入云端服务,实现手机3/4G全球随时随地 ...

  8. 懒人的小技巧, 批处理修改IP

    相信很多人都有这样的麻烦, 工作单位的IP网段与住的不一致, 自己的笔记本在单位和回家的时候每次都要更改IP, 很麻烦,  偷个懒, 做了个批处理来修改IP,方便一点. 还有就是可以把工作的时候才需要 ...

  9. MyBatis源码解析【1】准备工作

    终于迎来了这一天,我觉得现在的我在经历了长时间的学习和开发之后有了一定的经验,所以准备开始学习源码. 今天我将做好充足的准备,在接下来的一个月中,努力的爬过这座大山.(可能不用一个月,但是我觉得需要仔 ...

  10. javascript 玩转Date对象

    前言:最近在做一个日期选择功能,在日期转换的时候经常换到晕,总结一下常用的Date对象的相关用法,方便日后直接查看使用- 1. new Date()的使用方法有: 不接收任何参数:返回当前时间: 接收 ...