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