css常用样式个人小结
常用的css
1.css的书写方式
选择标签{
书写样式 每一个样式结束，必须加分号 所有符号都是英文
k:v;
k:v
}
外联(外链):link 工作中需要使用的方法
行内: style="color:red"不推荐
内联：
样式所有的标签都适用
（注：使用类名书写样式时需要加. 例如：.one）
2.常用的css文字样式
文字颜色 （color:red）;
文字大小 (font-size: 20px);---（文字大小不能小于12px 普通文字默认16px）
文字水平居中 (text-align: center);
文字垂直居中 （ line-height: 24px;) -- (设置行高等于容器高度，文字垂直居中 ）
首行缩进 em倍数 参考的是文字大小 (text-indent: 2em);
文字不能小于12px 默认大小16px (font-size: 18px);
字体 （字体的值需要加引号） (font-family: "楷体");
文字下划线 (text-decoration: underline);
去除下划线 (text-decoration: none);
文字加粗 (font-weight: bold);
文字不加粗 (font-weight: normal);
文字不倾斜 (font-style: normal);
文字倾斜 (font-style: italic);
鼠标移入增加小手 (cursor: pointer);
增加圆角 值越大圆角越明显 值是50%的时候为圆形 (border-radius: 10px);
背景颜色 (background:rebeccapurple);
宽度 (width: 100px); 高度 (height: 100px);
border:10px dashed #dc0115;
边框(border) 三个值 用空格隔开
第一个值：线的粗细
第二个值：线的类型 solid实线 dashed虚线 dotted点线
第三个值：线的颜色
外边距 (margin:100px);
行高 (line-height:100px);--（一行文字到下一行文字中间的留白，文字中心基线开始(高度一半的位置)向上取留白一半，向下取留白一半。中间的距离就是行高）
内边距边框和内容的留白
margin和padding 多个值使用空格隔开
一个值：上下左右
两个值：第一个值上下 第二个值左右
三个值：第一个值上 第二个值左右 第三个值下
四个值：上右下左
padding:10px;
注:(margin padding border都可以只可以设置一个方向
margin-top margin-bottom margin-left margin-right)
选择器:hover{
样式 鼠标移入样式才会生效，鼠标移出无效果
}
background: url('pic.gif') no-repeat center center pink;(引入背景图片)
第一个值图片地址 url('地址')
第二个值平铺方式，默认平铺 no-repeat repeat-x水平轴平铺 repeat-y垂直轴平铺
第三个值：水平方向坐标 可以书写具体值 也可以left center right
第四个值：垂直方向坐标 可以书写具体值 也可以top center bottom
第五个值：颜色
同样的样式 权重一样 后写的生效 background:lime;
渐变色 可以书写多个颜色，第一个值可以书写渐变角度 background: linear-gradient(90deg,red,pink,blue,yellow)
3、定位
固定定位 (position: fixed);
1、不会随着窗口滚动而滚动
2、参照物是可视窗口 top left right bottom （left和right不能同时书写，top和bottom不能同时书写）
3、固定定位完以标签变成行内块(设置宽高有效，可以在一行排列)
4、固定定位以后不占位，相互遮盖的效果。多个定位同时存在，后写的(根据html顺序)在上面
相对定位 (position: relative);
1、单独使用的时候，一般用来做微调。
2、相对定位，相对自身移动，参照物是自身原来的位置 top left right bottom （left和right不能同时书写，top和bottom不能同时书写）
3、相对定位，占位，占得是原来的位置
4、不会改变标签的性质。
绝对定位 (position: absolute); （绝对定位实现的效果，一个标签在另外一个标签上面）
(子级使用绝对定位，父级一般使用相对定位，相对定位对别的标签影响最小不占位。即一个标签绝对定位，会一直向上寻找，直到找到有定位方式(任意一种定位方式都可以，如果原来没有默认定位方式，一般使用相对定位，相对定位对别的标签影响最小。)的标签，然后以该标签作为参照）。
一个标签没有高度，高度由内容决定 。标准流中，img和父级有留白 ，给img加display:block;
标准流中，上下外边距的值不会叠加（与最大的值为准）。左右外边距会叠加
浮动：实现的效果就是水平排列。只有两种，左右浮动。标签变成行内块，一行排列给宽高有效
float:left;（向左浮动）
float:right;（向右浮动）
（子级浮动，父级一般要清浮动（overflow：hidden））
overflow：hidden的三层含义（1：子级浮动，父级一般要清浮动
2：超出部分隐藏
3：标准流中解决外边距塌陷问题）
overflow：auto（超出部分显示滚动条）
修改滚动条样式
p::-webkit-scrollbar {
width: 4px;
height: 4px;
}
定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
p::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
定义滚动条轨道 内阴影+圆角
p::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(255,0,0,1);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
转换模块 （转换以后，占的还是原来的位置）
div{
width: 100px;
height: 100px;
background:red;
}
位移 （transform: translate(100px,100px); ）（第一个数表示横坐标，第二个数表示纵坐标）
旋转 （ transform: rotate(30deg); ）
缩放 transform: scale(0.3); ） ----（0-1缩小，大于1放大）
旋转以后，坐标系也跟着改变 ( 一般实际开发的时候，先位移再旋转 )
transform: rotate(30deg) translate(100px,100px);
transform: translate(100px,100px) rotate(30deg) ;
过渡模块（transition:）
div{
width: 100px;
height: 100px;
background: red;
中间变化过程可见
第一个值：样式 可以指定某一个样式 也可以设置所有
第二个值:时间
第三个值：动画曲线 一般是linear
第四个值：动画延迟执行时间
transition: width 2s linear 0s,height 2s linear 2s,border-radius 1s linear 4s,background 1s linear 4s;
}
鼠标移入才生效
选择器:hover{
样式
}
如：div:hover{
width: 200px;
height: 200px;
border-radius: 50%;
background:blue;
transform: rotate(290deg);
}
动画模块
div{
width: 100px;
height: 100px;
background:lime;
使用动画 animation：动画名字 持续时间 次数infinite 动画曲线linear
animation:move 3s infinite linear;
}
定义动画
@keyframes 动画名字{
各个状态样式条
}
例如：
@keyframes move{
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(500px,0px);
background:red;
}
50%{
transform: translate(500px,500px) rotate(360deg);
border-radius: 50%;
}
75%{
transform: translate(0px,500px);
}
100%{
transform: translate(0px,0px);
}
4、选择器分类：
*：选择所有标签
标签选择器：直接通过标签名选择标签。div p img
类名选择器：通过类名选择 .+类名
交集选择器： p.one 中间不使用空格 标签名为p同时类名为one 。div.one.two标签名为div类名同时需要有one和two
后代选择器：后代(c标签内部的标签都称为c的后代) div p使用空格隔开即可
子代选择器 div>p(第一层包裹的才称为子代)
并集选择器：同样的样式可以合并。使用逗号隔开。a,div a和div有同样的样式
:nth-of-type(3n)可以选择具体某一个标签，也可以选择某一类标签2n 3n 4n
5、选择器权重：
*<标签<类名
6、 css两层意义（层叠性和继承性）
层叠性：标签的权重，哪一个权重高，取决于哪一个
继承性：与文字有关的样式都可以继承。如果一个标签没有与文字有关的样式，会一直向上寻找。 如果块级标签不设置宽度，块级标签的占位(width margin padding border)和父级的宽度一样
7、网站布局--（先整体再局部，从上到下，从左到右）--首先考虑标准流。不浮动不定位
1. 第一步，清除样式
2.确定版心（一般一个网站只有一个版心）
注意： logo是比较重要的内容，一般使用h1包裹(h1语义最重，一般一个页面只有一个h1
导航一般比较重要，使用ul li
常见问题：外边距塌陷（标准流(不浮动、不定位)中，给子级增加了margin-top。父级跟着一起下来。）
解决方法：1、不设置margin给父级设置padding
2、如果一定要加margin 给父级增加overflow:hidden;