css常用属性
文本样式
1-1 对齐方式 text-aligin
左对齐: left
右对齐: right
居中对齐:center
1-2 文本颜色color
英语单词:red blue yellow ```
RGB[红绿蓝]
十六进制颜色 # 2位 2位 2位 [00-FF]
1-3 行高 line-height
文本中显示文字的垂直高度
要想使用文字居中显示,必须与height一致
1-4 文本装饰 text-decoration
无装饰:none
下划线:underline
删除线:line-throug
1-5 文本首行缩进 text-indent [单位:px]
1-6 设定空格间距 word-spacing [单位:px]
1-7 设定文字间的间距 lettrt-spacing [单位:px]
字体样式
1-1 字体大小 font-size
单位:px 、rem[手机]、相对缩放em
1-2 字体类型 [font-family](https://www.notion.so/CSS-93939e769a204d71973d34dbbfa43849)
1-3 字体加粗 font-weight
不加粗:normal 500
加粗 :bold
数字 :100 - 900
1-4 字体样式 font-style
普通:normal
倾斜:italic
1-5 字体颜色:color
[同文本样式中的字体颜色]
"列表样式:list-style:none;"
盒子模型
3-1 最外层:margin
/*书写语法
以:margin 为例,其余相同
p{
margin-top : 5px;
margin-bottom : 5px;
margin-right : 10px;
margin-left : 10px;
}
p{
margin : 5px 10px 5px 10px;
//上 右 下 左
}
p{
margin : 5px 10px; //上下 左右
}
p{
margin : 5px 10px 5px ;
// 上 左右 下
}
*/
3-2 外边距:border
边框样式:
无边框:none
实线 :solid
圆点 :dotted
/*书写语法同上*/
3-3 内边距:padding
/*注意点:
border && padding 会改变盒子的大小
想让两个盒子分开,
使用padding-left 无效的,这个是内边距
得用 margin-left
高度不适用
*/
3-4 内容 :content
浮动样式
/*--------------------
1.定义:会使元素向左或向右移动,
其周围的元素也会重新排列
2.特点:不占文档流的位置
--------------------*/
4-1 浮动:float
left/right/none
4-2 清除浮动 clear:both;
/* margin-top 位置
注意:有了浮动才可以单独的
调整某个元素的
margin-top的位置
比如以上例子中若只有div_1有浮动
则在以下代码能单独调整div_1的盒
子的位置
.div_1 {
background-color:#90FF90;
float:right;
margin-top:40px;
}
*/
flex-direction
注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。
row 默认值。灵活的项目将水平显示,正如一个行一样
row-reverse 与 row 相同,但是以相反的顺序。
column 灵活的项目将垂直显示,正如一个列一样。
column-reverse 与 column 相同,但是以相反的顺序
定位
/*--------------------
1.定义:元素根据我自己的想法做精准的定位
2.方向:top bottom
left right
--------------------*/
5-1 默认定位 :static
5-2 [**固定定位**](https://codepen.io/NANFENG1126/pen/wvroGZQ) :fixed
5-3 [**&&**](https://codepen.io/NANFENG1126/pen/NWabrxV) 5-4
相对定位 :relative
绝对定位 :absolute
5-5.层次位置显示:
z-index 使用:数字越小越在下面
/*
img 中:z-indext:100;
hot 中:z-indext:-1;
*/
元素的显示方式
6.元素的显示方式 display
6-1 隐藏 none
6-2 以行级元素显示 block
6-3 以块级元素显示 inline
6-4 即由行级元素的特性
又要有块级元素的特性
inline-block
css3属性
7-1 [**边框圆角**](https://www.runoob.com/css3/css3-border-radius.html)
border-radius
四个值:左上角 右上角 右下角 左下角
三个值:左上角 右上角和左下角 右下角
两个值:左上角与右下角 右上角与左下角
一个值: 四个圆角值相同
7-2 [**渐变**](https://www.runoob.com/css3/css3-gradients.html) :Gradients
1>线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background-image: linear-gradient();
/*
1.从上到下
background-image: linear-gradient(#e66465, #9198e5);
//括号内可以设定更多颜色,做为中间过渡色
2.从右到左
height :200px
background-image: linear-gradient(to right, red , yellow);
//括号内可以设定更多颜色,做为中间过渡色,也可以"to left"
3.对角
height :200px
background-image: linear-gradient(to bottom right, red, yellow);
4.使用角度
height :200px
background-image: linear-gradient(0deg, red, yellow);
角度是指水平线和渐变线之间的角度,逆时针方向计算
标准角度图如下
换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。
很多浏览器(Chrome、Safari、firefox等)的使用了旧的标准
5.rgba() 函数中的最后一个参数可以是从 0 到 1 的值
它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明
更多跳转[**[菜鸟教程]**](https://www.runoob.com/css3/css3-gradients.html)
*/
动画
2>径向渐变(Radial Gradients)- 由它们的中心定义
8.CSS 动画
动画: [[**时间函数中间值计算方法**](https://easings.net/)]
8-1 transition:过渡属性 过渡时间 时间函数
transition: background 1s linear 0S
同时改变背景和字体大小
transition: all 1s linear 0s
多个属性设置不同的参数
transition: background 1s linear 0s ,
font-size 1.5s ease-in
/*过渡属性只执行一次
如果需要循环展示动画
就需要定义关键帧动画
[**[@keyframes]**](https://www.runoob.com/css3/css3-animations.html)
*/
8-2 @keyframes
@keyframes rotate {
from {
transform: rotate( 0deg);
background-color: red;
}
80% {
transform: rotate(15deg);
}
to {
transform: rotate(360deg );
background-color: blue;
}
}
.box {
animation: rotate 2s ease-in- out
0S infinite;
}
animation属性
animation-name.定义的"@keyframes "的名字
animation-duration动画执行时长
- animation-timing-function.动画时间函数
- animation-delay. 动画执行延迟
- animation-iteration-count.动画执行次数,可以
设置数字,或者infinite来让它循环执行
- animation-direction.动画执行方向,默认是从开
始到结束,还可以设置reverse反向执行,
alternate交替执行等
元素超出范围隐藏 overflow:hidden;
光标样式: cursor:pointer;
动画全过程执行时间 transition:0.5s;
transition 属性设置元素当过渡效果,四个简写属性为:
transition-property
transition-duration
transition-timing-function
transition-delay
其他属性
9-1box-sizing 属性
1>box-sizing: border-box;
元素的总高度和宽度包含内边距和边框(padding 与 border)
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
2>box-sizing:inherit 指定 box-sizing 属性的值,
应该从父元素继承
3>默认 content-box
默认值。如果你设置一个元素的宽为 100px,
那么这个元素的内容区会有 100px 宽,并且
任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
9-2 [**[玻璃模糊属性 :backdrop-filter]](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)**
9-3 min-height:设置元素的最低高度。
1>length 定义元素的最小高度。默认值是 0
2>% 定义基于包含它的块级对象的百分比最小高度
3>inherit 规定应该从父元素继承 min-height 属性的值。
同理可得:max-height min-width max-height
9-4 [**[玻璃模糊属性 :backdrop-filter]**](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)
backdrop-filter: blur(2px);
9-5 box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
值 说明
h-shadow 必需的。水平阴影的位置。允许负值
/*水平阴影,但在侧方体现,正数表示右侧宽度*/
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
Citation:
References: