CSS高级技巧 | 对CSS进行初始化+CSS用户界面样式+vertical-align属性应用+常见布局技巧

目录

CSS用户界面样式

更改鼠标样式cursor

表单轮廓线outline

 防止拖拽文本域resize

vertical-align属性应用

实现行内块和文字垂直居中

解决图片底侧空白缝隙解决方案

 溢出的文字省略号显示

        1.单行文本溢出显示省略号--必须满足三个条件

         2.多行文本溢出显示省略号

常见布局技巧

margin负值的运用

        1.两个盒子边框不重叠

        2.盒子边框变颜色

 文字围绕浮动元素

 行内块元素巧妙运用

 CSS三角巧妙运用

 每个网页都必须首先进行CSS初始化

---

CSS用户界面样式

更改鼠标样式cursor

        选择器  { cursor：pointer；}

表单轮廓线outline

给表单添加outline：0；或者outline：none； 可以去掉默认的边框

    <style>
        input {
            outline: none;
        }
    </style>

 防止拖拽文本域resize

 可拖拽变大，导致布局变乱，为了防止拖拽

textarea { resize：none；}

文本域尽量放在一行上面

---

vertical-align属性应用

实现行内块和文字垂直居中

经常用vertical-align用于 设置 图片或者表单（行内块元素）和文字垂直对齐

只针对 行内元素或者行内块元素有效

语法：vertical-align：baseline | top  |middle  |bottom 

解决图片底侧空白缝隙解决方案

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决方法：

1. 给图片添加 vertical-align:middle | top |bottom等。（提倡）
2. 把图片转换为块级元素 display ：block；

 溢出的文字省略号显示

        1.单行文本溢出显示省略号--必须满足三个条件

 条件：

1.先强制一行内显示文本  white-space：nowrap；   //不允许换行

2.超出的部分隐藏  overflow：hidden；

 3.文字用省略号代替超出的部分  text-overflow：ellipsis；   //省略号

         2.多行文本溢出显示省略号

        多行文本溢出显示省略号，有较大兼容性问题，适合于 webkit 浏览器或者移动端（移动端大多是webkit内核）            要使用的话，一定要严格控制好盒子的大小

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

---

常见布局技巧

margin负值的运用

        1.两个盒子边框不重叠

            margin-left: -1px;

让盒子往左移动，右边的盒子就会压到左边的盒子

        2.盒子边框变颜色

当鼠标经过，想要有边框颜色的变化

              

 1.如果盒子没有定位，鼠标经过添加相对定位即可

        ul li:hover {
            /* 1.如果盒子没有定位，鼠标经过添加相对定位即可 */
            position: relative;
            border: 1px solid blue;
        }

2.如果li都有定位，则利用z-index提高层级（只有加了定位才能使用z-index)

        ul li:hover {
            /*2.如果li都有定位，则利用z-index提高层级 */
            position: relative;
            z-index: 1;
            border: 1px solid blue;
        }

 文字围绕浮动元素

        要想做成文字浮动，先设置一个盒子，然后加入文字和图片，让图片左浮动就可以了

        

 

 行内块元素巧妙运用

使用行内块元素做出这个效果：

 在一个盒子里面放链接a，让a变成行内块元素可以设置大小了（行内块元素自身有默认边距），然后设置border和背景....

 

 

 CSS三角巧妙运用

做出这种效果：

让右边的蓝色三角形变为透明

 

bottom 为0 

top 变高

 

left 为0 ，top 变为透明

 

            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;

 代码如下：

    <div class="price">
        <!-- 现在的价格 -->
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <!-- 原来的价格 -->
        <span class="origin">￥5650</span>
    </div>

        .price {
            width: 180px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            line-height: 24px;
        }

        .price .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        /* 透明小三角 */
        .price .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0%;
            height: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .price .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }

 每个网页都必须首先进行CSS初始化

        不同浏览器对有些标签的默认值不同，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，需要对CSS初始化。（初始化时重新设置浏览器的样式   CSSreset）

 以京东为例：

        /* 把所有标签的内外边距清0 */
        * {
            margin: 0;
            padding: 0
        }

        /* em和i斜体的文字不倾斜 */
        em,
        i {
            font-style: normal
        }

        /* 去掉li的小圆点 */
        li {
            list-style: none
        }

        /* border 0 为了照顾低版本浏览器，如果图片外面包含链接会默认有个边框 */
        /* 取消图片底侧有空白缝隙的问题 */
        img {
            border: 0;
            vertical-align: middle
        }

        button {
            /* 当我们鼠标经过button按钮时候，鼠标变成小手 */
            cursor: pointer
        }

        a {
            color: #666;
            /* 链接取消下划线 */
            text-decoration: none
        }

        a:hover {
            color: #c81623
        }

        button,
        input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
        }

        body {
            /* 扛锯齿形  让文字现实的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        .hide,
        .none {
            display: none
        }

        /* 清除浮动 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }