切图工具使用(snipaste)
css的px、rem、em、vm、vh、%的含义是什么
px像素值
rem相对html相对根节点来计算元素大小,不设置为1rem为16px
em 相对父元素来计算像素值
vh 相对视觉窗口像素值
% 相对服务机像素值
vm 相对视觉窗口计算像素值
CSS基础
设置字体
font-family:'微软雅黑';
设置字体样式
font-size: 18px
设置常用字体大小
font-weight: bold;
加粗自然
font-style: normal;
设置字体样式
color: red;
设置字体颜色
text-align: center;
文本对齐
text-decoration: overline;
文本装饰，文字下划线
text-indent: 20px;
首行文字缩进
line-height: 26px;
设置文字行高
list-style: none;
去掉li小圆点
伪类选择器
a:link /**选择未被访问链接*/
a:visited /*选择已访问链接*/
a:hover /**选择活动链接*/
a:active /*选择活动链接*/
a链接几种常见的伪类选择器，注意事项lvha
input:focus /*光标选择 */
鼠标光标伪类选择
块级元素的特点：
1、 比较霸道独占一行
2、 宽、高、外边、内边可以控制
3、 宽度默认是容器的100%
4、 是一个容器及黑子，里面可以放行或块级元素
注意：
除外
行内元素的特点
1、 相邻行内元素在一行上，一行可以显示多个
2、 高、宽直接设置无效
3、 默认宽度就是它本身内容的宽度
4、 行内元素只能容纳文本或者其他行内元素
注意：a链接里面不能放链接
行内转换为块级元素
display: block; /*行内转块*/
display: inline; /*块转行*/
display: inline-block; /*行内块元素*/
行内文字的垂直居中
line-height: 26px;
height: 26px
背景属性
background-color: red; /**背景颜色**/
background-image: url(''); /*背景图片*/
background-repeat:repeat ; /**repeat(平铺) no-repeat(不平铺)repeat-y(x-轴平铺)repeat-y(y-轴平铺)*/
background-position: center top; /**改变背景图片的位置**/
background-attachment: scroll; /**背景图片固定scroll(滚动)fixed(固定)*/
background: rgba(0, 0, 0,0.3); /**背景颜色0-1取值*/
盒模型
边框设置
border-width: 3px; /*设置盒模型边框宽度大小*/
border-style: solid; /**设置样式solid(实线)、dashed(虚线) dotted(点线)*/
border-color: red ; /**设置边框颜色*/
/**border-top(下)border-left（）border-bottom(上)**/
内、外边距
padding: 10; /**内编辑加上宽高会改变宽高*/
margin: 10; /**外边距**/
解决盒模型塌陷问题
1、 可以为父元素定义边框
2、 可以为父元素定义内边框
3、 可以为父元素添加overflow：hiddern
圆角边框
border-radius: 10px; /**设置圆角边框*/
盒子阴影
box-shadow: 11px 17px 10px black; /**11px(左右移动)17（上下移动） 10（阴影大小）black（颜色）*/
文字阴影
text-shadow: 11px 17px 10px black; /**11px(左右移动)17（上下移动） 10（阴影大小）black（颜色）*/
浮动
float: left; /**浮动left(左浮动)right(右浮动)**/
浮动特性：
1、 浮动元素会脱离标准流
2、 浮动的元素会有元素顶部对齐
3、 浮动的元素具有行内块元素特性
4、 依赖父级元素浮动
清除浮动
不常用
clear: both; /**清除浮动*/
1、 清除浮动的本质是清除浮动元素脱离标准流造成的影响
2、 闭合浮动只让浮动在盒子内部影响，不影响父盒子外面的其他盒子
常用
overflow: hidden; /**清除浮动*/
父元素添加
.clearfix:after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
/*父类添加*/
定位
position定位模式和top边偏移
position: static; /**静态定位*/
position: relative; /**相对定位,保留原来位置不脱标，相对原来位置有关，与父节点无关，与html无关*/
position: absolute; /**绝对定位与父元素有关，父元素无定义与最近一级定位节点有关**/
position: fixed; /**固定定位，以浏览器可视窗口为主*/
position: sticky; /**粘性定位需要和top、left、right、bottom定位**/
z-index叠放顺序
z-index: 1; /**绝对定位，数值越大越在上面**/
显示与隐藏
display不占有原来位置
display: none; /**隐藏元素**/
display: block; /*显示**/
visibility占有原来位置
visibility: visible; /**显示元素*/
visibility: hidden; /*显示元素**/
溢出
overflow
overflow: auto; /**滚动条auto(不溢出不显示滚动条)scroll(无论溢出不溢出都显示滚动条)*/
overflow: hidden; /**超出部分隐藏*/
overflow: visible; /**不剪切内容页不添加滚动条*/
单行文字溢出
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
设置多行文字展示，只适合在webkit浏览器
display: -webkit-box; /**设置弹性盒模型**/
-webkit-line-clamp: 3; /**设置文字行数*/
-webkit-box-orient: vertical; /**设置盒模型排列顺序*/
overflow: hidden;
text-overflow: ellipsis;
html5新增特性
视频标签
<!-- controls(显示控件) autoplay(自动播放) muted（静音播放） loop(自动循环播放)-->
<video autoplay muted loop src="#" poster="#(视频未加载图片)">
</video>
音频标签
<!-- controls显示播放控件、autoplay加载完里面播放、loop循环播放 -->
<audio src="#" autoplay loop controls></audio>
input类型
<input type="email">
<input type="url">
<input type="date">
<input type="time">
<input type="number">
<input type="tel">
<input type="search">
<input type="color">
表单属性
<form action="">
<!-- placeholder文本提示、multiple文件提交、autofocus光标提示、autocomplete是否记住上一次选择 -->
<input placeholder="你好要">
<input type="submit" value="提交" autofocus autocomplete="off">
</form>
CSS3新增特性
属性选择器
input[value]{
color: azure;
}
/* 根据属性值选择元素 */
伪类选择器
nth-child
ul li:nth-child(10){
background-color: aliceblue;
}
/* nth-child(n)从0开始每次加1往后面计算这里必须是n不是字母,even所有偶数 odd所有基数 */
nth-of-type
select div:nth-of-type(1){
background-color: aliceblue;
}
/* nth-of-type 先看指定元素在看元素位置 */
伪元素
before必须content
select ::before{
content: '内容';
}
/* before 在元素内插入内容 */
after必须content
select ::after{
content: '内容';
}
/* before 在元素后面插入内容 */
盒模型
box-sizing: border-box; /**padding与border不会撑大盒模型*/
过渡
谁做变化给谁加
.text{
transition: all 1s ease 1s;
}
.text:hover{
background-color: antiquewhite;
}
