CSS
关注
分享
扫一扫
文章平均质量分 86
小猪弟
学就对了
展开
-
CSS基础：vw和vh是什么
vw和vh是什么原创 2022-04-08 17:41:52 · 7997 阅读 · 0 评论 -
CSS基础：Less的使用以及注意项
本篇主要聊的less的安装，以及使用过程中如果声明变量，方法。还有其继承，导入when和if关键字。原创 2022-04-01 18:52:45 · 5439 阅读 · 0 评论 -
CSS基础： rem和媒体查询
rem是什么以及rem存在的意义，而结合页面缩放的时候，为什么页面元素也在缩放，所以使用到媒体查询原创 2022-03-30 21:19:07 · 749 阅读 · 0 评论 -
CSS基础：flex布局子元素被撑大（文本省略号）
flex布局不但会让盒子撑大，而且还有自己在再使用超过文本长度使用省略号无效，所以聊一下解决方法。原创 2022-03-28 16:48:41 · 6298 阅读 · 3 评论 -
CSS基础：浅聊flex布局以及常用属性
聊flex布局，以及常用的属性，还有具体的例子更方便理解原创 2022-03-27 22:58:34 · 3681 阅读 · 0 评论 -
CSS基础：移动端开发常识，多倍图初始化等
了解移动开发页面也是需要考虑一些问题，具体如下兼容性移动端浏览器的兼容性要比PC版的兼容性要求会相对低一些，毕竟PC浏览器的除了五大内核不同衍生的浏览器外，还有就是版本，不同版本导致的兼容性，让前端开发的时候焦头烂额的，而浏览器要好点，毕竟安卓机子都是除了谷歌原生系统就是原生系统衍生的国内版本，所有其webkit内核在安装机子上都兼容，而浏览器也是用这个内核（sa’fari内核也是webkit）。手机屏幕移动端的设备屏幕，我们很容易发现不同的手机型号哪怕就是同一个牌子手机的屏幕大小有可能就不相同，原创 2022-03-26 21:50:39 · 2601 阅读 · 0 评论 -
CSS基础：新属性3D的转换，以及案例演示
CSS3新特性之3D转换，以及透视，3D呈现 transfrom-style原创 2022-03-23 18:19:08 · 1965 阅读 · 0 评论 -
CSS基础：浅聊动画
CSS3新特性动画（abimations），简单聊一些其用法，以及例子原创 2022-03-22 17:30:04 · 371 阅读 · 0 评论 -
CSS基础：浅聊2D转换
CSS3 转换的简单使用，包括转换中心，转换旋转，缩放等原创 2022-03-21 18:14:14 · 664 阅读 · 0 评论 -
CSS基础： css3新特性体验一滤镜和过渡
滤镜filterfilter CSS属性性将模糊或者颜色便宜等图形效果应用于元素。格式：filter: 函数()函数有很多的如果有兴趣可以看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Functions演示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试文档<原创 2022-03-21 10:54:05 · 283 阅读 · 0 评论 -
CSS基础： 单行和多行文本溢出显示省略号
文本溢出后很多，会显示一些省略号，这个在很多网站都会这样做，从技术层次来分析有两种，一种是前端通过css或者JavaScript进行进行，还有一种是后端传递文字的时候，本身处理完长度，然后返回一个嗲有省略号的文字。而这个放在CSS专栏聊，自然就会聊在CSS 中如何解决这个问题，在CSS中对于行数不同不可以分单行文本溢出和多行文本溢出。单行文本溢出如果解决文本溢出显示省略号，需要满足的三个条件：先强制一行内显示文本white-space:nowrap;/*默认normal 自动换行*/超原创 2022-03-11 11:35:35 · 5801 阅读 · 0 评论 -
CSS基础：界面样式和 图片文字居中（vertical-align）
界面样式所谓的界面样式，就是更改一些用户的操作样式，进而提供更好的用户体验。其中说一下常用的三种。更改用户的鼠标样式。表单的轮廓。防止表单域拖拽鼠标样式 cursor有很多属性，就聊一下常用的几个：属性描述default默认pointer小手move移动text文本not-allowed禁止演示：<!DOCTYPE html><html lang="en"><head> <原创 2022-03-11 10:41:45 · 2795 阅读 · 0 评论 -
CSS基础：浅用字体图标（以阿里字体图标库演示）
前面聊了一下精灵技术，虽然减少了请求服务器的次数，让用户有了一种错觉网速提高等优点，但是这个也有其弊端：图片文件是很多小图标整合，所以图片本身很大。图片本身在放大和缩小会失真。还有一旦图片整合好的话，然后再网页引入后，想要修改的话可能有点复杂。这个时候就有了一个技术出现，那就是字体图标(iconfont).字体图标可以为前端又有了一种更加方便高校的图标使用方式：展示的是图标，本体属于字体。看一下淘宝中购物车：看着是一个图片，其实具有字体的特征。可以通过浏览器工具调整一下其颜色：可以原创 2022-03-10 12:08:03 · 1152 阅读 · 0 评论 -
CSS基础：精灵技术（sprites）
其实网页在加载的时候每请求一次图片就算一次请求，请求次数过多也会造成服务器压力过大，相应变慢。而精灵图（sprites）技术就算解决这个问题：减少对服务器的请求次数。为什么减少了图片的请求次数呢？说白了将一些小图标或者图片放在一张图片里面，然后通过CSS定位展示其中需要的部分。王者荣耀网页种我标记的两个位置，看似没什么关系，但是通过后台看的话，发现一件事，那就是图片的却都是来自一张图片：所以可以看出精灵图核心：精灵技术主要是针对背景图片的使用，就是把很多小背景图片放在一张大图片种，减少服务器请求原创 2022-03-09 18:19:47 · 3601 阅读 · 1 评论 -
CSS基础: 元素隐藏和显示
现在聊一下常见的元素显示和隐藏，其实前面也用过，现在单独拿出来再聊一下。主要说如果让一个元素在页面种隐藏或者显示出来。display 属性 隐藏显示其实display前面也聊过，再元素标准类别转换中说过，本篇主要聊其在元素显示和隐藏的作用。display : none : 隐藏元素display ：block : 除了转换位块级元素之外，同时还有显示元素的意思。display 隐藏元素后，不再占有原来的位置。所以在网页种都会使用，所以大家应该掌握。visibility 可见性原创 2022-03-09 16:24:50 · 490 阅读 · 0 评论 -
CSS基础: 五种定位以及定位叠放次序
前面看到浮动其实可以让某个盒子模块在某个位置，但是为什么还要右定位？其实很简单，因为浮动有些定位是解决不了的，比如看下图：在滑动的时候，你发现了没有，那就是标记的地方，拉动网页都在顶部和侧面，如果使用浮动能解决吗？（只用CSS，而不适用js脚本实现。）以上效果，标准流和浮动都无法快速实现，此时需要定位来实现了。简单的说，浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用于横向排列。而定位测试可以让盒子自由在某个盒子内移动位置或者固定在屏幕的某个位置。定位简单的说就是将盒子定在某个一位置.但是在原创 2022-03-09 15:07:09 · 1424 阅读 · 0 评论 -
CSS基础: 浮动 以及清除浮动
其实理解浮动之前，需要首先了解网页布局的三种方式。网页布局的本质就是：通过CSS来摆放盒子，把盒子摆放到相应的位置。而CSS提供的三种传统布局方式，简单的说就是盒子如何进行排列顺序。普通流（标准流）所谓的标准流：就是按照规定号的默认方式排列。块级元素回独占一行，由上而下排。常用的元素：div，hr，p，h1-h6,ul,ol.dl等等行内元素会按照顺序，从左到右排列，碰到父类元素边缘会自动换行。常用元素：span ， a 等浮动：很多时候很多布局，标准流无法完成，这个就需要浮动完成原创 2022-03-04 19:05:31 · 624 阅读 · 0 评论 -
CSS基础：圆角边框，盒子和文字阴影
圆角边框什么是圆角边框呢？这个不说话而是先看图片：图中的标记的地方，不是图片而是通过圆角边框进行设置得到的。现在如何实现这个使用格式如下：border-radius:数值 | 百分数数值：用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值百分比：用百分比定义圆形半径或椭圆的半长轴，半短轴。水平方向百分比参照元素宽度（非内容宽度），垂直方向参照元素高度。不允许负值。现在演示一下（为了证明是自己写的，所以颜色就不与原图一样了）：<!DOCTYPE html><原创 2022-03-04 11:50:53 · 1117 阅读 · 0 评论 -
CSS基础：页面布局三大核心之盒子模式
页面布局要学习三个核心：盒子模式，浮动，定位。而本篇主要聊的就是盒子模式。前面聊html标签的时候说过两个标签frameset和iframe对页面进行布局，但是又提到是之前页面布局的方式，而现在呢？比如我博客的主页：然后邮件看一下源码的时候发现没有上面提到的框架标签，而上面的标记的部分可以说都是一个一个盒子，然后向盒子里面放内容。现在说一下布局的方式：先准备号相关的网页元素，而网页元素基本就是一个盒子。利用CSS设置好盒子的样式，然后摆放到相应的位置。望盒子里面放内容。其中1，3步骤原创 2022-03-03 16:42:06 · 1537 阅读 · 0 评论 -
CSS基础之 CSS三大特性
1CSS有非常重要的三个特性：层叠性，继承性和优先级。层叠性这个首先举出一个例子，不然不好说：/* 用id选择器 */ #idn{ color:red; font-size:22px; } #idn{ color:green; }id名为idn的元素，会如果显示呢？毕竟一个页面的id名字只会指定一个标签，先猜测一下，然后再看下面：<!DOCTYPE html><html lang="zh"><head> <met原创 2022-03-01 18:29:24 · 585 阅读 · 0 评论 -
CSS基础之 背景属性设置
CSS设置背景，不但包括背景的颜色，还包括背景图片等设置，还是老规矩演示比较靠谱。背景背景颜色背景颜色和文本颜色不同，一个是设置的是文本的颜色，一个是背景的颜色。使用的是backgrou-color属性选择器{ background-color: transparent | 颜色}transparent 背景颜色为透明。一般情况下背景颜色默认就是透明。颜色 对应color的颜色标准即可。演示：<!DOCTYPE html><html lang="zh"&g原创 2022-03-01 15:23:52 · 3467 阅读 · 0 评论 -
CSS基础之 元素（html标签）模式切换
在前面聊html标签的时候，分成了三种：那就是内联元素（inline element 又称行间元素或行内元素），块级元素(block element)，内联块级元素(inline-block element)内联元素：其不独占一行，无法定义宽高。例如：select textarea strong em del sub sup ins a br b del ins u块级元素：独占一行，可以定义宽高,宽度没有设置时，默认为100% 。例如p div address center h1-h6 hr pre原创 2022-02-27 21:18:23 · 1149 阅读 · 0 评论 -
CSS基础之 文字和文本元素
字体CSS 字体（Font）属性用于定义字体采用字体系列（例如，宋体，黑体等），大小，粗细和文字的样式（如斜体等）。字体系列字体的系列使用的是font-family属性定义选择器{ font-family: "字体样式" }/* 例子1：比如单一 字体 如果是汉字以及英文中间有空格就需要有双引号*/p{ font-family:"微软雅黑"}/* 例子2：也可以定义几个字体系列，其按照顺序依次显示如果某一个系统支持显示后面的就不在显示 */p{ font原创 2022-02-27 19:41:17 · 891 阅读 · 0 评论 -
CSS基础之 伪类和伪元素
上一章聊了CSS的选择器，但是还有一种选择器名字伪类选择器和伪元素选择器现在看一下：伪类：伪类就是前面有一个:的标签。也就是截图中多的那些。伪类本身是不存在的类，是一种特殊的类，伪类用来描述一个元素的特殊状态，比如：第一个元素，被点击的元素，鼠标一定的元素等等。伪元素：前面有两个:的标签。也就是截图中少的那些。其实上面两种都有很多不过，只会演示一些常年用的，其它的如果使用的时候也可以根据演示的进行套用，即可或者翻看官方文档。伪类选择器演示只会演示常用的，而不是全部，不过这个可以看原创 2022-02-22 17:03:32 · 526 阅读 · 0 评论 -
CSS基础之 选择器（基础选择器和复合选择器）
CSS中的选择器其中包含基础选择器以及多种复合选择器。原创 2021-12-14 21:46:47 · 1445 阅读 · 0 评论