1、定位
1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为 文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列
<body>
<div id="d1">Hello</div>
<div id="d2">World</div>
<span>Hello</span>
<span>World</span>
</body>
4、浮动定位
1、什么是浮动定位
如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示
2、属性
属性：float
取值：
1、none
默认值，无浮动定位
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。
6、清除浮动影响
属性：clear
取值：
1、none
默认值，不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0
解决方案：
1、直接设置父元素高度
弊端：必须要知道父元素高度是多少
2、设置父元素也浮动
弊端：对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值：hidden 或 auto
弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both
2、显示
1、显示方式
1、what
每个元素都有自己的显示方式，显示方式决定了元素的显示特点
2、属性
属性：display
取值：
1、none
不显示元素--隐藏
特点：脱离文档流--不占据页面空间
2、block
像块级元素一样显示元素
场合：将行内元素变为块级元素
3、inline
像行内元素一样显示元素
注意：不要块级元素(div/p..)改变成行内元素
4、inline-block
像行内块元素一样显示元素
行内块：多个元素会在一行内显示，但是允许修改尺寸
场合：将行内元素改变为行内块，以便修改尺寸
2、显示效果
1、元素可见性
属性：visibility
取值：
1、visible
默认值，元素可见
2、hidden
元素不可见,但依然占据页面空间
3、collapse
用在表格元素上，删除一行或一列时不影响整体表格布局
面试：dispaly:none 与 visibility:hidden之间的区别
display:none;脱离文档流,所以不占空间
visibility:hidden;没有脱离文档流，所以元素隐藏，空间保留
2、透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐
属性：vertical-align
作用：
1、设置td中的内容垂直对齐方式
2、设置 img 或 行内块元素周围(左右两边)的文本 的垂直对齐方式
取值：
top/middle/bottom
baseline:默认值，基线对齐
注意：
基线对齐方式，会将图片扩大3px
3、光标
属性：cursor
取值：
1、default
2、pointer
小手
3、crosshair
+
4、text
I
5、wait
等待
6、help
?
3、列表
1、列表项标识
属性：list-style-type
取值：
1、none : 无标记
2、disc
3、circle
4、square
5、... ...
2、列表项图像
属性:list-style-image
取值:url()
3、列表项位置
属性:list-style-position
取值：
outside : 默认值，标识位于列表项区域之外
inside : 标记放在列表项区域之内
4、列表属性
属性：list-style
取值：type url position;
常用方式：list-style:none;
1、定位
1、定位属性
1、定位属性
属性：position
取值：
1、static
默认值，默认定位方式
2、relative
相对定位
3、absolute
绝对定位
4、fixed
固定定位
注意：position取值为 relative，absolute，fixed 的元素被称为 已定位元素
2、偏移属性
作用：移动已定位元素
属性：
top:值;
bottom:值;
left:值;
right:值;
3、堆叠顺序
属性:z-index
取值:无单位数值
2、定位方式-相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
元素移动位置后，原来所占据的空间依然会保留
2、使用场合
位置微调
3、语法：
属性：
position:relative;
配合着 偏移属性 实现位置的移动
3、定位方式-绝对定位
1、绝对定位的特征
1、元素会脱离文档流
2、相对于 最近的 已定位的祖先元素 来实现位置的初始化
3、如果元素没有已定位祖先元素，那么它的位置就相对于最初的包含块(body,html)
2、语法
属性：
position:absolute;
配合着 偏移属性 实现位置的初始化或移动
3、绝对定位使用场合
弹出菜单
4、注意
1、绝对定位的元素会变成块级
2、绝对定位的元素可以使用 margin来改变位置，但是 margin:auto 会失效
4、堆叠顺序
1、作用
处理 已定位元素的 堆叠效果
2、默认堆叠效果
1、平级元素-后来者居上
2、子元素压在父元素之上-子压父
3、属性
z-index
取值：数值越大越靠上
4、注意
1、取值可以为负
取值为负时，当前元素会位于页面正常显示内容之下
2、z-index 是无法改变父子关系的堆叠顺序
5、固定定位
1、什么是固定定位
将元素固定在网页的某个位置处
不会随着滚动条而发生位置的变化
2、语法
position:fixed;
配合 片以属性 改变元素位置
3、注意固定定位永远都是相对于浏览器窗口进行位置初始化的。
5、背景透明化
Background: rgba(0,0,0,0.5);
Opacity: 0.5; 让盒子半透明 里面的内容也半透明
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
