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