css笔记
CSS初识
CSS(Cascading Style Sheets) 美化样式
CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS外观属性
color:文本颜色
line-height:行间距
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
1em 就是一个字的宽度
text-decoration 文本的装饰
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
选择器
1、通配符*
2、元素选择符
3、class类选择符
4、id选择符
5、群组选择符，用“，”逗号表示
关系选择符：
包含选择符，用空格表示,包含目标元素的所有子类元素。
子选择符，用大于号表示,只能选中目标元素的亲代子元素.
相邻选择符，用加号表示，只能选中目标元素的相邻的后面一个元素
兄弟选择符，用波浪线代表~，只能选中目标元素的后面兄弟元素。
伪类选择符
:hover,鼠标悬停在目标元素上时，元素的状态。
:active,鼠标点击目标元素时，元素的状态。
:focus,表单元素获取焦点的状态
:nth-child(n),用来匹配父元素的第n个子元素。
:frist-child,用来匹配父元素的第一个子元素
:last-child,用来匹配父元素的最后一个子元素
:nth-of-type(n),用来匹配同类型的第n个兄弟元素
:not(s),选中除了s元素外的所有目标元素
元素属性选择符[type=""],通过元素属性类型选中目标元素
:nth-child(n)
:frist-child
:last-child
:nth-of-type(n),匹配到目标元素的同级元素相同类型的第n个兄弟元素
:first-of-type,匹配到同级相同类型的元素的第一个元素
:last-of-type,匹配到相同类型的兄弟元素的最后一个。
:not(s), 匹配到不含s选择符的元素
:focus, 获取焦点的状态
:checked,选中状态
伪对象选择器：
::placeholder
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
注意：
- 只有 文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
- 链接里面不能再放链接。
块级元素和行内元素区别
块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。
行内块元素（inline-block）
在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;
CSS 三大特性
层叠 继承 优先级
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
选择器的优先级：
选择符 权重值
0、通配符
1、元素选择符 1
2、类选择符 10
3、id选择符 100
行内样式 1000
4、关系选择符
5、伪类选择符
6、属性选择符
7、!important
通配符 < 元素选择符 < 类选择符 < id选择符 < 行内样式 < !important
盒子模型（CSS重点）
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位
谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
元素真正的宽度 = 边框的宽度 + 内边距宽度 + 内容宽度
IE盒子模型(ie6一下)：内容的宽度已经包括了边框的值和内边距的值
box-sizing: border-box;使设置内容的宽包括内边距的宽度和边框的宽度
浮动float
可以理解为升级版的行内块级元素，不仅可以让块级元素可以在同一行显示，也可以控制元素的排列方向。
left：左浮动
right：右浮动
设置了浮动后，元素会脱离文档流，相当于元素漂浮在整个页面的上空.
清除浮动
方法一：在最后一个设置了浮动元素的后面添加一个空标签(注意，这个空标签必须是一个块级元素)，给这个空标签css设置属性clear：both；
方法二：在设置了浮动元素的父级元素上添加一个css属性，overflow:hidden;
方法三：给设置了浮动元素的父级元素上添加伪对象after，然后给这个伪对象设置为块级元素，再设置clear：both；
.clear{/*方法一*/
clear: both;
}
.baba{ /*方法二*/
overflow: hidden;
}
.baba::after{
display: block;
content: "";
clear: both;
}
文字溢出处理
多行文本溢出处理
overflow: hidden;
-webkit-line-clamp: 3;/*定义显示文本的行数*/
display: -webkit-box;
-webkit-box-orient: vertical;
一行文本超出部分处理方式
overflow: hidden;
white-space: nowrap;/*强制文字一行显示*/
text-overflow: ellipsis;/*文本超出部分显示方式*/
渐变
线性渐变色:第一组值定义方向,第二组值代表开始颜色和开始渐变的位置值,第三组值代表结束颜色和渐变开始的位置
background:linear-gradient(45deg,red 50%,yellow 80%);
background:linear-gradient(to top right,red 50%,yellow 80%);
径向渐变:第一个值定义形状,第一个值代表开始颜色和开始渐变的位置值,第三个值代表结束颜色开始
background: radial-gradient(circle at top,red 50%,yellow);
background: radial-gradient(circle at top right,red 50%,yellow);
图片隐藏
.div img{
height: 100%;
position: absolute;
left: -999px;
right: -999px;
bottom: -999px;
top:-999px;
margin: auto;
}
.img img{
width: 80%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
margin: auto;
}
隐藏select的默认样式
-webkit-appearance: none;
-moz-appearance: none;
-ms-progress-appearance: none;
appearance: none;
定位position
- relative相对定位,根据自身位置来偏移，还会占据原来的位置。
- absolute绝对定位,根据距离自身最近的一个父级元素且具有定位信息的元素来进行定位, 脱离正常文档流.
- fixed:固定定位,根据浏览器窗口来进行定位的。脱离正常文档流
浏览器内核
1、webkit， —— safari
2、Gecko —— 火狐
3、Trident —— IE，qq，360，遨游
4、Blink 谷歌，欧朋
浏览器兼容前缀：
-webkit-：谷歌，欧朋，Safari
-moz-： 火狐
-ms-: ie
-o-: 欧朋
阴影
第一个值，定义阴影的内外阴影，如果是外阴影，不用写，第二值水平方向的偏移量，第三个值是垂直方向的偏移量、第四个值模糊度，第五个值阴影的大小，第六个值阴影的颜色.
box-shadow: 5px 5px 10px 5px #000000;
box-shadow: inset 2px 2px 10px 5px red;
文字不能设置内阴影，不能设置大小。文字阴影只有四个值，第一个水平偏移量，第二个值垂直偏移量，第三个值模糊度，第四个值阴影颜色,可以设置多重阴影.
text-shadow: 2px 2px 0px #EBB000,-2px -2px 0px #EBB000;
渐变
推荐看网站https://www.w3cplus.com/css3/new-css3-radial-gradient.ht
通过边框画形状
.test{/*三角形*/
/*transparent,透明色*/
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid gold;
border-left: 50px solid pink;
width: 0;
height: 0;
}
.test1{/*梯形*/
/*transparent,透明色*/
border-top: 50px solid skyblue;
border-right: 50px solid transparent;
/*border-bottom: 50px solid gold;*/
border-left: 50px solid pink;
width: 50px;
height: 0;
margin: 20px;
动画
1、过渡动画(transition)
transition-property 动画属性
transition-duration 动画持续时间
transition-timing-function 动画效果
动画延迟时间
-webkit-transition-delay: ; 兼容谷歌
-moz-transition-delay: ; 兼容火狐
-ms-transition-delay: ; 兼容IE
-o-transition-delay: ; 兼容欧朋
transition-delay: ; 标准写法
- 位移(transform)
translate当只有一个值的时候，只代表x轴方向上的位移
transform: translate(30px);
transform: translateX(50px) translateY(30px);
- 缩放
transform: scale(0.5);
transform: scale(2);
transform: scaleX(0.8) scaleY(1.5);
- 斜切
transform: translate(200px,200px) skew(45deg);
- 旋转
transform: translate(200px,200px) rotateX(45deg) rotateY(45deg);
transform: translate(200px,200px) rotate(45deg);
旋转的基点
transform-origin: left top;
自定义动画
推荐动画插件 https://daneden.github.io/animate.css/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.web{
width: 800px;
height: 800px;
background: skyblue;
margin: 0 auto;
}
.test{
width: 200px;
height: 200px;
background: pink;
/*动画名称*/
animation-name: myFirst;
/*动画持续时间*/
animation-duration: 2s;
/*动画延迟时间*/
animation-delay: 1s;
/*动画时间函数(即动画的变换效果)*/
animation-timing-function: ease-in-out;
/*
* 动画结束状态
* forwards:动画停在动画结束状态
* backwards:动画停在动画开始状态
*
* */
animation-fill-mode: backwards;
/*
*动画的播放次数，infinite无数次
* */
animation-iteration-count: 3;
/*
* 动画的路径
* alternate:动画结束后原路返回
* reverse:动画倒序播放
* alternate-reverse:倒序播放结束后原路返回
* */
animation-direction: alternate-reverse;
/*
* 声明动画的播放状态
* running：自动播放
* paused:停止播放
* */
animation-play-state: running;
}
.test:hover{
animation-play-state: paused;
}
@keyframes myFirst{
0%{
transform: translate(0px,0px);
}
50%{
transform: translate(300px,0px);
}
100%{
transform: translate(200px,200px);
}
}
/*
*自定义动画animation
*
* */
</style>
</head>
<body>
<div class="web">
<div class="test"></div>
</div>
</body>
</html>
很多人误认为steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分如：
@-webkit-keyframes circle {
0% {}
25%{}
50%{}
75%{}
100%{}
}
此刻设置steps(5，start）那么会发现5张图会出现帧动画的效果，
因为steps中的5把 0% – 100%的内部分成5个等分 如：
@-webkit-keyframes circle {
0% {
background-position-x: 0;
}
100%{
background-position-x: -400px;
}
}
steps(1,start):动画一开始就跳到 100% 直到这一帧（不是整个周期）结束,(即直接跳过初始的状态)
steps(1,end):保持 0% 的样式直到这一帧（不是整个周期）结束
另外也可以直接设置
animation-timing-function:step-start/step-end
step-start效果等同于steps(1,start)，step-end效果等同于steps(1,end)
时间函数 贝塞尔曲线cubic-bezier
推荐网站 http://cubic-bezier.com/#.33,-0.33,.52,1.49
animation-timing-function: cubic bezier(.24,.64,.36,1.73);
移动设备
1、布局视口的宽度一般在768px~1024px（由浏览器厂商设置），常见宽度980px，虽然设置了很大的宽度，但在没有手动设置宽度的情况下，布局视口仍会容纳在一屏里（说白了，就是把980px的东西320px的屏幕里）
2、设备视口，指手机屏幕大小
3、理想视口，实现方法：
<meta name="viewport" content="width=device-width">
（即设置布局视口宽度为设备宽dppx：每个css像素包含物理像素数
ppi指屏幕像素密度，指手机对角线上每英寸所包含的像素个数，
计算方法：由宽高方向上的物理像素，根据勾股定理算出对角线上的像素点，然后除于屏幕尺寸得到。
物理像素：通常所说的屏幕分辨率
逻辑像素：就是程序里设置的像素大小
设备像素比(DPR) = 物理像素/逻辑像素
移动端底部导航顶起解决方案
方法一:在js中添加 document.body.style.height = document.body.clientHeight+"px";
alert(document.body.style.height);
方法二:
document.body.style.height = window.innerHeight+"px";
// document.body.style.height = document.body.clientHeight+"px";
console.log("当前的body高度:"+document.body.clientHeight);
window.onresize=function(){
console.log("当前的body高度:"+document.body.clientHeight);
}
移动端图片的处理
.img{
width: 60%;
/*
*padding值的百分比是根据他的父级元素的宽度来计算的。
*
* */
padding-top: 65.9%;
overflow: hidden;
margin: 0 auto;
background: red;
position: relative;
}
/*.img img{方法一
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}*/
.img img{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
