css
关注
分享
扫一扫
码代码的程序员
这个作者很懒，什么都没留下…
展开
-
标准盒子模型和IE盒子模型的区别
标准盒子模型在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图。假设定义了 width, height, margin, border, and padding:.box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black;}如果.原创 2021-03-30 16:57:23 · 3622 阅读 · 0 评论 -
什么是BFC，BFC特性，BFC怎么产生？
什么是BFC?BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境.MDN：一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。BFC怎么产生?一个块格式化上下文由以下之一创建：1.根元素或其它包含它的元素2.浮动元素 (元素的 float 不是 none)3.绝对定位元素 (元素具有 position 为 abso原创 2021-03-30 16:16:46 · 786 阅读 · 0 评论 -
面试题经常问的左侧固定宽度，右侧自适应的5种实现方案
1.float布局1.1利用margin-left<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edg原创 2021-03-29 11:48:49 · 235 阅读 · 0 评论 -
谈一下图片的自适应
在工作中经常遇到要求图片自适应的需求，下面就谈一下我在工作中经常使用的一些方法单独使用img标签的情况单独使用img的时候，可以只设置width就可以了，height不用设置，因为img不设置height，它会自动根据图片的比例设置自适应高度例如：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" .原创 2020-10-10 11:04:45 · 4211 阅读 · 0 评论 -
vue中引用阿里iconfont
1.安装svg-sprite-loadercnpm i svg-sprite-loader -D2.在阿里iconfont下载好icon,保存成svg格式，放在vue项目文件下面，我这里是icon文件夹，然后创建一个index.js文件icons--index.jsimport Vue from 'vue'import SvgIcon from '@/component...原创 2020-02-25 15:16:22 · 388 阅读 · 0 评论 -
Sass 和 Js 之间变量共享
假设我们在xxx.scss中声明了一个theme:blue，我们在 js 中该怎么获取这个变量呢？我们可以通过css-modules:export来实现。// xxx.scss$theme: blue;:export { theme: $theme;}// test.jsimport variables from '@/styles/xxx.scss'cons...原创 2020-02-21 00:46:03 · 3919 阅读 · 1 评论 -
router-link-active
组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名，就是router-link-active，我们就可在a标签被点击时，给a标签添加颜色或背景如果你觉得router-link-active这个名字过长时，你可以在main...原创 2020-02-16 17:49:56 · 5446 阅读 · 0 评论 -
css实现三角形
css实现三角形的原理就是控制元素的border属性，如果要显示一个向上的三角形，就不要border-top属性，然后它的相反方向的border-bottom:要比平常的大一倍，具体看如下代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...原创 2020-02-14 13:57:56 · 275 阅读 · 0 评论 -
移动端的rem适配方法---vue中的用法
1.创建一个scss文件//a.scss文件@function px2rem($px) { $rem: 37.5px;//苹果6的设计稿 @return ($px / $rem) + rem;}2.在vue中配置全局的sass在vue.config.js文件中加入下面代码就可以scss文件里面的方法全局引用module.exports = { css: {...原创 2020-02-07 22:36:35 · 663 阅读 · 0 评论 -
css中的伪类和伪元素
:before，::before这俩写法，估计有些人很纳闷，这两者有什么区别其实:before，::before这两种写法都是等效，只是:befor是CSS2的写法，::before是CSS3的写法。双冒号(::)这是CSS3 规范中的要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已...原创 2020-02-06 14:56:06 · 624 阅读 · 0 评论 -
pc网站的一些自适应的方案
1.可以通过设置一个最小的宽度（例如min-width:1200px）,也是就是如果屏幕的宽度小于1200的时候，内容的宽度就是1200，然后出现横向滚动条2.设置一个百分比宽度，例如（width:85%;）,也是就是如果屏幕的宽度小于1200的时候，内容的宽度就是1200，然后出现横向滚动条,如果width的值大于1200的时候就是以width为准。3.设置一个最大的宽度，例如（max-...原创 2020-01-13 15:12:51 · 1801 阅读 · 0 评论 -
阿里iconfont的用法
1.阿里iconfont的网站 ：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22.选择图标加入购物车，然后点击购物车图标出现如下图片，这里选择添加项目，也可以选择下面的二个3.添加一个项目名称，或者如果已经有项目名称了就自己添加进去就可以了4.进去项目里面会出现如下的页面，这里我选择的是unico...原创 2019-06-11 11:01:02 · 3183 阅读 · 0 评论 -
sass在vue中的一些用法
1.在vue-cli3.0中引入sass1.1通过npm下载sassnpm install sass-loader --save-devnpm install node-sass --sava-dev1.2在.vue文件中的style设置lang="scss"<style lang="scss"></style>2.在vue-cli2.0中引...原创 2019-06-14 15:26:19 · 1176 阅读 · 0 评论 -
css模块化
设计原则a、可复用能继承要完整b、周期性迭代设计方法a、先整体后部分再颗粒化b、先抽象再具体a、可复用能继承要完整例图1比如拿到这个设计图，来思考css的模块设计。这两个可能觉得这两个地方可做模块。但是翻其他地方，这种看上去长得很相似，功能点小，其他地方又找不出有用这种样式的，就不能叫做可复用，所以不要拆除出来。而单看字体，左黑右红，这...转载 2019-06-14 11:09:46 · 1459 阅读 · 0 评论 -
改变滚动条的默认样式
.dataTables_scrollBody::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.dataTables_scrollBody::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webki...原创 2019-04-30 15:47:59 · 2364 阅读 · 0 评论 -
less的用法
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。用法如下：1. 使用 Less 写样式使用 Npm 全局安装 Less$ npm install less -g创建一个空文件夹，这里命名为：less在根目录下创建 inde...原创 2019-01-10 18:24:56 · 1352 阅读 · 0 评论 -
body背景图片的自适应
html{ height:100%;}body{ background:url(../image/bg-m.jpg) no-repeat; background-size: cover;//或者background-size: 100% 100%;}background-size contain 与cover的区别在no-repeat情况下，如果容器宽高比与...原创 2019-01-10 14:17:37 · 11518 阅读 · 1 评论 -
块级元素水平垂直居中的四种方法
让div等块级元素水平和垂直都居中，即永远处于屏幕的中间，比如登录页面时非常有用1.要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。 .mydiv{...原创 2019-01-10 13:58:43 · 12894 阅读 · 0 评论