常用css总结

已于 2022-12-08 16:50:57 修改
阅读量219 收藏
点赞数
分类专栏： css 文章标签： css 前端
于 2020-01-13 10:19:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44218695/article/details/103953381
版权

参考链接

CSS 超出隐藏，不用js的展开收起功能

<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>CSS 如何实现多行文本展开收起效果</title>
    </head>
    <body>
        <div class="content">
            <input type="checkbox" id="exp" />
            <div class="text">
                <label class="btn" for="exp"></label>
                <span>
                    但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
                    里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
                    长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
                    是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
                    马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出</span
                >
            </div>
        </div>
        <style>
            .content {
                display: flex;
            }
            .text {
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
            .text::before {
                content: '';
                float: right;
                height: 100%;
                margin-bottom: -20px;
            }
            .btn {
                float: right;
                clear: both;
                margin-right: 8px;
            }
            #exp {
                visibility: hidden;
            }
            #exp:checked + .text {
                -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
            }
            .btn::after {
                content: '展开';
            }
            #exp:checked + .text .btn::after {
                content: '收起';
            }
        </style>
    </body>
</html>

form表单两端对齐

  • 效果图
    在这里插入图片描述

  • 代码

     .test1 {
            text-align:justify;
            text-justify:distribute-all-lines;/*ie6-8*/
            text-align-last:justify;/* ie9*/
            -moz-text-align-last:justify;/*ff*/
            -webkit-text-align-last:justify;/*chrome 20+*/
        }
 @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
     .test1:after{
         content:".";
         display: inline-block;
         width:100%;
         overflow:hidden;
         height:0;
     }
 }
 
 html
 
	<div class="box1">
	    <div class="test1">姓 名</div>
	    <div class="test1">姓 名 姓 名</div>
	    <div class="test1">姓 名 名</div>
	    <div class="test1">所 在 地</div>
	    <div class="test1">工 作 单 位</div>
	</div>

配置H5的滚动条样式

/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
    background-color: #b46868;
}
 
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
} 
 
/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-button {
    background-color: #7c2929;
}
 
/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
    background-color: black;
} 
 
// IE 自己的设置方法，并且是第一个可以自定义滚动条的浏览器，从IE5.5开始兼容
body {
    scrollbar-face-color: #b46868;
}
举例
/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}
 
<div class="custom-scrollbar">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Iure id exercitationem nulla qui repellat laborum vitae, 
      molestias tempora velit natus. Quas, assumenda nisi. 
      Quisquam enim qui iure, consequatur velit sit?
    </p>
</div>

placeholder

::placeholder {
    color:    #999;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

透明度

.haorooms{
	  opacity: 0;
	  cursor:pointer; 
	  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	  filter: alpha(opacity=0);
  }

CSS控制多行文字超出隐藏加省略号

 
   .ellipsis_1 {
       overflow:hidden; //超出的文本隐藏
       text-overflow:ellipsis; //溢出用省略号显示
       white-space:nowrap; //溢出不换行
   }
   
   .ellipsis_1 {
       overflow : hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
       word-break: break-all; /* 追加这一行代码 */
   }
   /*这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。*/
   }
   .ellipsis_2 {
       display: -webkit-box;
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
   }    
   
   .ellipsis_2 {
       overflow: hidden;
       text-overflow: ellipsis;
       display:-webkit-box; //作为弹性伸缩盒子模型显示。
       -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
       -webkit-line-clamp:2; //显示的行
   }
  • 跨浏览器兼容的方案 之一
p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
   // background:url(和网页背景颜色一样的一张背景图) repeat-y;
  background-color:#fff;
}

注意：

height高度正好是line-height的3倍；
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；
要支持IE8，需要将::after替换成:after；

css3flex布局实现商品列表

传送门

 .goodsItem {
     width: 24%;
     height: 100px;
     overflow: hidden;
     background-color: skyblue;
     margin-top: 15px;
     border: 1px solid #ccc; 
     
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }
 /* 如果最后一行是3个元素 */
 .goodsItem:last-child:nth-child(4n - 1) {
     margin-right: calc(24% + 4% / 3);
 }
 /* 如果最后一行是2个元素 */
 .goodsItem:last-child:nth-child(4n - 2) {
     margin-right: calc(48% + 8% / 3);
 }
 /* .goodsItem:last-child {
     margin-right: auto;
 } */

图片懒加载

可以通过为图片文件添加loading="lazy"的属性来实现:

<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />

输入提示

当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。

其实，HTML也是能够让我们来实现预定义输入建议功能的，通过标签来实现。需要注意的是，使用时这个标签的id属性需要和input元素的list属性一致。

<label for="country">请选择喜欢的国家:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
  <option value=“China”>
</datalist>

Picture标签

HTML提供了标签，允许我们来添加多张图片资源，并且根据不同的分辨率需求来展示不同的图片。

<picture>
  <source media="(min-width:768px)" srcset="med_flower.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flower" style="width: auto;" />
</picture>

Base URL

当我们的页面有大量的锚点跳转或者静态资源加载时，并且这些跳转或者资源都在统一的域名的场景时，我们可以通过标签来简化这个处理。

<head>
  <base href="https://www.weibo.com/" target="_blank">  
</head>
<body>
  <a href="jackiechan">成龙</a>
  <a href="kukoujialing">贾玲</a>
</body>

页面重定向（刷新）

当我们希望实现一段时间后或者是立即重定向到另一个页面的功能时，我们可以直接通过HTML来实现。
我们经常会遇到有些站点会有这样一个功能，“5s后页面将跳转”。这个交互可以嵌入到HTML中，直接通过标签，设置http-equiv="refresh"来实现

<meta http-equiv="refresh" content="4; URL='https://google.com' />

DIV可编辑，就是让一个div变成一个类似input输入框的效果。

可使用:before伪元素达到仿‘placeholder’的效果。传送门

<div id="div1" contentEditable="true"  ></div>  
<div id="div2" contentEditable="true" ></div>  
<div contentEditable="true"  id="div3"></div>

不让用户复制，设置div禁止选择的功能，设置如下属性：

  • unselectable=“on” onselectstart=“return false;”
<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>
XSY2020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css实战总结
zhujohnle的专栏
06-29 460
文章目录常用属性背景属性字体属性文本属性尺寸属性列表属性表格属性盒子属性浮动属性定位属性常用布局 常用属性 背景属性 所有标签的背景，通过相关属性进行自定义 属性 说明 background-color 背景颜色 background-image 背景图片 background-repeat 背景图片是否重复以及其重复方式 background-attachment 背景图片是否跟随内容滚动 background-position 背景图片的水平位置和垂直位置 bac
常用CSS缩写语法总结
09-27
以下是对常用CSS缩写语法的详细总结： 一、颜色简写 16进制颜色值的缩写规则是，如果每两位的数值相同，可以只写一次。例如： - #000000 可以缩写为 #000 - #336699 可以缩写为 #369 二、盒模型属性简写 盒模型...
css 常用总结
wjy397的专栏
04-21 206
设置width,height是设置内容宽高，并非实际宽高及盒子模型宽高。 <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2. <!–[if IE]> 所有的IE可识别 <![endif]–> 3. <!–[if IE 5.0]> 只有IE5.0可以识别 <![end...
CSS常用的总结
Fabio的博客
07-10 178
一、CSS 背景属性Property 描述 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设...
css3 vh单位使用
热门推荐
走在江边的小兵
02-25 1万+
Css3和 html5发布已经过了5年之久，做为一个码农，其实里面新增加的标签，有些根本就不知道，更别说性能，这久再弄移动页面的时候，为了某种效果，我在查看网页的源代码的时候，我看到min-height:calc(100vh + 22px) 纳尼。。。，这个是什么写法，可以这种写？ 结果百度了一下，真是惭愧啊！写了这么多年！不知道还可以这种写 Vw:相对于视框的宽度：视框宽度是100Vw Vh:...
CSS常用知识点总结（一）
夏大大的博客
06-02 524
CSS学习小结 CSS样式引入方式 1、内联样式表(内嵌 行内) style属性 <div style="width:100px;"></div> 2、内部样式表 style标签 <style> div{width:100px} </style> 3、外部样式表 link <link rel="stylesheet" type="text/css" href="css/style.css"/> 样式表优先级 内联样式 &g
CSS优化2-(常用CSS缩写语法总结)
10-30
本文将总结常用的CSS缩写语法，帮助开发者更好地优化CSS代码。 一、颜色缩写 在CSS中，颜色可以使用十六进制的色彩值，例如`#000000`。如果每两位的值相同，可以缩写一半，例如`#000000`可以缩写为`#000`，`#...
css 常用公共样式 样式总结（持续更新）
09-27
本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先，让我们来谈谈`flex布局`。Flex布局，全称为 ...
css-common:常用的css总结
03-22
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
CSS常用样式简单的总结包括定位、显示等属性
12-13
鼠标属性： 通过cursor属性来实现 Style=”cursor :hand” 定位和显示 1.定位属性 CSS定位属性包括position、top、bottom、left、right和z-index Position属性指定元素如何在页面上定位，取值为：static ,relative或absolute. Static表示正常定位，relative是指定位在相对于页面上前一个元素的尾端位置，absolute是用绝对位置指定元素在页面中的位置。 Top和left属性指定某元素与其父元素或其他元素之间的距离 Z-index属性控制元素的重叠，值较高的元素将覆盖值较低的元素，如
css常用大总结
fakertop的博客
12-23 983
首先我们要理解什么是css css就是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 使用css的样式表 1.内联方式使用css，就是把css嵌套在head标签中使用 &lt
css常用效果总结
web前端学习
04-01 1018
css有不少常用的效果，你在平时浏览网站的时候可能会看到，但是真的要自己写的时候，有时候会突然忘记，今天稍微对那些常见的效果做一下小结。 学习编程最重要的是代码敲错能够有个人给你指点 所以特意建立一个web前端开发学习群 点击web前端学习直达学习群 领取群里大咖每日分享和web前端学习资料 1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是cs...
CSS 常用技巧
weixin_34378969的博客
06-13 212
概述相信大家在写css属性的时候，会遇到一些问题，比如说：垂直对齐，垂直居中，背景渐变动画，表格宽度自适应，模糊文本，样式重置，清除浮动，通用媒体查询，自定义选择文本，强制出现滚动条，固定头部和页脚，自己在网上看到的一篇关于css的文章，感觉这里边一些常用的css代码片段对大家很有帮助，所以我就把这篇文章分享给大家，希望大家能够喜欢。css代码片段1、垂直对齐 如果你用CSS，则你会有困惑：我该怎...
CSS常用总结
最新发布
qq_45595648的博客
04-11 543
宽、高、外边距、内边距迪欧可以控制，宽度默认是容器（父级宽度）的100%，是一个容器及盒子，里边可以放行内或者块级元素。由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下边的标准流盒子。一个元素浮动了，理论上其余的兄弟元素也要浮动（浮动的盒子智慧影响浮动盒子后面的标准流，不会影响前面的标准流）。网页的标签非常多，在不同的地方会用到不同类型的标签，HTML元素一般分为块元素和行内元素两种类型。行内元素（内联元素）、行内块元素：本身没有宽度和高度。
【css】常用功能（总结向）
香芋芋圆的博客
12-30 253
常用功能（总结向） 1.select框样式 2.不规则剪裁 clip-path 3.宝藏网站分享 - 查找浏览器对某个属性的兼容情况 https://caniuse.com/ - 调阴影样式 https://neumorphism.io/ - 选取好看颜色 http://zhongguose.com/#
css中常用方法总结
qq_44709805的博客
10-21 508
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进。 在设计一个网页的时候，有时候为了让页面的可读性更好，更加美观；就会使用到letter-spacing属性；letter-spacing属性是增加（值为正）或减少（值为负）字符间距；也就是说当应用在英文时，就是增加或减少每个字母之间的间距，在中文文字中应用就是每个文字之间的间距。 例： .
CSS常用样式总结
xiaouncle的博客
01-12 705
博主不擅长样式的设计，所以就把平时用到的个人感觉比较有用的样式记录下来，算是自己的知识积累，同时也希望对大家有帮助。 一、按钮底部对齐 父元素：position:relative，设置width、height 按钮元素：position:absolute 按钮元素：通过top、right、bottom、left控制按钮的位置 &lt;div style="width:350px;heig...
项目中常用的css样式总结
zhanglir333的博客
11-27 958
重置reset.css html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b
HTML/CSS基础与进阶知识总结
"html和css 常用" HTML（HyperText Markup Language）是网页内容的结构标记语言，而CSS（Cascading Style Sheets）则用于描述这些内容的样式和布局。两者结合使用，可以创建出丰富的、有吸引力的网页。 在HTML中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值