CSS
关注
分享
扫一扫
层叠样式表
百香果果ccc
这个作者很懒，什么都没留下…
展开
-
实现文本超过2行显示省略号
【代码】实现文本超过2行显示省略号。原创 2023-03-19 19:02:45 · 136 阅读 · 1 评论 -
CSS中的响应式布局【媒体查询】
@media all and (min-width: 920px){}，orientation:landscape、orientation:portrait原创 2022-10-24 15:28:43 · 230 阅读 · 0 评论 -
CSS中常见的单位
px、em、rem、vw、vh单位解析原创 2022-10-24 14:42:27 · 75 阅读 · 0 评论 -
CSS中网格布局grid的一些常见属性
作用于父容器：grid-template-rows、grid-template-columns、grid-template-areas、grid-template、grid-row-gap、grid-column-gap、grid-gap、justify-content、align-content、place-content、justify-items、align-items、place-items；作用于子容器：grid-area、justify-self、align-self、place--self原创 2022-10-24 12:10:27 · 288 阅读 · 0 评论 -
CSS中弹性布局flex的一些常见属性
flex-direction、flex-wrap、flex-flow、justify-content、align-content、align-items、order、flex-grow、flex-shrink、flex-basis、flex、align-self原创 2022-10-24 11:08:32 · 101 阅读 · 0 评论 -
CSS中的BFC规范（块级格式化上下文）
触发BFC的一些方法举例原创 2022-10-06 17:07:33 · 55 阅读 · 0 评论 -
CSS中的常用选择器详解
⑤ nth-last-of-type(n)：获取同类型中倒数第n个元素。① :nth-of-type(n)：获取同类型中第n个元素。④ :only-of-type：获取同类型中唯一的那个元素。② :first-of-type：获取同类型中第一个元素。③ :last-of-type：获取同类型中最后一个元素。⑥ :nth-child(n)：获取所有孩子中第n个元素。⑨ :only-child：获取所有孩子中唯一的那个元素。① M N：后代，获取M中所有的孩子N。② M > N：父子，获取M的儿子N。原创 2022-10-03 09:40:17 · 213 阅读 · 0 评论 -
CSS中关于文字的一些属性
① 可设置多个字体，用逗号分割，第一个字体为默认字体，后面的字体为备用字体。【取值：left、center、right、justify（两端对齐）】② italic：斜体，对具有斜体属性的文字有效（推荐）③ oblique：斜体， 不具有斜体属性的文字也有效。【取值：单词表示法、rgb三原色表示法、十六进制表示法】② 软折行：word-wrap: break-word;【取值：像素，一般为偶数，12、14、16、18…注：中文中混有英文，通过2em会对不齐，暂无解决方案。② em：1em = 字体大小。原创 2022-10-02 17:20:34 · 197 阅读 · 0 评论 -
CSS利用边框实现三角形
CSS利用边框实现三角形。原创 2022-10-02 15:29:39 · 55 阅读 · 0 评论 -
CSS中background的属性说明
① scroll：滚动，默认值，参照当前容器进行偏移（滚动浏览器时，背景图向上移动）① border-box：默认，效果同background-origin。① padding-box：默认，图片以内填充区域左上角为基点展示图片。③ content-box：图片以内容区域左上角为基点展示图片。② border-box：图片以边框区域左上角为基点展示图片。【若图片比容器小，则默认会x、y轴平铺】① repeat：x、y轴都平铺，默认值。④ no-repeat：x、y轴都不平铺。原创 2022-10-02 14:59:48 · 364 阅读 · 0 评论 -
CSS中选择器的优先级
!important>行间样式>id>class>标签>*>继承，且!important不能对继承的属性提升优先级原创 2022-09-30 11:10:11 · 83 阅读 · 0 评论 -
CSS中img与div容器底部默认有空隙
原因：内联元素img的对齐方式是按照文字的。结果：图片与div底部有一些空隙。原创 2022-02-22 11:56:07 · 440 阅读 · 0 评论 -
利用CSS实现0.5px的分割线
横向分割线div { width: 100px; height: 1px; background-color: orange; transform: scaleY(0.5);}给一个空的div设置以上样式，效果如下：纵向分割线div { width: 1px; height: 50px; background-color: orange; transform: scaleX(0.5);}给一个空的div设置以上样式，效果如下：...原创 2022-02-16 16:24:09 · 689 阅读 · 0 评论 -
CSS样式的引用方式
内联（行内、行间）样式利用标签中的style属性来实现<div style='width: 100px; height:100px; background-color: red;'>这是一个块</div>内部样式利用style标签来实现<html> <head> 省略了一些初始代码... <title>网页标题</title> <style> div { width: 100p..原创 2022-02-13 17:19:40 · 794 阅读 · 0 评论 -
CSS中块元素、内联元素、内联块元素的区别
类型特点例子块元素（block）可设置宽高，宽度默认为100%，独占一行div、p、ul、li、form、table内联元素（inline）无法设置宽高，元素大小随内容变化，所有元素默认排在一行a、u、i、b、span内联块元素（inline-block）既能设置宽高，又能排在一行显示img、input...原创 2022-02-09 23:25:45 · 368 阅读 · 0 评论 -
CSS清除浮动的几种方法
场景：a、b、c左浮动，d是与a、b、c同级的div，d受a、b、c浮动的影响被覆盖了，想要让d不受a、b、c浮动的影响有以下几种方法把横向排版的a、b、c包裹在父元素div中，并为此div手动设置合适的高度（设置高度是因为浮动的元素不占据位置，无法将父元素撑开）。此方法不推荐，因为需要手动来控制高度，比较麻烦。为d设置clear：left / right / both。① left：表示该元素不受左浮动的影响② right：表示该元素不受右浮动的影响③ both：表示该元素不受左、右浮.原创 2022-02-09 21:24:24 · 191 阅读 · 0 评论