CSS
15篇文章 · 0订阅
  • CSS技巧篇(十一)：CSS布局
    一、单列布局 常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种，先通过对head
    前端 CSS
  • CSS 技巧篇(七)：设置元素居中
    要让居中元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。 缺点：需要固定居中元素的宽度。 居中元素设置一个负的“margin-left”并且值…
    CSS
  • CSS 技巧篇(五)：理解CSS优先级
    浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。 下面列表中，选择器类型的优先度是递减的。 为了方便将优先度数值化，我们将内联样式的权重设置为1000，id选择器的权重设置为100，类选择器的权重设置为10，元素选择器的权重设置为1。 权重越大则优…
    CSS
  • CSS 技巧篇(四)：伪类与伪元素的区别
    CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 我们通过使用伪类 :first-child 和伪元素 :first-letter 来进行比较。 即我们给第一个子元素添加一个类，然后定义这个类的样式。 即我们给第一个字母添加一个 s…
    CSS
  • CSS 技巧篇(三)：background-position和雪碧图(CSS Sprites)用法
    background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用…
    CSS
  • CSS 技巧篇(二)：visibility:hidden和display:none的区别
    1、如果后代元素的visibility属性存在则不会继承其父元素的visibility属性值，不存在才会继承其父元素的visibility属性值。例如：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见；子元素visibi…
    CSS
  • CSS 技巧篇(一)：transition与display冲突问题
    使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。 案例代码 transition与display冲突问题 by madman0621 (@madman0621) on CodePen. div元素使…
    CSS
  • CSS 属性篇(八)：word-wrap、word-break、white-space属性
    本文主要是讲解word-wrap和word-break属性的含义与二者之间的区别，以及whtite-space各个属性值之前的区别。 但是如果这个单词挪到下一行中还是一整行都存放不下，它就会溢出它的父容器。 css的word-wrap属性用来标明是否允许浏览器在单词内进行断句，…
    CSS
  • CSS 属性篇(五)：box-sizing属性
    在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距…
    CSS
  • CSS 属性篇(七)：Display属性
    display 属性规定元素应该生成的框的类型。 其中我们在前端开发中比较常用的属性值一般是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所…
    CSS