![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 71
CSS学习记录
海森堡_lichangan
这个作者很懒,什么都没留下…
展开
-
scss学习笔记
Sass的基本特性声明变量$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;如果值后面加上!default表示这个是默认值。普通变量与默认变量普通变量原创 2021-10-31 17:01:25 · 525 阅读 · 0 评论 -
CSS常用布局学习
CSS常用布局学习1、水平居中1.1 行内元素/行内块元素水平居中1.2 块级元素水平居中定宽块级元素水平居中不定宽块级元素水平居中方法一:设置table方法二:设置inline-block(多个块级元素)方法三: 设置flex布局(多个块级元素)方法4:position + 负margin;方法5:position + margin:auto;方法6:position + transform;2、垂直居中2.1 单行文本垂直居中2.2 多行文本的垂直居中2.3 块级元素垂直居中定高度垂直居中利用posit原创 2021-10-16 11:57:58 · 208 阅读 · 0 评论 -
左图右文排列
<div class="list-container"> <div class="photo-container"><img src="" alt="" class="photo" /></div> <div class="info-container"> <p><span class="name">姓名</span> <span class="age">年龄.原创 2021-10-05 12:59:51 · 110 阅读 · 0 评论 -
css实现横向滚动
<ul class="scroll"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>auto:只有当内容溢出时,才显示滚动条。scroll:无论是否溢出都显示滚动条。主要为了布局统一,防止滚动条有无导致布局偏差。.scroll { white-space: ...原创 2021-10-05 12:21:35 · 4550 阅读 · 0 评论 -
CSS多行文本溢出省略显示
CSS多行文本溢出省略显示1、单行文本溢出省略显示2、多行文本溢出省略显示2.1 WebKit内核浏览器解决办法2.2 其他浏览器解决方案2.2.1 定位元素实现多行文本截断1、单行文本溢出省略显示实现单行缩略(部分浏览器需要设置宽度):overflow: hidden;text-overflow: ellipsis;white-space: nowrap;2、多行文本溢出省略显示2.1 WebKit内核浏览器解决办法首先,WebKit内核的浏览器实现起来比较简单,可以通过添加一个-web原创 2021-10-05 12:00:21 · 884 阅读 · 0 评论 -
CSS学习笔记
1、CSS基本选择器1.1 标签选择器标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。语法: 标签名 { 属性1:属性值; 属性2:属性值; .... }p { color:red; font-size:19;}标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。1.2 类选择器如果想要差异化选择不原创 2021-09-15 15:30:29 · 932 阅读 · 0 评论