CSS 快速复习小抄

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;
        这个是贴在画面上的不会改变盒子的大小
        可以看到页面布局的样子
	}