常用类型
.font{
/* 字体的类型
1.你写的字体当前系统要支持
2.可以同时定义多个字体，用,隔开，会按顺序查找，找到就试用那个字体
*/
/* font-family:sans-serif,"隶书","times new roman"; */
/* 字体的大小
1.单位px,em
2.in,cm,mm,pt,pc,rpx
*/
/* font-size: 20px; */
/* 字体加粗
1.用bold或者bolder来设置加粗
2.用100到900之间的数字定义粗细
*/
/* font-weight: bolder; */
/*
字体倾斜
*/
/* font-style: italic; */
/*
综合设置字体
1.每个属性要用空格隔开
2.字体的类型，大小必设
3.要按顺序，先字体大小再字体类型，2个必设要放在最后
*/
font:italic bold 20px "楷体";
}
.text{
/* 文本颜色
当颜色的十六进制出现两两重复的时候可以使用简写
去重简写就可以
*/
color: #333;
/*
文本水平对齐
left center right
*/
text-align: left;
/*
首行缩进 单位是px，em
*/
text-indent: 32px;
/*
行高
1.用于文本上下居中对齐(重点)
把当前容器的高度和行高设置成一样，上下居中对齐
*/
line-height:100px;
height: 100px;
/*
字体修饰
underline overline line-through
去掉链接的下划线 none
*/
text-decoration: line-through;
}
/* 图片和文字居中
1.文字在图片的中间 vertical-align
top middle bottom
2.可以使用px进行微调,正数向上移动，负数向下移动
*/
img{vertical-align: -50px;}
p{border: 1px solid black;}
a{text-decoration: none;}
/*
超链接伪类(重点，小动画)
1.本质是用户和页面进行交互
2.hover鼠标浮动到元素上面或者鼠标离开元素
3.active鼠标点击
*/
.box{
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.box:hover{
color: red;
}
.box:active{
color: blue;
}
/* 鼠标形状
cursor
pointer手型
*/
.btn{
border: 1px solid black;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
cursor:pointer ;
}
.btn:hover{
color: blue;
}
/*
背景
1.背景颜色 background-color
2.背景图片 background-image 使用url函数指定图片的路劲
3.重复属性 background-repeat 默认重复 no-repeat不重复
4.背景图片的位置 background-position
a.座标设置,座标的起点是左上角
b.方位显示 第一个位置横轴 第二个位置是纵轴
c.座标百分比显示(自适应)
5.背景综合属性(一般主要用设置图片，一般不用设置背景颜色)，不分顺序
*/
.box1{
border: 1px solid black;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
/* background-color: #FF0000;
background-image: url("image/tv01.jpg");
background-repeat: no-repeat;
background-position: 20% 20%;*/
background:url(image/tv04.jpg) #FF0000 20% 20% no-repeat ;
}
/*
列表的样式
1.list-style-type列表前面的符号 list-style-type:none;去掉符号
decimal数字 circle空心圆 disc实心圆 square小正方体
2.list-style-image列表的图片
3.list-style-position图标的位置
4.list-style 综合设置列表
*/
li{
/* list-style-type:cambodian; */
/* list-style-image: url(image/tv03.jpg);
list-style-position: outside;*/
/* list-style:outside url(image/tv05.jpg) decimal; */
list-style-type:none;
}
/*
定位
相对定位 position: relative;
配合方位属性来使用 left top right bottom
4个方位表示距离这个方向的边的距离
1.定位元素没有改变
2.定位元素原有的位置还保留
3.相对定位如果不设置任何的位置属性，那定位元素不会发生任何改变
4.4个方位的基准是定位元素一开始的位置,定位的数值支持负数
绝对定位 position: absolute;
1.定位元素发生了改变，脱离了文档流，长度变成了内容的长度，原有元素的位置消失了
2.绝对定位定位基准,找他已经定位的一个最近的祖先元素为基准，如果找不到，那么以整个网页为基准
*/
/*
1.浮动 解决控制元素排列方式的问题
2.弹性盒子 解决控制元素排列方式的问题
*/
/*
浮动 脱离文档流
1.会覆盖没有浮动的元素
2.会失去块状元素的特征 原本的上下排列变成了抢占空间
3.脱离文档流 原本父元素的高度会变小，原本的元素还在盒子中，里面的元素会溢出
重设父元素的高度
重点:当一个容器中的元素都浮动了之后，父元素一定要设置高度
4.左浮动和右浮动决定了抢占空间的顺序
*/
/*
溢出(重点)
当元素浮动之后会导致父容器高度变小，当前容器就可能溢出
使用滚动条解决溢出的问题
overflow
1.overflow:auto ;设置滚动条处理溢出
2.overflow:none ;禁止滚动条
3.overflow:hidden;隐藏滚动条
*/
//动画
/*
2D转换
transform:带转换函数
translate()位移 2个参数 第一个x轴位移 第二个是y轴位移
rotate()旋转 单位是角度deg
scale()放大和缩小 0~1缩小 大于1是放大
skew()
*/
/*
1.要有样式改变
2.要有触发条件 伪类
3.需要给动画元素加过渡效果
transition:all 动画的时间(s)
*/
/*
圆角
border-radius: 50%;
*/
/*
透明度
opacity: 0~1
*/
/*
阴影
box-shadow
*/
/*
层叠
只能用于已经定位的元素
z-index:数字
*/
盒子模型
/*
盒子的高度和宽度
width height
1.一般使用单位px,也可以使用百分比，宽度可以使用百分比
(高度一般不能设百分比除非你父类盒子设置了固定值)
2.如果内容比设置的高度要大，那内容会溢出，如果不设置默认使用的是内容的高度
*/
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
/*
边框 border
1.border-style边框的类型 solid直线 dotted点状虚线 dashed雪花状虚线
2.border-color边框的颜色
3.border-width边框的大小
4.border 三个属性合在一起 不分位置 一定要设置border-style
5.设置单边border-top border-bottom border-left border-right
*/
.box1{
/* border-style:dashed;
border-color: blue;
border-width: 1px; */
border: 1px solid black;
}
/*
内边距 padding
1.设置了内边距可能会导致元素的高度和宽度变大,一般盒子的高度和宽度如果固定了
就不能使用内边距,不固定的时候可以使用（重要）
2.如果设置了一个值那就是设置所有的内边距,如果设置了4个值就是4个内边距
上 右 下 左(顺时针)
3.如果设置了两个值 第一个值代表上下 第二值代表左右
4.如果设置了三个值 第一个值上 第二值左右 第三值下
*/
.box2{
width: 50px;
height: 50px;
background-color: red;
padding: 10px 30px 40px;
}
/*
外边距 margin
同内边距
1.外边距有合并原则2个盒子同事设置接触的边是上下边，不会叠加，会使用较大的外边距
2.妙用 居中 当前元素设置 margin: 0px auto;
*/
.box1{
margin-right: 50px;
margin: 50px auto;
}
.box2{
margin-left: 50px;
}
/*
隐藏和显示
1.display none 隐藏
2.display block块状元素 inline行内元素
*/
.box3{
display: none;
}
.con{
width: 400px;
height: 300px;
border: 1px solid black;
}
.con:hover .box3{
display: block;
}
/*
弹性盒子 flex
1.浮动操作是子盒子，弹性操作的是父盒子
2.direction盒子中元素排列的方向
3.flex-direction只子元素在父元素中的排列方式 横排 竖排 反向横排 反向竖排
默认横排
4.justify-content子元素在容器中放置的方式(重点)
flex-start 表示从起点开始放置 默认方式
flex-end 表示从终点开始放置
center 表示从中间开始放置
space-between 表示子元素之间空格平均分配
space-around 表示子元素两边留白 子元素中间也留白 并且是两边留白的2倍
5.flex-wrap 元素换行方式 wrap表示换行 默认是不换行的
*/