![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
maidu_xbd
核心算法+大量的重复实践
展开
-
CSS---CSS面试题
css匹配的规则是从右往左开始匹配,如果嵌套的层级更多,页面中的元素更多,那么匹配所要花费的时间代价自然更高,所以我们在编写选择器的时候,可以遵循以下规则:不要嵌套使用过多复杂选择器,最好不要三层以上;声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation。原创 2023-07-14 00:04:23 · 1532 阅读 · 0 评论 -
CSS---实现一个边长为父元素宽度一半的正方形
解决方法:子元素width:50%;padding设置为百分比时是相对父元素的宽度计算的。问题:实现一个边长为父元素宽度一半的正方形。原创 2023-05-07 00:26:56 · 406 阅读 · 0 评论 -
uniapp---uniapp使用iconfont
uniapp使用iconfont步骤如下:(1)https://www.iconfont.cn/登录自己的账号;(2)搜索图标,加入购物车,全部图标加入购物车完毕后点击购物车,添加至相应的项目;(3)获取在线链接后在【App.vue】全局引入,注意在//at前面加入https:<style> /*每个页面公共css */ @import url("https://at.alicdn.com/t/font_2162736_ph4bw7qi47m.css").原创 2020-11-03 16:28:15 · 412 阅读 · 2 评论 -
CSS---按住录音提示框制作
如下图:按住语音按钮,出现中间的提示框语音提示框CSS(使用less)代码如下: .prompt-box { position: fixed; top: 50%; left: 50%; display: flex; flex-direction: column; justify-content: center; box-sizing: content-box; width: 88px; max-width: 70%;..原创 2020-07-02 21:34:21 · 921 阅读 · 0 评论 -
vue---给li标签设置active选中样式
关键点:添加【:class="active==index?'isActive':''"】具体见下图:在data中,设置active初始值为-1【active:-1】原创 2020-06-24 11:48:03 · 4470 阅读 · 0 评论 -
CSS---在线使用iconfont字体图标
iconfont阿里巴巴矢量库https://www.iconfont.cn/在线使用iconfont具体方式如下:(1)https://www.iconfont.cn/登录自己的账号(2)搜索图标,加入购物车,全部图标加入购物车完毕后点击购物车,添加至相应的项目(3)点击【FontClass】【查看在线链接】【暂无代码,点击生成】(4)在项目中引入注意:每次增加或编辑之后icon库一定要更新链接!!!ps:在浏览器窗口输入【http://at..原创 2020-06-10 23:49:06 · 1924 阅读 · 0 评论 -
vue---style scoped属性的作用和原理、scoped穿透
使用vue开发项目时,发现style标签中存在一个属性scoped。scoped 属性是 HTML5 中的新属性,是一个布尔属性。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。作用:实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。原理:scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性,即CSS带属性选择器,以此完成类似作用域的选择方式,从而达到样式私有化,不污染全局的作用。scope原创 2020-05-26 18:13:50 · 19630 阅读 · 4 评论 -
CSS---css全局变量与局部变量
CSS变量为自定义属性,由自定义编辑设定值【--main--bg-color:#ddd;】,通过var()函数来获取值【color:var(--main-bg-color);】。css变量可在css文档中重复使用,当需要修改时,仅需要修改设定值,设定的变量名最好是设置为语义化的标签。1、在css中设定全局变量和局部变量2、.在js中获取和设置css变量// 1.在js中获取css...原创 2020-04-14 09:24:55 · 1494 阅读 · 0 评论 -
CSS---修改浏览器默认scroll样式
// 修改默认滚动条样式 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 8px; height: 8px; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track ...原创 2019-12-30 17:31:56 · 216 阅读 · 0 评论 -
CSS---公共样式让你更省心
在写项目前端页面开始前,引入一个公共的css样式,在后续项目开发中,不用去重复的写公共的样式,使得css代码量减少,节省了很多开发时间。html * { margin: 0; padding: 0; box-sizing: border-box;}body,html { height: 100%;}a { text-decoration: none; c...原创 2019-11-30 11:57:51 · 224 阅读 · 0 评论 -
CSS---@media媒体查询
CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明, 比如通过视口的宽度。对设备提出询问(称作表达式)开始,如果表达式结果为真,媒体查询中的CSS被应用,如果表达式结果为假,媒体查询内的CSS将被忽略。以@media开头来表示这是一条媒体查询语句。紧跟在@media后面的是一个或者多个表达式,可以判别为真或假。在创建媒体查询时,必须以媒体类型(此处为screen)作为第一个...原创 2019-08-04 15:15:37 · 428 阅读 · 0 评论 -
CSS3---@keyframes 自定义动画及轮播图实现
@keyframes 自定义动画使用动画属性来控制动画的外观,同时将动画与选择器绑定创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。动画制作:以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。 轮播图代码:<!DOCTYPE html>...原创 2019-07-25 11:11:12 · 1286 阅读 · 0 评论 -
CSS3---transform、transition用法总结
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 分类 属性值 说明 举例 移动 translate(x,y) 2D 转换 transform: translate(100px, ...原创 2019-07-25 11:07:51 · 376 阅读 · 0 评论 -
CSS---圣杯布局与双飞翼布局
圣杯布局和双飞翼布局:两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。圣杯布局来源于文章In Search of the Holy Grail,而双飞翼布局来源于淘宝UED遵循特点:两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的<div>标签圣杯布局:步骤...原创 2019-07-24 19:20:46 · 120 阅读 · 0 评论 -
CSS---绝对定位、相对定位、固定定位
默认情况下,所有的网页标签都在标准流布局中,脱离标准流的方法有(1)float所谓浮动指的是使元素脱离原来的文本流,在父元素中浮动起来。(2)position属性 和 left、right、top、bottom属性相对定位/绝对定位相同点:开启元素的相对定位/绝对定位后,如果不设置偏移量元素不会发生任何变化,会使元素提升一个层级相对定位/绝对定位不同点: 分类 ...原创 2019-07-17 19:59:40 · 321 阅读 · 0 评论 -
CSS---父div 跟随子div移动解决方法
最近在做小项目时,出现以下布局问题:布局图如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2019-04-03 11:16:11 · 4147 阅读 · 0 评论 -
CSS---学习笔记总结
在做项目时,总是被css样式困扰,系统的梳理下:css---层叠样式表语法:内联样式:样式写在标签对中,一般很少使用,尽量不要写在标签内,不利于代码维护。 内部样式:将样式集中写在head标签对中,适用于一个页面。 外部样式:将所有样式放在一个或多个.css为扩展名的外部样式表文件中,通过<link>标签将样式链接到HTML文档中。<!DOCTYPE html...原创 2019-04-25 21:57:25 · 284 阅读 · 0 评论 -
CSS---解决元素浮动导致的父元素高度塌陷的问题
元素浮动的特点:(1)元素浮动以后会完全脱离文档流,浮动以后元素会一直向父元素的最上方移动,直到遇到父元素的边框或者其他的浮动元素,会停止移动。(2)如果浮动元素的上边是一个块元素,则浮动元素不会覆盖块元素。(3)浮动元素不会超过它上边的浮动的兄弟元素,最多一边齐。(4)浮动元素不会覆盖文字,文字会自动环绕在浮动元素的周围,可以通过浮动来实现文字环绕的效果。(5)块元素脱离文档...原创 2019-04-25 22:17:55 · 1623 阅读 · 0 评论 -
CSS---外边距合并问题及解决方法
CSS外边距合并两个垂直方向的外边距相遇的时候,会发生合并形成一个外边距。合并后的外边距的高度是两者中外边距高度较大的那个值。外边距合并的两种常见情况:1.当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并2.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并<!DOCTYPE...原创 2019-05-06 22:20:46 · 1392 阅读 · 0 评论 -
CSS---二级菜单小箭头制作
二级菜单是网页开发中经常遇到的,那么,如何通过css写一个下图所示的二级菜单样式呢?核心内容:(1)transform: rotate(45deg);----旋转45度(2)border-right: transparent;border-bottom: transparent;---- 将border设置为透明色(3)position:relative----相对定位会按照元...原创 2019-05-13 11:26:47 · 1518 阅读 · 0 评论 -
CSS---雪碧图使用
雪碧图介绍及优点:CSS Sprites,CSS精灵,被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,然后通过CSS里面的background-position来控制每个图片的坐标。使用雪碧图只需要引用一张图片,可以减小图片的总大小,对内存和带宽更好。将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。制作:可...原创 2019-07-16 16:16:50 · 218 阅读 · 0 评论 -
CSS---标签居中
标签居中: 水平居中 text-align:center 针对行级元素,行级块元素有效 margin:0 auto 针对块级元素有效 垂直居中 line-height:10px; height:10px vertic...原创 2019-07-16 22:44:55 · 1274 阅读 · 0 评论 -
CSS---rem用法
选择PX为单位存在如下问题:px大小固定,不能随着浏览器窗口的大小变化rem(font size of the root element)是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化,那么整个网页中运用到 rem的也会随之变化。rem可以在用户浏览网页时,根据屏幕的尺寸,来向用户展示更适合用户的布局、文字、图片、按钮浏览器的默认字体高都是16px。...原创 2019-07-24 10:21:13 · 914 阅读 · 0 评论 -
CSS3---flex弹性布局
flex---弹性布局(伸缩布局)(1)flex布局 flex布局 说明 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 (2)flex布局常用属性 常...原创 2019-07-24 15:39:28 · 129 阅读 · 0 评论 -
CSS---页面布局
页面布局思想:先大后小,先整体后细节。程序虽然简单,却是希望自己养成一个良好的代码编写习惯和思路。以百度布局为例(尾部icon图标暂时没加):划分为三个大块(1)header(2)section(3)footer分完大块后,再完善各块内容样式能少写则少写,在样式顶部书写公共样式(1)头部 :last-child序号选择器(2)搜索框...原创 2019-07-19 22:40:45 · 148 阅读 · 0 评论 -
vue---el-input样式覆盖
input输入框定义如下<el-input id="dialog_input" style="margin-left:20px;" class="dialog-input-text" type="input" autosize v-model="dialogInput" ref="dialogInput" >...原创 2019-04-04 15:09:33 · 15316 阅读 · 3 评论