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

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{}

CSS的再深入3(更新中···)的更多相关文章

  1. CSS的再深入(更新中···)

    在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签 元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特 ...

  2. CSS的初了解(更新中···)

    在前面,我们学习了html的结构.基本骨架.起名方式和选择器,接下来,我们就要学习CSS了. 首先,我们要知道CSS是什么. CSS 全称叫层叠样式表,作用是给html添加样式style,添加属性. ...

  3. less.css基础学习,陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

  4. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  5. CSS效果集锦(持续更新中)

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  6. css:使用笔记(不断更新中...)

    1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高 但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...

  7. CSS的进一步深入(更新中···)

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  8. HTML + CSS (下)【更新中】

    弹性盒子: 定义:弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案. 主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧 ...

  9. CSS相关知识(持续更新中)

    1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...

  10. html2canvas - 项目中遇到的那些坑点汇总(更新中...)

    截图模糊    原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...

随机推荐

  1. Hibernate.基础篇《二》. getOpenSession() 和 getCurrentSession() - 1

    Hibernate.基础篇<二>. getOpenSession() 和 getCurrentSession() - 1 说明: 在Hibernate应用中,Session接口的使用最为广 ...

  2. sql 存储过程命名规范

    规范的命名可以提高开发和维护的效率,如果你正在创建一个新的存储过程,请参考如下的命名规范. 句法: 存储过程的命名有这个的语法:[proc] [MainTableName] By [FieldName ...

  3. Git-分支的建立与合并

    举一个实际工作中可能会遇到的分支建立与合并的例子: 开发某个网站. 为实现某个新的需求,创建一个分支. 在这个分支上开展工作. 假设此时,你突然接到一个电话说有个很严重的问题需要紧急修补,那么可以按照 ...

  4. C语言堆栈的区别

    堆(heap)和栈(stack)有什么区别?? 简单的可以理解为: heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的. astack:是自动分配变量,以及函数调用的时候所使用的 ...

  5. Sitecore CMS中如何命名项目名称

    如何在Sitecore CMS中命名项目,以及配置命名限制,“显示名称”是什么以及如何使用它. 任何其他名称的项目 当创建Sitecore的项目,内容编辑器要求制作者为新建项目提供名称.输入的名称将其 ...

  6. MVC中的Ajax与增删改查(一)

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  7. mybatis源码解析3---XMLConfigBuilder解析

    1.XMLConfigBuilder XMLConfigBuilder类位于Mybatis包的org.apache.ibatis.builder.xml目录下,继承于BaseBuilder类,关于Ba ...

  8. c# 定义委托和使用委托(事件的使用)

    使用委托时要先实例化,和类一样,使用new关键字产生委托的新实例,然后将一个或者多个与委托签名匹配的方法与委托实例关联.随后调用委托时,就会调用所有与委托实例关联的方法. 与委托关联可以是任何类或者结 ...

  9. 高性能NIO框架Netty入门篇

    http://cxytiandi.com/blog/detail/17345 Netty介绍 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具 ...

  10. 使用BenchmarkSQL测试PostgreSQL

    BenchmarkSQL是一款经典的开源数据库测试工具,内嵌了TPCC测试脚本,可以对EnterpriseDB.PostgreSQL.MySQL.Oracle以及SQL Server等数据库直接进行测 ...