OOCSS:面向对象的CSS样式，通过对CSS样式的合理规范，重复使用，达到代码的精简，便于换肤。...作用： 加强代码复用以便方便维护 减少CSS体积 提升渲染效率 组件库思想、栅格布局可共用、减少选择器、方便扩展 注意事项： 不要直接定义子节点，应把共性声明放到父类 .mod .inner{} //...结构和皮肤相分离 容器和内容相分离 抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面 往你想要扩展的对象本身添加Class，而不是他的父节点 对象应保持独立性 避免使用ID选择器，权重太高...，无法重用 避免位置相关的样式 保证选择器相同的权重 类名：简短、清晰、语义化、OOCSS的名字并不影响HTML语义化 拓展 OOCSS Reset 优点：样式初始化设置非常全面 缺点：设置了部分多余的设置...，border Normalize 优点： 缺点：有些默认的没有设置 Neat.css 优点： 解决Bug，低级浏览器常见Bug 统一效果，但不盲目追求重置为0 向后兼容 考虑响应式 考虑移动设备
在设置width:100%后，子元素“溢出”了父元素 【注意】宽度默认为width:auto，但高度默认height:0 二.浮动/定位对width:auto和width:100%的影响 1.浮动/定位对...:100%无影响（这里不做展示） 2.浮动／定位对width:auto的影响 2.1默认情况下，width:auto占满一行 不做展示 2.2子元素相对定位，无影响，仍占满一行 不做展示 3.3子元素绝对定位...间距变为20px，这时候margin已经不重叠了 五.浮动/定位对其他元素物理空间的影响 这首先要提到我们经常挂在耳边的一个词——“脱离文档流” 脱离文档流 == 不占据元素的空间（物理上） .div2...3.浮动流本身并不会影响标准流元素的定位,但是却影响着标准流文本的定位 如果我们仔细看一下五中开头的demo会发现一个难以忍受的bug: ?...刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。浮动元素会影响文本的位置！
元素应用了transform属性之后，就会变得应用了position:relative一个尿性，原本应该被覆盖的元素会雄起，变成覆盖其他元素，修改为如下代码： <img src="mm1" style=...只要是支持transform元素的浏览器，包括IE9(-ms-), 都会提高普通元素的垂直地位，使其覆盖其他元素而不是被覆盖。...结果，无论是IE9+，还是Chrome还是FireFox浏览器，所有绝对定位图片100%宽度，都是相对设置了transform的容器计算了，于是，上面的图片拉长到了西伯利亚；下面的图片被限制成了小胖墩。...在mac safari浏览器下，使用transform: translate3d(0,0,0) 可以避免文字在其他元素transition或animation时候，粗细渲染跟着变化的问题。...transform属性还会创建层叠上下文，影响元素发生重叠时候的表现。
上篇文章介绍了迁移表、索引对象的操作： http://blog.csdn.net/bisal/article/details/50804714 发现漏了一个细节，就是表、LOB对象移动后索引的状态...1.创建测试表 CREATE TABLE tbl_able(id NUMBER PRIMARY KEY, con CLOB); 该表有一个CLOB的大对象。...$$的状态仍是VALID，但主键索引SYS_C0055439的状态变为了UNUSABLE，且两者所处的表空间仍是TEST_TBS。...此时INSERT操作会提示： ORA-01502：索引’SYS_C0055439’或这类索引的分区处于不可用状态 3.移动索引对象 ALTER INDEX SYS_C0055439 REBUILD...总结： 对于对象移动表空间的操作，要关注索引等附属信息的有效性，对于LOB对象的移动，也可能会导致索引状态的失效。
前言 很多开发者觉得css很简单，如果有时间更愿意用在学习和研究js上，随着css3推出以及一些css的预处理语言和面对对象的编程css的方式的出现，css已经出现了更多的可变可提高空间。...而面对对象的css是指将可重用的元素样式定义为一个类，而与其对应的元素可以看成一个实例。这个类也支持继承，多态等，在大型项目中，为了降低维护成本，建议使用这样的方式。...，应该给出独立的样式。...section> .container { } .sec-primary{ } .sec-special{ } 对象本身的样式向对象本身添加...class而不是对父类添加。
href="javascript:void(0)">价格 对a...链接包含的span图标进行样式更改。...icon-down-single-arr-li li:hover .icon-down-single-arr{ background-position: -81px -974px; } 特别注意第二个css...样式的写法。
isolate 的元素； 10)、will-change 中指定了任意 css 属性，即便没有直接指定这些属性对的值； 11)、-webkit-overflow-scrolling 属性设置为...touch 的元素； z-index z-index 只使用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto；如果一个定位元素没有设置 z-index ，那么默认为 auto...行内元素； 6)、z-index ： 0 ； 7)、正 z-index 值； 除了层叠顺序规则之外，还有一个规则，那就是：后来居上； 文档流 文档流分三种： 常规流、浮动、绝对定位...内联格式化上下文； 一个 BFC 的范围包含创建该上下文元素的所有子元素，但不包括创建的新 BFC 的子元素的内部元素； 触发 BFC 的方式有： 1)、根元素，即 HTML 标签； ...inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid； 5)、定位元素
要在Firefox中单独设置滚动条样式，你可以使用@-moz-document规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。...: none; } } 在上面的例子中，@-moz-document url-prefix()表示只有在URL以空字符串（即所有URL）为前缀的情况下，才会应用其中的样式。...请注意，这样的规则只在Firefox中生效，而在其他浏览器中会被忽略。确保在使用这样的规则时进行测试，以确保所需的效果在目标浏览器中按预期工作。...在CSS中，*（星号）和 body 分别选择不同的元素或元素集合。 *（星号）选择器： 这是通配符选择器，匹配文档中的所有元素。...使用 * 会选择页面上的每个元素，无论是块级元素、行内元素还是其他类型的元素。例如： * { margin: 0; padding: 0; } 上述代码会将页面中所有元素的内外边距设置为零。
，对这些元素还是造成了写深远的影响。...更新于2016年1月9日 这种特性底层原理是层叠上下文，具体可参见“深入理解CSS中的层叠上下文和层叠顺序”一文。...3transform改变overflow对absolute元素的限制 在以前，overflow与absolute之间的限制规范内容大致是这样的： absolute绝对定位元素，如果含有overflow不为...visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。.../ * * 此处是你的位置，欢迎反馈其他transform的影响表现~ */
Google开发者大会每年都会提出有关于 Web UI 和 CSS 方面的新特性，今年又上新了许多新功能，今天就从中找出了影响最大的几个功能给大家介绍一下 :has() :has() 可以通过检查父元素是否包含特定子元素或这些子元素是否处于特定状态来改变样式...Style Queries 样式查询 容器查询规范 允许查询父容器的样式值。目前在 Chrome 111 中部分实现，可以在其中使用 CSS 自定义属性来应用容器样式。...Scoped CSS是CSS 作用域样式，允许开发人员指定应用特定样式的边界，本质上是在 CSS 中创建原生命名空间。...这将防止该 title 元素与页面上的任何其他 .title 元素发生冲突，例如博客文章标题或其他标题。...即将推出新功能有20多个，这里只介绍了最有影响力最重要的八个，如果您想了解更多的，可以查看下面的谷歌开发者文章 https://developer.chrome.com/blog/whats-new-css-ui
如何用js验证一下boz-sizing样式对块级盒子大小的影响？ 可以用getClientRects方法，获取元素的边界矩形的矩形集合。...document.querySelector("#thick").getClientRects()[0].width 使用getBoundingClientRect验证 返回值是一个 DOMRect 对象...，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小 。...当我们将width样式改为相同的值以后，输出便不同了。...著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。
还是古老的 sha1 / md5） 路径的划分，大量 key 下，对性能的影响 哈希算法 哈希算法，作为一个将大数据映射到一个固定范围内的值的算法，有几个主要的因素要考虑： 速度 碰撞概率，在期望的数据集上...当然，不同 hash 算法在不同的数据特性下表现也不同，数据内容/长短都可能会影响 hash 算法的相对快慢。...特别是 kv 数据的 key 一般较短，需要对 key 常见的字符组成以及长度进行具体测试才能知道哪一个更快。大文件上跑得飞快的算法不一定在几个字节的 key 上也能打赢其他算法。...所以，其实不做专门的碰撞处理也没有太大影响。当然如果 key 是用户输入，并且哈希算法比较弱的话，可能需要考虑用户恶意攻击的可能性。...只要目录的文件 entry 数量超过了一个目录块可以存储的范畴，就会直接将目录切换到 htree 的形式对目录文件进行树状索引。
win32 可选的有1， 2， 4， 8， 16 linux 32 可选的有1， 2， 4 类的大小与数据成员有关与成员函数无关 类的大小与静态数据成员无关 虚继承对类的大小的影响 虚函数对类的大小的影响...下面通过实例来展示虚继承和虚函数对类大小造成的影响。...先找到首个vbptr，找到虚基类BB地址与虚基类表指针地址的差，也即是20，接着pp偏移20个字节指向了dd对象中的BB部分，然后就访问到了bb_，这是在运行时才做的转换。...记住：C++标准规定对对象取地址将始终为对应类型的首地址。...从输出的虚基类表成员数据和虚函数体可以画出对象内存模型图： ? 上图中vfdd 出现的位置跟继承的顺序有关，如果DD先继承的是B2，那么它将跟在vfb2 的下面。
CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下： 在上面的样式规则中: 1.选择器用于指定CSS样式作用的HTML对象， 花括号内是对该对象设置的具体样式...2.属性和属性值以“键值对”的形式出现。 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。 4.属性和属性值之间用英文“:”连接。 5.多个“键值对”之间用英文“;”进行区分。...因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。...清除浮动的方法 其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。...） both 同时清除左右两侧浮动的影响 额外标签法 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 ，或则其他标签br等亦可
，例如：basefont、big、dir、center、font、tt、u等等； 还移除了对可用性产生负面影响的元素，例如：frame、frameset、noframes等； ---- 6、iframe...的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档之间的链接； CSS面试题 1、谈谈你对CSS布局的理解 常见的布局方式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin...伪类与CSS伪对象的区别 CSS引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西，根本区别在于：它们是否创造了新的抽象元素； 伪类：描述了所有逻辑上存在但在文档树中无须标识的分类； 伪对象：...15、为什么要初始化CSS样式 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会出现浏览器之间的页面显示差异； CSS样式初始化之后会对SEO有一定的影响。...如果使用@import方式对CSS进行导入，会导致某些页面在windows下的IE出现一些奇怪的现象： 以无样式显示页面内容的瞬间闪烁，这种现象被称为文档样式短暂失效，简称FOUC 原理：当样式表晚于结构性
简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。...某些可替换元素，例如 元素，可能具有自己的样式表，但它们不会继承父文档的样式。...CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式 02 可替换元素 典型的可替换元素有： 、、、 有些元素仅在特定情况下被作为可替换元素处理...但是其他形式的控制元素，包括其他类型的 元素，被明确地列为非可替换元素（non-replaced elements）。...控制内容框中的对象位置 某些CSS属性可用于指定 可替换元素中包含的内容对象 在该元素的盒区域内的位置或定位方式。
实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字 这种实现具有以下优点： 兼容性好，对各大主流浏览器有好的支持...： -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性） display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示...在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。...但是，如果CSS支持了父选择器，那就必须要页面所有子元素加载完毕才能渲染HTML文档，因为所谓“父选择器”，就是后代元素影响祖先元素，如果后代元素还没加载处理，如何影响祖先元素的样式？...所以，从这一点来讲，CSS支持“父选择器”或者“前兄弟选择器”的可能性要比其他炫酷的CSS特性要低，倒不是技术层面，而是CSS和HTML本身的渲染机制决定的。
浏览器已经成为我每天都需要打交道的工具，然而对于这个我们的老朋友，即使一些 web 开发人员也对它的底层工作原理不是非常清楚，今天我们就来简单谈一谈浏览器的底层工作原理。...首选它获取到请求到的内容，然后开始解析 html 结构，将它们转换成 dom 树，然后渲染引擎解析 css 样式，生成一个 css 树，最后，根据样式信息和 html 结构生成 render 树，我们称之为渲染树...每个 CSS 文件都被解析为一个样式表对象。每个对象都包含 CSS 规则。CSS 规则对象包含选择器和声明对象以及与 CSS 语法相对应的其他对象。...所谓全量布局指的就是会影响所有渲染器的全局样式改变，比如字体改变。而增量布局指的是布局是异步完成的，渲染器通过触发器进行布局。 css 主要是通过盒子模型来布局。...css 布局分为绝对定位和相对定位，绝对定位根据指定位置进行渲染，而相对定位则是根据其他元素的位置进行布局。
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。 15、为什么要初始化CSS样式。...- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。...- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。...（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）...过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）； 提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性; 使用预处理工具或构建工具（gulp对css
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。...例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。...3、要在复杂情况下对样式进行分组，请使用选择器和分组方法。 Q7、使用CSS的缺点？...这些元素不会影响其他元素的位置。 固定 fixed 将元素从页面流中移除，并将其放置在相对于视口的指定位置，并且在滚动时不会移动。 粘性sticky 粘性定位是相对定位和固定定位的混合。...Q44、CSS在后台如何运行 浏览器显示文档时，必须将文档的内容与其样式信息结合在一起。它分两个阶段处理文档： 浏览器将HTML和CSS转换为DOM（文档对象模型）。DOM表示计算机内存中的文档。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
