第一章 一、内联块 display: inline-block; 1、特征: 1.1 块级元素在一行显示 (得到内联元素的属性) 1.2 内联元素支持宽高 (得到块的属性) 1.3 没有宽度的时候,内容撑开宽度 (得到内联元
CSS 三大特性 层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。 就近原则 一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。 样式冲突,遵循的原则是就近原则。 那个样式
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。 不断更新,不断更新,不断更新,重要的事情说三遍。 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 所有题目汇总在我的 Github 。 3、层叠顺序(stacking level)与堆栈上下文(s
在网页制作的过程中,元素与元素之间的位置关系,在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚,而 Z 轴 则相对较为模糊,或者说不能全面的理解Z轴的显示逻辑。
1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
在写css样式时,可能是添加了一个样式后就达到了预期效果。有没有想过,是我们在不经意间触发了什么,帮助我们达到了效果?本文就快速介绍下css样式中经常使用的BFC,主要包括以下几个方面:
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
z-index 会为当前的盒创建层叠上下文,也会指定该盒在父级层叠上下文中的层叠等级。
我们在平常做项目的时候,float这个css属性经常会用到。元素浮动会让元素脱离文档流,从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素脱离文档流并且向左或者向右移动,直到浮动元素的边缘碰到父级框或者另一个浮动元素的边框为止。 浮动的影响 浮动元素会使得父级元素高度塌陷 html: css: * { // 实际项目中不要用通配符*去设置样式 margin: 0;
后代选择器是选择父元素的所有子孙元素,一级子元素原则只选择第一级子元素,不会再向下查找元素
对BFC规范(块级格式化上下文:block formatting context)的理解?
1、class 和 id 的使用场景? id:指定标签的唯一标识。根据提供的唯一id号,快速获取标签对象。如:document.getElementById(id)。id属性的值,在当前的page页面
css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具
BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
初学者必备 Html属性不能重复使用,但css的属性是后写的替换先写的 子级标签属性会继承父级标签属性 子级标签属性与父级冲突,子级优先 布局级别就是排队级别:默认布局级,浮动布局级,定位布局级 默认布局级下标签间的margin值共用 浮动布局级下margin值相加 绝对定位安置位置参考文档 相对定位安置位置参考本身 固定定位安置位置参考窗体 宽度属性认知: 默认布局级,块元素有默认宽度,宽度由父级决定,因此建议宽度尽量设置给父级,易控。 浮动布局级,块元素无默认宽度,宽度由子级支撑,但宽度可相对父级设
当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的透明区域,它会将其他元素从盒子内容中推开。
虽然有时确实会让我们花蛮多时间去实现,但从一方面想这也是个机会,让我们更深入了解的浏览器布局方式。
transform 想必大家都很熟悉,可以通过其转换(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等属性来对元素进行变换,不过这篇文章想探讨的不是这些内容,而是 transform 对元素布局、页面渲染方面的影响。例如,你知道它会影响 fixed 元素的位置吗?你有想过它会改变元素的层叠顺序吗?
本文主要探讨了 transform 属性对元素布局和渲染的影响,包括改变元素的定位、层叠顺序等。通过具体例子,分析了 transform 属性在改变元素布局中的种种作用,并提出了在何种情况下使用 transform 属性更优的建议。
领取专属 10元无门槛券
手把手带您无忧上云