1、针对于before和after伪元素的用法：

<style>

    .clearfix:before,

    .clearfix:after{

         clear:both;

        content:"";

        display:block;

}

</style>

<div class="clearfix">

    <div class="content">what do you say?</div>

</div>

注意点：其中伪元素before和after插入的content是插入到class=“clearfix”的div内部的头部和尾部的。

2、浮动的一些问题

1、如果原来的空间有块级标签，浮动元素不会占用其空间，换行找到空的空间进行浮动。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

        .left{

         float:left;

        }

    </style>

</head>

<body>

<div class="content">content </div>

<div class="left">turn left</div>

</body>

</html>

效果：

2、当元素浮动时，其他元素会忽视浮动元素的存在，与浮动元素在一行显示，会和浮动元素空间重叠，但是互相不会挤掉各自的文本元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position</title>

    <style>

        .content{

            width: 150px;

            height: 150px;

            border: #0f0f0f 1px solid;

             float:left;

            background:blue ;

        }

        .left{

            width: 200px;

            height: 150px;

            border: yellow 1px solid;

            background-color:black;

            color: #eeeeee;

        }

    </style>

</head>

<body>

<div class="content">content </div>

<div class="left">turn left</div>

</body>

</html>

效果：

3、伪类的生效标签

伪类：link；

　　   visited：

　　　hover：

　　　active：

注意：1、link和visited只对超链接标签有效，一般是a标签，对其他标签没有效果，而hover和active对所有标签都有效。

　　　2、使用时遵循“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA，即先放link和visited（一般放一起，使用一个样式），再放hover，最后放active，因为　　　　　　1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义（即经过时如果hover在link前面，hover会优先生效，link后生效并且会覆盖hover的效果，最后显示的是link的效果，与我们的期望不符）；

　　　　　　2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义（解释同上）；


　　　　　　所以说，a:hover定义一定要放在a:link、a:visited的后面（详细解释进链接https://zhidao.baidu.com/question/2203427712216281148.html）

4、子元素溢出问题（这个不好理解，很重要）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>溢出问题</title>

    <style>

        *{margin: 0;padding: 0;background-color: black}

        .son{

            width: 100%;

            margin: 10px;

            background-color: yellow;

        }

        .father{

            width: 50%;

        }

    </style>

</head>

<body>

<div class="father">

    <div class="son">my name is son.</div>

</div>

</body>

</html>

效果如下：

解析：1、设置width设置的是盒子当中content的宽度，%表示时是指占父元素width的多少（即父元素content）不包括boder，padding和margin宽度，由于页面渲染是从左往右的，所以当子元素溢出或者未占满父元素时设置margin（离包含它盒子的边框距离，溢出和未充满时，margin-right找不到无法找参照物），所以margin-left有效，margin-right无效，但是padding都是有效的，因为padding是距离content的距离，始终有参照物

2、当width=100%设置margin时，因为content的width不变，但是因为又设置了margin，所以会溢出（毕竟width本来说100%，子元素再大可不就溢出了嘛），溢出了margin-right找不到参照物所以失效

关于回顾css发现的一些问题的更多相关文章

  1. 回顾CSS布局易混淆的概念

    一.浮动模型 元素默认是static的,不能浮动,但可以用CSS样式设置为浮动 浮动模型只有两个值 float:left 和 float:right ,可以让块状元素同行显示 二.层模型 top/bo ...

  2. 看css发现一个pointer-events:none;的东西

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. （转）每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...

  4. css 百分比继承关系的探讨

    引入:近日在回顾css基础的时候发现了一个有趣的问题,就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算,还是继承父级根据百分比计算过后的绝对值.下面举一个简单的例子来描述这一个问题, ...

  5. 现代CSS进化史

    英文:https://medium.com/actualize-...编译:缪斯 CSS一直被web开发者认为是最简单也是最难的一门奇葩语言.它的入门确实非常简单--你只需为元素定义好样式属性和值,看 ...

  6. Google css & Google fonts

    最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...

  7. chrome刷新CSS

    改动CSS发现页面根本没有变化,再三查看确实是这一处CSS,那么可能的就是浏览器缓存了CSS而刷新无效了. chrome刷新CSS: 方法1:直接ctrl+F5,进行强制刷新页面,浏览器会重新加载所有 ...

  8. Code Review： 超越“审、查、评”的代码回顾

    http://news.cnblogs.com/n/532148/ 文/TWInsights-伍斌 Code Review 应该是软件开发团队“共同学习.识别模式和每日持续”的过程,而不是带有“审.查 ...

  9. css清除浮动的原理

    最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...

随机推荐

  1. 3DMAX 7 角色建模1 人头建模

    说明: mesh与poly 可编辑多边形是一个多边形网格:即与可编辑网格不同,其使用超过三面的多边形.可编辑多边形非常有用,因为它们可以避免看不到边缘.例如,如果您对可编辑多边形执行切割和切片操作,程 ...

  2. IT兄弟连 JavaWeb教程 JSTL标签的使用

    假定甲方打算使用乙方开发的标签库,乙方把与标签库相关的所有文件打包成为了一个JAR文件(假定名为standard.jar),在这个JAR文件中包含以下内容: ●  标签处理类及相关的.class文件 ...

  3. （转）关于MongoDB你需要知道的几件事

    本文列举了颇让作者困惑的一些MongoDB限制,如果你也打算使用MongoDB,那么至少要提前了解这些限制,以免遇到的时候措手不及. 消耗磁盘空间 这是我的第一个困惑:MongoDB会消耗太多的磁盘空 ...

  4. Zynq7000开发系列-5（OpenCV开发环境搭建：Ubuntu、Zynq）

    操作系统:Ubuntu14.04.5 LTS 64bit OpenCV:OpenCV 3.1.0.opencv_contrib gcc:gcc version 4.8.4 (Ubuntu 4.8.4- ...

  5. （动态规划）UVA-11400：Lighting System Design

    You are given the task to design a lighting system for a huge conference hall. After doing a lot of ...

  6. Codeforces Round #388 (Div. 2) D

    There are n people taking part in auction today. The rules of auction are classical. There were n bi ...

  7. Crusher Django 学习笔记2 基本url配置

    http://crusher-milling.blogspot.com/2013/09/crusher-django-tutorial2-conf-basic-url.html 顺便学习一下FQ Cr ...

  8. hdu2475Box(splay树形转线性）

    链接 推荐一篇帖子 http://blog.csdn.net/lyhypacm/article/details/6734748 这题暴力不可行主要是因为这颗树可能极度不平衡,不能用并查集是不能路径压缩 ...

  9. TI德州芯片TLV系列和TPS系列芯片区别（转）

    TLV和TPS一般会有pin to pin的对应型号: 一般来讲,TPS精度.准确度和性能会好一些,所以价钱要贵一些: 对应TLV就是一样可以实现上述功能,但是精度和性能等级是稍微低一点的: 具体选择 ...

  10. 【转】java的动态代理机制详解

    java的动态代理机制详解   在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们 ...