CSS属性
2023-07-27 23:32:19 0 举报AI智能生成
CSS属性
作者其他创作
大纲/内容
一.移入效果
hover
当前属性+hover
鼠标移入.box2内容 背景颜色，和文字颜色等，都会改变
eg：.box2:hover
二.定位
定位position
位置
说明
top
距离上面的位置
bottom
距离下面的位置
left
距离左边的位置
right
距离右边的位置
1.相对位置
relative
eg：position+relative;
2.绝对位置
absolute
一般在子绝父相使用
eg：position+absolute
3.固定定位
fixed
eg：position+fixed
相对于浏览器，固定一个位置
三、flex布局
1.前言，或特点
2009年，W3C提出。可以简便、完整、响应式地实现各种页面布局
2.何为flex布局
A.弹性布局，用来为盒状模型提供最大的灵活性
B.任何一个容器都可以制定为flex布局
3.使用flex
父盒子box 设置display：flex
使box里面指定为flex布局
4.flex
设置子盒子为响应式
eg：flex:1或者其它数字
四、容器的属性
1.相对X轴 justify-content
flex-star 默认
center 移动到父盒子中间
flex-end 移动到父盒子左边
2.相对Y轴 align-items
flex-star 移动到父盒子上方
center 移动到父盒子中间
flex-end 移动到父盒子下方
1.字体属性
font-size
字体大小
eg:20px
font-weight
字体粗细
eg:400
font-family
设置字体
eg:仿宋
属性
作用
例子
2.文本属性
line-height
行高
行之间的高度
text-align
水平对齐
取值：left、center、right
属性
含义
说明
3.颜色
color
文本颜色
eg:red红色、yellow黄色
background-color
背景颜色
eg:red红色、yellow黄色
属性
含义
说明
4.盒子模型
属性
含义
单位
width
宽度
px
height
高度
px
border
设置边框
px
padding
内边距
px
margin
外边距
px
border-radius
设置边框四个角
px 如果设置为50%当前盒子变成圆○
5.盒子上下左右
属性
方向
上
top
下
bottom
左
left
右
right
盒子居中
margin:0 auto
6.清除 自带的网页内外边距
padding : 0px
margin：0px
7.补充点
行内块
作用
div
布局
span
包裹需要的内容，但不能设置宽高
0 条评论
下一页
