CSS课堂笔记

三种使用方法

Css样式名值对结构
style =" key:value ; key:value;" 冒号 分号 内联一般不用

p {
	color:green;         //大括号  分号  
	font-size:33px;         //内部样式表所有p标签都变化   
	}            //只能本网页          

把内部样式表写在外部文件中可以复用   
而且可以使用浏览器缓冲机制  提高速度  更好的体验

<link rel = " stylesheet"  href = "  ">//link引入

选择器和样式

<style>
中间是CSS区域
p{          p是选择器 
	color:red;        声明块  键值对   样式
	}
<\style>

元素选择器

p{ } h1{ } div{ }

id选择器

#red{
		color:red;
}
<p id="red">

类选择器

.blue {
			color:blue;l    //班级分类
}
<p class="blue"><p>

通配选择器

*{ //页面中所有元素 

}

交集选择器

div.red{        //同时满足div和red    *div在前*
  					//点号且的意思
}

并集选择器

h1,span{   //满足其中一个     逗号和的意思

}

迭代选择器

<div>
		<p>
		<span>
		</p>
		<span>
</div>

div > span {      //选中子元素span    只有第二个span
}

div span     后代选择器   空格    为span的后代

div + span       兄弟选择器     是span的兄弟

div ~ span             兄弟们选择器   波浪号

div.red > span 混合 div >span>p 孙子选择器 都可用

属性选择器

[属性名]
p[属性名+属性值] 可以加类名
[属性名^=属性值] 指定值开头
[属性名$=属性值] 指定结尾
[属性名*=属性值] 包含指定值

伪类选择器

它父元素的第一个子元素 被点击的子元素 鼠标移入的子元素等等
不存在的类 特殊的类 特殊的不存在的状态

:first-child        //它父元素的第一个子元素   冒号
:last-child   		//它父元素最后一个
:nth-child(2n)  even 它父元素偶数位    2n+1 odd 它父元素奇数位  
所有子元素不管类型

:first-of-type  :last-of-type :nth-of-type()     
它父元素的同类型子元素    

:not(nth-child(3))     //除了第三个子元素
:empty  // 没子元素的元素

a:link                 //没访问过的链接
a:visited			//访问过链接  只能改变颜色   出于隐私

a:hover           //鼠标移入
a:active          //鼠标点击     不限于链接

伪元素选择器

特殊真实不存在的元素 特殊不存在的位置

p::first-letter   //第一个字母    
:: first-line     // 第一号
::selection     //表示选中的内容
::before      //字段的开始
::after       // 结束    before和after  与  
{
content:"可以加符号  引号等“

选择器权重

1. !import>内联>id选择器>类和伪类>元素选择器>通配选择器>继承选择器
2. 多个选择器时候越长越重，越详细越中
3. 同样权重后面覆盖前面
4. 内联太重一般不用，import同理，不方便后期修改

显示

长度

像素px

• 同样像素分辨率高的设备图像变小默认自动放大

百分比%

• 相对对于父元素的百分比 变化

本元素字体倍数em

• 相对于元素字体大小变化

根元素字体倍数rem

• 相对于html的字体大小改变

颜色

rgba 的a表示不透明度0-1
hsla 色相 饱和度 亮度 透明度

文档流

块元素

宽度默认会充满父元素
高度默认被子元素撑开

行内元素

宽度高度都默认被撑开 像文本一样满了自动换行

盒子border

border默认3px color默认黑色 style:none默认没有必须写
border-width（宽度）border-color（颜色）bordr-style（样式）
：上，右，下，左
：上，左右，下
：上下，左右
：上下左右
border- 上.下.左.右-width.color.style
如：border-bottom-color: red;
border-上下左右：
如:border-top: 2px yellow solid;

border:width color style 上下左右:none
如:border: 1px blue dotted; border-right:none;

盒子可见框大小：内容区 内边距 边框 共同决定
padding:上，右，下，左

盒子位置

margin是影响盒子的位置
margin:上，右，下，左

• 设置左margin元素正值向右
• 设置margin左上移动自己 右下移动其他
  （因为元素是按照自左向右）
• margin：单独right没用
• margin影响盒子占地大小

水平布局

盒子套盒子
里面盒子左右占地
（内盒子内容width和左右padding margin border）
= 外盒子内容width

• 内盒子的 双外边距和内容宽width可以设置为auto
  width不写就默认width为auto
  多个auto优先用width的auto或者
  平摊 ，其他auto同等级，width的auto比其他等级高

width:xxx;        //margin  auto平摊    水平居中
margin:0   auto;
   

• 设置了width还没有aotu内盒子最右边margin-right为自动调整
• 超过为负

垂直布局

盒子套盒子
大盒子高度被子元素默认撑开 子元素包括margin为大盒子内容
大盒子可设置高度
小盒子从自定义大盒子溢出，在大盒子用
overflow
visible 默认值 外部显示
hidden 超出就没了
scroll 滚动条两条
-x:
-y:
auto 根据内容智能滚动条

外边距margin垂直方向折叠问题

垂直相邻外边距 折叠谁大是谁 相邻margin就由两方决定了
有负值则相加
都负值绝对值最大的
内外盒子:重合的margin
小盒子移动大盒子也会移动 相对位置不变
解决办法：

• 内盒子不用外边距 用大盒子padding 再在大盒height减去
• 避免相邻 大盒子 设置border 再在height内容高减去
• 大盒子 overflow：hidden

行内元素不影响布局

行内元素不能设置width height
padding，border，margin都水平相加
垂直方向不会 影响布局 不会改变位置 会遮盖

display visibility

display: inline 设为行内 较少用
block 设为块
inline-block 行内块 容易出错
table 表格
none 隐藏 不显示
visibility : hidden 隐藏位置还在
inline 默认值

---

清除浏览器默认样式

ul的list-style:none 去除默认的无序列表点点

  *{    
   			margin:0;
   			padding:0;
   								}		

\<link rel="stylesheet" href=".//reset.css">
//引入css文件reset.css重置样式表去除默认样式，
//normalize.css 对样式统一

布局样式补充

• over-flow:hidden 裁剪掉溢出的内容
• hover ，active可以绑定给任意元素
• 垂直居中：父元素的line-height和height设为一样
• 在大盒子中的小盒子的padding可以原地加大自己，margin可以移动自己。总之，padding管大小，margin动位置
• border设置一小段不同：小盒子的border设为特殊，
  小盒子margin设为负值使其移动覆盖重合大盒子border
• box-sizing 属性值border-box　　width等于内容加border 　
  content-box width 就算　　内容区width
• outline轮廓=border 但是outline只显示遮盖相邻盒子 border会改变盒子大小并挤走相邻盒子 常用hover px
• box-shandow阴影:和坐标系一样的正负值 水平 垂直 大小 颜色 px

浮动float

float：默认none left或right

1. 不会float出父元素
2. 后面盒子不会float超过前面的高度
3. 上面只要有非float盒子，就float不上去
4. float不会盖住文字
5. 块和行内float后都成了同样的float
   先后顺序贴满一行 才换行，高低不同会尽量往上贴，但是不会高过上面最低的 可以设置weight和height 或者被内容撑开

布局

父元素height一般不设为固定 方便内容增减
子盒子float 大盒子容易塌
解决float造成的副作用如高度塌陷1：
BFC
overflow 或 行内块 本与float同级 子元素float不走了 也盖不住它了

clear清除本元素被其他float的影响 clear:left 清除左侧浮动对当前的影响 right
both 清除最大影响的 达到全清 贴在最高的元素下面一行 clear后浏览器会自动添加一个上边距让它避免影响

塌陷问题2：加个有clear属性的空div可以解决
塌陷问题3：

塌陷的盒子::after{      //最后固定有某块 
						content无显示只用来占位
					content:'  ';  
					display:block;  
					//after行内变块独一行
					clear：both;					         
								}

//解决塌陷和重叠    谁塌给谁设
.clearfix::before,     
 .clearfix::after{
			content='';
			display:table;  //表格 放前面解决重叠
			clear:both;  //after放后面解决塌陷
 		}

定位

• 文本 默认自动左上贴 定位会强制覆盖
• 水平方向 和垂直方向 七个值的和等于 父元素的内容width和height
• top bottom right left width不设置则默认auto
• 多个width的auto更优先
  其他同等级auto均分可用来居中
  没有auto right会自适应

相对定位

1. 以元素当前在文档流中的位置为原点 包括margin
2. 还在文本流遵守原来的规则，块是块 行内是行内
3. 提升等级会强制覆盖其他的元素
4. 元素移动前的空间还是占着别 的元素上不去
5. 设置以后不移动就完全和之前一样

绝对定位

1. 以包含块或者根元素左上默认位置为原点 包括margin
2. 包含块是指离它最近的有任意一种定位属性的父元素
3. 脱离文本流但也会覆盖其他绝对定位

经常为子元素设置绝对定位 父元素相对定位

固定定位

绝对定位＋像广告 一样停在一个地方 原点是浏览器窗口

定位层级

• 定位层级一样 后面的会盖住前面的
• z-index:数字较大 会显示在上面
• 父元素层级不会比子元素高 子元素会显示在上

脱离文本流

脱离文本流 会既有行内能在一行和块能设置宽高的属性 未设置前默认 块被内容撑开
绝对定位独立性是单个元素脱离文本流，相对文本流就像它不存在一样，相比其他绝对定位元素会后覆盖先。新添加文本对它肯定没影响，新添加的绝对定位只要不占它的位置覆盖它也和它么有关系
float整体全局性几个元素之间会相互影响，对文字有特殊效果，
相对文本流它也像不存在，相比其他float会像文本流那样默认贴上贴左 ，按先后排序，上行高低不同，本行顶贴上行最低，新添加的float很容易就会影响其他float
整体布局浮动 细节定位补充

字体

font

font-size em当前元素的一倍 rem根元素的一倍
font-family 首选字体,备选,serif 字体名有符号空格加引号
没有指定字体浏览器自己选个serif类的字体

• serif 衬线字体 有笔锋
• sans-serif 非衬线字体 无笔锋
• momospce等宽字体 英文字母都等宽 对齐 编辑的代码

 @font-face{     
 				font-family:'myfont';  指定字体名字
 				src:url('./字体在服务器的路径); //下载的字体 
 初次加载慢    版权 
 				}
图标也可以通过font-face引入

• font-family 是建议用户使用字体所以无版权问题

• 可以把图标做成字体矢量图标 通过font-face引入

• 图标库在网上下载放在css同级目录

• 彩色图标直接当成图片使用 因为图标字体方式默认单色

• font-style font-weight 参数有斜体italic和加粗bold

line-height

指的是本行字实际的占地大小，

font-size是文字框的大小，文字本身会比size小

line-height超过font-size会上下平均分配 ，适合设垂直居中

 font :italic bold size/line-height

style和weight及行间距不写有默认值会覆盖前面
如果使用font简写建议不要再单独设置

文本

text-align默认左对齐left，其他参数center right justify分散对齐
vertical-align默认baseline 父元素基线对齐

汉字和部分英文字母比基线低

其他参数以父元素为参照top bottom medium
直接加数字px正负值上下调整

• img图片的时候默认基线对齐下面有空白
  设置vertical-align:bottom可解决

text-decoration文本修饰 默认none
参数有underline overline troughline删除线

text-decoration:underline red        红色下划线

white-space默认nomal
其他参数 nowrap 不换行 pre不会合并多个空行为一行

weight限定盒子宽
nowrap设置不换行才会超出
overflow裁剪超出部分
text-overflow让裁剪的部分以省略号显示

CSS与PS

1. 改为像素px显示图片 首选项
2. ruler工具可以用来测量
3. 选择工具-自动选择-图层 Alt+眼睛仅选择其中一个图层 裁剪
   导出为web
4. Ctrl可以查看元素的px

background背景

background-color
background-image url (图片路径) 图片背景
图片和颜色同时使用，颜色会成为图片的背景


background-repeat 默认repeat图片太小会自动复制平铺占满空间
其他参数repeat-x 水平平铺 repeat-y 垂直平铺
no-repeat不重复只一张小图片
background-position 小图片的位置
参数top center bottom left right
数字px 可以为负值精确定位小图片

bottom center 位置下中
left 位置左中

background-origin默认padding-box 背景图片在父元素的边界

其他参数border-box content-box
background-clip默认padding-box背景图片范围
其他参数同上


图片太大默认显示图片
左上角
background-size 背景图片大小width height

• width height会默认auto等比例变化

100% 100%图片缩拉适应盒子大小
100% auto 图片height裁剪

• cover
  图片不变覆盖盒子裁剪
• contain保证图片完整显示不管盒子

background-attachment 图片是否会移动

• 参数有scroll像文本一样图片跟随滚动
  fixd像壁纸一样不动

background:url("/地址")
red no-repeat center/222px  border content  fixd
//position和size在一起     origin在clip前

background-image:

linear-gradient
(to right或left,开始颜色 开始位置px,其他颜色 位置,结束颜色,位置)

repeating-linear-gradient() 平铺

redial-gradient(大小px at 位置px,圆心颜色,颜色)      

closest-side 近边 farthest-corner远角
正方形圆 矩形椭圆ellipse
补充：

• display:none元素不显示 新列表和关联元素相邻有同一个父元素 display:block 显示
  常和父元素:hover连用做移入显示下拉列表 绑定父元素新列表出现还在父元素里
  可激活列表的范围包括了列表本身 还会设置position:absolute浮出不影响其他元素
  列表的z-index设置大点防止被覆盖
• 利用定位覆盖可以用小的块给边或块部分改变
• 定位参照物可以随着参照物等比变化
• 利用定位覆盖功能可开相对定位，后面的定位比前面的高会盖前面的
• border的透明功能可以原来设置开始不想显示事件后显示，在事件后加border会加大元素

过渡和动画

过渡transition

transition-property过渡的属性默认all 　其他值none 属性名逗号隔开
transition-duration 时间默认０　其他值数字s 或　毫秒ms

• transition-timing-function　速度曲线
  默认ease 慢－快－慢　　cubic-bezier(0.25,0.1,0.25,1)
  linear匀速　　　　cubic-bezier(0,0,1,1)
  ease-in-out慢开－慢停　 cubic-bezier(0.42,0,0.58,1)
  cubic-bezier(n,n,n,n) 自定义贝塞儿曲线　　　n大于０小于１

delay开始等待时间延迟默认０　　秒或毫秒

动画animation

• animation-name 　　keyframename绑定的关键帧的name none
  animation-iteration-count 播放次数count 默认１次　indinite无限循环
  animation-direction　默认normal count大于１
  reverse反向　alternate偶数次反向　alternate-reverse奇数次反向
• animation-fill-mode　默认none 延迟时和结束后　要显示的样式
  forwards结束后　count决定
  backwards 开始前　等待时间
  bothfor back 两个方向

animation-play-state暂停　　默认running 　暂停paused

 @keyframes  关键帧的name{　　　　　／／动画　name就是animation-name
 from{
 margin-left:0;     //0%
 background-color:                 //颜色也可以过渡
 }
 50%{
 margin-left:444px            
 to{
 margin-left:1000px;  //100%
 }

margin-left可以直接写图片大小或大于大小background-position可以超出　background-img会默认平铺

变形

transform
平移translateX( ) 　translateY( ) translateZ( ) 　　　单位px
单位可以为百分　相对于元素本身百分比大小的平移量　
居中transform

position:absolute;
left:50%;
top:50%;        　　／／元素起点居中
transform:translateX(50%) translateY(-50%);　

• transform不影响布局　只是渲染页面

  html{                //人眼距离屏幕的视距　  Z轴为800px
            perspective: 800px;
        }
body:hover .box1{         //hover全屏
transform:translateZ(800px)
}

transform:rotateZ(.5turn)旋转半圈　　　90deg旋转九十度
backface-visibility 背面显示　 visibility显示　hidden隐藏
rotate旋转也可用于from to

 @keyframes  旋转名{
 from{
 transform:rotateZ(0);
 to{
 transform:totateZ(360deg); //旋转一圈

• 钟表指针旋转效果:取容器的一半，旋转容器
• 钟表构造

 animation:run 60s steps(60) infinite  //秒针step延迟效果　
　animation:run 7200s linean infinite   //时针

• X Y Z轴的主体是一个平面，一面一个坐标系，平面旋转了Z轴也跟着旋转了
  顺时针为正　逆时针为负
• transform-style:preserve-3d3D
• transform:scale(倍数）　放大或缩小倍数　scaleX(倍数）X轴放缩
  scaleZ(倍数）只有在３Ｄ里面能起作用　　Ｚ轴倍数
• transform-origin:20px 20px;默认center　变形的原点

flex弹性盒子

display:flex设置弹性容器　代替float布局　随页面自适应
flex-direction指定容器中弹性元素的排列方式　默认row水平左至右
row-reverse反向 column 向下
flex-wrap弹性元素是否自动换行
默认nowrap 自动换行wrap 反向换行　上面一行为下一行wrap-reverse

flex-flow:row  wrap  简写　水平排列　　自动换行　

flex-grow指定弹性元素的伸展系数　flex-grow:１　父元素的剩余空间平均分配　２是此元素可以多伸展一份
flex-shrink收缩系数　 内容超出自动收缩
flex-basis横向元素的宽或纵向是高　默认auto　或px值

flex:0 1 auto   不可增　　可减　元素自动　　flex:initial
flex:1 1 auto  可增　可减　元素自动　　 flex:auto

• order:数字元素排列优先级

justify-content空白分配方式 flex-start flex-end cente　　space-around
space-between space-evenly

align-items辅轴对齐方式　　元素间　行间
stretch默认长度相同　flex-start不拉伸沿辅轴起边对齐　flex-end沿终边对齐
center居中对齐　　　
align-content:space-between; 辅轴空白对齐方式
align-self:stretch;　覆盖修改align-items
弹性盒中心居中

justify-content:center; //主轴居中
align-items:center;　　//辅轴居中

flex不兼容来版本ＩＥ　
　　移动端使用ＦＬＥＸ代替ｆｌｏａｔ

媒体查询　ｉｆ不同窗口大小不同物理屏幕　不同效果
@media:all/print/screen/speech   屏幕阅读器
@media:(width=  )/(min-width)/(max-width)
body{
background-color:red
}
逗号可以并集    后加only旧版不识别不出错
and可以交集    也可用not

• 弹性盒子可与百分比尺寸搭配使用
• html页面大小等于100vw 根据比例关系做自适应效果
• 定位的ｔｂｌｒweight内容区 默认auto 　可以让内容区范围自适应