css高级技巧

元素 显示和隐藏

display：none隐藏对象
display：block显示元素
隐藏后不有原来位置

visibility：visible元素可视
visibility：hidden元素隐藏
隐藏后继续占有原来位置

overflow：visible不剪切内容也不添加滚动条
overflow：hidden溢出隐藏
overflow：scroll溢出显示滚动条，不溢出也显示滚动条
overlow：auto溢出显示滚动条，不溢出不显示

用css画三角形

.box {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 20px solid transparent;
            border-bottom-color: #0f0;
        }

得到一个了朝上的绿色三角形

修改鼠标样式

li {
cursor:default默认小白
cursor:pointer小手
cursor:move移动
cursor:text文本
cursor:not-allowed禁止
}

去掉表单轮廓线

 input {
            outline: none;
        }

禁止文本域拖拽

 textarea {
            outline: none;
            resize: none;
        }

设置图片文字垂直对齐

            vertical-align: baseline;基线
            vertical-align: top;顶端和最高元素顶端对齐
            vertical-align: middle;放置在父元素中部
            vertical-align: bottom;顶端和最低的元素顶端对齐

盒子中放图片，图片下方有缝隙，因为行内块元素和文字的基线对齐，所以给图片添加vertical-align。

或者把图片转换成display：block

溢出的文字用省略号代替

• 单行文本

textarea {
    /* 强制一行现实 */
    white-space: nowrap;
    /* 隐藏超出部分 */
    overflow: hidden;
    /* 省略号代替超出部分 */
    text-overflow: ellipsis;
}

• 多行文本
  适用webkit浏览器和移动端

            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型展示 */
            display: -webkit-box;
            /* 限制在一个块元素显示行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素排列方式 */
            -webkit-box-orient: vertical;

常见布局技巧

• 让每个盒子margin设置负值，向左移动正好压住相邻盒子的边框

 ul li {
            float: left;
            list-style: none;
            width: 200px;
            height: 200px;
            background-color: #0f0;
            border: 1px solid red;
            margin-left: -1px;
        }
        
        ul li:hover {
            /* 鼠标经过只显示三个框有变色 */
            /* 如果盒子没有定位，给它添加相对定位就可以实现鼠标经过边框变色 */
            position: relative;
            border: 1px solid blue;

             /* 如果有定位，就通过给当前li添加z-index层级就行 */
             z-index: 1;
        }

• 运用浮动元素不会压住文字的特性，简单实现左图右字的效果

三角强化

.box {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-width: 100px 50px 0 0;
            border-style: solid;
        }

css初始化

字体图标

fonts文件夹放在根目录
style文件复制字体声明在style里面

添加
selection文件上传，选择新的图标，重新下载，解压后替换fonts文件夹就可以了

logo制作SEO优化

• logo里先放一个h1标签，目的是提权
• h1里面放一个链接，可以返回首页，logo的背景图给链接
• 为了搜索引擎收录，链接里面放文字就是网站名称，文字不显示（首行缩进很多或者font-size是0）
• 给链接一个title属性，鼠标放上有提示文字