css_day9

元素的显示与隐藏

1.display属性

            /* display: none; */
            /* 元素消失，不保留位置 */
            /* 工作中用的最多 */

            visibility: hidden;
            /* 元素隐藏，保留原来的位置 */

2.overflow的使用

			overflow: hidden;
            /* 超出隐藏 */
            overflow: scroll;
            /* 添加滚动条，不管有没有超出都会添加 */
            overflow: auto;
            /* 自适应，超出就添加滚动条，没超出就不添加 */

CSS用户界面样式

1.鼠标样式cursor

		div:first-child{
            cursor: default;
            /* 默认光标，小白箭头 */
        }
        div:nth-child(2){
            cursor: pointer;
            /* 点击光标 */
            /* 只是单纯修改了鼠标的样子，并没有实质的效果 */
        }
        div:nth-child(3){
            cursor: move;
            /* 移动光标 */
        }
        div:nth-child(4){
            cursor: wait;
            /* 载入光标 */
        }
        div:nth-child(5){
            cursor: not-allowed;
            /* 禁止光标 */
        }
        div:nth-child(6){
            cursor: text;
            /* 文本光标 */
        }
        div:nth-child(7){
            cursor: help;
            /* 帮助光标 */
        }

2.轮廓线outline

		input{
            /* outline-width: */
            /* outline-style:  */
            /* outline-color: red; */

            /* 虽然它有很多属性,但是我们都不在乎,因为我们只会清除 */
            outline: none;
        }

3.清除文本域的拖拽功能

		textarea{
            width: 500px;
            height: 500px;
            /* 清除文本域的拖拽功能 */
            resize: none;
            outline: none;
        }

4.vertical-align的使用

		/* 为什么图片底部会有空白间隙 */
        /* 因为图片与文字默认基线对齐 */
        /* 只要图片与文字不是基线对齐,那么底部的空白间隙就会消失 */
        img{
            vertical-align: baseline;
            /* 默认基线对齐 */
            vertical-align: top;
            vertical-align: bottom;
            vertical-align: middle;
        }

5.清除图片底部间隙

		/* 为什么图片底部会有空白间隙 */
        /* 因为:行内块与文字默认基线对齐 */
        /* 1.行内块 */
        /* 2.基线对齐 */
        img{
            /* vertical-align: middle; */

            display: block;
        }

6.文字超出使用省略符号

			/* 文本强制一行显示 */
            white-space: nowrap;

            /* 将超出的文字变成省略号 */
            text-overflow: ellipsis;
            /* 超出的内容先隐藏然后用省略号代替 */
            overflow: hidden;

7.三角形的画法

	div{
            width: 0px;
            height: 0px;
            border-width: 300px;
            border-style: solid;
            /* border-color: red yellow blue pink; */
            border-color: transparent transparent transparent pink;
            /* 上 右 下 左 */
        }

版心布局

		/* 所谓的版心:固定宽度,水平居中 */
        /* 版心的固定写法是将版心属性单独设置为一个类选择器 */
        .w{
            width: 1220px;
            margin: 0 auto;
        }