inline-block/float(浮动)

回顾:inline-block 特性:
     1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、标签之间的换行间隙被解析(问题)
5、ie6 ie7不支持块属性标签的inline-block(问题)

float浮动:
1、块在一排显示
    2、内联支持宽高
    3、默认内容撑开宽度
     4、脱离文档流
    5、提升层级半层

文本流

float:left | right | none | inherit;

文档流是文档中可显示对象在排列时所占用的位置。

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素
clear:both;  在左右两侧均不允许浮动元素。
清除浮动

1.加高
问题:扩展性不好

2.父级浮动
问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)

3.inline-block 清浮动方法:
    问题:margin左右自动失效;

4.空标签清浮动
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)

5.br清浮动
问题:不符合工作中:结构、样式、行为,三者分离的要求。

6.after伪类 清浮动方法(现在主流方法)
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}

after伪类: 元素内部末尾添加内容;
        :after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
        a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
        b、FF 不支持;

7.overflow:hidden 清浮动方法;
    问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;

overflow:  scroll | auto | hidden;
    overflow:hidden;溢出隐藏(裁刀!)

浮动的兼容性问题

IE6双边距BUG(IE6下块属性标签浮动,并且有横向margin,横向margin加倍。):
    a、IE6
    b、浮动
    c、横向margin
    d、块属性标签(加display:inline;)

IE6下 li部分兼容性问题:

    a、左右两列布局,右边右浮动IE6 IE7下折行;(左边元素浮动)
    b、IE6 IE7  li  下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题;(加vertical-align:top;)

vertival-align / img问题

vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式;
b、垂直对齐方式可以解决元素下方间隙问题;

图片下方间隙问题
    a、display:block; (改变标签本身特性)
    b、overflow:hidden; (必须知道图片高度)
    d、vertical-align (暂时最完美的方案)

闭合浮动

2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。

正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。

也就是内容错进去 

这就是要解决浮动产生的问题

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

 

Tips:

(情况排除相绝定位情况)
第父元素浮元素浮元素内容填充父元素

第二父元素浮元素浮元素内容填充父元素

第三父元素浮元素浮元素内容填充父元素

第父元素浮元素浮元素内容填充父元素
追问
在IE6下为什么父元素不浮动,子元素浮动,子元素内容可以填充父元素,加了CLEAR:BOTH;之后
回答
加了CLEAR:BOTH;肯定可以填充的

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
语法:
clear : none | left | right | both
取值:
none  :  默认值。允许两边都可以有浮动对象
left  :  不允许左边有浮动对象
right  :  不允许右边有浮动对象
both  :  不允许有浮动对象

http://www.w3school.com.cn/css/css_positioning_floating.asp

最基本的,定位浮动都是针对本身,没有继承属性的
然后所有位置都是根据父级来的,定位的两个特殊

边距

 

什么属性可以继承什么属性不能继承

*浮动的时候负值可以改变位置覆盖元素*浮动的时候负值可以改变位置覆盖元素/

------------------------------------------------------------------------------------------------------------

background复合属性

repeat-x

repeat-y
no-repeat 10% 30px;
no-repeat 10% center;
fixed;固定   页面始终固定   不会随着页面拖动而变化

boder:

solid实线
dashed  虚线

dotted点线

boder制作三角形  把宽高去掉就能做出来

padding行不行 内边距会影响盒子大小

可以套两个盒子 然后给 里面盒子margin值就不能撑大盒子了

外边距  上下最大值 左右相加
父级  子级别包含 的时候 margin-top父级 会传递给父级  bug

margin-right:auto
margin-left:auto

隐藏文字-222em

a表情打开方式  target
下载保存

<base target ="_blank">

链接  下载  锚点  连接里面写id名称 起到锚点作用

清除  h标签默认样式
img
属于  inline-block标签

一行内的块

既支持宽高  也支持 一行

 

特点:
换行间隙被解析
空格是字体的一半

ie6不兼容块属性的  inline-block 支持内联元素的

鼠标 

光标类型

cursor

body{height:1500px; cursor:url(hand.cur),pointer;}

面试
额外提示信息

title

js 节点问题  父子级关系

html+css学习笔记 3[浮动]的更多相关文章

  1. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  2. CSS学习笔记:浮动属性

    目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...

  3. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  6. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. div+css学习笔记一(转)

    div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

随机推荐

  1. Server.MapPath()获取绝对路径

    1.    Server.MapPath("/")  应用程序根目录所在的位置 如 C:\Inetpub\wwwroot\ 2.Server.MapPath("./&qu ...

  2. WPF button 如何区分click和doubleclick

    WPF button 同时处理两个事件时候会先触发click事件,触发doubleclick事件  ,那如何区分呢,可以这样设置: private static DispatcherTimer myC ...

  3. WampServer修改Mysql密码的步骤

    1.安装成功后,通过 phpmyadmin 进入mysql,点击上面的 [用户] 菜单,在用户[root]主机[localhost]点击编辑权限,下面有一个选项[修改密码],输入您想要的密码,如:12 ...

  4. GridView自带分页 1总页数 首页 下一页 上一页 尾页 X 页 go 实现方法 .

    在前台GRIDVIEW中添加如下代码 <PagerTemplate> <table> <tr> <td style="text-align: rig ...

  5. c#高级编程第七版 学习笔记 第一章 .NET体系结构

    第一章      .NET体系结构 本章内容: 编译和运行面向.NET的代码 Microsoft中间语言(Microsoft Intermediate Language,MSIL或简称IL)的优点 值 ...

  6. linux命令后台运行[转]

    有两种方式:    1. command & : 后台运行,你关掉终端会停止运行    2. nohup command & : 后台运行,你关掉终端也会继续运行 一. 简介     ...

  7. 15个web前端的美轮美奂的 jQuery 图片特效

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...

  8. Oracle11g使用exp导出空表

    1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参数为FALSE后,无论是 ...

  9. iPhone的全球之旅 读书笔记

          最近在看<一只iPhone的全球之旅>,文章主要从iPhone供应链角度入手,从各个方面来详细剖析了iPhone这一智能手机领头羊的生产过程.       苹果iPhone手机 ...

  10. ARM公布“物联网”嵌入式mbed OS系统软件平台

    继ARM公司发布了为嵌入式微控制器设计的Cortex-M7架构处理器,ARM又公布了专为廉价低功耗“物联网”设计的新版软件及系统平台,以加速物联网设备的发展及部署.该软件为基于ARM现有Cortex- ...