原博：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. JAVAEE——struts2_04：自定义拦截器、struts2标签、登陆功能和校验登陆拦截器的实现

    一.自定义拦截器 1.架构 2.拦截器创建 //拦截器:第一种创建方式 //拦截器生命周期:随项目的启动而创建,随项目关闭而销毁 public class MyInterceptor implemen ...

  2. springmvc 之 helloworld

    构建SPRINGMVC主要分为几个部分(大体方式为创建并配置2个XML文件.一个JAVA文件及一个JSP文件). 一.创建动态JAVA WEB项目  //创建项目并导入JAR包. 二.创建并配置ser ...

  3. ecshop商品页增加编辑器fckeditor

    最近在做ecshop的项目,需要在商品单页中增加一项FCKEditor的文本编辑器,但在ecshop的论坛和百度里搜出的方法,试了好几个都没有用,终于找到一个可以正确使用的,和大家分享. ecshop ...

  4. [leetcode-594-Longest Harmonious Subsequence]

    We define a harmonious array is an array where the difference between its maximum value and its mini ...

  5. 【Android Developers Training】 8. 定义Action Bar风格

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 【Android Developers Training】 13. 支持不同平台版本

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  7. ReactiveCocoa源码解析(四) Signal中的静态属性静态方法以及面向协议扩展

    上篇博客我们聊了Signal的几种状态.Signal与Observer的关联方式以及Signal是如何向关联的Observer发送事件的.本篇博客继续上篇博客的内容,来聊一下Signal类中静态的ne ...

  8. Java多线程（一） —— 线程的状态详解

    一.多线程概述  1. 进程 是一个正在执行的程序.是程序在计算机上的一次运行活动. 每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控制单元. 系统以进程为基本单位进行系统资源的调度 ...

  9. axis1.4开发webservice服务端(快速入门)-基于jdk1.4

    写在前面: 现在有很多开发webservice的方法以及框架,什么cxf等,但是这些在你编写服务类的时候都要用到注解这个功能.如果现在的jdk是1.4的,那么就不能使用注解这个功能了.所以这里可以用到 ...

  10. LRU算法总结

    LRU算法总结 无论是哪一层次的缓存都面临一个同样的问题:当容量有限的缓存的空闲空间全部用完后,又有新的内容需要添加进缓存时,如何挑选并舍弃原有的部分内容,从而腾出空间放入这些新的内容.解决这个问题的 ...