前端CSS使用总结

一、单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种，先通过对head

随着移动端的web项目越来越多，设计师的要求也越来越高。在移动端上通过1px实现一条1像素的线时，它并不是真正的1像素，比真正的1像素要粗一点。 那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为100%的情…

在进行前端开发的时候，我们经常会有一个需求就是对于过长的文本进行省略显示，而文本省略主要分为单行文本省略以及多行文本省略。本篇博客主要是介绍单行文本省略实现方式以及多行文本省略的三种实现方式并分析其优劣点。 优点：十分的简便，只需要添加短短几行CSS样式就能够实现多行文本的省略…

当我们将几个元素设置为inline-block的时候，元素的底部会无故出现几个像素的空白。 inline-block默认以底部为准对齐，使用vertical-align:top;将以顶部为准对齐，可以消除底部空白。

要让居中元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。 缺点：需要固定居中元素的宽度。 居中元素设置一个负的“margin-left”并且值…

之所以存在间隙是由于元素标签之间留有空白字符造成的。 消除元素标签之间的空白字符，把标签连在一起。

浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。 下面列表中，选择器类型的优先度是递减的。 为了方便将优先度数值化，我们将内联样式的权重设置为1000，id选择器的权重设置为100，类选择器的权重设置为10，元素选择器的权重设置为1。 权重越大则优…

CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 我们通过使用伪类 :first-child 和伪元素 :first-letter 来进行比较。 即我们给第一个子元素添加一个类，然后定义这个类的样式。 即我们给第一个字母添加一个 s…

background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用…

1、如果后代元素的visibility属性存在则不会继承其父元素的visibility属性值，不存在才会继承其父元素的visibility属性值。例如：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见；子元素visibi…

使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 案例代码 transition与display冲突问题 by madman0621 (@madman0621) on CodePen. div元素使…