在前面,我们学习了标准文档流,但在实际制作的过程中,用标准文档流书写显然是不现实的,因此,我们来了解几种脱离标准文档流的方法:

1.float 浮动

float:left/right;(左浮/右浮)

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

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

行级加float

A.只要加了float,这个元素就会脱离标准文档流;行级元素加了float,脱离了标准文档流,会变得块不像块,行不像行,能设置快高,能并排排列,则

也不用给行级标签加display了,没有意义。(行级块也是块不像块,行不像行)

B.浮动的元素会贴靠在一起

C.浮动的元素会文字环绕

浮动带来的坏处

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

清除浮动

  1. 给浮动的父元素添加高度
  2. 给父级添加overflow:hidden;
  3. 给浮动元素的后面添加一个空的div 添加样式为clear:both

   

  4.给浮动元素的父级添加一个类叫clearfix

  这个类写的样式属性有

  

(伪类选择器:只要选择器后面带:的都可以说是伪类选择器

  超链接<a></a>的四种状态

  a:link{} 正常的状态

  a:visited{} 访问过后的状态

  a:hover{} 鼠标悬浮的状态

  a:active{} 激活,鼠标点击时的那一刻的状态

  a的四种状态的顺序不能变

  

  伪元素和伪类选择器的区别:

  伪元素有两个冒号,如p::after{}

  伪类选择器有一个冒号,如p:hover{}

最新文章

  1. 深入分析MVC中通过IOC实现Controller依赖注入的原理
  2. 《oracle每天一练》Oracle冷备份与数据恢复
  3. asp.net 文件批量移动重命名
  4. timestamp的两个属性:CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP
  5. UVA 1291 十四 Dance Dance Revolution
  6. 为移动Web应用创建快速响应按钮
  7. css的存在形式以及优先级
  8. shell的数组操作
  9. javascript中关于数组的迭代方法
  10. extjs在form表单提交成功、故障响应信息
  11. t_sql语句得到表中所有信息
  12. Spring 实例化bean的三种方式:
  13. Mysql主从复制_模式之日志点复制
  14. Postman代码测试工具如何用?
  15. iftop流量监控工具
  16. ideaJ+maven+javaweb实践: sevlet实现upload&amp;download,javaIO代码
  17. 《Redis 数据操作》
  18. ElasticSearch:Lucene和ElasticSearch
  19. hdu 1016 Prime Ring Problem (dfs)
  20. Android动态加入控件约束位置

热门文章

  1. c# 使用MS SqlServer,连接成功,但是还报异常A connection was successfully established with the server, but then an error occurred during the login process. (provider: SSL Provider, error: 0。。。。
  2. 解决ConfigParser配置option的大小写问题
  3. Unity之fragment shader中如何获得视口空间中的坐标
  4. OWASP top 10
  5. 20165305 苏振龙《Java程序设计》第三周学习总结
  6. MQ的使用场景
  7. python locust 性能测试:locust安装和一些参数介绍
  8. 微信小程序制作家庭记账本之二
  9. Linux基础命令---apwatch
  10. Linux基础命令---间歇执行命令watch