随笔分类 - css 回忆录
对css 的回忆与前端分开
摘要：共同点 test-align 和margin 都可以居中： test-align:Center. margin: 0 auto. 很好但是看下区别: <div style="background:red;text-align: center;"> <div style="background:yel
阅读全文
摘要：总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一
阅读全文
摘要：前言 padding 简写属性在一个声明中设置所有内边距属性,实际上在使用过程中它对block元素和内联元素的处理是不一样的。 正文 对于block元素 如果宽度非auto那么容器会变大，如果容器宽度自适应或者设置了box-sizing:border-box,并且值在可控区间内是不会影响内容宽度的，
阅读全文
摘要：前言 问题: 比如说我设置了width为100%了，这个时候我需要padding，但是padding-right似乎没有生效。 正文 原因 实际width=100%容器宽度+padding>容器宽度 实际上padding 生效了，但是没有给我们显示出来。 解决方案 box-sizing: borde
阅读全文
摘要：一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。 二、安装和使用 2.1 安装 SASS是Ruby语言写的，但是两者的
阅读全文
摘要：前言 在清楚浮动的时候呢，网上有7种，这里只介绍3种,小声哔哔，其他4种都有坑。 正文 第一种: 怎么实现的呢？ .container::after 可以理解为container下的最后一个元素，clear: both如果前面的有浮动，那么该元素就往下，这样就把div撑开了。 这样写其实有一些场合用
阅读全文
摘要：前言 css 文字溢出后显示省略号，这是一个非常常规的操作，但是你会发现在网上很多给出的例子两行之后显示省略号，却没有用。 这是为什么呢？please look follow。 正文 在一行省略的： 简单介绍下: white space 这个是处理空白符的，但是这东西还不是这么简单的。 你看我这里有
阅读全文
摘要：前言 如何绘制正方形的问题呢，在这里我先只写一种方式，后续补齐。 正文 写正方形有一个很特殊的地方就在于我们在写html的时候，宽是一定固定的，因为不可能溢出去，但是高就不固定了，因为可能要滑动。 问题就回到了，知道了宽，如何设定高的问题了。 padding 方式 原理：padding的宽度的百分比
阅读全文
摘要：前言 对css居中的几种方式汇总，并且分析适用情况。 正文 margin+position 后续不展示效果。 优点：兼容全部浏览器 缺点：需要知道子元素的宽高。 margin:aotu+postion 中规中距：需要兼容的推荐。 flex 缺点：需要浏览器支持flex margin+transtio
阅读全文
浙公网安备 33010602011771号