CSS
关注
分享
扫一扫
前端卡卡西呀
前端程序员。面向搜索引擎开发，熟练掌握CV大法的拷贝程序员---前端卡卡西
展开
-
从零开发 stylelint规则(插件)
从零开发一个自定义的 Stylelint插件工程。原创 2022-06-27 16:31:03 · 1171 阅读 · 1 评论 -
css实现0.5px线条，解决移动端兼容问题
1.利用background-image 渐变样式2.可以利用scale缩放3.给伪元素设置边框在这里插入代码片<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>0.5px线实现方法</title> <style type="text/css"> /*标准1px边框*/ .b1{ height: 40px; border: 1.原创 2020-11-23 09:50:52 · 1070 阅读 · 0 评论 -
element-ui 表格sortable排序手动js清除
element-ui表格组件自带的排序功能如下，详见Element表格排序现在有个需求，是在列表之上增加搜索功能，而搜索之后，数据恢复默认不排序，即：当前数据按照某个字段排序了，此时去搜索数据搜索出来的结果无需排序，就要讲排序状态清除，查阅文档，发现element提供了clearSort 方法解决方法：html: <el-table ref="sortTable" :data="tableData">js: this.$refs.sortTabl....原创 2020-10-19 14:17:35 · 2084 阅读 · 0 评论 -
带你学习flex布局
详见阮一峰老师博客Flex布局即为弹性盒子布局，采用Flex布局的元素，称为 Flex容器，简称"容器"，它的所有子元素自动成为容器成员，称为 Flex项目，简称 “项目”。容器的属性：1.flex-direction 主轴的方向（即项目的排列方向）row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端； column：主轴为垂直方向，起点在上沿； column-reverse：主轴为垂直方向，起点在下沿；2.flex-wrap 换行方..原创 2020-08-22 18:33:26 · 331 阅读 · 0 评论 -
float元素先后顺序
今天练习经典左中右三列布局，左右固定宽度，中间撑开自适应，遇到了小问题本来想效果是这种：写完代码如下：<style> .container { height: 200px; } .container div { height: 100px; } .left { float: left; width: 200px; background: red; } .center { background: gree原创 2020-08-13 15:13:09 · 2447 阅读 · 2 评论 -
CSS选择器权重计算和优化规则
1.CSS优先级：!important > 行内样式 > ID选择器 > class选择器 || 属性选择器 > 标签选择器 > 通配符*2.复杂嵌套中css样式权重的计算：权重计算规则（下文数字均为虚拟数字，便于计算，并非真实数值）行内(内联)样式：style="", 权重 1000； ID选择器，权重 100； 类、伪类、属性选择器，权重10； 标签选择器、类型选择器、伪元素选择器，如div p，权重1； 通配符、子选择器、相邻选择器，如*、>原创 2020-07-17 12:59:48 · 323 阅读 · 0 评论 -
前端CSS水平垂直居中的4种方式（元素宽高固定或者宽高不固定）
如未说明，HTML均使用如下模板<div class="parent"> <div class="son"></div></div>1.flex布局.parent { display: flex; justify-content: center; align-items: center;}2.position:absolute; + margin 负值 (需要固定宽高)，负值分别为子元素宽高的一半原创 2020-07-09 17:09:29 · 290 阅读 · 0 评论 -
css 上中下三行布局 4种方式
css 上中下三行布局，上下高度固定，中间自动填充满整个屏幕 的 4种方式左中右三列布局，左右固定宽度，中间自适应的5种方式原创 2020-06-20 22:33:52 · 3849 阅读 · 0 评论 -
CSS 左中右三列布局5种方式
CSS 左中右三列布局左右固定宽度，固定位置，中间自适应的5种方式上中下三行布局，上下固定高度，中间自适应的4种方式原创 2020-06-20 22:23:12 · 4478 阅读 · 0 评论 -
前端面试CSS篇（一）CSS盒子模型、BFC块级格式化上下文、清除浮动
1. 基本概念：标准模型和IE模型2.两者区别？标准模型的 宽和高，就是content的宽和高， 低版本IE模型的宽和高，包括了padding和border的宽和高3.css如何设置这两种模型？box-sizing: content-boxl; 标准模型 box-sizing:border-box; 低版本IE4.js如何获取设置和模型的宽和高？ 4.1 dom.style.width/height 只能获取行内样式（style设置的）； 4.2 dom.cu...原创 2020-06-08 22:50:39 · 314 阅读 · 0 评论 -
css伪元素实现小米商城顶部图标切换
小米商城顶部header图标效果：点击查看效果描述：鼠标划上，换成home图标，思路：使用before和after伪元素设置图片，鼠标hover时改变margin值；html：<div class="logo"></div>css:.logo { position: relative; width: 55px; height: 55px; background: #ff6700; overflow: hidde原创 2020-05-21 15:02:07 · 1479 阅读 · 0 评论 -
CSS代码实现提示气泡效果
项目中用到提示文字的气泡效果效果如下：1. 直接使用美工设计好的背景图（此处不讲）；2.用CSS实现： 思路： 整体旅框通过border 设置； 三角部分先通过 before伪元素设置一个全绿三角，再通过after设置一个全白三角遮住部分，形成所需效果。 代码如下html：<div class="div"></di...原创 2020-01-09 10:34:23 · 1492 阅读 · 0 评论