青蛙king的博客

BEM 是一种的 CSS 命名方法和规范。让开发更加规范与便捷，利于团队协作和维护。

1、background-size: cover;2、object-fit: cover;

一、什么是移动端适配？常见的移动端指的是手机、平板等。由于这些设备的屏幕大小不一样，所以做移动端的页面时需要考虑在 安卓 / IOS 的各种尺寸设备上的兼容，最终实现：在不同尺寸的手机设备上，页面自适应，并保持统一的效果。二、单位的理解与换算px、%、em、rem、vw、vh、vm 的学习，请戳这里：https://mp.csdn.net/editor/html/107486739三、常见的移动端适配方案有viewport（scale=1/dpr） rem——等比缩放布局..

一、CSS 基础1、样式表（1）、常见的样式表外部样式表 内部样式表 内联样式表①、外部样式表法一：<link rel="stylesheet" type="text/css" href="外部样式表路径地址"/>法二：<style type="text/css"> @import url("外部样式表路径地址");</style>②、内部样式表<style type="text/css"> /* 样

一、3 种方法实现 “双飞翼布局”

grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。

js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。

css 标签随文字换行，并紧随其后。当不足以展示标签时，标签自动换行。代码实现如下：<div class='box'> <p class='desc'> qwertqwert <span class='lable'>1234567</span> </p></div>.box { width: 300px; background: aliceblue; padding: 15px;}.d

input checkbox 改变默认的 “原来的背景” 以及 “选中的背景”：li { // ... label { font-size: 0.312rem; } input[type="checkbox"] { width: 0.625rem; height: 0.625rem; margin-right: 0.195rem; cursor: pointer; position: relative; } input[type="c

::before 内容前置选择器：::after 内容后置选择器：p { position: relative; width: fit-content; font-size: 22px; color: #FFFFFF; letter-spacing: 0; line-height: 38px; font-weight: 400; &::after { content: attr(data-index); font-family: PingFangS

<div id="app"> <div class="page-outer"> <div class="page-wrapper" id="web"> <div class="container" style="background: url(https://static.runoob.com/images/demo/demo1.jpg) center top / 100% 100% no-repeat scroll;"> <div

Chrome 官方 api ：https://developer.chrome.com/docs/devtools/console/api/格式语法：console.log("%c需要输出的信息 ", "css 代码");例如：console.log("%chello", ` padding: 50px 300px; line-height: 120px; background: url('https://static.runoob.com/images/d.

<ul> <li v-for=(item, idx) in list> <a :href='item.link || "javascript:void(0);"' :style='`cursor: ${item.link ? "pointer" : "auto"}; backgroundImage: url(${item.url});`' target='_blank' ...

设置其父元素width: 100%;height: 56px;display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;top: 35.5%;

响应式布局指的是：一个网站能够兼容多个终端。响应式布局的设计步骤设置 meta 标签 根据媒体查询设置样式 设置多种视图宽度注意事项宽度使用百分比 处理图片缩放问题

remvwvmpx

CSS Sprites 在国内很多人叫 “css精灵”，是一种网页图片应用处理方式。CSS Sprites 允许开发者将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。利用 CSS 的 “background-image”，“background- repeat”，“background-position” 的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置。利用 CSS

请戳此链接：https://www.cnblogs.com/jesse131/p/5441199.html

1、position 定位法实现水平垂直居中第一种：// 父元素设置 position: relative;// 子元素中{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}第二种：// 父元素设置 position: relative;// 子元素中{ position: absolute; left: 50%;

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;}body, html{ height:100%;}.fl { float: left;}.fr { float: right;}

法一：.box{ width: 300px; height: auto; overflow: hidden;}

目录一、Flex布局是什么？二、基本概念三、容器的属性1、flex-direction2、flex-wrap3、flex-flow4、justify-content5、align-items6、align-content四、项目的属性1、order​2、flex-grow​3、flex-shrink4、flex-basis5、fle...