Johnny Liao的博客

img { max-width: 250px; margin: 20px; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s;}img:hover { -webkit-c

因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置）flex-shrink: 0;width: 100%;这样就可以生效了。...

1.减少请求（1）图片分类合并。（2）减少CSS文件请求：a.多个CSS文件合并为一个。b.少量CSS样式内联。c.避免使用import的方式引入CSS文件。2.减少文件大小（1）减少图片大小：a.选择合适的图片格式PNG或者JPG。b.用工具无损或者有损的压缩图片，比如ImageOptim，ImageAlpha，JPEGmini等工具。（2）CSS值缩写，比如margin,paddin

可以综合之前两篇文章的方法来做：第一种：.parent{ text-align: center; display: table-cell; vertical-align: middle;}.child{ display: inline-block;}优点：兼容性高缺点：第二种：/* 2 */.parent{ position: relativ

父元素，子元素高度不一定第一种：.parent{ display: table-cell; vertical-align: middle;}优点： 兼容性好缺点：IE6-7 需改HTML结构第二种：.parent{ display: relative;}.child{ position: absolute; left: 50%; transform: t

test 第一种：.parent{ text-align: center;}.child{ display: inline-block;}优点：代码少，兼容性好  inline-block ie6-7不兼容（可用inline+zooom:1）缺点：text-align 会将文字移动，有时需text-align:left解决；第二种：.

[单选题]跨多行的表元的HTML代码为（）    A， coLspan为横跨， <td colspan="2" > 表示横跨两列[单选题]标签中，哪个是表格边框线的粗细？ bordercolor border cellspacing cellpadd

CSS 选择器优先级【6种】由高到低为:1，！important   无条件优先；2， html标签内的；3，#id{...}   通过id的;4, .className{...} ，.className:hover{...}   通过class类名的，既是类选择器、属性选择器、伪类选择器定义；5， div{...}  通过一个或

css样式表引入的方式有4种： （1） 使用style属性 （2） 使用style标签  （3） 使用link标签   （4） 使用@import引入下面是MDN的解释：@import是CSS@规则，用于加载外部层叠样式表。@import规则必须放在其他除了@charset规则以外的CSS规则的前面；@import规则不可嵌套于条件规则组中。@imp

header, section, footer { padding: 1em calc(50% - 350px);}1，别忘了在 calc() 函数中用空白符把 - 和 + 隔起来，否则会 产生解析错误！这个看似怪异的规则是为了向前兼容：在未来，calc() 可能会允许使用标识符，而这些标识符本身可能会包含连字符，容易与减号混淆。2，无需使用width；3，优势： 避免了使用两层

Document figure{ width: min-content; max-width: 300px; /* 给浏览器一个回退样式 */ margin: auto; } figure >img{ max-width: inherit; } this is a photo this is a photo this is a

在最后一页,要求滚动到最后一页的时候, 再滚一下, 就展示备案消息等, 就需要调整一下.初始化的时候, js:slidesPerView: 'auto',css:swiper-container .swiper-slide{ height:100%;}.swiper-container .swiper-slide:last-child{ height:104px; ...