文字字体
font-size ---字体大小
font-weight:bold;----加粗
font-weight:normal---去掉加粗
font-style:normal正常显示字体 italic斜体显示字体 oblique文字像一边倾斜
font-family:"微软雅黑"
文字对齐
text-align:center ----居中对齐
text-align:left----左对齐
text-align:justify ----两端对齐
垂直居中
line-height: **px;在内联元素中，px值设置为盒子高度一半，为垂直居中
line-height: **em 在块状元素中,表示段落间距，本段落的前后端间距 行间距？
文本的线
text-decoration: overline上划线； line-through穿过； underline下划线； none去掉下划线 用于a标签；
文本首行缩进 text-indent：**px
文本阴影
text-shadow
列表
去除ul列表前面的点 ul{ list-style:none; }
a标签连接
<a href=”网址连接” title=”鼠标滑过时文本 可不加”> 文本
去除下划线 a{ text-decoration:none }
盒子阴影
box-shadow：水平阴影位置右正左负 垂直阴影位置上负下正 模糊程度 阴影延展（四周扩大） 阴影的颜色
例子：box-shadow：10px -10px 2px 0 black
该盒子的阴影就在又下方 黑色的
Box-shadow：inset +属性值 表示设置内阴影
块状元素
border：1px solid red;----- 1像素红色实线框
padding：10px auto----内边距上下10px 左右自动居中 上右下左的顺序
margin:20px; ----框外 与页面的距离是20px
边框
border-dotted 电线边框 dashed 虚线边框 solid 实线边框 double 两个边框
顺序：上 右 下 左；如果只有3个值那就是 上 左右 下（倒三角案例）
加圆角
border-radius:左上 右上 右下 左下 px设置大小，左上右下 右上左下合写规则
{weight:100px
height:100px
border-radius:50px}----圆角值为宽度一半以上，为圆形
浮动 盒子（元素）方位移动
float：left right none
1. 父盒子宽度不够，子盒子浮动后会自动找空隙
2. 设置浮动后，行标签也能设置宽高
清除 浮动，当父盒子不定义高度时候，同时又想实现margin
-
每个父盒子设置overflow:hidden
-
为后面的父盒子 设置 clear:both，但如果前面的父盒子没有设置高度，后面父盒子设置margin也不会成功
-
为每个父盒子添加一个相同类名，并补 ::after{}伪命名 双冒+after ，content 也要加
例子
.clearfix::after{ content: ’ ’ ; clear:both; display:block; }
123
123
123
123
这样 相当于在每个div后面都加了一个affter 样式
- 在两个父盒子中加一个div 样式为clear:both
.qqq{ clear:both height:20px }
123
123
123
123
qqq盒子以自身为墙，清除浮动，并在两个父盒子设置了外间距
宽块状元素
div{ border:1px solid red; ----为居中效果设置边框 width:200px; margin:20px auto;} ----框外 上下设置20像素 ，左右设置为auto，平分居中
元素尺寸
height----元素高度
width----元素宽度
line-height ----设置行高
max-height ----最大高度
mid-width ----最小宽度
box-sizing 元素的总高度和宽度 包含padding和border
box-sizing：content-box如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
box-sizing: border-box
告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
注：border-box 不包含 margin。
不设置box-sizing 情况下：
div { width:100px; height:100px; padding:10px; border:1px; }
该盒子实际宽高为111px 111px
元素隐藏，彻底放弃了位置display：none
元素隐藏，但不放弃位置 visibility:hidden
鼠标滑过 显示手型 cursor:pointer
鼠标点击时超链接样式
a:link ---表示未访问的样式
a:visited ----表示已访问的样式
a:hover ----表示鼠标划过的样式
a:active -----表示已点击的样式
animation 动画不需要事件去触发，直接是动的
transtion 是需要事件去触发的 如鼠标滑过
animation 动画****
作用：创建一个持续的自执行动画
构成一个动画最基本的属性需要一个@keyframes和duration
@keyframes name 可以用百分数写定义多关键帧动作 也可以用from to
例子：设置一个跳动的动画,向上跳动8px
1. 为动画设置一个名字 bounce 不用写在body中
2. 在css中先写bounce 的效果，跳动相当于向上位移，在Y轴位移
@keyframes bounce{
0%{ transform:translate3d(0,0,0)}
100%{transform:translate3d(0,-8px,0)}
}
3. 在元素的样式中 加入动画样式，用animation样式
animation:bounce 0.75s infinite alternate;
（animation: 名称 动画速度 无限循环 alternate代表1 3 5....奇数次跳动为正向也就是向上-8px,同时 2 4 6.....偶数次跳动为反向 也就是从-8px的位置回到0 这样符合跳动节奏看着正常）
过渡效果 transition
transition-property 规定设置过渡效果的CSS属性的名称，必备,用数值可以表示的都可以，width height block
transition-duration 规定完成过渡效果需要多少秒或毫秒，必备 例子：transtion:0.6s 时间是必备的 其他的可以不写
transition-timing-function 规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始 例：transtion:0.6s 1s 动画1秒后开始，速度是0.6秒内完成，时间顺序不能错
transition-timing-function 规定速度效果的速度曲线
ease-in-out表示 由慢到快再到慢
定制贝塞尔速度曲线：网址：cubic-bezier.com/
Transform3D 空间转换****
Transform: translate3d(X,Y,Z)
Transform:scale3d(X,Y,Z) 缩放转换 改变大小 例子：scale（1.2） 图片扩大1.2倍
Transform: rotate(x,y,z,angle) 3D旋转
Transform: skew(x-angle,y-angle) 沿着X和Y轴的2D倾斜旋转
例子：如鼠标滑过，原图片放大1.2倍
1. 在img样式中设置过渡的效果,动画速度0.6秒，鼠标放置1秒后开始动画
img{ transition:transform 0.6s 1s }
也可以用 all 直接在transtion: all 0.6s 1s，这样如果设置其他动画结果，就都能够过渡
2. 设置滑动后的结果
Img:hover{ transform:scale(1.2) }
填充背景图片****
css样式表 是内联形式：background-image:url(图片位置 )
Css样式表是外链形式：background-image :url(../图片位置) 前面加两个点
background-repeat: repeat; （图片平铺整个页面）no-repeat（图片不被重复 就一张）;repeat-x（横向重复平铺）;repeat-y（纵向重复平铺图片）
background-size 图片尺寸****
例：假设图片尺寸 宽200 高100，盒子尺寸300 150
1. （1）background-size:200px auto；那么图片就会自动切割 充满盒子
（2）background-size:100px auto; 图片就会按照宽的比例，缩小50%， 盒子横向充满3个，纵向自动计算
-
background-size:contain; 图片智能容纳进盒子，左上角为基点
-
background-size:cover ; 图片撑满盒子，以左上角为基点
background-clip 图片覆盖****
1. background-clip: border-box 背景图覆盖到边框区域
2. background-clip: padding-box 背景图 覆盖到padding区域
3. background-clip: content-box 背景图只覆盖到内容区域
Background-attachment 背景固定****
1.设置盒子样式 Overflow：scroll; 溢出的内容由滚动条显示，设置盒子后内容超出盒子高度，就会出现有滚动条的框
2.网页也需要出现滚动条， 增加body的高度
3.在盒子内设置背景图片
Background-attachment: fixed（框内背景图不滚动，网页滚动背景图不滚动，相当于浮在页面，不和页面在一个平层）
:scroll （框内背景图不滚动，网页滚动背景图动，与页面在一个平层）
:local （框内背景图滚动，网页滚动背景图动）
backgroung-position 背景图片位置****
1. backgroung-position: 100px 200px; 两个值 距离父盒子 左 上 的数值
2. backgroung-position:center center;---- 两个center 图片水平 垂直居中于父盒子
3. backgroung-position: bottom center;-------底部居中于父盒子
4. backgroung-position: left bottom;------在父盒子左下角
例子：box1 { backgroung-position:center center;
background-size:cover; }
图片以中心点 撑满整个盒子
5. CSS精灵 多个图标在一张图片上，使用background:position 让其中一个图标，单独显示
（1）使用ps 的矩形选框工具选中一个图片，看它的大小和位置，比如宽高15px, 位置X轴3 Y轴13
（2） div { position:absolute; width:15px; height:15px; border:1px solid black;
background-position: -3px -13px； }
设定绝对定位让盒子显示宽高 并设个边框容易观察，，，选中图片所在位置，都设置为负数，这样就将小图标和左上角和父盒子的左上角对其了，，就能够框住图标了
Transform ： rotate 旋转变形****
Transform:rotate ( 45deg ); 定义旋转角度，默认按照自己的中心点,顺时针旋转
transform-origin: 0 0; 定义以为哪个点为旋转中心，0 0 是左上角
Transform ： scale 缩放形变****
tansform:scale (1 ); 1以下的值为缩小 1以上的值为扩大，以盒子中心点扩大缩小
例子： div盒子中填充一个图片
div:hover { transform:scale (1.5) }
当鼠标滑过，图片扩大到原来的1.5倍
Transform ： skew 斜切变形****
transform:skew ( 10deg,20deg ) X轴斜切角度 Y轴斜切角度
Transform ： translate 位移变形****
transform:translate ( 200px,100px ) 相对移动，距离原位置的左边200，距离原位置上100，也就是向右移动200，向下移动100；在老地方留坑
3D 旋转 有 3D 效果就必须要书写 transform 和 perspective 属性
transform:rotate
perspective ( 舞台的意思 ) “井深”属性****
perspective：200px; 表示透视强度，就像一个斜坡，距离斜坡越远，越看不到坡度，距离越近坡度越大
空间移动 ****在3D旋转的基础上，继续添加
translateX（） translateY （） translateZ（）
例：制作一个 3D 正方体
线性渐变 linear-gradient
backgroung-imge:linear-gradient ( to right,blue,red ) 逗号隔开 渐变方向 开始颜色 结束颜色
1.渐变方向也可以写成deg， 90deg颜色垂直区分，0deg颜色水平渐变
2.可以用百分数设置颜色出现的位置， 颜色+空格+百分比
backgroung-imge:linear-gradient ( 90deg red 10%,yellow50% ) 盒子宽度0-10%是纯红色，盒子宽的10-50%红色渐变黄色，50%-100%纯黄色
线性渐变 radial-gradient
backgroung-imge:radial-gradient ( 50% 50% red blue )
从圆心向外颜色渐变
浏览器私有前缀，用来对试验性质的 CSS 属性加以标识（必须背下来 , 面试可能考）****
如： backgroung-imge: -webkit-linear-gradient ( to right,，blue，red )****
定位 区别？？
position-fixed -----固定定位 无论页面怎么滚动，元素都在同一位置
position-relative -----相对定位 会在老地方留坑
position-absolute -----绝对定位 默认相对于浏览器，相当于浮动到新位置，覆盖于新位置元素上，老位置不保留。
绝对定位后，行标签也可设置宽高
overflow属性指定如果内容溢出一个元素的框，会发生什么
overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden 内容会被修剪，并且其余内容是不可见的。
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow:inhenit 规定应该从父元素继承 overflow 属性的值。
元素 相对定位 于页面
body{margin:0px; ----页面边框为0
padding：100px;} ----页面内距 上下左右 都为100
h1{margin:0px;
width:100px;
height:50px;
background-colour:red;
position:relative; ----元素相对于页面的位置，不是相对于浏览器窗口
left:200px;} -----距离左侧200px， 所以距离左侧页边框300px,还有100px的页内距
已知宽高，设置块状盒子居中 （大盒子套小盒子）
.box{ border:1px solid red;
height:300px;
postion:relative;} -----父元素相对定位
.box1{ postion:absolute; -----子元素绝对定位
top:50%
left:50%------小盒子左上角在大盒子中心点位置
margin: -100px 0 0 -100px; ----再向左上方移动高和宽的一半（小盒子200px）， margin顺序 上右下左
width:200px;
height:200px;
border:1px solid red;}
选择器
:not(标签选择){css样式}
表示并非所有的标签都是一个样式
例：除了最后一个span标签,剩下的都填充
p>span :not(:last-child){ }
:nth-child(n){css样式}
属于父元素的不限类型的第n个子元素的所有元素
例子：p标签中第三个元素右侧填充为0
p:nth-child(3){margin-right：0 }
p::after { content: ’ ’ }
p::before { content: ’ ’ }
在每个P标签 前 或 后 加入相同的内容，一定要含有 content，单引号里面可以为空
例：在所有h2标签前 加入一个横线，可以调整位置
h2::before{ content:’ ‘ ; width:5px;height:2px; background-color:red; top:** left:** }
类选择器名称一般设置
文本居中 .textcenter{text-align:center;} 页面内容居中center-wrap { width: argin:0 auto; }
时间日期 .time
导航栏：navBox(整个导航条) navBar（导航栏） logo 定义特定菜单have-menu
导航菜单下拉目录 menu
首页图： bannnerBox
左按钮右按钮 leftbtn rightbtn
搜索框 .searchBox
导航+图文 content 内容的意思
列表 list
产品信息：productInfo productBox 有图有内容 picbox+wordbox
产品内容盒子：可以用section标签，主题可以 title 或 hd 内容盒子可以用 dd
产品盒子里的小盒子：大块的big-grib 小块的Pro-grib grib代表格子
Banner轮播图左右按钮美化
命名：leftbtn rightbtn
左右箭头使用转译字符
小于号-----< 常用于banner轮播图按钮
大于好-----> 常用于banner轮播图按钮
Background-color：rgba（255,255,255,0.6） 背景颜色+透明度
cursor：pointer 鼠标小手
Font-family：consolas 字体
透明度：opacity
在img标签中，再次命名图片的时候 < img class=”one” src=图片位置”> , 在样式中 img.one 中间不能有空格
新建网页基础步骤
1. 新建文件夹，用VScode打开，简历css js imges 文件夹，建立index.html 文件
2. 改title，增加关键词和描述
关键词 <meta name=”Keywords” content=” 关键词内容 ”>
描述 <meta name=”Description” content=” 描述内容文本 ”>
3. 加入外联reset重置样式表
4. 加入 外联base样式表
5. 加入 css样式表
6. 在网站iconfont中，找到字体图标 4周-2节-2-5 未完成学习，iconfont网站不能注册登录
（1）选好图片后下载代码
（2）复制文件到项目的fonts文件夹，打开demo文件
（3）在base样式表中加入，第一步，复制样式，注意插入文件的位置前面加 ../ 第二步 定义类名 第三步在布局中复制转译字符
（4）
7. 触碰显示下拉菜单
（1）首先设置菜单显示层级 z-index:9999; 这样就能盖在其他内容上
（2）将菜单隐藏 display：none；
（3）设置 :hover { display:block }
（4）若要让下拉盒子在鼠标离开菜单后也一直显示，那么下拉盒子与菜单的距离就应该小于菜单高度，盒子的margin-top要小。 要是想要盒子与菜单有一点的距离，鼠标离开后也显示，那么就在下拉盒子里再套一个小盒子
8. 解释说明标签用dl dt dd标签
9. Banner图上要是有垂直菜单，均分高度的时候，设置banner盒子高100%，ul高100%，
在列表条样式之前的命名都要设置100%，列表条的高度就是100%平分高度。
10. 由于高度的值为百分比，垂直菜单的各个列表内容设置 垂直居中，浏览器窗口变化也垂直
不能使用margin和padding，测量文本行高度height，使用绝对定位于父盒子，top:50%; margin-top:负的height一半。
11. 半透明背景色 background-color:rgba
12. 增加边框后，内容超出父盒子的边框，父盒子高度如果是100%，则设置 box-sizing:border-box;
