定位布局:
属性:position
取值:
static 默认值 按照文档流布局
relative 相对定位
absolute 绝对定位
fixed 固定定位
只有元素的position属性设置为非默认属性 才算是已经定位的元素
偏移属性:
top right bottom left
用来配合已经定位的元素实现位置移动
取值:px
top:以元素的上边界为基准移动元素
right:以元素的右边界为基准移动元素
bottom:以元素的低边界为基准移动元素
left:以元素的上左界为基准移动元素
定位方式:
相对定位:
属性:position:relative;
元素采用相对定位时会参照它在文档中原本的位置进行偏移
绝对定位:
属性:position:absolute;
特点:
1.绝对定位的元素,会脱离文档流不占位
2.绝对定位元素会参照离他最近的已经定位的祖先元素进行偏移
3.如果没有已经定位的祖先元素 元素会参照body(浏览器窗口左上角)进行偏移
注意:
所有元素只要脱流就可以设置宽高大小
通常使用“父相子绝”的方式页面布局 限制其他元素的布局方式
浮动和绝对定位点都可以实现元素脱流,采用浮动+外边距调整元素的位置
等价于绝对定位+偏移属性 浮动更常见于外围结构标签,做网页整体布局时
使用,绝对定位更常见于内部元素的调整
浮动和相对定位可以共存 设置相对定位只是为了辅助内部子元素+的定位布局
堆叠次序的调整:
已经定位的元素堆叠在一起是的排列顺序
语法:
属性:z-index
取值:整数 数值越大越靠上
注意:
如果我们元素z-index属性值相同,后来者居上
父子元素都设置z-index 永远都是子元素在上
不受影响
z-index属性只能用在已经定位的元素上
固定定位:
可以使元素的位置固定在浏览器窗口的某个位置
不会随网页内容的滚动而滚动
语法:
属性:position
取值:fixed
配合偏移属性实现元素位置的固定
注意:
固定定位的元素永远是参照浏览器的窗口定位的
固定定位的元素都会变成块元素
显示方式:
1.决定元素以何种样式显示在网页中
属性:display
取值:
none
设置元素隐藏 隐藏后不占位
block
设置元素显示 或 将元素转换为块元素
inline
转换为行内元素
inline-block
转换为行内块元素
显示效果:
属性:visibility
取值:
visible
默认值 表示显示
hidden
元素隐藏 仍然在文档中占位
元素透明度:
属性:opacity
设置元素透明度
取值:0~1
0:透明 1:不透明
元素设置opacity属性 所有的内容都会实现透明效果
子元素会继承父元素的透明效果
如果父子元素都设置了opacity 子元素最终的效果是在父元素半透明的基础上
在进行半透明 子元素最终效果=父元素opacity*本身opacity
设置垂直对齐方式:
属性:vertical-align
取值:top middle bottom
可以用在行内元素上 但更常见于为行内快元素设置vertical-align
调整行内快元素左右内容与它的对齐方式
光标显示:
改变鼠标悬停在元素上时的显示外观
属性:cursor
取值:
default
默认
pointer 显示为小手形状
text
显示为 I
crosshair 显示为 +
列表属性:
列表本身是块级元素,自带外边距,电邮项目符号
属性:
属性:list-style-type
设置项目符号
取值:
none
取消项目符号
disc
实心原点
circle
空心原点
square
实心方块
...
设置项目符号为图片:
属性:list-style-image
取值:
url(“图片路径”)
设置项目符号的位置:
属性:list-style-position
取值:inside outside
设置项目符号出现在内容框的外部还是内部
**简写属性:
list-style:none;
常用来取消列表的项目符号
转换属性:
主要是用来改变元素在页面中的位置、尺寸、角度
属性:transform
取值:
转换函数
多个函数之间用空格隔开
转换原点:
转换原点实际上就是元素转换操作的基准点
属性:transform-origin
取值:x y;
表示以元素左上角为原点进行选取旋转原点的坐标
可以使用像素值、百分比、方位值
top center bottom
left center right
默认以元素的中心点为原点
转换函数:
平移变换:
改变元素在网页中的位置
属性:transform
取值:translate(x, y)
x表示元素在水平方向上平移的距离
y表示元素在垂直方向上平移的距离
可以填写正值或负值
其他情况:
translateX(value)
指水平方向位移
translateY(value)
指垂直方向位移
translate(value)
等价于translateX
缩放变换:
改变元素在页面中的大小
属性:transform
取值:scale(value)
value为无单位的素值 表示缩放比例
默认值是1 正常比例显示
value > 1 会等比放大
0 < value < 1 等比缩小
value < 0 元素会等比反转
其他情况:
scaleX(v)
横向缩放
scaleY(v)
垂直缩放
旋转变换:
元素旋转一定的角度显示
属性:transform
取值:rotate(ndeg)
表示元素按照指定的角度旋转
正值:顺时针 负值:逆时针
3D变换:
rotateX(ndeg)沿X轴旋转
rotateY(ndeg)沿Y轴旋转
rotateZ(ndeg)沿Z轴旋转
旋转原点会影响转换效果
元素如果涉及旋转操作 会连带坐标轴一起旋转,影响后面的位移