clear css bfc
使用css在元素的前面或者后面添加内容
:before 在元素前面添加内容 :after 在元素的后面添加内容 <!DOCTYPE html> <html> <style> h1:after { content: '前面的内容'; } h1:before{ content:'后面的内容'; } </style> <body> <h1>** ......
CSS面试题
一、4.14基础 1.1、隐藏元素的方法有哪些 ● display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。● visibility: hidden:元素在页面中仍占据空间，但是不会响应绑定的监听事件。● opacity: 0:将元素的透明度设 ......
原生JS + HTML + CSS 实现快递物流信息 API 的数据链式展示
全国快递物流查询 API 是一种提供实时、准确、可靠的快递物流信息查询服务的接口。它基于现有的物流信息系统，通过API接口的方式，向用户提供快递物流信息的查询、跟踪、统计等功能。 ......
css面试总结
盒模型介绍 CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。 两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/heigh ......
网页支持传统蒙古文排版样式HTML+CSS
传统蒙古文排版跟大部分文字排版不一致，需要从上到下书写，然后从左到右的排版。 样式文件如下： .vertical-text { -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -o-writing-mode: ve ......
CSS 表单
一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素： CSS 实例 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px s ......
3、Web前端学习规划：CSS - 学习规划系列文章
CSS作为Web前端开发的第2种重要的语言，笔者建议在学了HTML之后进行。CSS主要是对于HTML做一个渲染，其也带了一些语言语法函数，功能也非常强大。 1、 简介； CSS（层叠样式表）是一种用于描述网页样式的语言。它可以控制网页中的字体、颜色、布局、背景等方面的样式。CSS可以与HTML和Ja ......
css 图片鼠标放大动画
.img_wap { padding-bottom: 56%; width: 100%; overflow:hidden; position: relative; display: block; } .img_wap img { width: 100%; height: 100%; position ......
vscode如何设置HTML/CSS/JS保存后自动格式化？
具体操作：点击小齿轮，选择设置按钮 第二步：点击右上角按钮，进入设置页面 第三步：粘贴自动保存的js代码！ "editor.formatOnType": true, "editor.formatOnSave": true, ......
css绘制三角形
<style> /* 想要哪个方向的三角形，把其他方向的颜色换成transparent就ok啦 */ .box { width: 0px; height: 0px; border-top: 100px solid orange; border-left: 100px solid pink; bord ......
css 常用的文本样式、选择器、浮动和定位
常用的文本样式 ~ color 设置文字的颜色 color：red ~ font-size 设置文字的大小 font-size：12px ~ font-family 设置文字的字体 font-family：微软雅黑 ~ font-style 设置字体是否倾斜 font-style：“normal” ......
css 基本语法
CSS：层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言，不仅可以修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 基本语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明 选择器：需要改变样式的HTML 元素 声明：由一个属性和一个值组成，每个属性有一个值 ......
CSS层叠样式表
CSS层叠样式表 主要用来调节html标签的各种样式 """ 思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签 标签的两大重要属性>>>:区分标签 1.class属性 分门别类 主要用于批量查找 2.id属性 精 ......
CSS基础：块状元素、内联元素、内联块状元素(行内元素)
css基础：块元素、内联元素、内联块元素 CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 1.常用的块状元素有： <div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquot ......
CSS修改input中的placeholder默认颜色
使用 input-placeholder 属性来修改placeholder的默认颜色： 为了兼容不同的浏览器内核，要添加不同的前缀 input::input-placeholder { color: #999; } input::-webkit-input-placeholder { /* Chro ......
CSS杂谈——flex布局里面的auto到底多长
本篇博客将以 “ flex 布局里设置 auto 的区块怎么让文案超出省略的问题” 作为切入点，来分析一下 flex 布局里面各子项的具体长度到底怎么计算。 从需求出发谈 flex 布局 我们有一个 H5 项目，类似于微信的通讯录界面，前面是头像，后面是昵称。 所以我们一开始的代码是这么写的： <d ......
记录-css实现交融文字效果
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 CSS是有魔法的，我们今天来实现一个CSS的动画效果，只需要几行代码就可以搞定。 第一步、我们要将一行文字从中间展开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ......
css steps实现文本一个字一个字显示
大致思路： 使用相对定位的div覆盖文本内容，并用animation控制宽度，位置。 换行步骤在外层div上控制高度即可。 css的steps与animation一起使用可以控制文字单个显示，类似于文本输入，不过显示频率是线性。 添加一些css变量控制步骤宽度、高度和时间等，便于vue中也通过组件的 ......
如何隐藏一个元素？&&css中出现了两个一样的类定义，如何避免冲突？
1.如何隐藏一个元素？ 1.使用display属性：设置元素的display属性为none，这样元素在页面上不会占用任何空间，同时也不会对其他元素造成影响 2.使用visibility属性：设置元素的visbility属性为hidden，这样元素在页面上不可见，但仍然占用空间 3.使用opacity ......
css变量声明使用
今天跟朋友聊天被推荐的一个css变量使用,感觉挺方便的,适用于各种页面,类似于scss less ~好处是减少样式代码的重复性，增加样式代码的扩展性和灵活性 简单使用: <style> :root { --color:#000; --width:200px; } body { color : var ......
CSS 实现垂直居中的5种方法
方法1：使用绝对定位和负外边距对块级元素进行垂直居中 优点：兼容不错。缺点：必须提前知道被居中块级元素的尺寸 .father { width: 300px; height: 300px; background-color: red; position: relative; margin-bottom ......
css组合选择符和less中&作用
1.后代选择器（空格分隔） 2.子元素选择器（>分隔） 3.相邻兄弟选择器（+分隔） 4.普通兄弟选择器（~分隔） 1.后代选择器 ： 用于选取某元素的后代元素 以下实例选取所有 <div> 元素中的<p> 元素 <style> div p { background-color:yellow; } ......
CSS实现菜单选项向外圆角效果
最终效果 实现方法 1. ::before、::after伪元素裁剪拼接 完整代码： 示例中图标引用了iconfont，地址 点击这里 html代码 <body> <ul> <li class="active"><i class="iconfont"></i></li> <li><i ......
Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following CSS properties: "transform", "top", "right", "bottom", "left".
这个错误的解决方案如下： 1. 禁用 "computeStyles" 修饰符的 adaptive 选项：这将允许平滑过渡，但可能会降低性能。 禁用 "computeStyles" 修饰符的 adaptive 选项，可以在创建 Popper 实例时指定 modifiers 参数，并将 computeS ......
CSS 属性 选择器
具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。 属性选择器 下面的例子是把包含标题（title）的所有元素变为蓝色： 实例 [title] { color:bl ......
css 设置tr的边框
有时候有设置tr边框的需求，写下如下css tr{ border-bottom: 1px solid red; } 发现不起作用，后来在w3c上查了查，原来只有table，th和td有独立的边框，tr并无边框。 但我想实现每一行都存在下边框，其他边框不存在，该怎么办呢？ 有两种实现方法： 方法1： ......
css 清楚浮动的4种办法
1、浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样 2、我们使用position：fixed，absolute和float都会造成浮动效果。 3、clear 属性的值可以是 lef ......
css 实现三栏布局（圣杯布局）的5种方法
效果图： 1、浮动：设置float: left;，配合负margin来实现 .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; ......
css 实现单行、多行溢出 省略号显示
1、单行溢出显示省略号： { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 2、多行溢出省略号： ①、（缺点：此方法因为使用了webkit属性，故只能chrome等浏览器有效） { -webkit-line-clamp: ......
2、CSS 颜色定义
CSS颜色定义方法：（RGBA \ HSLA \ opacity \ transparent为css3 新特性） 1、直接使用颜色名/16进制值 2、使用RGBA: RGB代表光的三原色，Red、Green和Blue,CSS3中可以增加一个值a（alpha），表示颜色的透明度:取值范围0-1之间，0 ......