peade的博客

使用flex布局, 内部元素不是和父元素一样高，会出现高度不够。在有些情况下，与预期的效果不一致。在子元素上，用上下面这一句就可以实现了。 align-self: stretch;

综合了几个来源地方常见字体使用默认字体body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;}body {font-family: "Helvetica ...

今天在开发的发现，table设置border-collapse, border-radius,overflow三个属性，会和border属性发生冲突,下面这种写法，页面显示的border有大小，但是背景是透明的table{ border-collapse: collapse; width: 85%; margin: 0.625rem auto; border...

今天在写CSS时，设计稿上有一个单边渐变阴影的效果，方块元素上部有个阴影渐变。我第一时间想到的方式是用box-shadow解决。写上 box-shadow:inset 0 2px 5px0 #000; 最终展示的效果，发现在左右两侧也有阴影效果。网上查了下，似乎是个不好解决的方法。于是，我用了另一个解决方法，在块元素顶部，放置了一个div，div的背景用上渐变效果。展示出来的效果...

html元素<div> <img src="http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg"></div>实现方式一利用新的css属性方法object-fitdiv{ width:150px; ...

在开发的时候，nth-of-type和nth-child是比较常用的伪类。这两个的作用原理是这样的：nth-of-type:  序号的计算是这样的，父类下，与本元素相同的元素，都会计算进总数里。nth-child: 序号的计算是这样的，父类下，所有的直接子元素，都会计算进总数里html里的结构如下：&lt;div&gt;&lt;h1&gt;test h1&lt;/h1&gt...

在开发的时候，A元素叠在B元素上A元素设置了 background:#fff 显示时，A元素底部透出了B元素的内容，有透明的效果。没有实现A元素遮挡住B元素的效果，background没有完全起作用解决问题的方法是，在A元素上设置 position：relative 原因未知 ...

在HTML页面中，两个元素重叠，要重叠显示两个元素，而不是后面的元素覆盖前面的元素，这个时候，就需要用到CSS中的z-index这个属性。z-index，是指各个元素的堆叠顺序。在实际使用中，对所涉及到的元素只设置z-index是不行的，那你会发现效果完全没变化。因此，在设置了z-index的值之后，还需要设置position的值。只有同时设置了z-index和position，才会有想要的堆...

在div里面内嵌了一个子div。在给子div加点击加边框和去边框效果时，会发现，当子div加上边框时，里面的内容就往里缩。这个原因是子div的大小默认是占满父div内容的，当加了边框后，子div里面显示内容的地方就变小了，所以就内容显示就往里缩。解决这个问题很简单，就是在设置加div时，同事扩展一下子div的范围。最早加边框是这么设置的：div.son{border:1px solid bla...

div{background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center;}以上这个代码，可以让div的背景颜色始终显示中间部分，不随浏览器窗口的变化而收缩或变形。 ...

说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。 响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-al...

国内网上找到比较多的解决方法是：video::-internal-media-controls-download-button { display:none;}video::-webkit-media-controls-enclosure { overflow:hidden;}video::-webkit-media-controls-panel { wi...