随笔分类 -  02_CSS

CSS之文本两端对齐
摘要：说起text align，大家一定都不觉得陌生，我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐，当然我们也使用justify来实现文本两端对齐。 如上图，两端对齐相对于左对齐，视觉上显得整齐有序。但justify对最后一行无效，通常这样的排版对整段文字是极好的 阅读全文
posted @ 2020-01-03 22:02 Sugеr 阅读(259) 评论(0) 推荐(0)
查漏补缺的css
摘要：1. 多行溢出...显示 display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 2. 一行文本超出... overflow: hidden; text-overflow 阅读全文
posted @ 2019-12-27 14:27 Sugеr 阅读(126) 评论(0) 推荐(0)
关于flex布局
摘要：关于flex布局的总结 一、起步 把容器指定为 flex容器 1. 任何一个容器都可以指定为Flex 布局。 2. 行内元素也可以使用Flex布局。 需要注意的是，设为flex布局以后，子元素的float、clear和vertical align属性将失效 二、然后 容器的所有子元素自动就成了 容器 阅读全文
posted @ 2019-11-21 21:33 Sugеr 阅读(212) 评论(0) 推荐(0)
CSS基础强化
摘要：1. 浮动引起元素变成行内块元素 display:inline block 效果： div正常宽高 span{width:0;height:200px} i{width:100px;height:50px} 所有元素经过浮动变为行内块元素 span不是块级元素，不支持宽高,浮动后支持宽高，heigh 阅读全文
posted @ 2019-06-24 14:53 Sugеr 阅读(218) 评论(0) 推荐(0)
CSS命名规范(规则)常用的CSS命名规则
摘要：CSS命名规范(规则)常用的CSS命名规则 CSS命名规范(规则)常用的CSS命名规则   头：header   内容：content/container   尾：footer   导航：nav   侧栏：sidebar   栏目：column   页面外围 阅读全文
posted @ 2018-10-23 20:09 Sugеr 阅读(1206) 评论(0) 推荐(0)
CSS3 使用 calc() 计算高度 vh px
摘要：Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calccalc()使用通用的数学运算规则，但是也提供更智能的功能： >使用“+”、“ 阅读全文
posted @ 2018-07-19 16:38 Sugеr 阅读(11308) 评论(0) 推荐(2)
关于css文字的扩展
摘要：1.不换行: .title{ white-space:nowrap; text-overflow:ellipsis; } 2.超出变三点 .title{ white-space:nowrap; text-overflow:ellipsis; over-flow:hidden; } 3.字间距 let 阅读全文
posted @ 2018-07-03 14:20 Sugеr 阅读(227) 评论(0) 推荐(0)
关于css的总结
摘要：写在前面 ,学好css,需要长期的推敲和积累 ,细节是不断完善的,逐渐形成自己的风格 让自己的css更加接近优雅. 下面来总结一些我觉得比较好的css代码风格 : 1. 一般网页中的背景 用背景时 设置为行内样式 style="background-image: url(img/01.jpg)"; 阅读全文
posted @ 2018-02-02 16:55 Sugеr 阅读(272) 评论(0) 推荐(0)