本文详细探讨了H5中的定位技术，包括static、relative、absolute、fixed及其应用场景。重点讲解了如何实现列表消息盒子的点击切换效果，以及滑动隐藏面板的原理，利用label与input配合实现内容的显示与隐藏。此外，还提到了弹性盒子模型在解决布局问题上的优势和使用方法，以及CSS布局中的居中、媒体查询、清除浮动等技巧。
一、Position
.positioned{
position:absolute;
background:yellow;
top:30px;
left:30px;
z-index:1;
}p:nth-of-type(2) {
position: absolute;
background: lime;
top: 10px;
right: 30px;
}块元素垂直分布，位于新的行
内联元素 相互相邻，位于同一行。父元素宽度不够，则换行
外边距折叠：两个块元素，外边距以大的为标准
1）静态定位 static 是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置
2）相对定位relative 10是P标签设置的margin 大小。可以相对于原有的标签移动
3） 绝对定位absolute 自己相对于最近的祖先元素。若祖先没有position 定位（position 非 static），则相对于Body 定位。10是P标签设置的margin 大小 主要用于独立的弹出框和控制菜单
设
top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0;
发现完全副高整个页面。
定位上下文
body 设relative Positioned 设absolute。之前一直以为20是body的，其实不是。那么这里的relative就是相对于body上左各40.
4） fixed 相对视窗定位，不随滚动而滚动
z-index 黄色是先定位的，绿色是后定位的，故绿色在上。默认元素的z-index都为0。 使用2和3将产生与300和40000相同的效果，只要比之前的元素高，都一样。
固定定位：相对于浏览器视口本身，而absolute可以相对于最近的祖先或者<html>页面 可用于创建持久导航菜单。如果对h 设置fixed，那么下面的内容不会管他，直接按照父元素的位置确定。造成下面的信息被 h 挡住。这时要设置下面内容的margin-top
lime 青绿色
block :
address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）inline
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线inline-block : 设置改属性后，内联元素在一行排列，且可以设置宽高和margin
列表消息盒子
点击Tab 1时，出现1 的内容；点击Tab 2 时，出现 2 的内容
1、三个Tab 是三个ul 下面的 li ，初始时设定其中一个的class为active
2、内容全部封装为一个panels，下属三个article，默认第一个class为 active-panel
CSS 设置
对section、ul 、li、a 都设置。a 设置 focus 和 hover 。（伪类设置顺序：LVFHA）
这里的active 设置成类 a.active。父panels相对清除之前的浮动，子article 绝对
JS设置
class获取最大的类名 找到所有的标签 var tabs=document.querySelectorAll(' .info-box li a ') 赋予一个变量tabs 。遍历tabs。若有一个tab 被onclick 了，触发函数。删除tabs标签下的所有class，为onclick了的tab 赋予class=active。同样先删除article的class，再赋值。对active-panel的z-index为1。
滑动隐藏面板
主要用到label标签。label 的for 可以制动某一id 。这里指定到一个input 的Id。Input Position=absolute。label Position=absolute。若Input无内容，则可以用label中的内容，并把 input 隐藏使用户不可见。注意 transition 可以平滑过渡
可以对要显示的内容设置css，position=fix
关键：
input[type=checkbox]:checked + aside {
right: 0px;
}
点击label标签后可以使aside隐藏或出现。看是否checked
弹性盒子解决的问题
1、在父内容里面垂直居中一个块内容。
2、使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
3、使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
弹性盒子概念
flex 容器的宽，即为main axis ，axis 两个属性 main start 和 main end ；容器的高 即为cross axis ，axis 两个属性 cross start 和 cross end 。子元素这里称为项，容器设了 display:flex 以后，子元素的float clear vertical-align 都失效。因为自动会给项设定了浮动，并且项的高度相同。
flex-direction: 设置主轴的方向。可选 row 、row-reverse、column、column-reverse。默认row横向。如果原来的就是块状元素，设置了flex ，间距会变大。
flex-wrap: nowrap | wrap | wrap-reverse; nowrap(默认)不换行、wrap换行（第一行在上方）和wrap-reverse（一行内还是按序，行间逆序）
flex-flow ：以上两者的合并
justify-content ：前三者没有项间隔
flex-start：在主轴上由左或者上开始排列（默认值）
flex-end：在主轴上由右或者下开始排列
center：在主轴上居中排列
space-between：在主轴上左右两端或者上下两端开始排列。两端不会留任何空间
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。两端有空间
align-items ：默认stretch 属性。在flex-direction:row上效果明显。
align-content ：
参见 https://www.cnblogs.com/xuyuntao/articles/6391728.html
align-self auto | flex-start | flex-end | center | baseline | stretch;
order ：值越大，位置越靠后。默认为0 值相同时，按顺序从左到右排列
在父容器中，设置 display:flex 。则容器指定为伸缩容器
display: flex;
display:-webkit-flex;
-webkit- 是为兼顾旧版的浏览器，两个一起写最好
-webkit-flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto
none：在任何情况下都不会发生伸缩
flex-grow：子项分配父项剩余空间的比，默认为0
flex-shrink：收缩比率
flex-basis：伸缩基准值
initial ：在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩
auto：会根据主轴自动伸缩以占用所有剩余空间，非常类似于普通流中的自动外边距若为数值，则设为数值的项，按比列分配剩余空间
flex: flex-growflex-shrinkflex-basis|auto|initial|inherit;
flex ： 0 0 auto 第一个值flex-grow
四、CSS布局
1、内容居中
#main{ #main{
width:600px; max-width:600px;
margin:0 auto; margin:0 auto;
} }后者在浏览器宽度不够时，更有优势
设定固定的盒子宽度
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}当前清除浮动，是清除其他浮动对当前框的影响，当前框位于浮动元素之下。
2、媒体查询
效果 ： 对不同网站和浏览器有不同的效果（针对Ipad、Iphone、安卓机和电脑端显示器分辨率的不同，可以自适应改变大小。）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> width: 控制显示的宽度，不写则默认设备宽度
initial-scale：初始缩放值
maximum-scale：最大缩放值
user-scalable：是否允许用户缩放
3、清除浮动
除了可以用 clear 清除浮动，还可以将 div 设置为inline-block 。可以达到相同的效果。
浮动：元素脱离文档流---》跳出父元素
缩小元素之间的空格
包裹在文字周围，避免100%宽度
推荐使用的清楚浮动方式
4、BFC 自适应
.float-left {
float: left;
width:128px;
height: 96px;
margin-right: 20px;
-webkit-animation: size 1s infinite alternate;
animation: size 2s infinite alternate; // 图片的动态效果
}.follow-content {
overflow: hidden;
background-color: #beceeb;
}
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
