文章目录
css选择器***
1.id选择器
2.class选择器
3.标签选择器
4.后代选择器 div p
5.子代选择器 div > p
6.伪类选择器 :hover
7.伪元素选择器 ::after
8.群组选择器 div,p
9.属性选择器 div[id]
10.相邻选择器（紧邻的后边兄弟元素） div+p
11.兄弟选择器（后边所有的兄弟元素）div ~ p
后面这三选择器不懂的可以参考
css优先级（从上往下优先级依次降低）
!important
style
id
class
标签
定位的类型
absolute（绝对定位）：释放空间，相对于最近一级的祖先元素进行定位
relative（相对定位）：不释放空间，相对于没定位前自己的位置进行定位
fixed（固定定位）：释放空间，相对于浏览器可视窗口进行定位
static（没有定位）
sticky（粘性定位）：可以产生吸顶效果
子元素绝对定位那么他的父元素可以是什么定位？
答案：除了static以外的所有定位都可以
当fixed元素它的父元素使用了transform：translate()，就会和普通absolute一样。
<style>
#box {
width: 500px;
height: 500px;
background-color: #0e9aef;
// transform: translate(0px, -5px);
margin: auto;
}
.minBox {
width: 300px;
height: 300px;
position: fixed;
left: 50px;
top: 50px;
background-color: red;
}
</style>
<body>
<div id="box">
<div class="minBox">
</div>
</div>
</body>
给父元素添加transform: translate(0px, -5px);后
浮动float
浮动的元素会脱离文档流，释放空间，导致其父元素高度塌陷。
解决浮动导致的塌陷问题
1.给父元素添加高度（
不推荐）
2.给父元素加上overflow:hidden;
3.在浮动的元素下边加一个块级元素，给这个块元素加一个 clear:both;
4.clearfix ::after{ content:"", display:block; clear:both }
盒模型
盒模型宽度计算：内容+内边距+border （
不要加上margin）
- 标准盒模型
当你设置了width和height时他只代表着内容的宽高，如果此时你再加上padding border他会继续把盒子撑大 - 怪异盒模型
当你设置了width和height时他代表着盒子的宽高，如果此时你再加上padding border他会把内容区域进行缩减以保证整个盒子的宽高不变
竖向外边距塌陷
<style>
p {
margin-top: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<p>2</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
上图可以看出相邻两个盒子之间的外边距并不是25px而是15px，这就是因为发生了竖向的外边距塌陷。
竖向外边距塌陷特殊情况
<style>
p {
margin-top: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<p>2</p>
<p></p>
<p></p>
<p></p>
<p>5</p>
</body>
从图中可以看出中间三个p标签都因为竖向塌陷而塌陷没了
可以这样理解：因为中间的三个p没有内容所以上边距和下边距挨着就发生了塌陷变成了15px，又因为有内容的p和没内容的p标签挨着所有外边距继续塌陷，就把中间没有内容的p标签塌陷没了
外边距（margin）负值
margin-top、margin-left负值元素向上、向左移动
margin-right 自身不动，右侧的元素向左移
margin-bottom 自身不动，下方的元素向上移
line-height继承问题
<style>
body {
font-size: 50px;
line-height: 30px;
line-height: 3;
line-height: 200%;
}
p {
font-size: 16px;
background: pink;
}
</style>
</head>
<body>
<p>这是一段文字</p>
</body>
BFC
总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之外边的元素也不会影响到内部的子元素。
正是因为如此在上一个盒子发生左浮时，你给下一个盒子变成BFC它便不会让上一个浮动的盒子在浮在它上边，从而影响到它内部的元素，也就可以实现左侧固定右侧自适应了。
同理在子元素都浮动从而导致父元素塌陷时，你给父元素变成BFC，父元素为了不让子元素影响到外边的元素便会计算浮动子元素的高度，从而解决父元素塌陷问题
在发生子元素与父元素外边距重叠问题时，把父元素变成BFC则会解决外边距重叠问题，因为如果子元素外边距大那么他便会把父元素的外边距重叠掉从而影响到父元素盒子外的元素
如何创建BFC
1、float的值不是none。
2、position的值不是absolute或者fixed。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC能干啥
- 解决margin的重叠（外边框合并问题）
margin发生重叠
<div class="div1"></div>
<div class="div3">
<div class="div2"></div>
</div>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 100px;
height: 100px;
background: red;
margin-bottom: 40px;
}
.div2 {
width: 100px;
height: 100px;
background: green;
margin-top: 100px;
}
通过BFC解决margin重叠
<div class="div1"></div>
<div class="div3">
<div class="div2"></div>
</div>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 100px;
height: 100px;
background: red;
margin-bottom: 40px;
}
.div2 {
width: 100px;
height: 100px;
background: green;
margin-top: 100px;
}
.div3 {
overflow: hidden;
}
- 实现左侧固定右侧自适应
<div class="div1"></div>
<div class="div2"></div>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2 {
height: 200px;
background: green;
}
<div class="div1"></div>
<div class="div2"></div>
* {
margin: 0;
padding: 0;
}
.div1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2 {
height: 200px;
background: green;
overflow: hidden;
}
- 清除子元素浮动带来的父元素塌陷问题（
直接给父元素加上overfl:hidden即可）
CSS3新特性
动画***
transition（过渡）
transition的属性：
-
您要添加效果的 CSS 属性
-
效果的持续时间：
-
规定过渡效果的速度曲线
ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认） linear - 规定从开始到结束具有相同速度的过渡效果 ease-in -规定缓慢开始的过渡效果 ease-out - 规定缓慢结束的过渡效果 ease-in-out - 规定开始和结束较慢的过渡效果 cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值 -
属性规定过渡效果的延迟（以秒计）
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
background: red;
// 动画的过渡效果
transition: all 2s linear 0.5s;
}
// 鼠标一放上去就把宽度和颜色改变
div:hover {
width: 100px;
background: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
animation和@keyframe（动画）
- 使用的动画名
- 定义动画完成一个周期需要多少秒或毫秒
- 规定动画效果的速度曲线
- 延迟时间
- 定义动画应该播放多少次
- 定义是否循环交替反向播放动画
- 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- animation-play-state 动画停止或者运行
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 500px;
background: red;
/* 用哪个动画|几秒完成一次|什么速率进行|延迟时间|重复几次| 是否循环交替反向播放动画
alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。*/
animation: run 2s linear 0.5s infinite alternate;
}
@keyframes run {
0% {
width: 500px;
}
50% {
width: 700px;
}
100% {
width: 1000px;
background: pink;
}
}
/* 鼠标放上面就会暂停动画 */
div:hover {
animation-play-state: paused
}
</style>
</head>
<body>
<div></div>
</body>
</html>
弹性盒模型（flex）flex小游戏***
给父元素设置display:flex;子元素通过flex:n;来确定占据父元素剩余空间的n块。
父元素常见的属性
- flex-direction：设置主轴的方向
| 属性值 | 说明 |
|---|---|
row | 默认值，从左到右 |
| row-reverse | 从右到左 |
column | 从上到下 |
| column-reverse | 从下到上 |
- justify-content：设置主轴上的子元素排列方式
| 属性值 | 说明 |
|---|---|
flex-star | 默认值，沿着主轴方向从头到尾 |
| flex-end | 沿主轴方向从尾到头 |
center | 居中对齐 |
space-around | 平分剩余空间 |
space-between | 先两边贴边，然后平分剩余空间 |
- flex-wrap：设置子元素是否换行，默认是不换行的，就算已经放不下了，他也会通过给你子元素减少宽度硬给放到一行
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
wrap | 换行 |
- align-content：设置侧轴上的子元素排列方式（多行）
| 属性值 | 说明 |
|---|---|
flex-star | 默认值，沿着侧轴方向从头到尾 |
| flex-end | 沿侧轴方向从尾到头 |
center | 在侧轴居中对齐 |
space-around | 侧轴平分剩余空间 |
space-between | 沿着侧轴先两边贴边，然后平分剩余空间 |
stretch | 设置子元素高度平分父元素高度 |
- align-items：设置侧轴上的子元素排列方式（单行）
| 属性值 | 说明 |
|---|---|
flex-star | 沿着侧轴方向从头到尾 |
| flex-end | 沿侧轴方向从尾到头 |
center | 在侧轴居中对齐 |
stretch | 默认值，拉伸 |
- flex-flow：复合属性，相当于同时设置了flex-direction和 flex-wrap
子元素常用的属性flex
这个flex是
flex-grow、flex-shrink、flex-basis的简写形式，当然也是用得最多的
flex-grow默认值是0
这个就是flex：1设置的那个属性，一般大家也就用这个属性另两个不是很常见。
flex-shrink默认值是1
当子元素宽度大于父元素宽度时才会用到这个属性。flex-shrink越大缩小的比例也就越大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.person {
width: 300px;
height: 200px;
background: #000;
display: flex;
}
.son1 {
background: pink;
width: 200px;
flex-shrink: 1;
background: pink;
}
.son2 {
width: 300px;
flex-shrink: 2;
background: red;
}
</style>
</head>
<body>
<div class="person">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
两个子盒子总共200+300=500，超出了父盒子500-300=200
先计算son1的宽度 200-200 * (200 * 1/(200 * 1+300 * 2)) = 150
son2宽度 300 - 200 * (300 * 2/(200 * 1+300 * 2)) = 150
总结：自身宽度 - 超出父元素宽度*（自身宽度乘以flex-shrink /（所有子元素宽度乘以flex-shrink之和））
flex-basis默认值是auto
他可以设置子元素在主轴方向上的初始大小就类似于直接设置width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.person {
width: 300px;
height: 200px;
background: #000;
display: flex;
}
.son1 {
flex-basis: 200px;
background: pink;
}
.son2 {
flex-basis: 100px;
background: red;
}
</style>
</head>
<body>
<div class="person">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
子元素常用的属性align-self
允许flex-item重载flex-container里定义的align-items的值。
align-self: auto | flex-start | flex-end | center | baseline | stretch
怪异盒模型
box-sizing:content-box/border-box/inherit
伪元素选择器
::after
::before
属性选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值为val的E元素 |
| E[att^=“val”] | 选择具有att属性且值以val开头的E元素 |
| E[att$=“val”] | 选择具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 选择具有att属性且值中含有val的E元素 |
结构伪类选择器
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 匹配指定类型E的第一个 |
| E:last-of-type | 匹配指定类型E的最后一个 |
| E:nth-of-type(n) | 匹配指定类型E的第n个 |
| 其中nth-child(n)和nth-of-type(n)的n可以是数字，关键字和公式 |
- 数字可以是1，2，3，4，5…
- 关键字：even是偶数 odd是奇数
- 公式：n是从0开始算的
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 5 10 15… |
| n+5 | 从第5个开始（包括第5个） |
| 5-n | 前5个（包含第五个） |
注意：E:nth-child(n)是先找到父元素中的第n个子元素，然后再看是不是E，如果不是那CSS样式就不生效了
而E:nth-of-type(n)是先把父元素中所有的E子元素都找出来（不是E的不看），开始排序找到第n个E然后改变CSS样式
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul>li {
height: 10px;
margin: 10px;
background: #000;
}
div {
height: 30px;
background: red;
}
p {
height: 40px;
background: pink;
}
/* 这个因为ul的第二个子元素不是li而是div所以样式不会生效也就没有绿色的条 */
ul>li:nth-child(2) {
background: green;
}
</style>
</head>
<body>
<ul>
<li></li>
<div>div</div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<p>p</p>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul>li {
height: 10px;
margin: 10px;
background: #000;
}
div {
height: 30px;
background: red;
}
p {
height: 40px;
background: pink;
}
/* 这个会找到ul中的第二个li然后变成绿色 */
ul>li:nth-of-type(2) {
background: green;
}
</style>
</head>
<body>
<ul>
<li></li>
<div>div</div>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<p>p</p>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2D转换（transform）
2D转换之移动translate
语法：
transform:translate(x,y);
transform:translateX(x);
transform:translateY(y);
重点：
- translate移动不会影响到其他元素
- translate中如果写百分比是相对于
自身元素的 - 对行内标签没有效果
- transform-origin:x y; 用来设置元素转换的中心点
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
background: red;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D转移之旋转rotate
语法：
transform:rotate(60deg)
重点：
- 角度为正是顺时针，负数是逆时针
- 默认的旋转中心是元素中心点
2D转换之缩放scale
语法：
transform:scale(x,y);
总结
当transform里边同时写了位移和其他属性时，一定要把位移translate放在最前边
3D转换
3D转换之移动translate3d
语法：
transform:translate3d(x,y,z);
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px);
透视perspective也称为视距（人眼到屏幕的距离）单位是px
为了产生3D的效果，就需要用到透视
注意：透视要写在被观察的父元素盒子上面
3D转换之旋转rotate3d
语法：
transform：rotateX(45deg);
transform：rotateY(45deg);
transform：rotateZ(45deg);
transform：rotate3d(x,y,z,deg); （了解即可，不咋用）其中想，x,y,z代表的是旋转轴的矢量，deg代表的是你想要旋转的角度
如何判断哪个旋转方向是正向（左手准则）：
3D呈现transform-style
| 属性值 | 解释 |
|---|---|
| flat | 默认值，子元素不开启3D空间 |
| preserve-3d | 子元素开启3D空间 |
- 代码要写给父元素，但是影响的是内部的子元素
总结
想要产生3D效果就要在父元素上加
perspective和transform-style
CSS3 calc 函数
该函数可以让css的属性值进行一些简单的数学运算(±*/)
例子：
height:calc(100vh - 44px)
移动端
移动端兼容性问题
- 媒体查询 @media
例子
@media all and (min-width:800px) and (orientation:landscape){
/* 满足横屏以及最小宽度为800px的条件应用里面的样式 */
body{
background:red;
}
}
@media only screen and (min-width: 960px) and (max-width:1200px){
/* 在计算机屏幕中宽度在[960px,1200px]区间会应用里面的样式 */
body{
background:#000;
}
}
@media only screen and (max-width: 960px){
/* 在计算机屏幕中宽度小于等于960px会应用里面的样式 */
body{
background:#000;
}
}
- 百分比布局
正常来说子元素写width：50%是相对于父元素内容来说的 也就是去除padding
但是如果子元素定位了 则width：50%是相对于父元素的内容加padding来说的
- 弹性盒模型
- rem
点透事件
先来看一段代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box {
position: relative;
}
#box1 {
position: absolute;
z-index: 1;
background: red;
width: 200px;
height: 200px;
}
#box2 {
background: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="boxparent">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.ontouchstart = function (e) {
console.log('box1被摸了');
box1.style.display = 'none';
};
box2.onclick = function () {
console.log('box2被点了');
}
</script>
</html>
在Google浏览器中用手机模拟器打开
此时点击一下这个红色区域,发现红色box1消失露出了底下绿色的box2，并且还触发了box2的点击事件
下面让我们分析一下代码流程
首先当手机点击移动端屏幕时，会触发两个事件一个是touch一个是click，但是touch会立即触发而click会有300ms的延迟才会触发。
- 触发touch事件后红色的box1盒子消失（display：none），使得绿色的box2暴露出来
- 经过300ms的延迟后，click事件也被触发了。但是此时刚才被点击的地方已经没有box1了，只剩下暴露出来的box2。所以系统就认为刚才点击的是box2，也就触发了box2的点击事件
如何解决点透事件
只需要在touchstart事件函数中加入e.preventDefault();来阻止默认行为就好
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box {
position: relative;
}
#box1 {
position: absolute;
z-index: 1;
background: red;
width: 200px;
height: 200px;
}
#box2 {
background: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="boxparent">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.ontouchstart = function (e) {
console.log('box1被摸了');
e.preventDefault();
box1.style.display = 'none';
};
box2.onclick = function () {
console.log('box2被点了');
}
</script>
</html>
移动端1px问题
px em rem区别
px
px就是比较固定的单位
em
em是相对于他自身当前font-size的大小而定。1em = 自身当前font-size
rem
rem是相对于html标签的font-size大小。1rem = html标签的font-size
rem原理
通过js查询当前屏幕宽度，来动态的设置html标签的font-size大小。以此来设置rem。
关于display,opacity,visibility的区别
-
是否占据原来位置
- display: none会使元素脱离文档流,不占据原来的空间。 - visibility: hidden和opacity: 0 虽然会使元素不可见,但是元素仍然占据原来的位置。 -
回流与重绘
- display:none使元素位置改变，会产生回流与渲染。 - visiblity:hidden与opacity:0使元素的属性发生改变，不会产生回流与渲染，会产生重绘。 -
株连性
- display: none,虽然被隐藏的子元素也会一起隐藏,并且当子元素设置display:block属性时并无效果。 - opacity:0也是一样的。当父级已经设置opacity:0后，子元素是基于父元素的opacity:0基础上的opacity值。无论子元素设置opacity为多大时均无效果。 - visibility:hidden就不一样了,我们将visibility的子元素设置为visibility:visibile时仍会起效果。 -
关于事件
- display:none属性使该元素无法再触发事件。 - visibility:hidden也无法触发事件。 - opacity: 0仍然可以触发事件。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
