原博: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. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  2. ecshop和jQuery冲突

    这个问题看ecshop的论坛里有很多帖子,解决方案就好几种,但是有几个标注完美解决方案的需要更改很多文件,对于我们这种初学者出现了问题的话是不知道怎么调试的. 找到一个很简单的解决方案,论坛里说只能解 ...

  3. Java学习笔记--动态代理

    动态代理 1.JDK动态代理 JDK1.3之后,Java提供了动态代理的技术,允许开发者在运行期创建接口的代理实例.JDK的动态代理主要涉及到java.lang.reflect包中的两个类:Proxy ...

  4. php中的四种排序算法

    . 冒泡排序 思路分析:在要排序的一组数中,对当前还未排好的序列,从前往后对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即,每当两相邻的数比较后发现它们的排序与排序要求相反时,就将 ...

  5. PHP数组按引用传递

    <?php /**PHP数组按引用传递**/ $arr = array( array('id' => 1, 'name' => 'name1'), array('id' => ...

  6. 合并静态库出现 can't move temporary file错误

    静态库的制作就不说了很简单,网上也很多例子,这里主要讲下我合并通用静态库时候遇见的坑,在合并前注意.a文件一定要正确,我有一次scheme选了release但是device忘了换,结果怼着两个模拟器静 ...

  7. 转载: C++ 获取文件夹下的所有文件名

    最近需要得到某个文件夹下所有文件名,于是就上网上查了查,得到如下的解决方案最多: 而且查到的最早的版本是这个:http://blog.csdn.net/cxf7394373/article/detai ...

  8. 轻量级高性能ORM框架:Dapper高级玩法

    Dapper高级玩法1: 数据库中带下划线的表字段自动匹配无下划线的Model字段. Dapper.DefaultTypeMap.MatchNamesWithUnderscores = true; 备 ...

  9. 如何为一个eclipse安装android环境

    据说android已经不再支持android adt-bundle的开发环境了,所以如果继续使用的话,会不再更新 使用eclipse来安装android环境或者使用android studio 但是以 ...

  10. nuget挂了吗?

    [nuget.org] Unable to load the service index for source https://api.nuget.org/v3/index.json. 发送请求时出错 ...