这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
Css
组成：
选择器、声明(属性:值)、多个声明组成的属于声明块
引入方式
内嵌、外联、内联 推荐外联
css如何工作的？
浏览器 加载html==解析html===创建dom树===加载css===解析css===将样式添加到dom节点===形成渲染树===渲染页面===展示页面
选择器 Selector
找出页面元素，赋予样式。
选择方法
1.按照标签名、类名、id(标签、class、id)
2.按照属性 (某些特征)
/**当一个html被禁用时**/
/**
<input type="text" disabled>
**/
[disabled]{
...
}
/**这时就直接作用到他的样式上**/
input[type="password"]{ /**只选择某值**/
...
}
a[href^="#"] /**^:href属性以什么内容开头就使用这个属性**/
a[href$=".jpg"] /**$: href属性以什么结尾就使用这个属性**/
3.按照dom树的位置(父子级、兄弟级)
伪类选择器
点击后，跳转后，划入后等等。(:hover,:focus,:active,:link)
结构伪类
第一个
:first-child
最后一个
:last-child
li:first-child{ /**选中第一个li**/
...
}
li:last-child{/**选中最后一个li**/
...
}
某个的标签可以去查文档了，都可以选择。
组合方式
li.text{} /**即是li 还要必须class名字是.text的元素才生效**/
li .text{} /** li的里面class为text的元素生效**/
li>.text{} /**li的子集中 class为text的元素生效**/
li~.text{} /**选择li后边元素中 class为text的元素生效**/
li+.text{} /** 选中li紧跟着后边的.text元素生效**/
选择器组
h1,h2{} /**h1和h2元素同时生效**/
颜色
rgb,hsl,颜色关键字
字体
font-family:字体一,字体二,字体三..，serif;
最后一个属性是字体族：
英文字体尽量写在中文前面，如果字体中没有某个字的字体，会向后读取。
如果非常想要使用某种字体，可以把字体放到服务器 通过url的方式进行加载
font{
font-family:"Megrim";
src:url(https://.... .woff2) format("woff2");
}
css权重
/** <article> <h1 class=”title"></h1> </article> **/
.title{}
article h1{}
id 权重 100
.伪类 10
标签 1
相同权重就会覆盖。
继承
他会继承他父级的样式，如果父级也没有，就再向上继承。
因为有一些值不可以继承，就可以使用 一些其他方法来显示继承
*{ box-sizing:inherit;} /** 让他所有的元素都设置为 box-sizing:inherit 这样他就会自动继承这个元素 **/
当一个元素不可继承，或者没有进行设置值，他就会使用初始值（initial）
background:initial;
css求值过程
首先筛选出符合我这个页面的所有样式
根据元素、类等一系列内容筛选出能用的类，然后相同元素冲突时，根据来源，特性，权重值找出最大的那个 叫层叠值(当层叠值为空时，就用继承或初始值)。
经过上述步骤，一定会拿到一个值，这个值要经过计算或者转换，得到计算值，然后把计算值的相对值转换为绝对值，如果有部分不可用的值进行处理比如 max-width 和 width 冲突时，判断是否满足max-width，产生实际值。
css布局方式
常规流
块级
盒模型
如果容器设置高度的百分比， 必须是容器的父级有指定高度时才生效
margin垂直方向上会合并，取最大值
border-box 是指单个div 所占的 border和padding 都算在宽度中
针对超出部分：overflow
visible : 超出也展示
hidden:溢出隐藏
scroll:超出给滚动条
行级
块级和行级的区别
1.块级不和其他盒子并排摆放 行级和其他行级盒子一起放在一起，形成一行或者多行
2.适用所有的盒模型属性 盒模型中的宽高不适用
表格布局
flexBox
Grid布局
块级排版上下文
某些容器会创建一个BFC
根元素
浮动，绝对定位，inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display:flow-root;
内部规则
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会和外面的合并
BFC不会和浮动元素重叠
行级排版上下文
只包含行级盒子的容器会创建一个IFC，IFC内的排版规则：
盒子再一行内水平摆放
• 一行放不下时，换行显示
• text-align决定一行内盒子的水平对其
• vartical-align 决定一个盒子再行内的垂直对其
• 避开浮动元素
Flex box
一种新的排版上下文，它可以控制子集盒子的
摆放流向 默认是从左到右
• 摆放顺序 （主轴 侧轴
• 盒子宽度高度
• 水平垂直方向的对齐
• 是否允许折行
主轴
侧轴
如果侧轴设置为 stretch 则会把高度拉到相同的值。
flex-grow 是根据比例去分取剩余空间
flex-grow:2 //这个就只占 1/3
flex-grow:4 //这个占用 2/3 如果再往后加 就是大家一起分剩余的部分
flex-shrink：根据比例去收缩空间
flex: grow shrink basis;
Grid布局
发现很多布局是二维布局，flex是单一布局的方式，grid布局属于二维的布局
grid-template-columns :行方向上划分
grid-template-rows: 列上划分
<!DOCTYPE html>
<!-- <html lang="zh"> -->
<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>
.us{
display: grid;
grid-template-columns: 100px 100px 1fr;
/* fr代表 剩下的1份 */
grid-template-rows: 100px 1fr;
width: 500px;
height: 500px;
background: red;
}
.us>div{ background: red; border: 1px solid #ccc;}
</style>
</head>
<body>
<div class="us">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
标记 grid line 网格线
11 33
grid-row-start:横开始
grid-column-start:纵开始
grid-row-end:横结束
grid-column-end:纵结束位置
grid-area:1/1/3/3
浮动
略，竞争力被 flex 和 grid比下去了。
绝对定位
略..
js
js编写原则
尽量不直接操作style属性，能够通过加类名解决的，尽量加类名解决，如果能用纯css解决，就用纯css解决。（优化代码操作，让团队开发高效。
css搞定切换案例
<!DOCTYPE html>
<html lang="zh">
<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: 100px; height: 100px; background: red;}
#males:checked+ .box{ background: pink;}
#males:checked+ .box .s2{ display: none;}
#males:checked+ .box .s1{ display: block;}
#males+ .box .s1{ display: none;}
#males{ display: none;}
#male{display: none;}
</style>
</head>
<body>
<input type="radio" id="male" name="on" checked="false">
<input type="radio" id="males" name="on" checked="false">
<div class="box">
<label for="male" class="s1">白</label>
<label for="males" class="s2">黑</label>
</div>
</body>
</html>
尽量避免不必要的js直接操作样式，可以用class表示状态，纯展示类交互寻求0js方案
组件封装
封装的特性：封装性，正确性，拓展性，复用性
实现步骤：结构设计，展现效果，行为设计
重构：插件化，模板化，抽象化。
弄了一下午，照猫画虎写了个差不多的
案例
<!DOCTYPE html>
<html lang="zh">
<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: 500px;
height: 300px;
}
.box>div {
height: 300px;
overflow: hidden;
}
div>img {
height: 100%;
}
.disb {
display: block;
animation: as 0.5s;
}
.disn {
display: none;
}
@keyframes as {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box">
<div class="disb">
<img src="https://img0.baidu.com/it/u=1705694933,4002952892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
alt="">
</div>
<div class="disn">
<img src="https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"
alt="">
</div>
<div class="disn">
<img src="https://img0.baidu.com/it/u=3156137851,1307209439&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
alt="">
</div>
<div class="disn">
<img src="https://img0.baidu.com/it/u=1472391233,99561733&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
alt="">
</div>
</div>
<div>
<div class="ros">
<
</div>
<div class="ros">
>
</div>
</div>
<script>
class Lbt {
constructor(dom, time, domArr) {
this.index = 0
this.dom = dom
this.time = time
this.domArr = domArr
this.setInterval = null
}
//轮播图启动
gorun_lb() {
for (let i = 0; i < this.dom.length; i++) {
this.dom[i].className = "disn"
}
this.dom[this.index].className = "disb"
}
//index自增
gorun_addIndex() {
this.index++
this.index = this.index == this.dom.length ? 0 : this.index
}
//index自减
gorun_redIndex() {
this.index--
this.index = this.index == -1 ? this.dom.length - 1 : this.index
}
//启动轮播图
gorun() {
this.gorun_addIndex()
this.gorun_lb()
}
//删除计时器
clearInt() {
clearInterval(this.setInterval)
}
//清除计时器并重新赋值计时器
go_last() {
this.clearInt()
this.gorun_redIndex()
this.gorun_lb()
this.Interval()
}
//清除计时器并重新赋值计时器
go_next() {
this.clearInt()
this.gorun_addIndex()
this.gorun_lb()
this.Interval()
}
Interval() {
return this.setInterval = setInterval(() => {
this.gorun()
}, this.time)
}
render(...args) {
if (args.indexOf("lbt") != -1) {
this.Interval()
}
if (args.indexOf("l/r") != -1) {
console.log(this.domArr)
this.domArr[0].addEventListener("click", this.go_last.bind(this))
this.domArr[1].addEventListener("click", this.go_next.bind(this))
}
}
}
let u = document.querySelectorAll(".box>div")
let ros = document.querySelectorAll(".ros")
let lbt = new Lbt(u, 1500,ros)
lbt.render("lbt","l/r")
</script>
</body>
</html>
