css的小知识3
1.补充
margin的margin:0 auto;会解决元素的居中,前提是给这个元素设置width
2.css的层叠问题
css有两个性质
1.继承性
2.层叠性 选择器的一种选择能力,谁的权重大就选谁
A,选不中,走继承性,(font color text)继承性的权重是0
a)有多个父级都设置了就这样 走就近原则
B,选中了
a)权重的问题,权重大,就选谁的样式
b)权重相同,谁在后选择谁
c)纯标签和类没有可比性,纯类和id也没有可比性。
3,标准文档流
浏览器的排版是根据元素的特征(快和行级),从上往下,从左往右排版。这就是标准文档流。
浮动 folat:left/right;
效果:元素都加浮动,后面的元素会紧跟这前面的元素并排列。
A,只要加了float,这个元素就会脱离标准文档流。
第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就把他排在第一位。而第一个仍然存在,所以就会叠加。
行级加float
行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。
Display就没有任何意思了。
B,浮动的元素会紧紧贴靠在一起
C,浮动的元素会文字环绕
拓展 使元素脱离标准流的方法
1. 浮动float
2. 绝对定位position:absolute;
3. 固定定位positions:fixed; fixed固定的
浮动带来的坏处
1,给元素加了浮动,撑不起父级的高度了
清除浮动的方法
1.给浮动的fu元素添加高度
2.给父级添加overflow:hiden;
3.给浮动元素的后面添加一个空的 div 添加样式为clear:both
4.给浮动元素的父级添加一个叫clearfix
这个类写的样式属性有
伪类选择器
只要选择器后面带;都可以说他是伪类选择器
a:link{} a:hover{} a:visited{} a:active{} a:after{} abefore{}
a的四种状态的顺序不能变
伪元素 和伪类选择器的区别
伪元素有两个冒号 如p::after{} 伪类选择器有一个冒号p:hover{}
css的小知识3的更多相关文章
- HTML+css零碎小知识
1.设置了float浮动的元素和绝对定位position:absolute的元素会脱离正常的文档流.但是设置absolute的元素不会占据空间,相当于隐形了. 2.相对定位position:rel ...
- css + html 小知识总结
Html+CSS基础之Html 注:本文摘自慕课网http://www.imooc.com HTML+CSS基础课程: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的 ...
- css的小知识4
---恢复内容开始--- 一.单位 1.px就是一个基本单位 像素 2.em也是一个单位 用父级元素的字体大小乘以em前面的数字.如果父级没有就继承上一个父级直到body,如果bod ...
- css的小知识
---恢复内容开始--- 1.当你发现在制作页面时出现滚动条就需要一个去除滚动条的属性 overflow:hidden: overflow-x:hidden:水平超出隐藏 2. ...
- 2018.3.15 css课外小知识
1, 如果手动写动画, 最小的时间间隔是多久 为什么 多数显示器默认频率是60Hz 1s刷新60次 所以理论最小是1/60*1000ms=16.7ms 2. display:inline-bloc ...
- HTML+CSS中的一些小知识
今天分享一些HTML.CSS的小知识,希望能够对大家有所帮助! 1.解决网页乱码的问题:最重要的是要保证各个环节的字符编码一致! (1)编辑器的编辑环境的字符集(默认字符集):Crtl+U 常见的编码 ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- 谈谈CSS中一些比较"偏门"的小知识
前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象:同时也希望有需要的人能有收获! 1.常见的浏览器内核: 以IE为代表 ...
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
随机推荐
- 利用StringEscapeUtils来转义和反转义html/xml/javascript中的特殊字符
我们经常遇到html或者xml在Java程序中被某些库转义成了特殊字符. 例如: 各种逻辑运算符: > >= < <= == 被转义成了 == ...
- PHP 实现自动加载
自动载入主要是省去了一个个类去 include 的繁琐,在 new 时动态的去检查并 include 相应的 class 文件. 先上代码: //index.php <?php class Cl ...
- 使用日志服务进行Kubernetes日志采集
阿里云容器服务Kubernetes集群集成了日志服务(SLS),您可在创建集群时启用日志服务,快速采集Kubernetes 集群的容器日志,包括容器的标准输出以及容器内的文本文件. 新建 Kubern ...
- Install Redis 3.2 on Ubuntu
Install Redis 3.2 on Ubuntu It’s very easy to install Redis 3 on Ubuntu 16, just need to add PPA rep ...
- Swift Struct 结构体
前言 Swift 语言有两种基本的数据类型,即类(class)和结构体(struct),class 这样的概念大家不会陌生,而 struct 也并不是什么新的概念,在 Objective-C 和 C ...
- MySQL优化器 --- index_merge
[背景] 对于关系数据库中的一张表,通常来说数据页面的总大小要比较某一个索引占用的页面要大的多(上面说的索引是不包涵主键索引的); 更进一步我们可以推导出,如果我们通过读索引就能解决问题,那么它相比读 ...
- Paxos 实现日志复制同步(Basic Paxos)
Paxos 实现日志复制同步 本篇文章以 John Ousterhout(斯坦福大学教授) 和 Diego Ongaro(斯坦福大学获得博士学位,Raft算法发明人) 在 Youtube 上的讲解视频 ...
- Linux常用的基础组件
Linux服务器(新机器) yum install gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf git yum ...
- C#WebService服务在Windows7的部署
(一)C#WebService服务在Windows7的部署 一.在控制面板,程序与卸载中安装IIS组件. 二.IIS无法显示WebService的.asmx文件.解决办法:注:(这里可以不用考虑,直 ...
- 深入理解Java类加载器(ClassLoader)
深入理解Java类加载器(ClassLoader) Java学习记录--委派模型与类加载器 关于Java类加载双亲委派机制的思考(附一道面试题) 真正理解线程上下文类加载器(多案例分析) [jvm解析 ...