javascript 笔记
var name = 'Jack'
var describe = `${name} is a good boy.`
/*
插入 HTML
insertAdjcent('beforeend', '<h1>good</h1>')
class="input-task active" --> 这其实有两个类
s.classList.remove('active') --> 删除其中一个
*/
CSS
display
有的元素独占一行有的没有,为什么?
这个是因为 display 属性
block --> 独占一行 可以设置,宽,高
inline --> 只占 content 尺寸,不可以设置,宽,高。和别人挤在一起。
inline-block --> 表现为 inline 可以和别人挤在一起。对内表现为 block,可以设置,宽,高
盒模型
四个属性决定大小:
内容
padding
border-with border: 20px solid red;
margin
inline 元素没有盒模型
position
position:
static 默认 能拼接就拼接,不拼接就挤到第二行
relative E = MC2 把 2 上移动 top right
absolute --> 绝对定位,忽略其他所有的东西,往上浮动到 非 static 的元素
在 比如说一个 x button , 通过设置 top right
--> absolute 实际上是找一个非 static 元素作为参考
fixed top:0px right:0px
非 static 元素 可以根据 top:10px left right button 来设置位置,做出一些适当的偏移
非 static 元素可以用 z-index 属性来设置显示层次
z-index 解决两个元素重叠时候的宽高 0~100 屏幕的深度
span 标签什么意思? 就是一个没有任何属性的标签
div 分割的意思
overflow
overflow:hidden; 多余的部分隐藏起来
用这个做一个圆形的头像
visible 默认
hidden 隐藏多余的部分
auto 需要的时候加上滚动条
scroll 强制加滚动条,用不着也加上滚动条 不要用
盒模型相关的 CSS
border:
border-style:实线、虚线、打点
border-width:
border-color:
3 个属性可以简写为一句
border: 3px red solid;
border 的上下左右都可以设置 属性
border-top
border-top-width
border-top-style
border-top-color
margin,padding
margin-top
margin-bottom
margin-right
margin-left
三种缩写
margin: top right bottom left
margin:(top/bottom) (right/left)
margin:top (right/left) bottom
border-radius:设置导角
他也有三种缩写
top right left top
圆行头像:
width:50px;
height:50px;
border-radius:50%; 这个值时 圆角的半径, 数值百分比都是可以的
backgroud
background 相关的属性和缩写
background-color:#233;
background-image:url(bg.png);
background-repeat:no-repeat; 这个时在 web 早期,网络带宽小,一张图片是很多张图片一起拼起来的
background-attachment:fixed; 背景不随页面滚动
居中
居中的方法
block 元素居中
margin: 0 auto; 上下是 0 左右是 auto
inline inline-block 元素居中
text-align: center;
文本装饰 --> 超级连接
<a hred="www.baidu.com"></a>
test-decoration:
underline
overline
line-through
cursor: 鼠标移上去的光标
margin: 20px 0px
img --> inline 可以设置宽高
div {
outline:dashed red 1px;
这个是贴在画面上的不会改变盒子的大小
可以看到页面布局的样子
}