1. CSS 属性
background-color
background-image background-repeat background-size
background-position
简写 :
background:color url() repeat position;
background-size
------------
font-size
font-style
font-weight
font-family
简写 :
font : (style weight) size family;
----------
color
line-height
text-align
text-decoration
------------
table:
border-collapse
border-spacing
2. 布局
1. 文档流布局
按照元素类型和书写顺序,从左到右,从上到下依次显示
2. 浮动布局
float : left/right/none;
特点 :
1. 元素浮动之后,会停靠其他元素的边缘
2. 元素浮动之后都可以设置宽高
3. 文字环绕
4. 元素浮动会脱流,在文档中不占位.影响布局
问题 :
浮动元素不占位,父元素高度为0
解决 :
1. 为父元素指定高度
2. 为父元素设置overflow:hidden;
3. 在父元素末尾添加空的子元素(块元素)
设置子元素 clear:both;
-----------------------------------------------
day06
1. 定位布局
可以设置元素在网页中的显示位置
属性 : position
取值 :
1. static (静态布局,默认值)
2. relative (相对定位)
3. absolute (绝对定位)
4. fixed (固定定位)
注意 :
只有元素设置position为relative/absolute/fixed,
才称元素为已定位元素
2. 定位详解
1. 相对定位
position : relative;
特点 : 元素一旦相对定位,可以参照它在文档中的原始位置
进行偏移.仍然在文档中占位(保留它原始位置)
偏移属性 :
top / right / bottom / left
取像素值,设置元素偏移距离
top : 设置元素距离顶部的偏移量,正值元素下移
left : 设置元素距左的偏移量,正值元素右移
bottom : 设置元素距底部的偏移量,正值元素上移
right : 设置元素距右的偏移量,正值元素左移
2. 绝对定位
属性 position:absolute;
特点 :
1. 元素设置绝对定位,会参照一个离它最近的已经定位的祖先
元素进行偏移,如果没有已定位的祖先元素,则参照浏览器
窗口的原点进行偏移
2. 元素设置绝对定位会脱离文档流,父元素高度为0
使用 :
1. 一般采用父元素相对定位,子元素绝对定位,实现元素
偏移
2. 偏移属性是根据元素的参照物进行偏移
3. 绝对定位的元素脱离文档流,可以设置宽高
3. 元素的堆叠次序
元素出现相互重叠时的显示次序
属性 : z-index
取值 : 无单位的数值,默认为0,数值越大越靠上显示
注意 :
只有当前元素设置定位布局,z-index才有效
4. 固定定位
position : fixed;
特点 :
元素设置固定定位,会参照浏览器窗口进行偏移
3. 元素显示效果
1. 设置元素显示与隐藏
属性 : visibility
取值 :
1. visible (默认可见)
2. hidden (元素隐藏,仍然占位)
2. 转换元素类型
属性 : display
取值 :
1. inline 行内元素
2. block 块元素
3. inline-block 行内块元素
4. none 元素隐藏,在文档中不占位
3. 元素透明度设置
1. rgba(r,g,b,a)
2. 属性 : opacity
取值 : 0-1 (0为透明,1为不透明)
使用 :
1. opacity会使包含元素自身和其后代元素在内的所有
显示效果都半透明;
rgba()只针对当前元素的指定属性实现半透明,文本
的半透明效果会被子元素继承;
2. 子元素与父元素同时设置opacity半透明,子元素
中的半透明效果是 两个值相乘(在父元素半透明
的基础上再次半透明)
4. 鼠标形状改变
默认,鼠标悬停在普通文本上显示为 'I',悬停在超链接
内容上,显示为手指形状,其他元素显示为箭头
属性 : cursor
取值 :
1. default
2. pointer (手指形状)
3. text ('I')
5. 行内块元素的垂直对齐方式
行内块元素默认按照文本的基线对齐,会出现元素排列
不齐的情况
属性 : vertical-align
取值 : top/middle/bottom
使用 :
为行内块元素设置vertical-align,调整左右元素跟它
的对齐方式
img,input{
vertical-align:
}
6. 列表相关属性
1. list-style-type
设置项目符号的类型
取值 :
square
circle
disc
none
2. list-style-image
使用图片自定义项目符号
取值 : url()
3. lisi-style-position
设置项目符号的位置
默认显示在内容框的左侧
取值 :
1. outside 在内容框外部
2. inside 显示在内容框内部
4. 简写属性
list-style: type/url position;
取消项目符号 :
list-style:none;
4. 元素的转换效果
1. 元素的转换效果主要指元素可以发生平移,缩放,旋转变换
2. 属性 : transform
取值 : 转换函数
注意 : 多个转换函数之间使用空格隔开
3. 元素的转换基准点
默认情况下,元素以中心点作为转换的基准点
调整基准点 :
属性 transform-origin
取值 x y
可以使用像素值,百分比或方位值表示基准点的位置
et :
左上角 0px 0px
右下角 100% 100%
右上角 100% 0% / right top
方位值 :
left center right
top center bottom
4. 平移变换
1. 作用 : 改变元素在文档中的位置
2. 使用 :
属性 : transform
取值 :
1. translate(x,y)
x,y分别表示元素在X轴和Y轴上的平移距离,
取像素值,可正可负,区分平移方向
2. translate(x)
一个值表示沿X轴平移
3. translateX(value)
指定沿X轴平移
4. translateY(value)
指定沿Y轴平移
5. 缩放变换
改变元素的显示尺寸(放大或缩小)
属性 : transform
取值 : scale(value)
value为无单位的数值,表示缩放比例
1. value > 1 元素放大
2. 0 < value < 1 元素缩小
3. value < 0 数值仍然表示缩放比,负号表示元素
会被翻转
其他取值 :
scaleX(v) 沿X轴缩放
scaleY(v) 沿Y轴缩放
6. 旋转变换
可以设置元素旋转一定角度显示
属性 : transform
取值 : rotate(deg)
取角度值, 以deg为单位
使用 :
1. rotate()表示平面旋转
正值表示顺时针旋转,负值表示逆时针旋转
2. 3D旋转
rotateX(deg) 沿X轴旋转
rotateY(deg) 沿Y轴旋转
7. 转换函数的组合使用
transform : translate() scale() rotate();
注意 :
元素旋转会连带坐标轴一起转