随笔分类 - css学习
如何设置css中hr标签的颜色
摘要：hr{ height: 0.5px; border: none; background: #E6E6E6; } 给它指定个宽度，设置border为none，然后设置background的颜色就可以了
子元素使用float时，父标签，没有指定高度，此时给父标签添加背景颜色失效
摘要：因为使用float会脱离文档流，父标签里面就会没有东西填充，可以试一下把子元素设置为inline-block，这样父元素就有背景颜色了。
css容器内元素垂直水平居中
摘要：如果容器已知高度且容器内需要元素垂直居中，我们可以给容器内添加一个伪元素，设置这个伪元素高度为100%。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{
css解决vertical-Align：middle不起作用的问题
摘要：当我们给一个元素（display为inline-block）的vertical-align设置为middle，我们会发现这个元素并没有垂直对齐。并且发现这个元素的高度的中心点，会在所有兄弟元素中高度最高的元素的底部靠上一点。 如下所示 解决方法： 给当前和它的兄弟元素都添加vertical-alig
堆叠上下文z-index
摘要：给元素设置position为absolute或者z-index不为auto，或者opacity小于1，会创建一个堆叠上下文，它的后代元素，都会根据它父堆叠上下文，进行排序，不会针对其他的堆叠上下文排序。 页面结构 <div class="a"></div> <div class="b"> <div
css实现网格桌布效果，line-gradient
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{ margin: 0; background-color: #fff; background-image: linear-gradien
css的background-clip的border-box,padding-box,content-box
摘要：background-clip有三个属性默认值为border-box padding-box:将图片裁剪到内边距盒子以内 content-box:将图片位于内边距及其之外的部分裁剪掉 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl
css盒子模型的宽度
摘要：盒子的模型宽度不是你设置的width的值，根据box-sizing设置的属性决定， 如果为content-box那么元素的宽度为：width+margin+padding+border, 如果设置为border-box那么元素的宽度为：width+border+padding， content-bo
css的clear清除浮动
摘要：清除前 清除后 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .contianer{ width: 600px; height: 200px; } .a{ width: 50px; he
