目录
document.getElementById/Name()document.getElementByClassName()
document.getElementsByTagName()
element.getElementsByTagName()
element/document.querySelector()返回第一个
element/document.querySelectorAll()返回数组
事件委托/代理: 就近委托，事件冒泡，子元素的事件绑定到父元素上
行内元素->display:block->margin：auto
网格display: grid;+justify-content:
表格display:table+ .cell { display: table-cell; text-align: center; /* 水平居中 */
单行文本 .container {height: ==line-height
display:flex+align-items: center;
position: absolute;+top: 50%;+transform: translate(-50%, -50%);
网格display: grid+align-items: center;
表格display:table-cell+vertical-align: middle
绝对定位position: absolute;+top+left: 50%;+transform:translate(-50%)
flex:align-items/justify-content:center
网格display: grid+place-items: center;
表格display:table-cell+vertical-align: middle+text-align: center
border: 50px solid transparent;
半圆：border-top-left/right-radius: 50px;
清除浮动：父高度塌陷+非浮动元素被浮动覆盖
B.浮动标签在段落前面：浮动元素在上行，由非浮动段落元素撑起高度
C.浮动元素周围的元素clear+父元素结束标签之前插入clear的空白块级元素
单行：不换行white-space:nowrap、省略text-overflow:ellipsis
多行：弹性伸缩盒display: -webkit-box、-webkit-box-orient方向、-webkit-line-clamp行数
获取DOM节点
返回的 HTML 集合是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用
document.getElementById/Name()
document.getElementByClassName()
document.getElementsByTagName()
element.getElementsByTagName()
element/document.querySelector()返回第一个
element/document.querySelectorAll()返回数组
var el = document.querySelector(".myclass");
布局
header，content，sider
<!DOCTYPE html>
<html lang="en">
<head>
<title>flex布局</title>
<style>
.header{
height:50px;
width:100%;
background-color: #ddd;
}
.content{
flex:1;
height:400px;
background-color: #eee;
}
.sider{
width:100px;
background-color: #ccc;
}
.div{
display:flex;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="div">
<div class="sider">sider</div>
<div class="content">content</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>flex布局</title>
<style>
.div{
flex:1;
}
.header{
height:50px;
background-color: #ddd;
}
.content{
height:400px;
background-color: #eee;
}
.sider{
width:100px;
background-color: #ccc;
}
.main{
display:flex;
flex-direction:cow;
}
</style>
</head>
<body>
<div class="main">
<div class="sider">sider</div>
<div class="div">
<div class="header">header</div>
<div class="content">content</div>
</div>
</div>
</body>
</html>三栏布局 ：左右固定，中间自适应（⭐手写）
flex布局（强烈推荐）
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，后两个属性可省略
flex:1=flex-grow 1 放大
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
- 实现方法
左右两栏设置宽度，中间栏设置 flex:1,占满余下部分
<!DOCTYPE html>
<html lang="en">
<head>
<title>flex布局</title>
<style>
.main{
height: 60px;
display: flex;
}
.left,
.right{
height: 100%;
width: 200px;
background-color: #ccc;
}
.content{
flex: 1;
background-color: #eee;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
</body>
</html>grid布局
- 基础巩固
grid：CSS 所有网格容器的简写属性
grid-template-rows / grid-template-columns ：设置列和行的尺寸。
- 实现方法
左右两栏设置宽度，中间栏宽度auto
<!DOCTYPE html>
<html lang="en">
<head>
<title>grid布局</title>
<style>
body {
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 60px;
}
.left,
.right {
background-color: #ccc;
}
.content {
background-color: #eee;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</body>
</html>margin负值法
- 原理解释
- 实现方法：
左右两栏均左浮动，外层盒子左浮动，
中间栏设置左右两栏宽度的margin值，
左栏设置margin -100%（向左移动整个屏幕的距离），
右栏设置 margin值为负的盒子宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<title>margin负值</title>
<style>
.left,
.right {
float: left;
width: 200px;
height: 60px;
background-color: #eee;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
width: 100%;
float: left;
height: 60px;
}
.content {
height: 60px;
margin: 0 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>自身浮动
<!DOCTYPE html>
<html lang="en">
<head>
<title>自身浮动法</title>
<style>
.left,
.right {
height: 60px;
width: 200px;
background-color: #eee;
}
.left {
float: left;
}
.right {
float: right;
}
.content{
height: 60px;
background-color: #ccc;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>绝对定位
左右两栏绝对定位，分别定位到盒子的两侧，中间栏采用margin值撑开盒子
注意：采用定位时，浏览器默认的padding或margin值会影响布局，需要初始化样式 margin:0;padding：0；
圣杯布局 （⭐手写）
两边固定，中间自适应，且中间栏放在文档流的前面，率先渲染
基本的dom结构（注意center需要排在第一个位置）
<div class="header">header</div>
<div class="container">
<div class="center column">center</div>
<div class="left column" >left</div>
<div class="right column" >right</div>
</div>
<div class="footer">footer</div>
或者
<section class="container">
<article class="center"><br /><br /><br /></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section><br> 标签插入一个简单的换行符
- 定位+浮动
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
border: 1px solid black;
/* 防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置 */
overflow: hidden;
padding: 0px 100px;
min-width: 100px;
}
.left {
background-color: greenyellow;
/* 保证之后的"margin-left"属性可以将自身拉到上一行 */
float: left;
/* 固定宽度 */
width: 100px;
/* 将元素向左移动属性值的单位，100%相对于父容器计算 */
margin-left: -100%;
/* 相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域 */
position: relative;
/* 自身的宽度，刚好进入容器的"padding-left"区域 */
left: -100px;
}
.center {
background-color: darkorange;
float: left;
width: 100%;
}
.right {
background-color: darkgreen;
float: left;
width: 100px;
margin-left: -100px;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<section class="container">
<article class="center"><br /><br /><br /></article>
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
</section>
</body>
</html>magin-left:-100%
这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。
magin-left：-100px
margin负值会改变元素占据的空间，及移到父元素的最左边，并且该子元素width即为100px
HTML
事件委托/代理: 就近委托，事件冒泡，子元素的事件绑定到父元素上
event.target：当前触发事件的元素
event.currentTarget：绑定处理函数的元素
只有当事件处理函数绑定在自身的时候，target才会和currentTarget一样
<ul>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>
<script type="text/javascript">
document.querySelector('ul').onclick=event=>{
event.target.innerText+='.'
}
</script>好处：子元素增不用绑定，删不用解绑
缺点：不支持不冒泡的事件、层级过多可能会被阻止
设计模式
发布订阅模式（class）：中心化管理
完成"EventEmitter"类实现发布订阅模式。
1. 同一名称事件可能有多个不同的执行函数：构造函数中创建”events“对象变量存放所有的事件
2. 通过"on"函数添加事件：订阅事件。当总事件中不存在此事件时创建新的事件数组，当存在时将”fn“函数添加在该事件对应数组中
3. 通过"emit"函数触发事件：发布事件，遍历该事件下的函数数组并全部执行
class EventEmitter {
constructor() {
this.events = {}//二维，events' funcs
}
//添加事件：订阅事件
on(event, fn) {
if(!this.events[event]) {//当总事件中不存在此事件时创建新的事件数组
this.events[event] = [fn]
} else { //当存在时将”fn“函数添加在该事件对应数组中
this.events[event].push(fn)
}
}
//触发事件：发布事件
emit(event) {
if(this.events[event]) {//遍历该事件下的函数数组并全部执行
this.events[event].forEach(callback => callback())
}
}
}
观察者模式（class）：发布订阅模式的子类
Redux 和 Vuex 状态管理库是观察者模式
"Observerd"类实现观察者模式。要求如下：
"Observer"为观察者，"Observerd"为被观察者
- 被观察者构造函数声明三个属性分别为"name"用于保存被观察者姓名、"state"用于保存被观察者状态、"observers"用于保存观察者们
- 被观察者创建"setObserver"函数，用于保存观察者们，该函数通过数组的push函数将观察者参数传入"observers"数组中
- 被观察者创建"setState"函数，设置该观察者"state"并且通知所有观察者，该函数首先通过参数修改被观察者的"state"属性，然后通过遍历"observers"数组分别调用各个观察者的"update"函数并且将该被观察者作为参数传入
- 观察者创建"update"函数，用于被观察者进行消息通知，该函数需要打印（console.log）数据，数据格式为：小明正在走路。其中"小明"为被观察者的"name"属性，"走路"为被观察者的"state"属性
//被观察者
class Observerd {
constructor(name) {
this.name = name
this.state = '走路'
this.observers = []
}
setObserver(observer) {
this.observers.push(observer)
}
setState(state) {
this.state = state
this.observers.forEach(observer => observer.update(this))
}
}
//观察者
class Observer {
constructor() {
}
update(observerd) {
console.log(observerd.name + '正在' + observerd.state)
}
}
让空格和换行正常显示
br插入换行符
普通文本标签会无视换行，多个空格合并成一个
pre 标签定义预格式化的文本
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
<p>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</p>CSS
相对于父容器居中
水平居中
块元素margin：auto
行内元素->display:block->margin：auto
display:flex+justify-content:center
网格display: grid;+justify-content:
不用怀疑写错，grid和flex一样拥有属性justify-content
表格display:table+ .cell { display: table-cell; text-align: center; /* 水平居中 */
文本text-align：center（除了p）
垂直居中
块级元素会占据其容器的整个宽度，因此在水平方向上，可以margin：auto水平居中。
垂直方向上，块级元素的高度通常是由其内容决定的，而不会自动占满整个容器高度，因此margin：auto不能垂直居中。
单行文本 .container {height: ==line-height
<style>
.container {
height: 200px; /* 容器的高度 */
line-height: 200px; /* 文本的行高等于容器的高度，实现垂直居中 */
border: 1px solid #ccc; /* 仅用于示例显示边框 */
}
</style>
</head>
<body>
<div class="container">
单行文本垂直居中
</div>
</body>display:flex+align-items: center;
position: absolute;+top: 50%;+transform: translate(-50%, -50%);
网格display: grid+align-items: center;
Grid 布局通常用于整个页面布局，更适合页面级的结构。
Table 布局更适合表格数据的显示，它具有表格的语义。
支持程度：
Grid 布局在现代浏览器中有更广泛的支持，适用于大多数情况。
Table 布局在某些情况下可能需要处理一些陈旧浏览器的兼容性问题。
表格display:table-cell+vertical-align: middle
注意区分，img 的vertical-align：图片或其他内联元素在文本基线上的垂直位置。
<style>
.centered-container {
display: table;
width: 100%;
height: 100vh;
}
.centered-element {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
}
.content {
background-color: lightblue;
}
</style>
<title>Vertical Centering with Table Layout</title>
</head>
<body>
<div class="centered-container">
<div class="centered-element">
<div class="content">
<p>This content is vertically centered using table layout.</p>
</div>
</div>
</div>
</body>| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
<table border="1" summary="表格内容的摘要">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
summary 在 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。
水平垂直居中
绝对定位position: absolute;+top+left: 50%;+transform:translate(-50%)
flex:align-items/justify-content:center
网格display: grid+place-items: center;
<style>
.container {
display: grid;
place-items: center;
width: 300px;
height: 300px;
border: 1px solid #ccc; /* 仅用于示例显示边框 */
}
</style>
</head>
<body>
<div class="container">
<div>水平垂直居中</div>
</div>表格display:table-cell+vertical-align: middle+text-align: center
梯形，三角形，扇形，圆形，半圆
/* HTML CODE:
<div class="square">正方形</div>
*/
/* CSS CODE */
.square {
width: 100px;
height: 100px;
border-top: 50px solid red;<!--solid: 定义实线边框-->
border-right: 50px solid green;
border-bottom: 50px solid orangered;
border-left: 50px solid blue;
}
关键：
border: 50px solid transparent;
border-color设置为【透明】
border-radius: 50%;
从左上角顺时针到左下角
border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：
border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角
- margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
- margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px
半圆：border-top-left/right-radius: 50px;
详情：
CSS实现各种图形 -- 梯形，三角形，扇形，圆形，半圆 - 掘金
清除浮动：父高度塌陷+非浮动元素被浮动覆盖
<div class="topDiv clearfix">
<div class="textDiv">...</div>
<div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>
.topDiv {
width: 500px;
border: 2px solid black;
}
.floatDiv {
width: 100px;
height: 100px;
border: 2px dotted red;
color: red;
margin: 4px;
float: left;
}
.bottomDiv {
width: 500px;
height: 100px;
margin: 5px 0;
border: 2px dotted black;
}
.textDiv {
color: blue;
border: 2px solid blue;
}clear：clearfix原理
float一样对应的值（left、right、none、inherit）+both
指定段落的左侧或右侧不允许浮动的元素：浮动元素换行
A.浮动标签在段落后面：不能撑起父元素高度
.textDiv的位置先确定了，于是浮动元素就紧接着.textDiv下方渲染在父元素的左侧。然而，父元素的高度并没有被撑起来，没有将浮动影响“内化”，导致浮动影响到了接下来的元素排版
<div class="topDiv">
<div class="textDiv">...</div>
<div class="floatDiv">float left</div>
</div>
<div class="bottomDiv">...</div>
B.浮动标签在段落前面：浮动元素在上行，由非浮动段落元素撑起高度
.textDiv {
color: blue;
border: 2px solid blue;
clear: left;
}
C.浮动元素周围的元素clear+父元素结束标签之前插入clear的空白块级元素
a.元素
<div class="topDiv">
<div class="textDiv">...</div>
<div class="floatDiv">float left</div>
<div class="blankDiv"></div>
</div>
<div class="bottomDiv">...</div>
...
.blankDiv {
clear: left;
}
.textDiv {
clear: both;
}
b.:after伪元素
在.topDiv的div上再添加一个clearfix类
clear该伪元素的display值为block，即，它是一个不可见的块级元素
（有的地方使用table，因为table也是一个块级元素
.clearfix:after {
content: '';
display: block;
clear: both;
}溢出转省略
单行多行：隐藏overflow: hidden;
单行：不换行white-space:nowrap、省略text-overflow:ellipsis
元素内的空白处理方法：white-space:nowrap; 文本不进行换行；默认值normal
overflow: hidden;
text-overflow:ellipsis; //ellipsis;省略
white-space: nowrap; //nowrap 不换行
多行：弹性伸缩盒display: -webkit-box、-webkit-box-orient方向、-webkit-line-clamp行数
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
IE不兼容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.text2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
</style>
</head>
<body>
<div class="text2">
这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
</div>
</body>
</html>
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
