CSS / 三角+界面样式+vertical-align+溢出文字省略号显示+布局技巧+CSS初始化

winglamx

已于 2022-07-11 14:13:08 修改

阅读量261

点赞数

分类专栏：前端学习文章标签： css

于 2022-02-17 17:31:26 首次发布

本文链接：https://blog.csdn.net/qq_39565174/article/details/122975969

版权

前端学习专栏收录该内容

38 篇文章 0 订阅

订阅专栏

CSS三角

给宽高为0的盒子设置边框，并将不需要的三边设置成透明色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 0;
            width: 0;
            /* 为了照顾浏览器的兼容性写下面两行，也可以不写 */
            line-height: 0;
            font-size: 0;
            /* 把其他三条边设置成透明色 */
            border: 10px solid transparent;
            border-top: 10px solid pink;
            /* border-bottom: 10px solid red;
            border-left: 10px solid yellow;
            border-right: 10px solid blue; */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

界面样式

鼠标 cursor

cursor: pointer;

default:小白默认

pointer:小手

move:移动

text:文本

not-allowed:禁止

轮廓线 outline

outline：none 去掉轮廓线

防止拖拽文本域 resize

resize：none

文本域标签尽量放在一行，否则显示会有很多空格

行内及行内块元素垂直对齐

vertical-align

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

baseline 默认，基线对齐

middle 和中线对齐垂直居中

top 和顶线对齐

bottom 底线对齐

图片底侧空白缝隙

是因为默认基线对齐，给文字留出了底线到基线的高度

1.给图片设置vertical-align：bottom或middle或top 提倡使用

2.给图片转成块级元素 display：block；

溢出文字省略号显示

单行溢出文字省略号显示

必须满足三个条件

1.先强制一行内显示文本（显示不下也在一行内全部显示）

white-space：nowrap；

（默认是normal，显示不下自动换行）

2.溢出部分隐藏

overflow:hidden；

3.text-overflow：ellipsis；（省略号）

多行溢出文字省略号显示

兼容性较差，适合webkit浏览器或移动端（移动端大部分是webkit内核）

一般由后端开发来写这个效果。直接限制显示多少个字

overflow：hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 45px;
            background-color: pink;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>

</html>

布局技巧

margin负值的巧妙运用

1.当每个浮动盒子都有边框时，边框重叠会变宽，用，margin负值来覆盖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            float: left;
            width: 150px;
            height: 200px;
            margin-left: -2px;
            border: 2px solid red;
            list-style: none;

        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>

</html>

2.鼠标经过，让边框变色时，会被压住

如果盒子没有定位，当鼠标经过时变成相对定位

如果盒子有定位，则鼠标经过时提高z-index

    <style>
        ul li {
            position: relative;
            float: left;
            width: 150px;
            height: 200px;
            margin-left: -2px;
            border: 2px solid red;
            list-style: none;

        }

        li:hover {
            z-index: 1;
            border: 2px solid blue;
        }
    </style>

文字围绕浮动元素

浮动元素不会压住文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            padding: 5px;
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 100px auto;
        }

        .pic {
            float: left;
            margin-right: 5px;
            width: 100px;
            height: 70px;
            background-color: blue;
            vertical-align: middle;

        }

        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic"><img src="img.png" alt=""></div>
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>

    </div>
</body>

</html>

行内块的巧妙运用

页码块用行内块来做，行内块自带间隔且在一行显示有宽高

只要给父元素添加text-align：center就能使所有行内块和行内元素水平居中显示

shift+alt+鼠标左键下拉可以同时多行输入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            text-align: center;
        }

        a {
            display: inline-block;
            height: 30px;
            width: 30px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-decoration: none;
            color: black;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
        }

        .prev,
        .next {
            width: 85px;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
    </div>
</body>

</html>

CSS三角强化

把上边框宽度调大颜色透明，左和下边框宽度设为0

只保留右边框有颜色
样式都是solid
上边框宽度要大，右边框宽度稍小，其余边框为0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one,
        .four {
            float: left;
            width: 200px;
            height: 40px;
            background-color: red;
        }

        .two {
            float: left;
            width: 0;
            height: 0;
            border-left: 20px solid red;
            border-top: none;
            border-bottom: 40px solid transparent;
            border-right: none;
        }

        .three {
            float: left;
            width: 0;
            height: 0;
            border-left: none;
            border-top: 40px solid transparent;
            border-bottom: none;
            border-right: 20px solid blue;
            margin-left: -20px;

        }

        .four {
            float: left;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
    </div>
</body>

</html>

用三角做价格标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        .now {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            color: #Fff;
            text-align: center;
        }

        .before {
            float: left;
            width: 90px;
            height: 100%;
            background-color: #fff;
            color: gray;
            text-align: center;
            font-size: 12px;
            text-decoration: line-through;
        }

        .now i {
            position: absolute;
            right: -12px;
            top: 0;
            height: 0;
            width: 0;
            border-color: red transparent transparent transparent;
            border-width: 24px 12px 0 0;
            border-style: solid;
            /* border-top: 24px solid red;
            border-right: 12px solid #fff;
            border-left: 0;
            border-bottom: 0; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="price">
            <span class="now">$199
                <i></i>
            </span>
            <span class="before">$299</span>
        </div>
    </div>
</body>

</html>

CSS初始化

重设浏览器的样式 CSS reset

每个网页必须首先进行CSS初始化，保证不同浏览器的兼容性

给body设置样式

unicode编码字体：把中文字体的名称用相应的unicode编码来代替，这样就可以有效地避免浏览器解释CSS代码时候出现乱码的问题

如 黑体 \9ED1\4F53 宋体 \5B8B\4F53

winglamx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS / 三角+界面样式+vertical-align+溢出文字省略号显示+布局技巧+CSS初始化

目录CSS三角界面样式鼠标 cursor轮廓线 outline防止拖拽文本域 resize行内及行内块元素垂直对齐vertical-align图片底侧空白缝隙溢出文字省略号显示单行溢出文字省略号显示布局技巧margin负值的巧妙运用文字围绕浮动元素行内块的巧妙运用CSS三角强化用三角做价格标签CSS初始化CSS三角给宽高为0的盒子设置边框，并将不需要的三边设置成透明色<!DOCTYPE html>
复制链接

扫一扫