CSS使用技巧摸索
收集并记录实用的CSS代码段
YooHoeh
热爱可抵岁月漫长
展开
-
CSS小技巧收集
多行文本末尾省咯号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;解决flex space-between 最后一行数目不足显示问题/** 方法1 */display: grid;justify-content: space-between;grid-template-columns: repeat(auto-原创 2021-06-29 19:26:38 · 140 阅读 · 0 评论 -
Flex核心属性整理
main axis和cross axis的位置不一定是水平和垂直的,以flex-direction的值即为主轴方向justify-content:主轴对齐方式space-between:将多余空间放在中间space-around:将多余空间放在两边,和space-between的区别就是最两边会有空间flex-start:都靠齐主轴的首部(main start)flex-end...原创 2019-02-27 17:21:42 · 460 阅读 · 0 评论 -
使用CSS选择器实现选择指定子节点
HTMLCSS具体效果其他事例事例图片来自MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child原创 2019-02-27 15:47:02 · 2143 阅读 · 0 评论 -
CSS文字垂直居中的一些问题
说到CSS文字垂直居中,很多初学者都喜欢用调整行高等于div高度的方式来达到效果,div { height:30px; line-height:30px;}但其实这么做会遇到一个问题:多行文本溢出父元素。所以还是使用div{ padding:8px 0;}的方式比较稳妥...原创 2019-02-24 17:44:00 · 1211 阅读 · 0 评论 -
CSS文字溢出处理问题
单行省略div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出处理:隐藏}多行省略不支持IEdiv { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vert...原创 2019-02-24 17:10:36 · 954 阅读 · 0 评论 -
使用CSS达到文字首尾对齐效果
在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如:<span>姓名:</span><span>联系方式:</span>姓名:联系方式:有些人会使用直接在姓名之间添加&nbsp(No Break space)的方式来达到对齐效果例如:<span&原创 2019-02-23 21:14:36 · 1779 阅读 · 0 评论 -
影响CSS的margin合并的几个属性
很多人知道,在CSS中存在Margin合并的现象,比如下代码:<style>div { margin:10px; height:100px; background:red;}</style><body> <div></div> <div></div></body>原创 2019-02-23 16:00:58 · 205 阅读 · 0 评论 -
隐藏"Input"标签默认样式
input { width: 400px; border: none; background-color: inherit; border-bottom: #fbfee9 solid 3px; font-size: 2.4em; color: snow;}input:focus { background-color: inherit; border: none;...原创 2018-12-15 20:41:52 · 1439 阅读 · 0 评论 -
原生CSS设置网站主题色—CSS变量赋值
定义CSS变量在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量:root { --main-bg-color: #ff7675; --color1: #fbfee9; --color2: #5a4446; --color3: #8baca1; --color4: #ffeec4;}使用在需要的地方使用,使用var()包裹css变量#...原创 2018-11-28 18:04:19 · 846 阅读 · 0 评论 -
摆脱CSS浏览器私有属性-moz, -ms, -webkit
为了兼容各个浏览器之间的私有属性,前端开发人员在写css的时候需要给一些css属性添加多个私有前缀,非常麻烦。这里给大家分享一个简单的方法可以让你以后无需手动给CSS添加私有属性。 -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome、safari私有属性 -o代表opera私有属性 安装项目目录内终...原创 2018-07-26 21:41:01 · 2639 阅读 · 0 评论 -
统一各浏览器CSS 样式——CSS Reset
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, img, ins, kbd, q, s, samp,small, strike, strong, s...原创 2018-07-17 16:15:07 · 4262 阅读 · 0 评论 -
纯CSS实现展开列表
效果预览 以下为源码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><style>*{ padding:0;原创 2018-05-26 20:37:04 · 6021 阅读 · 0 评论 -
使用纯CSS制作展开合并立方体特效
显示效果 源码<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css动画练习</title></head><style>bod原创 2018-05-26 20:30:16 · 681 阅读 · 0 评论