html与css | 青训营笔记

html与css | 青训营笔记 这是我参与「第四届青训营 」笔记创作活动的的第1天

1. 锚点 在html中添加锚点

    <ul>
        <li>
            <a href="#a">京东秒杀</a>
        </li>
        <li>
            <a href="#b">双11</a>
        </li>
        
    </ul>
    <div id="a">
        京东秒杀
    </div>
    <div id="b">
        双11
    </div>
    

将a链接绑定想要跳转的id即可。

2. 精灵图

为了节省空间，图片有时会合成一张如：

此时如果想要获取特定位置图片就要通过css设置特定的background-position位置。

3. 通过border实现三角形

将div宽高设置为0，将border的一些边设置为透明即可，如：

.box1{
            width: 0;
            height: 0;
            border-top:10px solid turquoise;
            border-left:10px solid transparent;
            border-right:10px solid transparent;
            border-bottom:10px solid transparent;
        }

4. 手风琴

通过html,css实现简单的手风琴效果。 与锚点类似，先将content设置为none，将锚点与content绑定，当点击了锚点，就会给content添加了一个伪类:target，再将content设置为block即可。

5. 溢出

当文本内容溢出时可以通过white-space属性设置样式
noewrap:不换行
pre:显示空格，回车，不换行
pre-wrap:显示空格，回车，换行
pre-line:显示回车，不显示空格，换行

.box{
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;    /*省略*/
            margin: 0 auto;
        }

通过与overflow:hidden与text-overflow:ellipsis搭配实现当文本溢出时用省略号替代的功能。

6. 字段集

<fieldset>
        <legend>
            性别
        </legend>
        <input type="radio" name="a">男
        <input type="radio" name="a">女
    </fieldset>

fieldset{
            width: 300px;
            border: 3px solid aquamarine; 
        }
        legend{
            text-align: center;
            color: antiquewhite;
        }

7. 怪异盒模型

怪异盒模型特点就是设置宽高后就不会被之后设置的border之类的而改变大小。 box-sizing: border-box;
通过怪异盒设置的高宽实际为border+padding+content。