随笔分类 - CSS
摘要：CSS样式被称为为“层叠样式表”，是一种网页制作做不可或缺的技术，是用于装饰网页，达到设计效果的一种样式语言，下面将整理一下css常用样式： 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、P
阅读全文
posted @ 2020-05-20 12:04
前端一点红
摘要：在html里面空格的话,你直接敲打出来的空格是不可以的,下面将通过html和css中设置显示空格的实现总结： Html中空格 符号编号描述   不断行的空白（1个字符宽度）， 不换行空格 全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了
阅读全文
posted @ 2020-05-20 11:59
前端一点红
摘要：transform是css3的新特性之一。有了它可以box module变的更真实，这篇文章将全面介绍关于transform的使用。 transform的作用 transform可以让元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动tran
阅读全文
posted @ 2020-05-18 16:29
前端一点红
摘要：:nth-child是css3的一个比较常用的选择器。它用于匹配属于其父元素中的子元素，不论元素的类型。 它的参数可以是数字、关键词或公式。下面讲介绍它的使用方法, nth-child的使用 html结构如下： <div class="demo"> <p>1</p> <p>2</p> <p>3</p
阅读全文
posted @ 2020-05-18 13:05
前端一点红
摘要：在网页布局中，图文排版是我们常用的，那么经常会遇到如何让图片居中显示呢，这篇文章将总结常用css实现图片居中的方法总结： html结构: 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd"> 2
阅读全文
posted @ 2020-05-18 12:51
前端一点红
摘要：网页开发过程中经常会遇到需要把多行文字溢出显示省略号，这篇文章将总结通过多种方法实现文本末尾省略号显示。 一、单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:e
阅读全文
posted @ 2020-05-18 12:45
前端一点红
摘要：这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结，方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容'、‘元素阴影’，‘border取消宽度影响’,‘css3的背景渐变’，‘css的透明’等等 单行缩略号 1 .overhid{ 2 overflow: hidden; 3 wh
阅读全文
posted @ 2020-05-17 19:24
前端一点红
摘要：CSS 伪类用于向某些选择器添加特殊的效果，而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在某个元素之前插入一些内容； ::after/:after 在某个元素之后插入一些内容； ::firs
阅读全文
posted @ 2020-05-17 18:29
前端一点红
摘要：Less一种动态样式语言,LESS将CSS赋予了动态语言的特性，如变量，继承，运算，函数...LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 安装与使用： //客户端引用 <link rel="styles
阅读全文
posted @ 2020-05-17 18:26
前端一点红
摘要：关于webAPP的开发最主要解决的就是“自适应自适应布局”。常规的适配有很多做法，例如：流式布局、限死宽度等，但是这些方案都不是最佳的解决方法，而最满足设计需要的是： 元素可以根据屏幕大小而等比列变化，达到最佳的视觉效果。所以我们采用rem来实现自适应，由于rem是通过html根元素进行适配的，设
阅读全文
posted @ 2020-05-17 17:58
前端一点红
摘要：高度自适应第一种情况 1.高度不去设置，或者高度设置auto 内容撑开父元素的高度。2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高度塌陷 解决高度塌陷的方法 (1)给出现高度塌陷的元素添加：overflow
阅读全文
posted @ 2020-05-16 15:58
前端一点红
摘要：CSS 变量技术 具体用法 使用 -- 声明变量，使用 var() 函数获取变量。 :root{ --header-height: 70px; } body { --color: white; } .header { height: var(--header-height); } var() 函数还
阅读全文
posted @ 2020-05-16 15:57
前端一点红
摘要：1.层级关系 让这个box范围内的全部包进来，这样的话就完美的进行调节，再也不用到处找第几行第几个，我刚才在哪个位置给覆盖了。一看便知！ .box{ width: 100%; height: 300px; p{ margin: 10px; span{ padding: 10px; a{ list-s
阅读全文
posted @ 2020-05-16 15:35
前端一点红
摘要：自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。 所以可以
阅读全文
posted @ 2020-05-15 11:04
前端一点红
摘要：设置滚动条的样式： div::-webkit-scrollbar { width: 0; } 关于::-webkit-scrollbar ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例
阅读全文
posted @ 2020-05-15 10:58
前端一点红
摘要：在前端开发过程中，我们经常会使用到浮动(float)，这个我们即爱又恨的属性。爱，是因为通过浮动，我们能很方便地进行布局；恨，是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法，希望对大家有所帮助。 方法1：使用带clear属性的空元素 使用空标签清除浮动：在需
阅读全文
posted @ 2020-05-15 10:51
前端一点红
摘要：了解字体的一样常识，不管做一份文档编辑还是网页开发，都是很有必要的。整齐划一，井然有序才终是大家之道。 1.字体 在文档编辑中，我们常用的是宋体，小四号字，新罗马字体，字母和数字用的是Arial字体,段落首行缩进2个字体，采用多倍行距中的1.25倍行距。 在网页开发中，普遍偏爱微软雅黑与宋体，14/
阅读全文
posted @ 2020-05-15 10:44
前端一点红
摘要：学习CSS是构建好看网页的一种方式。 但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。 毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。 因此，在这篇文章中，向你介绍7个 比较少见且好用的 CSS 属性，希望对你有所帮助。 1. vertical-al
阅读全文
posted @ 2020-05-15 10:36
前端一点红
摘要：什么是“层叠上下文” 层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发
阅读全文
posted @ 2020-05-14 21:45
前端一点红
摘要：我们平常在用DIV+CSS制作html网页页面时，常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊，同时不知道什么时候该用class，什么时候又用id，以及它们用法与限制是怎么样的。 ID和class都是“钩子” 我们需要一个使用html/xht
阅读全文
posted @ 2020-05-14 21:32
前端一点红
浙公网安备 33010602011771号