CSS
关注
分享
扫一扫
King's Blog
行百里者半九十
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
flex: 1中的flex-basic为什么等于0%？
flex-grow: 1 的语义是“占用剩余空间的比例”，而 flex-basis: 0% 强制初始尺寸为 0，使得剩余空间的分配逻辑更纯粹。原创 2025-04-17 00:27:06 · 628 阅读 · 0 评论 -
SassError: Expected newline. sass
SassError: Expected newline. sass报错原创 2022-08-07 20:59:45 · 4237 阅读 · 0 评论 -
IOS兼容超出部分省略号
问题描述：在IOS手机中，使用如下代码显示省略号不生效：overflow:hidden; text-overflow:ellipsis;white-space:nowrap;解决办法：overflow:hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;另附超过部分在第二行省略号、第三行省略号代码：no-wrap-two()原创 2021-04-27 10:26:48 · 3077 阅读 · 0 评论 -
CSS实现文字换行缩进
想要的效果：代码实现：给每个div加样式padding-left: 25px;text-indent: -25px;原创 2021-04-12 16:45:47 · 1406 阅读 · 0 评论 -
使用CSS3的animation steps属性实现跳帧动画
steps参数对应的是animation-timing-function|动画速度曲线。steps()指定了两个参数，一个为整数值，表示跳帧动画间隔数量，第二个为start和end，默认为end，表示这种跳帧动画是在间隔的起点还是终点变化。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2020-08-24 11:37:22 · 1030 阅读 · 0 评论 -
在第n行文字末尾显示省略号
在第一行文字末尾显示省略号overflow: hidden;white-space: nowrap;text-overflow: ellipsis;如果想在第n行文字末尾显示省略号：display: -webkit-box 将对象作为弹性伸缩盒子模型显示-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式-webkit-line-clamp 限制一个块级元素显示的文本的行数overflow: hidden;display: -webkit-box;-webk原创 2020-08-18 11:33:09 · 261 阅读 · 0 评论 -
vue学习之sass和scss的区别
1原创 2020-07-26 21:28:58 · 655 阅读 · 0 评论 -
css外部引入样式之link和@import的区别
1原创 2020-07-26 21:18:04 · 372 阅读 · 0 评论 -
CSS动画
笔记放在Github上，点击访问下载CSS动画-animation先声明动画，也可以用0%到100%，其中myani是动画的名字 @keyframes myani{ from{ width: 100px; background-color: cyan; } /*50%{ width: 200px; }*/ to{ widt...原创 2019-07-28 13:30:17 · 787 阅读 · 0 评论 -
CSS布局汇总
笔记放在Github上，点击访问下载CSS的布局包括：浮动布局、定位布局以及flex布局。浮动布局：floatfloat:left; 左浮动 浮动元素脱离文档流，原先位置不保留float:right; 右浮动clear: both; 清除浮动 清除兄弟元素的浮动影响overflow:hidden; 清除浮动，清除浮动 清除子元素的浮动对父元素产生的影响定位 position...原创 2019-07-28 13:26:01 · 221 阅读 · 0 评论 -
CSS盒子模型
笔记放在Github上，点击访问下载盒子模型分为W3C盒子模型和IE盒子模型W3C盒子：默认的盒子模型-标准的盒子模型1.padding 内间距 (1).一个值：4个方向的上下左右 padding:100px; (2).两个值：上下 左右 padding:10px 20px; (3).三个值：上 左右 下 padding:10px 20px 30px; (4).四个值...原创 2019-07-28 13:01:15 · 146 阅读 · 0 评论 -
具有嵌套关系的两个div间的margin合并问题
两个嵌套div边距合并问题解决边距合并不仅仅是上边距，下边距也一样会被合并。即 margin-top 和 margin-bottom <div class="outer"> <div class="inner"></div> </div>1. 给父元素添加属性 overflow:hidden.outer{ width: 20...原创 2019-07-03 17:37:48 · 1139 阅读 · 0 评论 -
在只修改CSS代码的前提下，完成图中的要求。
观察下面的代码把上面的图案通过修改CSS代码，转变成下面的图案：方法一 给 .one 设置 flex 布局*{ margin: 0; padding: 0;}.one{ background-color: grey; display: flex;}.one .inner1,.one .inner2{ width: 100px; height: 100px; bac...原创 2019-07-03 20:19:55 · 200 阅读 · 0 评论 -
元素水平居中问题汇总
关于元素水平垂直居中问题：行内元素水平垂直居中水平居中：给父元素设置 text-align:center;垂直居中：:方法1：给父元素或子元素设置 line-height:父元素的height;方法2：给父元素设置 display: table-cell;vertical-align: middle;块级元素水平垂直居中水平居中：方法1：直接设置 margin:0 auto;...原创 2019-07-04 09:54:24 · 204 阅读 · 0 评论 -
CSS相关知识点总结
记住在CSS中设置如下：*{ margin:0; padding:0} html,body{ height:100%}元素水平垂直居中以下前提都是在一个元素的前提下生效的，父子元素不算行内元素给父元素设置 text-align:center; 给子元素设置 line-height:父元素的高给父元素设置 text-align:center; display:table-cell;...原创 2019-07-09 17:21:26 · 149 阅读 · 0 评论 -
CSS中常用的clearfix方法
常用的清除浮动(clearfix)方法：清除兄弟元素带来的浮动影响方法一：在浮动元素后新增一个空div标签，设置 clear:both;方法二：在有影响的兄弟元素中设置 clear:both;清除子元素给父元素带来的浮动影响方法一：给父元素设置 overflow:hidden; 可加*zoom=1;用于兼容IE6方法二：使用after伪元素清除浮动.outer::after{ ...原创 2019-07-06 23:39:17 · 2435 阅读 · 1 评论 -
初识CSS
笔记放在Github上，点击访问下载CSS是 Cascading Style Sheets层叠样式表的缩写，是一个用于修饰文档的语言，可以将文档以更优雅的形式呈现给用户。CSS如何作用于HTML？？外部样式表： href里面放CSS文件路径导入外部样式：在@import后面跟CSS文件路径<style type="text/css"><!-- 在style的...原创 2019-07-25 20:02:12 · 223 阅读 · 0 评论 -
CSS选择器
笔记放在Github上，点击访问下载选择器：标签选择器（元素选择器）：div{}id选择器：#id值{}类选择器：.class值{}普遍选择器：*{}，表示选中所有元素层次选择器：(1). 后代选择器：div *{}表示div内的所以后代，包括子代和孙代以及孙代的孙代。(2).子代选择器：div>*表示div内所以的子代，而孙代不会被选中。(3). 相邻兄弟选择器：di...原创 2019-07-25 20:19:14 · 284 阅读 · 0 评论 -
CSS常用样式总结
笔记放在Github上，点击访问下载HTML属性继承：不可继承的属性：display,border,background,margin,padding,height,width等。可继承的属性：font系列属性,text系列属性,list系列属性,color,cursor,等。attr:initial;将可继承的属性设置成不可继承的。attr:inherit;b将不可继承的属性设...原创 2019-07-28 11:54:48 · 290 阅读 · 0 评论 -
设置了*{margin:0;padding:0}后table的align:center失效
今天在做一个表格时，开头在内部样式表中写了：*{ margin:0; padding:0;}问题一当我在body里面做表格时，发现table的 align:center;属性失效，不能居中了。查阅相关资料后，发现是 margin:0 导致的。解决办法：在table中设置 margin:auto; 即可。问题二当我在table中设置 cellpadding 属性时也失效了。...原创 2019-07-08 15:26:46 · 1545 阅读 · 0 评论