A_111_css定位
2021-04-09 10:50:39 0 举报AI智能生成
全面、高效的知识图谱：A_111_css定位!! 全面又深度的提升认知，达到实际应用的目的! 建议先纵观全局，掌握好大方向。 再根据自己的需要，针对性的学习某一个点，最后做到逐步由点及面。
作者其他创作
大纲/内容
设计
流动布局
定义
"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
浮动float
float: left; width: 33%; height: 50px;
分支主题
display: grid
CSS Grid布局：网格的流动 - 推酷
超链接
display: flex
flex换行
flex-wrap: wrap;
响应式布局
自适应布局
参考
响应式和自适应的区别 - Welcom to liuxuewei's zone - 开源中国社区
注意事项
尺寸相关的盒子模型，普通流、浮动、绝对定位这三种定位机制
布局类型
是否存在高度
css定位
CSS 参考手册 | 菜鸟教程
display
none\t此元素不会被显示。
block\t此元素将显示为块级元素，此元素前后会带有换行符。
inline\t默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block\t行内块元素。（CSS2.1 新增的值）
list-item\t此元素会作为列表显示。
run-in\t此元素会根据上下文作为块级元素或内联元素显示。
compact\tCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker\tCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table\t此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table\t此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group\t此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group\t此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group\t此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row\t此元素会作为一个表格行显示（类似 <tr>）。
table-column-group\t此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column\t此元素会作为一个单元格列显示（类似 <col>）
table-cell\t此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption\t此元素会作为一个表格标题显示（类似 <caption>）
inherit\t规定应该从父元素继承 display 属性的值。
position
absolute\t
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed\t
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative\t
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
initial
还原到被改变前的值
inherit\t规定应该从父元素继承 position 属性的值。
CSS3参考手册 | css88
none
隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline
指定对象为内联元素。
block
指定对象为块元素。
list-item
指定对象为列表项目。
inline-block
指定对象为内联块元素。（CSS2）
table
指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table
指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption
指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell
指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row
指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group
指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column
指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group
指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group
指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group
指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in
根据上下文决定对象是内联对象还是块级对象。（CSS3）
box
将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox
将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox
将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex
将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex
将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
static
对象遵循常规流。此时4个定位偏移属性不会被应用。
relative
对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute
对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed
与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
center
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
sticky
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
手段
行内，行内块级
text-align:center;
块级block/inline-block
margin: auto;
vertical-align: middle;
弹性盒子flex/老弹性盒子box
row > col |col-33
flex-direction: column; /* 决定主轴的方向（即项目的排列方向） */
justify-content: center; /* -水平居中*/
align-items: center; /* -垂直居中*/
父级设置
margin: auto; /* -垂直居中*/
子级设置
好文章
CSS3弹性盒模型flexbox完整版教程-前端开发博客
new flex syntax(新的flex语法) CSS3弹性盒子模型演示-前端开发博客
使用 CSS 弹性盒 - CSS | MDN
CSS flex 属性
CSS flex 属性 | 菜鸟教程
Flex 布局教程：语法篇 - 阮一峰的网络日志
position: fixed; 与 display:flex 区别?
position: fixed;
固定:出现滚动条时，对象不会随着滚动
display:flex
弹性伸缩盒显示
display: flex; 与 css flex: 属性 区别?
display: flex; 是父级容器显示方式
flex:1 或 flex-* 是子集元素的位置设计
表格table
垂直居中
场景
已知高度
.parent { display: table; width: 200px; height: 400px;}.child { display: table-cell; vertical-align: middle;}
Grid布局
动画transform
不确定高度
解决方案
居中
CSS居中完整版 - 推酷
CSS居中完全指南 - 推酷
如何只用CSS做到完全居中 - 文章 - 伯乐在线
0 条评论
下一页
