关于回顾css发现的一些问题
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发现的一些问题的更多相关文章
- 回顾CSS布局易混淆的概念
一.浮动模型 元素默认是static的,不能浮动,但可以用CSS样式设置为浮动 浮动模型只有两个值 float:left 和 float:right ,可以让块状元素同行显示 二.层模型 top/bo ...
- 看css发现一个pointer-events:none;的东西
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- （转）每位设计师都应该拥有的50个CSS代码片段
原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...
- css 百分比继承关系的探讨
引入:近日在回顾css基础的时候发现了一个有趣的问题,就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算,还是继承父级根据百分比计算过后的绝对值.下面举一个简单的例子来描述这一个问题, ...
- 现代CSS进化史
英文:https://medium.com/actualize-...编译:缪斯 CSS一直被web开发者认为是最简单也是最难的一门奇葩语言.它的入门确实非常简单--你只需为元素定义好样式属性和值,看 ...
- Google css & Google fonts
最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...
- chrome刷新CSS
改动CSS发现页面根本没有变化,再三查看确实是这一处CSS,那么可能的就是浏览器缓存了CSS而刷新无效了. chrome刷新CSS: 方法1:直接ctrl+F5,进行强制刷新页面,浏览器会重新加载所有 ...
- Code Review： 超越“审、查、评”的代码回顾
http://news.cnblogs.com/n/532148/ 文/TWInsights-伍斌 Code Review 应该是软件开发团队“共同学习.识别模式和每日持续”的过程,而不是带有“审.查 ...
- css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
随机推荐
- lightoj 1085【离散化+树状数组】
题意: 求所有的上升子序列种数: 思路: 我想先离散化一下,然后用树状数组维护一下. 最终答案就是sum(n) ? 卧槽,好像是:然后就过了.. #include <bits/stdc++.h& ...
- spark sql 对接 HDFS
上一篇博客我向大家介绍了如何快速地搭建spark run on standalone,下面我将介绍saprk sql 如何对接 hdfs 我们知道,在spark shell 中操作hdfs 上的数据是 ...
- TensorFlow数据集（一）——数据集的基本使用方法
参考书 <TensorFlow:实战Google深度学习框架>(第2版) 例子:从一个张量创建一个数据集,遍历这个数据集,并对每个输入输出y = x^2 的值. #!/usr/bin/en ...
- Mysql 到 Hbase 数据如何实时同步，强大的 Streamsets 告诉你
很多情况大数据集群需要获取业务数据,用于分析.通常有两种方式: 业务直接或间接写入的方式 业务的关系型数据库同步到大数据集群的方式 第一种可以是在业务中编写代码,将觉得需要发送的数据发送到消息队列,最 ...
- NPOI用WorkbookFactory读写 2007以上格式文件(xlsx)
//我用的最新的2.2.1版本 //第一步:引用DLL,5个全导入,包括ICSHARP.ZIP,是个开源压缩工具包.XLSX是压缩格式,需要它来解压 //第二部: using NPOI.SS.User ...
- go系列（3）- go框架beego以及redis的使用
这篇讲讲如何在beego框架使用redis. golang中比较好用的第三方开源redisclient有: go-redis 源码地址:https://github.com/go-redis/redi ...
- .Net Core应用框架Util介绍（二） 转
Util的开源地址 https://github.com/dotnetcore/util Util的开源协议 Util以MIT协议开源,这是目前最宽松的开源协议,你不仅可以用于商业项目,还能把Util ...
- MongoDB 删除数据
删除mongodb集合中的数据可以使用remove()函数.remove()函数可以接受一个查询文档作为可选参数来有选择性的删除符合条件的文档.remove()函数不会删除集合本身,同时,原有的索引也 ...
- Django (六) 视图 views
views 1. 视图及HttpRequest 和HttpResponse Django中的视图主要用来接受Web请求,并做出响应. 视图的本质就是一个Python中的函数 视图的响应分为两大类 1) ...
- CF #541div2 F
题目本质:并查集的链式合并 解决方法1: 类似哈夫曼树,叶节点们为真点,其余造一些虚的父节点,使得dfs这棵树的时候,先进行并查合并的点一定是兄弟节点因而紧挨着被输出,巧妙达到了效果. #pragma ...