【CSS】表格、定位_普通流定位与浮动定位、其他css常用属性_05
目录
十.定位（重点**************************）
🆙【前文回顾】👉 css3渐变、文本格式化_04
一.CSS3概述
二.CSS的语法规范
三.基础选择器
四.尺寸和边框
五.盒子模型
六.背景设置
七.渐变知识
八.文本格式化
九.表格
1.表格的常用属性
table 尺寸，文本，背景，边框，内外边距都有效
注意，边框仅仅是table最外围的边框
td/th 尺寸，文本，背景，边框，内边距都有效 ——外边距无效
注意：td/th 外边距设置无效
2.table的特有属性
(1) 垂直对齐
设置内部内容的垂直对齐方式
vertical-align: top/middle/bottom;
只有table中，使用vertical-align设置内容的垂直对齐方式。
其它元素失效，其它元素用line-height ——且行高只能定义居中
(2) 边框合并
border-collapse: separate; 默认值，边框分离状态
collapse 边框合并
(3) 边框间距
边框必须是分离状态 border-collapse: separate;
注意：如果是合并的话，边框间距属性会失效
border-spacing:v1; 水平和垂直间距同时设置
v1 v2 水平和垂直间距分别设置
(4) 设置表格的显示规则
table-layout: auto; 默认值，表格自动布局
列的尺寸有内容和设置尺寸，谁大以谁为准
fixed 表格固定布局，设置的尺寸是多少，表格就是多少 内容比较大，内容会溢出
| 表格自动布局 | 表格固定布局 |
| 单元格大小，会自动根据内容和设置的尺寸进行调整 | 单元格大小，永远以设置的尺寸为准 |
| 表格内容较多时，加载速度慢，效率低 | 不管内容多少，加载速度都很快 |
| 自动布局比较灵活 | 固定布局不够灵活 |
| 适用于不确定每列大小，并且不复杂的表格 | 适用于确定每列大小的表格 |
十.定位（重点**************************）
定位：设置元素在页面上的位置
分类：
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都可以实现这一功能。
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”放在一行展示一下就一眼可以看出了：
5.光标的设置
光标的样式，要根据操作的系统不同，而使用系统光标
cursor: default; 默认值，小箭头
pointer; 小手
wait; 加载等待 ——通常是一只表或沙漏
help; 帮助 ——此光标指示可用的帮助，通常是一个问号或一个气球
text; 输入文本时提示给用户的字母I
crosshair; 截图光标，十字
6.关于列表的属性
① 列表标识项的类型
list-style-type:disc
circle
square
none
② 使用图片做列表标识
list-style-image: url()
③ 列表标识的位置
list-style-position: outside(默认值，li外部)/inside(li内部)；
④ 简写方案 list-style:none
🆕【后文传送门】👉 定位—相对定位，绝对定位，固定定位_06
相关文章
- Django模板引擎中变量作为属性值调用
- declare-styleable：自定义控件的属性[通俗易懂]
- ArcGIS二次开发基础教程(04)：有关字段的操作和简单属性及空间查询
- 电脑桌面图标点击打不开怎么办_双击桌面图标打开的是属性
- 微信小程序事件对象currentTarget和target属性的区别
- 【约束布局】ConstraintLayout 13 种相对定位属性组合 ( 属性组合 | 用法说明 )
- 【Android 高性能音频】Oboe 开发流程 ( 检查 Oboe 音频流属性 | 开始播放 | 停止播放 | 关闭 Oboe 音频流 | 重新配置 Oboe 音频流属性 )
- 【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )
- 属性Oracle的CSS属性：让你的网站更出彩（oracle的css）
- 谷歌浏览器自v75版开始将支持原生的图片视图延迟加载属性
- 构建Oracle视图：添加适当的属性（oracle视图添加）
- 分析10个ASP.NET控件最有用的属性详解
- javascript面向对象之共享成员属性与方法及prototype关键字用法