css语法
1. 语法一
选择器 {
属性名: 属性值;
}
.id {
color: red;
}
----------------------
2. 语法二: 使用 @ 有很多种方法，下面列举三个样式
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
媒体查询用法
@import url(2.css);
引入外部css样式表
@charset "UTF-8";
定义样式表使用的字符集
css文档流
.app{
display: none; 此元素不被显示
display: inline; (内联元素) 以内联元素展示在页面中
display: block; (块级元素) 以块级元素展示在页面中
display: inline-block; (内联元素)
}
三者的区别
1.流动方向
inline 左到右，会换行且会处于两行中间
block 占一整行
inline-block 左到右，会换行且但不会处于两行中间
2. 宽度
inline 宽度是内部元素的总和决定的，它不能指定width
block 宽度是auto默认，它能指定width 注：永远不要写width:100%
inline-block 宽度和inline一样，但是它能指定width
3. 高度
inline 高度是由 line-height确定的，和 height无关，撑高的只是可视高度，但是实际高度没变
block 高度是由内部文档流元素(有些元素可以脱离文档流)决定的，可以设height
inline-block 高度和block一样，可以设置height
可以脱离文档流的元素
float
position:absolute/fixed
position
1. static 默认值 ，意思是：当前元素就是他文档流（块级元素、内联元素）中本来的样子，写不写都一样
2. relative 相对定位 ，相对其正常位置(本身位置)定位，但不脱离文档流
3. absolute 绝对定位，相对于祖先元素中 最近的一个定位元素定位的，定位元素只要不是static就是定位元素
4. fixed 固定定位，相对浏览器窗口就是视口定位的
5. sticky 粘滞定位
css动画属性
transform(改变)四个常用功能
translate 位移
scale 缩放
rotate 旋转
skew 倾斜
transition(过渡) 一般配合transform
语法
transiton: 属性名 时长 过渡方式 延迟
transition: margin-right 4s ease-in-out 1s;
animation
语法
animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
animation: 3s ease-in 1s 2 reverse both paused slidein;
过渡方式有：
linear匀速的
ease缓慢的
ease-in淡弱
ease-out淡出
ease-in-out淡弱淡出
cubic-bezier
step-start
step-end
关于css布局，点击这个链接查看
CSS清除默认样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
input,
button {
font-family: inherit;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
计算属性calc()
css常用样式
vertical-align:center; 垂直对其：居中
font-weight: normal; 字体粗细
text-decoration: none; 文字的默认修饰，一般用于 a 标签，它自带下划线
list-style: none; 默认样式无 用于ol li ul标签 取消他们的默认样式
cursor: pointer; 光标指针
cursor: not-allowed; 光标禁止
display: inline-flex; 内联弹性盒子 flex默认会是块级
white-space: nowrap; 控制字体空间不足不换行
outline: none; 轮廓线 无 outline: 1px solid red; 这样你就认识了，不占空间的轮廓线
background: fade_out(black, 0.5); 黑色遮罩层
text-overflow: ellipsis; 文本溢出部分显示...
此属性一般需要加上两个额外的属性搭配使用
overflow: hidden;
white-space: nowrap;
