【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05

表格自动布局	表格固定布局
单元格大小，会自动根据内容和设置的尺寸进行调整	单元格大小，永远以设置的尺寸为准
表格内容较多时，加载速度慢，效率低	不管内容多少，加载速度都很快
自动布局比较灵活	固定布局不够灵活
适用于不确定每列大小，并且不复杂的表格	适用于确定每列大小的表格

十.定位（重点**************************）

定位：设置元素在页面上的位置

分类：
1. 普通流定位
2. 浮动定位
3. 相对定位
4. 绝对定位
5. 固定定位

1. 普通流定位

各个元素原始的显示形式，就是普通流定位（默认文档流定位）

2. 浮动定位

👉 浮动定位：让块级元素横向显示的时候，使用浮动定位

👉 浮动原理：

元素一旦浮动 👇

① 脱离文档流 ——不占页面空间，后续元素上前补位

② 在浮动的当前行，向左/右对齐

float:left/right/none(普通流)

浮动特点 👇

(1) 元素一旦浮动，会脱离文档流（脱离文档流会完成4件事）

① 不占页面空间

② 后续元素上前补位

③ 没有设置宽度的元素，脱离文档流之后，宽度靠内容撑开

④ 任何元素脱离文档流之后，都可以设置宽高，都可以设置上下外边距

(2) 浮动后的元素，会停靠在父元素最左边/右边，或者在其它浮动元素的后面排队

(3) 父元素横向放不下所有浮动元素时，最后显示不下的浮动元素会自动换行

(4) 浮动就是为了解决块级元素横向显示的问题

💦 CSS浮动原理：

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行）；如果A元素上一个元素是标准流中的元素即不是浮动元素，也就是遵循标准流，那么A元素的相对垂直位置不会改变，也就是说A元素的顶部总是和上一个元素的底部对齐即A素顶部会紧贴上一个元素底部；

3. 浮动的特殊情况

(1) 浮动元素的占位问题

① 当父元素显示不下所有浮动元素时，显示不下的浮动元素会换行

② 浮动元素会在自己的浮动方向进行占位。

③ 换行的浮动元素要躲开被占位的空间

(2) 没有设置宽度的元素，浮动之后，宽度靠内容撑开

(3) 文本，行内，行内块，永远不会被浮动元素压在下面

(4) 任何元素浮动之后，都可以设置宽高，都可以设置上下外边距

4. 清除浮动带来的影响

浮动元素给后续不浮动元素带来了影响，后续元素会上前补位，会被浮动元素压在下面

清除浮动带来的影响，当前元素不上前补位

clear:left; 清除左浮动带来的影响
right; 清除右浮动带来的影响
both; 左右浮动带来的影响都清除

5.高度坍塌

父元素不写高度，内部所有子元素都浮动，父元素在文档流中找不到高度，所以高度缺失了

总结：父元素高度塌陷成因——子元素浮动，父元素没有设置高，子元素不能把父元素的高给撑开，导致父元素没有高度，这种现象叫父元素高度塌陷。

解决方案：1. 父元素添加高度，项目中经常用
适用于准确得到内部子元素高度的时候

比如：目前只有一行，如果之后放置多行，还得回来改父元素高度，很麻烦

2. 给父元素设置浮动，绝对不能用的方案
会影响元素的兄弟元素，和父元素的父元素，可能破坏原有的页面布局

3. 给父元素设置overflow:hidden/auto
父元素如果想溢出显示，就办不到了

只要溢出的内容一律都会被隐藏，可能会隐藏不想被隐藏的部分

4. 给父元素添加一个小儿子，这个小儿子是空的div，并且设置clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML与CSS简单页面效果实例</title>
</head>
<body>
    <div style="width:300px;background:#ccc;">
      <div style="width:100px;height:100px;float:left;background:Green;"></div>
      <div style="width:100px;height:100px;float:right;background:Red;"></div>
      <div style="clear: both;"></div>
    </div>
</body>
</html>

💦 关于解决方案4

这个div和浮动元素同一级别，且位于浮动元素的最后。这种方法要改动两个地方，一个是html代码，另一个是必须要为这个div添加一个clear属性：<div style="clear:both"></div>。这种方法虽然也能解决高度问题，但是却引入了一个多余的标签div，它这里并不具有实际意义，它的作用只是撑开div标签而已。因此，最好的方法还是利用伪元素:after

🕐 关于解决方案4的原理 👇 ——在父元素中浮动元素最后添加一个空标签

◾ 原理：添加一个空标签，利用CSS的clear:both清除浮动（在父元素的最后一个子元素后边再增加一个非浮动的空的子元素，然后将这个子元素加个clear），让父元素可以自动获取到高度。

◾ 优点：简单，代码少，兼容所有浏览器

◾ 缺点：增加页面的标签，造成结构的混乱

◾ 建议：不推荐使用，此方法已经过时，推荐利用伪元素:after

对第4种方法的原理剖析：是因为父元素一定会包围着他所有遵循标准流的子元素（也就是你在最后新加的那个非浮动子元素），而这个子元素的顶部会紧贴在你的父div底部，所以父元素会因此撑开高度。（此时，父div 终于有高度了——为子div的最大高度100px。由于空div高度为0，所以父div最大高度是100px）

扩展：说说overflow:hidden，可用于清除浮动用法的含义？

overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。一提到清除浮动，我们就会想到另外一个CSS样式：clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。

这是一个常用的div写法，下面我们来书写样式。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 500px;
        background: #000;
        height: 500px;
        overflow:hidden;
      }
      #content {
        float: left;
        width: 600px;
        height: 600px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box"> 
      <div id="content"></div>
    </div>
  </body>
</html>
给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出，给box加上这个属性后，我们的content 的宽高自动的被隐藏掉了。另外，我们再做一个试验，将box这个div的高度值删除后，我们发现，box的高度自动的被content 这个div的高度值给撑开了。

说到这里，我们再来理解一下“浮动”这个词的含义。

我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！也就是说，当content 这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了box这个div，也就是说，此时的content 的宽高是多少，对于已经脱离了的box来说，都是不起作用的。

打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的（有点少儿不宜的感觉-_-|||） OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给box这个div加上overflow:hidden这个属性的时候，其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比JJ又进入了BB内，JJ的大小自然又会影响到BB的大小。这就是overflow:hidden这个属性清除浮动的准确含义。

当我们没有给box这个div设置高度的时候，content 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给box这个div加上一个高度值，那么无论content 这个div的高度是多少，box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！总之，hidden的同时会清除浮动，使用这个属性后，就可以使外边的div层适应内部元素的高度了！

火狐里面解释的就是这个意思（float的属性就是立体漂浮，IE7和火狐也都是这个意思，IE6是不管外面的层的属性，content 会直接撑开box的），所以才在 height的auto属性中加入！important这个值！让他在IE7中优先执行这个命令儿忽略overflow：hidden;这个命令！

十一.css中常用的其它属性

1.显示方式

定义元素在页面中以什么方式显示（行内，行内块，块级，表格）
display:inline; 行内元素
block 块级
inline-block 行内块
table
none 脱离文档流的隐藏

💦 display:inline 跟 display:block 跟 display:inline-block之间的区别

display:inline; 内联元素，简单来说就是在同一行显示。
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
display:inline-block; 就是在同一行内的块级元素。

示例如下：

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>

A默认就是一行，所以inline用在这里是废的。宽高度设置也是费的。

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>

块状，这里高宽度就生效了，但是因为是块状，前后有换行符，所以这是两行了。

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>

这样就是同时达到块状，而且在同一行显示。

补：关于display的特性

① 块级元素与行级元素的转变；② 控制块级元素在同一行显示；③ 控制元素的显示和隐藏；

值

说明

block

块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline

内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block

行内块元素，元素既具有内联元素的特性，也具有块元素的特性

none

设置元素不会被显示

👉 display可以让元素排在一行（比如对div标签设置div{ display:inline}样式），并且支持宽度和高度代码实现起来方便；位置方向不可控，会解析空格；IE6.IE7上不支持；

👉 float可以让元素排在一行并制作宽度和高度，可以决定排列方向；
float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

👉 float属性控制html组件是否浮动与如何浮动，当通过该属性设置某个对象浮动后，该对象将被当成块组件处理。它有left和right两个值，分别指定对象向右向左浮动。而display属性用于规定元素应该生成的框的类型。

通过上述介绍可以看出，其实float和display原本是毫不相关的两个属性。在这里之所以要说float和display的区别，是由于在实现多栏布局和菜单栏导航时float和display出现了微妙的联系——设置float：left或display：inline-block都可以实现这一功能。

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

2.显示效果

visibility: visible;默认值，显示
hidden; 隐藏，不脱离文档流

visibility: hidden; 与display:none;的区别

① visibility: hidden;看不见但是占位置

② display:none;看不见也不占位置

3.opacity 透明度

transparent<------>rgba(0,0,0,0);

opacity:0~1。 0全透明，1是不透明

opacity和rgba的区别

① rgba是让当前颜色透明

② opacity会让元素内部所有与颜色相关的属性全都透明（包括后代元素，和图片）

4.关于vertical-align

只在3中情况下可以使用

① 在table中使用

vertical-align:top/middle/bottom

👉 让内部的文本垂直居中

② 给行内块设置

vertical-align:top/middle（默认值）/bottom

👉 控制当前行内元素，之前/后，文本，行内，行内块与本元素的垂直对齐方式

注意：虽然是给自己设置的样式属性，影响的却不是自己，而是控制的其前或后的元素

③ 给img设置

vertical-align:top/middle/bottom/baseline(基线，默认值)

👉 控制当前img，之前/后，文本，行内，行内块与本img的垂直对齐方式

通常项目中，会把img的vertical-align设置为非基线

补：vertical-align

vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。

要了解vertical-align属性，必须懂得基线，怎么理解基线呢？

1、我们写网页是在一个矩形的显示屏上，经常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的基线对齐。

2、各种字体、图片、行内html元素等可展示的内容都有各自的基线，要想知道具体内容的基线我们可以找一个简单的参照物：小写字母“x”，为什么找它呢？因为英文字母的基线恰好就是小写"x"的最下方，比较容易看出。

知道了以上两点我们就可以很容易知道其他内容元素的基线位置了，把其他元素和小写“x”放在一行展示一下就一眼可以看出了：