博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS中浮动的使用
阅读量:6380 次
发布时间:2019-06-23

本文共 785 字,大约阅读时间需要 2 分钟。

CSS有两个性质

第一个是 :继承性

第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁

{ 里面分两种情况: 分别是 选中和没选中

1.选不中的情况下,走继承性,(font,color,text都可以继承)继承性的权重为0

 有多个父级都设置了这样的样式,走就近原则

2.选中了的情况下:得考虑三种情况

 (a:权重问题,权重大,就选谁的样式; b:权重相同,谁在后选择谁; c:纯标签和类(class)没有可比性的,纯类(class)也没法和id进行比较

                                                                                                                                     }

 

标准文档流

  浏览器的排版是根据元素的特征(块级和行级),从上往下,从左往右排版。这就是标准文档流。

  其中有一个效果为 浮动:float:left/right;

  效果:元素都加浮动,后面的元素会紧跟这前面的元素并排排列。

 

只要加了float,这个元素就会脱离标准文档流

第一个加float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位。而第一个依然存在,所以就会叠加。

行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,能并排排列。

display就没有任何意义了

浮动的元素会紧紧贴靠在一起

浮动的元素会文字环绕

(文字环绕)

拓展:使元素脱离标准流的方法

1. 浮动float    2 .绝对定位 position:absolute  3.固定定位 position:fixed;   (fixed 固定的意思)

浮动带来的坏处

1,给元素加了浮动,撑不起父级的高度了

清除浮动

1. 给浮动的父元素添加高度

2. 给父级添加 overflow:hidden

3. 给浮动元素的后面添加一个空的div,添加样式为clear:both

 

转载于:https://www.cnblogs.com/blankOne/p/9657127.html

你可能感兴趣的文章
RHEL6入门系列之十五,管理用户和组
查看>>
特斯拉悄悄搞出无人车AI芯片,已经投产测试,而且没带英伟达
查看>>
LVS、Nginx和HAProxy负载均衡器对比总结
查看>>
Samsung_tiny4412(驱动笔记01)----linux 3.5,U-Boot,Busybox,SD卡启动环境搭建
查看>>
爬虫攻略(一)
查看>>
正则表达式语法
查看>>
零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗?
查看>>
Elasticsearch上手——几个基本概念
查看>>
WebView.简单使用_资料
查看>>
CAN协议栈总体架构
查看>>
python下正则表达式的随笔记录
查看>>
Wp8程序加载运行顺序(菜鸟篇)
查看>>
Socket,SocketImpl与SocketImplFactory的关系
查看>>
【微信开发】—7200s限制,非数据库
查看>>
学习过程中的图形学知识补充用文档
查看>>
C#高级编程阅读笔记一(关于值类型和引用类型)
查看>>
Java内部类学习笔记
查看>>
双机热备份
查看>>
Clean Code – Chapter 3: Functions
查看>>
POJ NOI0113-03 八进制小数(PKU2765)
查看>>