xiaoritai7803的博客

解决li标签使用inline-block出现的间距问题

css3常用选择器

响应式图片实现

当对某个标签使用浮动的时候，该块内容就会脱离文档流，其父元素便不再包裹该标签内容，父元素的高度会变成0，出现高度塌陷的问题。这个时候就要清楚浮动。 今天就来介绍一下css清除浮动的几种方法。1. 在文档最后面新加一个空的div,如下div style="clear:both">div>但是如果使用这种方法，添加了无意义的标签，违背了结构和表现分离的web结构精髓。后期难以维护。

上篇博客我们讲到，用srcset来实现响应式图片，但srcset方法有个坑(不管图片外边的容器宽度是多少都会以百分百视口宽度去显示)，需要配合size来跳过坑；size默认值为100vw–>viewport width意思是百分百视口宽度；size的值设置：xxvw;具体实现代码如下class="image" src="img/480.png"srcset="img/480.png 48

先介绍几种学习css的资源。Google: 关键词 MDNCSS TricksGoogle: 阮一峰css 张鑫旭的 240 多篇 CSS 博客Codrops 炫酷 CSS 效果一个div元素的高度是由其内部文档流元素的高度总和决定文档流（normal stream)指文档内元素流动的方向块状元素文档流方向从上至下。行内元素文档流方向从左往右。如果流动遇到阻碍，就换行继续流。...

一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display

1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); }2.若父容器下只有一个元素，且父元素设置