![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
m0_37158404
这个作者很懒,什么都没留下…
展开
-
flex实现多行多列-内容单行或者2行-超过2行显示省略号且文字居中
版权声明:本文为CSDN博主「billycoder」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/billycoder/article/details/122640705效果图:关键点:超出两行或多行显示省略号的盒子,外面再套一层flex盒子,这样就可以实现内容只有一行的时候,文字也可以垂直居中了;代码如下:<!DOCTYPE html><html lang.转载 2022-05-06 21:15:53 · 2947 阅读 · 0 评论 -
取消文本选中状态,禁止选中 js/css
用js,直接取消选中的文本window.getSelection().empty()用css,对特定区域设置选中透明效果p::selection {background: transparent}getSelection文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getSelection...原创 2021-03-26 19:27:28 · 3499 阅读 · 0 评论 -
伪元素灵活使用demo,伪元素动态内容,伪元素由内容决定宽度,伪元素居中问题
* content: attr(placeholder); 内容随着元素属性变化 * width: max-content; 宽度随着内容而变化 * left: 50%; transform: translateX(-50%); 使得不定宽的伪元素相对父元素居中<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8">...原创 2021-03-18 19:13:35 · 246 阅读 · 2 评论 -
输入框placeholder字体颜色修改
占位符属性placeholder<input type="text" placeholder="我是占位符" value=" ">默认的placeholder字体颜色呈浅灰色,通过下面的方法,可以改变默认颜色:input:-moz-placeholder, textarea:-moz-placeholder { color: red; } input:-ms-input-placeholder, textarea:-ms-input...原创 2020-12-16 10:41:31 · 8902 阅读 · 1 评论 -
background属性 css
background-attachmentbackground-size cover和contain的区别CSS 背景属性background简写攻略https://www.w3school.com.cn/cssref/pr_background.asphttps://www.w3school.com.cn/css3/css3_background.asp常用的6个...原创 2020-04-03 20:06:47 · 215 阅读 · 0 评论 -
table宽度为100%时,在chrome下的问题,会截断表格宽度的小数部分
Chrome会截断表格宽度的小数部分(例如从250.5px到250px)<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUc...原创 2019-03-08 11:11:35 · 822 阅读 · 0 评论 -
css 默认颜色 currentColor
现象:css冷门知识:关于border属性的默认颜色原因:为什么CSS border-color继承了color属性?转载 2019-03-21 17:11:00 · 576 阅读 · 0 评论 -
伪元素 内容 content 符号,图标
可用符号网站使用:li.click::after { content: '▸'; position: absolute; top: 0; right: 0; font-size: 20px; color: #1dadee; }...原创 2020-04-05 00:04:36 · 2018 阅读 · 1 评论 -
CSS基础(1)置换和非置换元素
参考原文链接:魅族面试的一个问题,img是行内元素,为什么也可以设置框高?为何img、input等内联元素可以设置宽高置换和非置换元素置换元素(替换元素)和非置换元素(不可替换元素) 简单说法:置换元素就是会根据标签和属性来显示的元素。反之就是非置换元素了。比如img根据src属性来显示,input根据type属性来显示,因此可知道img和input是置换元素...转载 2019-01-01 16:57:27 · 198 阅读 · 0 评论 -
CSS 隐藏滚动条
http://jsfiddle.net/5GCsJ/18807/ <div id="outer"> <div id="inner"> hello无论如何我都想<br/>hello无论如何我都想<br/> hello无论如何我都想要<br/>hello无论如何我都想<br/>原创 2018-07-27 18:03:31 · 154 阅读 · 0 评论 -
CSS混淆点
first-child last-child助记法: css 是从右向左翻译的因此 p:first-child 译为:作为第一个子元素的p; p:first-of-type 译为:作为第一个类型为p的元素<div class="content"> <h3>接单</h3> <p>接 单 人:<span class...原创 2018-11-16 09:46:22 · 519 阅读 · 1 评论 -
CSS table-layout 属性
http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 应用:(1)单元格内容过长隐藏用省略号代替<html><head> <title></title> <style type="text/css"> #myTable { ...原创 2018-08-16 09:15:46 · 149 阅读 · 0 评论 -
CSS高度探究-滚动条的由来 (margin塌陷问题;height继承问题,min-height:无法继承问题)
参照文章由html,body{height:100%}引发的对html和body的思考 实例 解决办法(1)margin-top 改为 padding-top(2)如果必须要用margin-top; 则将子元素position设为absolute;脱离文档流,这样body就不受其影响了 ...原创 2018-08-30 10:02:00 · 837 阅读 · 0 评论 -
CSS设置下划线与文字间距距离
原文:CSS设置下划线与文字间距距离css的写下划线 text-decoration: underline; 但是这样的样式下划线太靠近文字了 如图 修改方式border-bottom: 1px solid red;padding-bottom: 8px;如图...转载 2018-11-28 14:33:13 · 10919 阅读 · 1 评论 -
top,right,bottom,left设置为0有什么用?
left等定位属性,要使用时,它必需是已定位的元素。(absolute,relative,fixed) eg:img{position:absolute;left:100px} 如果去掉position:absolute,则left失效。对float:left这种浮动元素也是失效,反正就是定位了才让用哈。拓展一种居中用法,(1)先定位,设置 top:0;bottom:0;margin:...原创 2018-12-29 15:10:09 · 4754 阅读 · 1 评论