随笔分类 -  CSS

css日常积累
摘要：1、html中，如何让超链接自动换行 word-break : break-all; 2、文本只显示两行，超出部分显示省略号 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-we 阅读全文
posted @ 2019-07-05 15:01 落叶无痕~ 阅读(110) 评论(0) 推荐(0)
弹性盒模型，flex
摘要：1、定义盒模型的主轴方向，flex-direction flex-direction: row; // 设置主轴方向为水平方向 flex-direction: column; // 设置主轴方向为垂直方向 2、主轴上的元素排列方向 flex-direction: row-reverse; // 设置 阅读全文
posted @ 2019-06-06 14:53 落叶无痕~ 阅读(224) 评论(0) 推荐(0)
什么是BFC
摘要：在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 阅读全文
posted @ 2019-04-16 14:53 落叶无痕~ 阅读(246) 评论(0) 推荐(0)
深入理解CSS盒模型
摘要：基本概念：标准模式 和 IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例（根据盒模型结束边距重叠） BFC（边距重叠解决方案） 基本概念 盒模型的组成大家肯定都懂，由里向外 content，padding，border，margin 盒模型有两种：标准盒模型，IE模型 从 阅读全文
posted @ 2018-10-18 14:12 落叶无痕~ 阅读(223) 评论(0) 推荐(0)
如何将一个div水平垂直居中
摘要：方案一： div绝对定位水平垂直居中（margin：auto实现绝对定位元素居中） 兼容性：IE7之前版本不支持 方案二： div绝对定位水平居中（margin负间距） 方案三： div绝对定位水平垂直居中（transform变形） 兼容性：IE8不支持； 方案四： css不定宽高水平垂直居中 方案 阅读全文
posted @ 2018-10-10 14:40 落叶无痕~ 阅读(316) 评论(0) 推荐(0)
CSS选择符
摘要：1、element element 例子，div p 选择<div>元素内部的所有<p>元素 2、element > element 例子，div > p 选择父元素为<div>元素的所有<p>元素 3、element + element 例子，div + p 选择紧接在<div>元素的所有<p>元 阅读全文
posted @ 2018-09-12 10:47 落叶无痕~ 阅读(191) 评论(0) 推荐(0)
css揭秘
摘要：1、currentColor 它是从SVG那里借鉴来的。这个关键字并没有绑定一个固定的颜色值，而是一直被解析为color。实际上，这个特性让它成为了CSS中有史以来的第一个变量。虽然功能很有限，但它真的是个变量。 例如，我们想让所有的<hr>水平分割线元素自动与文本的颜色保持一直： 阅读全文
posted @ 2018-07-31 08:02 落叶无痕~ 阅读(130) 评论(0) 推荐(0)
transition
摘要：简单transition动画 html代码： css代码： 阅读全文
posted @ 2018-07-23 13:58 落叶无痕~ 阅读(174) 评论(0) 推荐(0)