文档流定位
- block元素独占一行 （width、height、padding、margin）block元素
- inline元素:不独占一行 元素width、height 等不可设置 常见元素<span>、<a>.
- inline-block 元素 不独占一行 同时占有以上两种元素的属性。<img>
- display：转换可以转换成上面的任意三种
<body >
<div id="nav">
<a href="#">导航</a>
浮动定位
- left right none（不浮动）
- 脱离默认的文档流定位，布局混乱，原有位置丢失 作用：图文混排 页面布局（通常情况下 ，我们都认为多列式的结构：一律左浮动）
- clear 清除浮动的给标签带来的布局混乱 both（清除2两边的浮动）
- class 选择器(常见的清除浮动使用方式)重要知识点
.clears
{
clear:0;
height:0;
overflow:
hidden;（隐藏超出的部分）
}
层定位
对于每一个层次能够准确定位 （类似于图像处理软件里面的图层）
position ： static（默认值），没有层定位 遵循正常的文档流对象
fixed （固定地位），相对于浏览器窗口固定定位 不会随浏览器窗口的滚动条滚动而变 .fix-box{ width：12px;....
position:fixed;(固定定位） }
relative :（相对定位），相对于其直接父元素进行定位 会随着浏览器窗口滚动条滚动
.fix-box{position:relative}
absolute（绝对定位），相对于最近的已定位父元素定位 脱离正常的文档流，原位置不在存在 不会跟着浏览器的滚动而滚动
父元素用relative，子元素用absolute（做例题）
设置元素的堆叠顺序 （数值远大，层级越往上）
z-index 属性
flex布局 （弹性布局）
display :flex(inline-flex) 简单方便快捷
flex container 容器
flex-item 子元素
main axis 水平的主轴
cross axis 垂直的交叉轴
main size - item占据的空间
扫一扫
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
