left right justify 可以继承父标签的属性 ---- line-height line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。...% 相对于父元素的百分比 em 相对于当前元素的字体大小 rem 相对于根元素的字体大小 基本是相对于的字体大小 vw 相对于视窗宽度的百分比 vh 相对于视窗高度的百分比 <div style...---- font-family CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。 属性值用逗号隔开。...---- border-width border-width属性可以设置盒子模型的边框宽度。...space-around：在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
由于 button 本身不具有功能，因此可以灵活地给 button 添加功能，拓展性极高 与 js 搭配使用有奇效 select 下拉菜单 组成： select 标签，下拉菜单的整体，需要包裹住...windows电脑 默认是微软雅黑 一般网页会提供多个字体，用逗号隔开，表示按顺序显示，避免出现用户电脑上没有安装字体的情况 常见字体系列 无衬线字体 sans-serif 均匀 无笔锋 一般网页都用这种类型...衬线字体 serif 不均匀 有笔锋 等宽字体 monospace 所有文字占相同宽度 样式的层叠问题 层叠性: 后面的覆盖前面的属性 样式以最后覆盖的为准 font 相关属性的连写 font:...元素显示模式 块级元素 独占一行 宽度默认是父元素的宽度 高度默认由内容展开 可以设置宽高 div、h系列、p、ul、li、dl、dt、dd、form、header、nav、footer 行内元素...display: inline 极少…… 转换规范： 块级元素作为大容器，可以嵌套很多元素，但是不能用小范围的元素嵌套大范围元素 如p标签不能嵌套div、p、h a标签内部可以嵌套任意元素，除了a标签
(逗号的意思:和) 最后一个基础选择器不需要加逗号 P102.伪类选择器 伪类选择器用于向某些标签添加一些特殊效果，如鼠标放在链接上，链接颜色发生变化等 类选择器就是.类名开头，伪类选择器和类选择器的书写方式类似...,一个独占一行 特点: 可以设置高度,宽度,行高和内外边距 即使设置了宽度,还是独占一行 块状元素可以放块元素和行内元素....宋永红发文发问阿文发噶文案违规 b.行内元素 行内元素:比如span,一行可以显示多个 特点: 宽和高直接设置是无效的 默认宽度就是它本身内容的宽度...) 默认宽度就是内容的宽度(行内元素特点) 可以设置高度,行高和内外边距(块元素的特点) d.总结: 二.显示模式的转换 适用场景:一个模式需要另一个模式的特性,比如想扩大行内元素-a链接的触发范围...,转换成块元素即可 display:显示 1.行内元素转换成块元素 一般是想一行放一个或设置高度和宽度等 <!
本文旨在深入浅出地介绍Flexbox的一些高级布局技巧，分析常见问题及其解决方案，并通过代码示例加以说明，帮助你更高效地掌握Flexbox布局的艺术。 常见问题与易错点 1. ...理解Flex容器与项目的混淆 问题描述：初学者常混淆Flex容器和Flex项目（子元素）的属性，错误地在容器上应用align-items或在项目上使用justify-content。...等宽但不同高度的列 技巧：通过设置flex: 1;给所有项目分配等比例宽度，同时允许它们根据内容自动调整高度。 2. ...圣杯布局 技巧：利用Flexbox可以轻松实现圣杯布局（两侧固定宽度栏，中间自适应内容区域）。关键在于设置侧边栏的order属性，以及主内容区域的flex-grow: 1;来填充剩余空间。 3. ...自适应间距 技巧：利用gap属性（CSS Grid布局中的概念，但在某些情况下，可以通过其他Flexbox技巧模拟）或在Flex项目之间插入伪元素来实现均匀间距。
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。 并集选择器和的意思，只要逗号隔开的，所有选择器都会执行后面样式。 <!...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...元素模式 元素排列 设置样式 默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度...容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 # 总结-块级元素和行内元素分别有哪些？...# CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。 注意： 1.
1.1 方法 常用方法有： 给浮动元素的父元素一个固定高度（不推荐） 给浮动元素新增一个空的 div 兄弟元素，设置 clear:both 给浮动元素新增一个 兄弟元素，设置 clear 属性为...all 给浮动元素的父元素新增一个 after 伪类，设置该伪类和父元素： div{ zoom:1; } div:after{ content:""; display:block...父元素高度塌陷的情况：子元素浮动后脱离了文档流，未设置高度的父元素在形式上表现为 0 高度，设置了 clear:both 的元素为了满足其左右两边没有浮动元素的这个条件，只能自身下移，从而带动了父元素高度的撑开...如图： image.png 但是触发了兄弟元素的 BFC 后，兄元素将不会被浮动的元素覆盖 ———— 不会被覆盖，意味着兄弟元素出现在浮动元素的旁边或者下面，具体取决于父元素的宽度。...IFC 中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。
CSS 继承 CSS的某些样式是具有继承性的，那么什么是继承呢？...（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 ...3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 ...内联元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...内联块状元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。
选择器（id具有唯一性） (3)class选择器（类选择器） (4)选择器的优先级：id选择器 > class选择器 > 元素选择器 2、...盒子的厚度 padding:盒子(边框)内壁与内部元素的距离 margin:盒子(边框)外壁与外部元素之间的距离 ============================...如：border: 10px green solid solid 实线 dashed 虚线 dotted 圆点 double 双实线 单独设置...border-right:右边框宽度 padding:盒子(边框)内壁与内部元素的距离 padding: 10px;...padding-left:左边框宽度 padding-right:右边框宽度 margin:盒子(边框)外壁与外部元素之间的距离
一、CSS特性 1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。 ...开头，后面的名字需要自己定义，类定义后需要在需要使用的元素上使用class="类名"加以调用。(注：可以同时给一个元素加多个类，类之间用空格隔开。类和id都不要以数据开头)。 ...语法：父元素 子元素{属性：值}，如：table td{color:blue;} 4.选择符分组(集体控制)：将同样的样式定义用于多个选择符，选择符之间用逗号隔开。 ...{属性：值} 如：p,div,h1,table{属性：值}。 5.标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符。 ...常见块状元素有：div、p、body、h1~h6等（能设置宽和高，独占一行）。
一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。...注意：各个参数之间用空格隔开，而不是逗号隔开。...2、新增的background属性 2.1、background-size CSS里的 background-size 属性能够让程序员决定如何在指定的元素里展示，它通过各种不同是属性值改变背景尺寸呈现的大小.../*设置背景图片的大小：宽度/高度 宽度/auto(保持比例自动缩放)*/ background-size: 100px 50px; background-size: 100px; /*设置百分比...2.4、案例：精灵图的使用 需求：为一个块元素设置精灵图背景，精灵图很小，但是需要更大的展示区域，能够以更大的范围响应用户的需要，但是只需要显示指定的背景图片。 <!
功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则 * + * { margin-top: 1.5rem; } 这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。...，克隆声明确保将这些样式均匀地应用于每行。...、强制使用属性选择器显示空链接 这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。...transition: all ease-in-out .3s;} 14、比率框 要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div： .container { height...无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。 15、风格破碎的图像 这个技巧不是关于代码缩减，而是关于细化设计细节的。
，克隆声明确保将这些样式均匀地应用于每行。...12、强制使用属性选择器显示空链接 这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。...transition: all ease-in-out .3s; } 14、比率框 要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div： .container {...无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。 ? 15、风格破碎的图像 这个技巧不是关于代码缩减，而是关于细化设计细节的。..." attr(src) ")"; display: block; font-size: 12px; } 16、使用rem进行全局大小调整；使用em进行局部大小调整 在设置根目录的基本字体大小后
语法说明： 元素1 和 元素2 中间用 大于号 隔开 元素1 是父级，元素2 是子级，最终选择的是元素2 元素2 必须是亲儿子，其孙子、重孙之类都不归他管....语法说明： 元素1 和 元素2 中间用逗号隔开 逗号可以理解为和的意思 并集选择器通常用于集体声明 并集选择器中的最后一个选择器不需要加逗号 例子： 5、伪类选择器 定义： 伪类选择器用于向某些选择器添加特殊的效果...6、链接伪类选择器 定义： 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。...块级元素的特点： 比较霸道，自己独占一行。 高度，宽度、外边距以及内边距都可以控制。 宽度默认是容器（父级宽度）的100%。 是一个容器及盒子，里面可以放行内或者块级元素。...有的地方也将行内元素称为内联元素。 行内元素的特点： 相邻行内元素在一行上，一行可以显示多个。 高、宽直接设置是无效的。 默认宽度就是它本身内容的宽度。 行内元素只能容纳文本或其他行内元素。
在上面的模型中，一个元素具有底部边缘，而另一个元素具有顶部边缘。 具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。...CSS 定位 它可能不是分隔元素的直接方式，但它在某些设计案例中发挥作用。 例如，一个绝对定位的元素，需要从其父元素的左边缘和上边缘定位 16px。...因此，导航项的宽度取决于它们的内容。 以下是解决方案： 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的边距 最简单更好的解决方案是第三种，即添加一个margin-left。...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。...例如，根据视口宽度设置具有最小值和最大值的边距。 答案是肯定的！ 我们可以。 最近，CSS 数学函数在 Firefox 75 中得到支持，这意味着它们在所有主流浏览器中都受 CanIUse 支持。
块级元素的特点 （1）比较霸道，自己独占一行 （2）高度，宽度、外边距以及内边距都可以控制。 （3）宽度默认是容器（父级宽度）的100% （4）是一个容器及盒子，里面可以放行内或者块级元素。...有的地方也成内联元素 ? 行内元素的特点： （1）相邻行内元素在一行上，一行可以显示多个。 （2）高、宽直接设置是无效的。 （3）默认宽度就是它本身内容的宽度。...2.5 三种模式总结区别 元素模式 元素排列 设置样式 默认宽度 包含 块级元素 一行只能放一个块级元素 可以设置宽度高度 容器的100% 容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度...它本身内容的宽度 容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度 2.6 标签显示模式转换 display 块转行内：display:inline...样式不冲突，不会层叠 CSS层叠性最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 5.2 CSS继承性 ? 概念： 子标签会继承父标签的某些样式，如文本颜色和字号。
除了 static 值，在其他三个值的设置下，z-index 才会起作用。确切地说 z-index 只在定位元素上有效。...超长长度的文字在省略显示后，如何在鼠标悬停时，以悬浮框的形式显示出全部信息 ?...当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。...假设 main 的默认宽度是 100%，那么它设置了 margin 后，它的宽度就变成了 100% - 320，此时 main 发现自己的宽度可以与 sidebar 挤在同一行了，于是它就上来了。
第二部分：jQuery语法： 1.jQuery语法是通过选取HTML元素，然后对选取的元素进行某些操作。...插入后：hello tomorrow是使用append()：插入到div里面了，并与div里面的元素内容相联合；而hello yesterday是使用after()：插入待div外面，即div元素的后面...5.jQuery尺寸 width()/height()：设置或获取当前元素的宽度/高度(不包括内边距，边框，外边距) innerWidth()/innerHeight()：设置或获取当前元素的宽度/高度...如：$('span').parentsUntil('div')：代表span与div之间所有的祖先元素。...，具有相同的父元素） siblings()：返回被选元素的所有同胞（兄弟）元素；可选参数可以用来进行过滤：$('h2').siblings('p')：返回与h2具有相同父元素的p元素 next()：返回被选元素的下一个同胞元素
如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。 记忆技巧： 并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面样式。...样式不冲突，不会层叠 CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。 CSS继承性 所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。...元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。...对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。...BFC元素所具有的特性 BFC布局规则特性： 1.在BFC中，盒子从顶端开始垂直地一个接一个地排列. 2.盒子垂直方向的距离由margin决定。
*+{CSS} 效果·： 进阶 后代选择器：选择父元素 后代中 满足条件的元素(空格隔开) 选择器1 选择器2+{} 儿子选择器：选择父元素 子代中 满足条件的元素 选择器1 > 选择器2+{}.../img/tb.gif) no-repeat left center; ---- 元素显示模式 1、 块级元素block 独占一行（一行只能显示一个） 宽度默认是父元素的宽度，高度默认由内容撑开...可以设置宽高 ➢ 代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…… 2、行内元素inline 一行可以显示多个 宽度和高度默认由内容撑开...内容区域 的大小 ---- 边框（ border ） 一般直接属性连写：如：border : 10px solid red; 当只给盒子的某个方向单独设置边框：border - 方位名词 : 10px...，如宽 401px，像素不能设置成小数，所以可以用下面方法： position: absolute;//绝对定位 left: 50%; top: 50%; /*位移：自己宽度高度的一半*/ transform
默认宽度为父元素宽度，可设置宽高，换行显示。 none是指元素不会显示，已脱离文档流。 inline是指行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...例如等，对于行内元素，不能设置其高度和宽度。 还有一种元素是行内块级元素，比如元素等。这些元素可以和其他行内元素位于同一行，同时可以设置其高度和宽度。...（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。...两种解决方案分别是 overflow:hidden或font-size：容器高度px 25、如何在图片下方设置几像素的空白间隙？...IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。
领取专属 10元无门槛券
手把手带您无忧上云
