随笔分类 - CSS
主要用于记载css相关的内容，包括css属性在工作与学习当中的逐步认识与理解
摘要：在项目中，遇到如下所示的多栏布局的需求，使用flex的垂直布局+允许换行，效果并不理想，因为flex的垂直布局是需要固定高度，然后是水平方向依次换列。使用Multiple column布局，刚刚好！详细内容的学习，见以下参考链接 参考链接： 写给自己看的CSS columns分栏布局教程
阅读全文
摘要：css定宽高比，很久没做过这个需求了，记得之前都是直接用js来处理的，本例运用flex + 伪类 + padding的css的实现方法，涉及到三个点。 1：上下padding的值，相对于最近父级的宽 2：flex布局，未设置高的具体值的时候，其值等于子级内容最大的高度 3: 伪类，content为空
阅读全文
摘要：flex布局极大程度上方便了页面的构建，如下的几种布局当中，为了不增加额外的标签来嵌套，单独使用flex布局的话，还需要其他一些设置来处理，比如与伪元素的配合使用，这个下次再进行描述，这里flex与margin的使用配合，个人认为是目前自己用过最方便的一种方法。 参考链接: 你未必知道的49个CSS
阅读全文
摘要：第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意原始代码不可修改。 img { min width: 700px; } <!DOCTYPE html width & max width .wrapper { width: 500px; margin: 50px auto; }
阅读全文
摘要：属性设置如何处理元素内的空白。 参考链接：常见样式问题七、word break、word wrap、white space区别
阅读全文
摘要：一、无效原因： 可能是元素中设置的white space是norwrap，所以无法换行。 二、解决方法：将white space的值设置成normal自动换行 参考链接：word wrap与word break的区别，以及无效情况
阅读全文
摘要：有些css选择器经常用，但是也常会忘，经常每次都要查一遍，此处记录仅作备忘。 参考文档:http://www.w3school.com.cn/cssref/css_selectors.asp 参考链接：https://blog.csdn.net/yixu0534/article/details/62
阅读全文
摘要：css代码中使用中文时，如content属性值中带有中文，有时会出现乱码的现象，解决方法如下： 首先：检查该css文件的编码格式，是否为utf 8 其次：将中文转成编码的形式，不要写中文 转码工具：http://tool.chinaz.com/tools/unicode.aspx 或者 直接在控制台
阅读全文
摘要：CSS3的动画非常强大，但是平时写的并不多，这里，记录一个CSS3实现水波纹的效果 实现代码如下： <!DOCTYPE html 水波纹效果 { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } @ web
阅读全文
摘要：问题背景： 在子iframe页面去处理页面单屏满屏显示的问题，要求内容的高度以满屏的百分比显示，先获取屏幕高度 $(window.parent).height() ，再减去header和footer的高度，然后赋值给iframe，此时发现页面出现滚动条，总是要多减掉几px才不会出现滚动条，即包裹if
阅读全文
摘要：在项目中，常常会遇到这样的需求，要求布局如下所示，同时要求导航区的高度与内容区的高度始终保持一致，以边框或者背景作为区分。 采用float的方式布局 需要通过js来监控两个区域的高度变化，将高度的最大值作为两者的高度 采用flex的方式布局 不需要去处理高度，两者的高度会自动同步（补充：是指在没有设
阅读全文
摘要：之前对margin的理解，都是用来改变容器位置的，今天发现在特定情况下 ，margin也可以改变容器的大小。 当不指定容器的宽度（这里指的是具体值和百分比），即容器的宽度为 时，给该容器的 或者 设置一个负值，可以增大容器的宽度。（垂直方向上不是同理的） 案例代码： <!DOCTYPE html .
阅读全文
摘要：为了适应不同分辨率下的显示效果，常常会需要将外边距margin，内边距padding设置成百分比。 1.这个百分比的参考对象是什么呢？ 答：margin(四个方向：top，right，bottom，left )以及padding(四个方向：top，right，bottom，left )设置的值为百分
阅读全文
摘要：在项目中常常会遇到美化浏览器自带滚动条的需求，以下是自定义谷歌浏览器滚动条的样式代码： :: webkit scrollbar { width: 5px;/ 竖向滚动条的宽度 / height: 5px;/ 横向滚动条的高度 / } / 滚动条轨道的样式 / :: webkit scrollbar
阅读全文
摘要：弹性布局display: flex；垂直方向布局的具体实践。 在父级设置： display: flex;将对象作为弹性伸缩盒显示 flex flow: column;方向设置为垂直方向(flex flow 属性是 flex direction 和 flex wrap 属性的复合属性，直接使用flex
阅读全文
摘要：当文字超出容器宽度时，以省略号显示，这一需求在项目中十分常见，但是在flex布局下，可能会遇到问题，如省略号不显示，内容超出容器等问题，本文通过demo测试案例，记录下问题及解决方案。 <!DOCTYPE html .wrapper { width: 200px; display: flex; }
阅读全文
摘要：弹性布局 ，使用此种布局方式，则无需使用浮动了，总之十分方便。 常用： 在父级设置： ;将对象作为弹性伸缩盒显示 ;水平排列方式的设置，具体值根据需要设置，不需要记，看代码提示就好 ;垂直居中 在子级设置： ;按占比分配非设置固定值的空间 说明： 除去固定值空间的部分，其余部分占据全部的 的设置，是
阅读全文
摘要：在日常开发工作中，常常会遇到表格相关的各种需求，本文将通过代码实例，实现table的表头thead固定，tbody高度超出时滚动，同时，单元格内容超出宽度时以省略号显示。 以下方法的实现重点是将表单元素转换成行内块（由此tbody可实现超出滚动），并将单元格赋予固定值，可实现单元格内容超出以省略号显
阅读全文
