视觉效果 CSS代码: .cover { padding: 36% 50%; background: linear-gradient(to right, white 50%, black calc(50% + 1px)); position: relative; font-size: 200%; } .cover::before, .cover::after { content: ''; position: absolute; width: 36%; height: 50%; border-ra…

outline轮廓线在不同CSS样式下的表现 CSS 去除浏览器默认 轮廓外框 在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的. 我们应如何消除这些讨厌的 轮廓外框呢? 使用outline:none去除轮廓外框 如: a{ outline:none; } PC端轮廓外框消失了,然而发现在手机上依然存在~~ 这时候添加如下代码便可 a{ outline:none…

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻译自W3C官方文档,其中加上了自己的一些理解.相关链接:https://www.w3.org/TR/CSS2/visuren.html#block-boxes. 1.可替换元素(Replaced element) 下面的一段话引自MDN: 典型的可替换元素有 <img>. <object&g…

视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改…

在HTML和CSS里存在着部分重复的功能,例如两者都可以设定一段文字的字体属性.既然如此,为啥还要CSS呢(至少,为啥CSS里存在着和HTML标签属性重复的东西呢)? 这是因为,HTML和CSS的用途是不同的: HTML用于标记文档结构 CSS用于展现形式 上面的文字可能比较简单抽象:下面的blog有个例子: https://www.jjxiaoliu.cn/?p=66 我们应该尽量避免使用HTML里遗存的那些和展现形式有关的标签,将它们都挪到CSS里去.…

写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号.嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: <div></div> div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: 10px; } 修改 outli…

二.CSS部分 1.解释一下CSS的盒子模型? 回答一:a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型.…

目录 二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以使用的方法? 5.常见浏览器兼容性问题与解决方案? 6.列出display的值并说明他们的作用? 7.如何居中div, 如何居中一个浮动元素? 8.CSS中 link 和@import 的区别是? 9.请列举几种清除浮动的方法(至少两种)? 10.block,inline和inlinke-block…

CSS(层叠样式表)是一种指定HTML文档视觉的表现的标准.CSS本来是让视觉设计师来使用的:它允许设计师精确的对文档元素的字体 ,颜色,外边距,缩进,边框甚至是定位.不过,客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程.校本化css启用了一系列有趣的视觉效果.例如:可以创建动画让文档从右侧“滑入”:也能创建一个轮廓伸缩的列表.在利民用户自己控制显示的信息量.首次推出校本化的视觉效果是革命性的.创造这些效果的javascript和css技术在以前统称为动态HTML(D…

html文档的视觉显示包含很多变量:字体.颜色.间距等.css标准列举了这些变量.我们称之为样式属性.css定义了这些属性以指定字体.颜色.外边距.边框.背景.图片.文本对齐方式.元素尺寸和元素位置.为了定义HTml元素的视觉表现,规定了这些CSS属性的值. 当浏览器厂商实现非标准css属性时,他们用将属性名前加了一个厂商前缀,firefox使用-moz-,chrome使用-webkit-,而ie使用-ms-,他们甚至用这种方式来实现将来会实现标准化的属性.有个例子是border-radius,…