随笔分类 -  HTML&CSS

自适应布局
摘要：之前在几个CSS布局问题中，举了上下固定，中间自适应布局的例子，当时的例子父级元素的宽高都给定了，其实并不是个好例子，既然要自适应，父级元素就应该跟着页面大小变化，从而中间子元素也自适应。3种方法，其实是2种，因为是针对body，所以用fixed可以直接替换absolute来用。注意同时给html和 阅读全文
posted @ 2019-06-18 22:32 姜瑞涛 阅读(180) 评论(0) 推荐(0)
nth-child与nth-of-type
摘要：nth-of-type这个CSS3伪类还从来没有用过，今天好好研究一番，发现还是有用的。现在下面的Demo 显示结果如下 可见，p:nth-of-type(1)是取父元素下的p这种类型的第一个，p前面可能会有其它类型的元素；而p:nth-child(1)是父元素的第一个元素，且该元素必须是p。可以参 阅读全文
posted @ 2019-06-17 18:45 姜瑞涛 阅读(182) 评论(0) 推荐(0)
瀑布流的一些CSS实现方式
摘要：一个选择是用CSS3的多列columns，可以参考这篇文章。但这篇文章给的例子并不怎么好理解，我做了一些更改，在每个元素上加了序号。可以看到，多列布局是在每一列上依次排列元素的，第一列排完才开始排第二列，因为这里规定了4列，会尽量把元素数量均分到每一列。 另外一种方式是使用flex，可以参考这篇文章 阅读全文
posted @ 2019-06-14 09:56 姜瑞涛 阅读(182) 评论(0) 推荐(0)
不要放弃使用border-box
摘要：不知道有多少老前端像我这样，在项目中很少使用box-sizing这个属性值。因为CSS2.1中只有content-box这一种盒子模式，在CSS3还没有流行的时候，大家在工作中大量基于这种盒子模式写CSS样式，导致很多老前端即使是现在也默认使用content-box这种模式，很少手动写box-siz 阅读全文
posted @ 2019-04-12 20:51 姜瑞涛 阅读(2404) 评论(0) 推荐(0)
padding百分百值是相对谁的百分比
摘要：先看代码 要查一下资料了。规定基于父元素的宽度的百分比的内边距。 阅读全文
posted @ 2019-01-24 14:39 姜瑞涛 阅读(618) 评论(0) 推荐(0)
几个CSS布局问题
该文被密码保护。
posted @ 2018-06-09 17:48 姜瑞涛 阅读(22) 评论(0) 推荐(0)
简易复选框样式设置
摘要：受这篇文章启发 一大堆的 CSS 自定义复选框 主要是 自己写的 阅读全文
posted @ 2017-09-12 21:24 姜瑞涛 阅读(242) 评论(0) 推荐(0)
flex新的心得
摘要：主要是对于flex: 与width: 的心得，先看代码。 两个并列子容器，第一个同时声明了width和flex，结果发现width失效。 为何width没效果，这要从flex的默认值说起。在不设置flex的时候，flex的值是 “flex:initial”(相当于flex:0 1 auto)，而此处 阅读全文
posted @ 2017-05-19 19:14 姜瑞涛 阅读(185) 评论(0) 推荐(0)
总结自己常用的几种居中方式
摘要：从这几篇文章以及自己一年的前端经验总结出来的，flex的方式有空再写。知乎 segmentfault CSDN 1.单行文本的文字垂直居中 如下所示，块级元素的高度已给定，如何实现这个块级元素里的文本垂直居中呢？ 答案是设置块级元素的line-height与height相等。原理是什么？读过《CSS 阅读全文
posted @ 2017-02-14 10:39 姜瑞涛 阅读(380) 评论(0) 推荐(0)
CSS拾遗（二）
摘要：接CSS拾遗（一）。 4. 不透明度 opacity: 0.8是标准的写法；filter: alpha(opacity=80)是IE6-9的写法，IE9之前不支持opacity。 5. 链接样式顺序 a:link, a:visited, a:hover, a:focus, a:active 记忆口诀 阅读全文
posted @ 2017-02-05 14:15 姜瑞涛 阅读(161) 评论(0) 推荐(0)
CSS拾遗（一）
摘要：重新看《精通CSS（第二版）》做一些记录，方便今后巩固。 1.外边距叠加 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框、或绝对定位框之间的外边距不会叠加。 2.相对定位 使用相对定位时，无论是否移动，元素仍然占据原来的空间，其他元素也是对它原来空间的元素进行定位。 下面是未相对 阅读全文
posted @ 2017-02-05 10:50 姜瑞涛 阅读(278) 评论(0) 推荐(0)
静态资源命名的注意点以及document.write与innerHTML的区别
摘要：今天拿出了去年刚开始学前端的那本书来看，发现好多新东西。 使用下划线和混合大小写不利于SEO! document.write与innerHTML的区别 这个问题大概是初学前端的人才会问的吧，业务代码中都用不上，要么用jQuery要么用vue一类的MVVM框架了。 不过还是需要知道区别的。docume 阅读全文
posted @ 2017-01-25 12:01 姜瑞涛 阅读(393) 评论(0) 推荐(0)
CSS的两个小知识点 伪类选择器和display:table-cell
摘要：在对nth-child传参的时候，已经直接用公式，3n就表示3的倍数。多用伪类和伪元素，可以使代码更精简，多看一下。 display:table-cell实现垂直居中挺好用的，看别人的文章 另外，CSS3有个grid 布局，挺好用的，只是目前很多浏览器没有实现。 阅读全文
posted @ 2016-11-20 11:22 姜瑞涛 阅读(471) 评论(0) 推荐(0)
Flex小结
摘要：参考两篇文章 文章1 文章2 MDN 容器用display: flex;或display: inline-flex;指定为弹性Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item）， 阅读全文
posted @ 2016-10-19 21:14 姜瑞涛 阅读(238) 评论(0) 推荐(0)
CSS折行小记
摘要：最近项目中遇到字段内容过长的显示问题。 后来在网上找了资料，http://www.php100.com/html/webkaifa/DIV_CSS/2009/0416/2453.html 用了td(word-break: break-all; word-wrap:break-word;)，就好了，如 阅读全文
posted @ 2016-08-15 11:01 姜瑞涛 阅读(187) 评论(0) 推荐(0)