1.选择器、继承
1.选择器
<!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>
/* 后代选择器 */
.home span {
color: red;
font-size: 80px;
}
/* .home的子代的span元素设置一个背景 */
.home > span {
background-color: green;
font-size: 20px ;
}
.home .home-item{
font-weight: 900;
background-color: blue;
}
.home > div{
/* background-color: #fff200; */
}
</style>
</head>
<body>
<div class="home">
<span>啦啦啦啦</span>
<div class="box">
<p>我是p元素</p>
<span class="home-item">呵呵呵呵</span>
</div>
<div class="content">
<div class="desc">
<p>
<span class="home-item">哈哈哈哈</span>
</p>
</div>
</div>
</div>
<!-- 不希望被选中 -->
<span>嘻嘻嘻</span>
<div>
<span>嘿嘿嘿</span>
</div>
</body>
</html>a b
a > b
diff ： 后代 - 子代
2. 兄弟
<!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>
.a + .b{
font-size: 70px;
}
.a ~ .b {
background-color: red;
}
</style>
</head>
<body>
<div class="home">
<div>叽叽叽叽0</div>
<div class="a">aaa1</div>
<div class="b">aaa2</div>
<div class="b">aaa3</div>
<p class="d"></p>
<div class="e">aaa4</div>
<div class="f">aaa5</div>
</div>
</body>
</html>效果：
+是临近，~是全部相邻
3 交集并集
<!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.c1{
font-size: 70px;
}
div,c2{
background-color: red;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
<p class="box">我是p元素</p>
<div class="c1">我是c1</div>
<div class="c2">我是c2</div>
</body>
</html>效果：
结论：
a b { css} &&关系 --------- a,b{css } || 关系
4.继承计算
ABCD : 内联+id+类+标签 = （X1），（x），（y），（z）
<!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.box {
color: red !important; /* 10000 */
}
/* id选择器: 100 */
#main {
color: orange;
}
/* 类选择器: 10 */
.box {
color: blue;
}
/* 元素选择器: 1 */
div {
color: purple;
}
/* 通配选择器: 0 */
* {
color: yellow;
}
</style>
</head>
<body>
<!-- 内联样式: 1000 -->
<div id="main" class="box one two" style="color: blue;">我是div元素</div>
</body>
</html>、
4.元素隐藏
4.1 display:none
将元素设置为display:none后，元素在页面上将彻底消失
元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
消失后，自身绑定的事件不会触发，也不会有过渡效果
特点：元素不可见，不占据空间，无法响应点击事件
4.2 visibility为hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法
从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘
4.3 opacity
opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的
4.4 height width=0
不占用、不存在
2盒模型
1.上下margin传递
<!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>
.box {
width: 300px;
height: 300px;
background-color: #f00;
/* border: 1px solid rgba(0,0,0,0); */
overflow: auto;
}
.container {
width: 100px;
height: 100px;
background-color: #0f0;
/* 左右是不会传递 */
/* margin-left: 30px; */
margin: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="container"></div>
</div>
</body>
</html>解决方法：
BFC：overflow:auto;
2.margin上下折叠
中间只有10px，
<!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>
.box1 {
height: 100px;
background-color: #f00;
margin-bottom: 5px;
}
.box2 {
height: 100px;
background-color: #0f0;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>.
上下只取最大的那个！
3.BFC避免意外的margin重叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
.h{
margin: 150px;
}
</style>
</head>
<body>
<p>Haha</p>
<div class="wrap">
<p class="h">Hehe</p>
</div>
</body>
</html> 可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠
效果：
4.BFC清除浮动
可以让变成2个bfc，互不干扰！
3. css3新特性总结 ：
3.1 transition、animation动画
transition ：
transition: CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)animation :
// 语法
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），
是否反向播放动画（默认normal），是否暂停动画（默认running）
// demo1
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;
// demo2
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;
// demo3
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;
还有一个重要属性：用来指定在动画执行之前和之后如何给动画的目标应用样式。
animation-fill-mode: none | forwards | backwards | both;
/*
动画分为 初始状态 等待期 动画执行期 完成期 四个阶段。
none 表示 等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响
forwards 表示等待期保持初始样式，完成期间保持最后一帧样式
backwards 表示等待期为第一帧样式，完成期跳转为初始样式
both 表示 等待期样式为第一帧样式，完成期保持最后一帧样式
*/
//参考：https://segmentfault.com/q/1010000003867335coderwhy样例：
<!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>
.box {
width: 200px;
height: 100px;
background-color: orange;
/* box要执行moveAnim的动画 */
animation-name: moveAnim;
animation-duration: 3s;
animation-timing-function: ease-in-out;
/* 其他属性: */
/* 动画执行的次数 */
/* animation-delay: 2s; */
/* animation-iteration-count: 2; */
/* animation-direction: reverse; */
/* 元素停留在动画的哪一个位置 */
/* animation-fill-mode: forwards; */
/* js动态修改 */
/* animation-play-state: paused; */
animation: moveAnim 4s linear 1s 2 normal forwards, ;
}
@keyframes moveAnim {
0% {
transform: translate(0, 0) scale(0.5, 0.5);
}
33% {
transform: translate(0, 200px) scale(1.2, 1.2);
}
66% {
transform: translate(400px, 200px) scale(1, 1);
}
100% {
transform: translate(400px, 0) scale(0.5, 0.5);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>3.2 transform:
ransform-origin：转换元素的位置（围绕那个点进行转换,默认中心）。默认 x,y,z ： 50%,50%,0 对应 left, top
缩放 scale
位移 translate
旋转 rotate
倾斜 skew
transform: rotate(30deg);
transform: translate(30px, 30px);
transform: scale(.8);
transform: skew(10deg, 10deg);
transform-origin: left top; 左上（默认中心）【改变元素变形的原点】
deg(Degress度)3.3 flex:
网格布局：
1 主轴、垂直还是水平
2 换行
3 对其方式- 1主
2交叉
4 多轴对其
主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;
换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
justify-content: flex-start | flex-end | center | space-between | space-around;
交叉轴对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 第一行文字的基线对齐
align-items: stretch | flex-start | flex-end | center | baseline;
多根轴线对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
属性：
顺序：数值越小越靠前，默认为0
order: <number>;
放大比例：默认为0，如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推
flex-grow: <number>;
缩小比例：默认为1，如果空间不足则会缩小，值为0不缩小
flex-shrink: <number>;
项目自身大小：默认auto，为原来的大小，可设置固定值 50px/50%
flex-basis: <length> | auto;
flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
项目自身对齐：继承父元素（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 基线对齐 | 拉伸对齐
align-self: auto | flex-start | flex-end | center | baseline | stretch;4.面试常见问题汇总：
4.1 图片为什么有左右上下间隙,怎么去除：
原因：
- 左右：因为img是
inline-block行内块元素，行内元素之间有『换行（回车），空格，tab』时会产生左右间隙 - 上下：行内元素默认与父容器基线对齐，字体有一个基线，而基线与父容器底部有一定间隙，所以上下图片间有间隙
解决办法：
- 移除上下间隙：
-
- img本身设置 display: block;
- 父元素设置 font-size: 0; （基线与字体大小有关，字体为零，基线间就没距离了）
- img本身设置 vertical-align: bottom;（让inline-block的img与每行的底部对齐）
- 移除左右间距：
-
- 行内元素间不要有换行，连成一行写消除间隙
- 第一行结尾写上 <!-- ，第二行开头跟上 --> 。即利用注释消除间距
- 父元素 font-size设置
4.2 BFC
- 触发条件
-
- 根元素，即 HTML 元素
- float: left | right
- position: absolute | fixed
- display: inline-block | table-cell | flex | inline-flex
- overflow: hidden | auto | scroll
- 1 清除浮动：
-
- 子浮动，父overflow：hidden（缺点：阴影和下拉菜单）
- 2 div垂直方向margin上下合并：
-
- 其中一个包div，设置overflow：hidden
- div垂直方向
- 3 margin内外合并：
-
- 父容器1px透明上边框
- 父容器overflow: hidden
- 4 右侧div自适应：左边浮动，右边设置overflow：hidden
4.3 隐藏元素区别 ：
display none visibility: hidden opacity=0 ?
1.不占空间 、没了 回流+重绘
2.占空间 不可点击 重绘
3. 占据空间，可以点击）性能高 只让他透明，啥也不懂
4.4浏览器如何解析css选择器
从右向左，提高查找效率。（div p em）
- 如果从左到右，有无数多个div都得向下查找，效率低
- 反之，只有当当前元素是em时，才会向上查找，效率高
4.5 回流重绘？
4.5.1 什么是？
元素的dom的大小、位置变了，browser重新渲染：
1：添加或删除可见的DOM元素、元素的位置发生变化、尺寸发生变化、内容发生变化、页面一开始渲染的时候（这避免不了、浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
2：获取一些特定属性的值：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
原因-----这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。除此还包括 getComputedStyle 方法，原理是一样的
2.不脱离文档，只变：样式、色彩，重画就行：
触发回流一定会触发重绘：可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）
颜色的修改、文本方向的改变、阴影的修改、背景的改变
4.5.2 怎么解决：
- 如果需要设置动画效果，最好将元素脱离正常的文档流。
- 避免使用CSS表达式（例如：calc()）。
- 频繁操作样式，最好将样式列表定义为class并一次性更改class属性。
4.6 怎么画三角形？？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
border: 100px solid ;
border-color: red green yellow gray;
/* border-color:transparent transparent red */
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果：
要一个：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 0px;
height: 0px;
border: 100px solid ;
border-color: red green yellow gray;
border-color:transparent transparent red
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果：
4.7 《12px的怎么办？
<!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: 300px;
height: 30px;
margin-bottom: 5px;
background: rgb(206, 151, 151);
}
.box1 {
font-size: 12px;
}
.box2 {
font-size: 10px;
/* transform: scale(0.93333);
transform-origin: 0 0;
white-space: nowrap; */
-webkit-transform: scale(0.90);
}
</style>
</head>
<body>
<div class="box1">我是正常的12px的文字大小 Hello world!</div>
<div class="box1">我是正常的12px的文字大小 Hello world!</div>
<div class="box2">我是正常的10px的文字大小 Hello world!</div>
<div class="box2">我是正常的10px的文字大小 Hello world!</div>
</body>
</html>
效果：
4.7 如何文字的溢出部分给他略？
|阿三地方了爱上了腹肌了老师阿斯蒂芬地方阿斯蒂放假啊时间饭墙我奥斯卡地方....|
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.text1 {
width: 100%;
overflow: hidden;
text-overflow:clip;
white-space: nowrap;
}
</style>
<p class="text1">
<b>杨肃观</b>我建超世志，必至无上道。五辅大学士杨远之子，外号「风流司郎中」，少时代父出家，少林天绝僧关门弟子，十八岁赴京赶考，官拜兵部职方司郎中，乃是柳昂天手下两大将之一。外貌俊美，多智善谋，再加文武全才，是各朝各代中的政治菁英典范。天绝唯一弟子，天生战略家，客栈大掌柜，大佛国创始人，也是真正的枭雄之辈。正统朝创建者之一。英雄志中最让人看不透的一个人。实际是正统朝真正的主人。以一人之身，承托整个正统朝。他不是卢云，不会纠结于什么才是对错之分的公理正道；他不是秦仲海，不会一怒揭竿而起、牵动千万黎民之恨后转身遁逃；他不是伍定远，不会困惑于苍生和个人恩怨而茫然无措；他是杨肃观，一个灭世又济世的掌控者；敢于把理想付诸实际的实干家，倩兮口中的真正英雄。顾嗣源死后，与顾倩兮成亲。与怒苍交战难解难分。习成其师天绝神僧毕生摸索完善的少林传说阵法——天决，在少林与怒苍第三战中手持神剑擒龙，用六道轮回先后打败宁不凡的仁剑和秦仲海，正统朝秘密机构“客栈”创始人。客栈的宗旨：围堵勇剑、守护魔刀、遮蔽圣光。“罪”与“罚”，愿天地罪孽尽加于吾身的情怀，谁能懂？
</p>
</body>
</html>效果>>>》》》》
4.7 移动端怎么适配？
1.分情况讨论：
扫一扫
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
