只设置其中一个元素的margin 上下margin折叠的情况 块级元素的居中 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block...水平居中 元素的水平居中方案 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block) 行内级元素(包括 inline-block元素) 水平居中:在父元素中设置...背景设置 3.1. background-image background-image用于设置元素的背景图片 会盖在(不是覆盖) background-color的上面 如果设置了多张图片 设置的第一张图片将显示在最上面...，其他图片按顺序层叠在下面 注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 3.2. background-repeat background-repeat 用于设置背景图片是否要平铺...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动. fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
css基础系列 盒子模型 盒子模型的概念 高和宽的设置 边框的设置 内边距的设置 外边距的设置 盒子的计算 元素显示的方式 ?...： 设置元素的背景图片的显示方式： background-attachment: scroll | fixed scroll: 默认值，背景图片随滚动条滚动 fixed:当页面的其余部分滚动时，背景图片不会移动...list-style:简写 背景样式 设置背景颜色和背景图片 背景颜色，设置元素的背景颜色 background-color:颜色 | transparent 背景图片 设置元素的背景图片...设置元素的背景图片的显示方式 background-attachment: scroll | fixed scroll:随着滚动条滚动，fixed:背景图片不会移动 背景图片定位 background-position...: absolute 盒子模型： 盒子模型概念，内边距设置，高和宽的设置，边框的设置，外边距设置，盒子的计算，元素显示的方式。
4.元素显示模式 网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页，这时候就要用到元素显示模式。...行内元素的特点: 相邻行内元素在一行上，一行可以显示多个。 高、宽直接设置是无效的， 默认宽度就是它本身内容的宽度。 行内元素只能容纳文本或其他行内元素。...我们称它们为行内块元素。 行内块元素的特点: 可以和相邻行内元素或行内块元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)。...6.背景 背景颜色 设置元素的背景颜色，可以使用颜色名称、十六进制、RGB、RGBA、HSL 等颜色值。...从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为: background:背景颜色, 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
盒子模型的属性 宽高width/height 在CSS中，可以对任何块级元素设置显式高度。 ...如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样； 如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto...padding显得中规中矩了很多，没有什么兼容性，也没有一些特殊的问题 对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，垂直内边距不影响行高，但会影响自身尺寸，加背景颜色可以看出...而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。...，背景图片在背景色之上，背景色在外阴影之上 3、内阴影对元素没有任何效果 4、最先写的阴影在最顶层 5、该属性与border-radius一脉相承，若通过border-radius
3 background-clip 指定背景图像的绘画区域 3 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。...子元素绝对定位 然后设置 left:50%; margin-left:子元素宽度的一半;（已知宽高） /* 自身 */ .center{ position:absolute; left: 0...子元素绝对定位 然后设置 top:50%; margin-top:子元素高度的一半;（已知宽高） /* 自身 */ .center{ position:absolute; top: 0;...-- 方法4：flex布局 --> /* 父元素只要三句话就可以实现不定宽高水平垂直居中。...visible 不显示滚动条，但是超出部分会显示。 hidden 不显示滚动条，超出部分不会显示。 scroll 显示滚动条，就算某个方向没超出也会显示。
元素的显示与隐藏 display -- block;(转换为块元素&& 显示) none(隐藏 && 不保留原来的位置) -- 重要！...做法： 1.宽高为 零 2.四个边都要的，只保留我们需要的边框颜色，其他的 颜色透明即可。...*/ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp...: 3; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical; margin负值运用(练习！)...行内块可以单独设置宽高一排显示 text-align:center --- 给父亲元素添加，可以让子盒子(行内块/行内元素)水平居中。
: #F5F5F5; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22); } /*定义滚动条高宽及背景*/ #style-2::-webkit-scrollbar...*隐藏滚动条： 1、去掉水平方向的滚动条： 2、去掉垂直方向的滚动条： 3、隐藏横向、显示纵向滚动条： 4、隐藏全部滚动条： 或者 更好的方法就是把滚动条的颜色设置为完全透明，这样既可以实现内容的滚动...应用: 没有水平滚动条: test 没有垂直滚动条 test 没有滚动条 test 自动显示滚动条 test 自己定义滚动条的颜色，代码如下：Body { scrollbar-arrow-color...: #666; /*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色...使用该值时，无论设置的”width”和”height”的值是多少，其中的内容无论是否超出范围都将被强制显示。 overflow：auto；在需要时剪切内容并添加滚动条。
background-repeat: 背景平铺; 1.repeat 平铺 默认的 2.no-repeat 不平铺 3.repeat-x 水平平铺 4.repeat-y 垂直平铺 背景是否滚动 background-attachment...top left center bottom 书写的顺序不论 2.像素 如果是像素 那么默认在以“当前盒子”的左上角为0 0原点 构建一个坐标系 第一值是X轴的位置 第二个值是Y轴的位置 交互的点就是图片开始显示的起始位置...多说一嘴： 1、程序里面的坐标系X轴水平向右 Y轴垂直向下 2、注意顺序 3.百分比 百分比参照的自身盒子的宽高： 最终的位置是当前盒子自身的宽高的百分比 - 图片自身的宽高的百分比 4.还可以混写...混写是需要考虑顺序 背景的简写 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 如：background: #fff url() no-repeat scroll center...center; img和背景图片的区别： img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片
子元素选择器是相对于父元素的第一级子元素符合条件。 相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。...background-attachment 定义背景图片是否跟随内容滚动 background-position 定义背景图片的水平位置和垂直位置 background 可以用一条样式定义各种背景属性...background-attachment用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为： scroll，表示可以随着页面其余部分的滚动而滚动。...设置 fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置 inherit，继承父元素。...设置是否显示表格中空单元格上的边框和背景 table-layout 设置用于表格单元格列宽的设置方式 盒模型 css盒模型，包含元素内容 content，内边距 padding，
:24px; 设置文字首行缩进24px text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中 css颜色表示法 css颜色值主要有三种表示方法：...3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。...上下、padding上下） 宽高由内容决定 盒子并在一行 代码换行，盒子之间会产生间距 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式...它们在布局中表现的行为： 支持全部样式 如果没有设置宽高，宽高由内容决定 盒子并在一行 代码换行，盒子会产生间距 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height...设置背景图片的位置 background-attachment 设置背景图片是固定还是随着页面滚动条滚动 实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高
marquee> 我改向上只滚动一次了 bgcolor属性文字滚动范围的背景颜色，参数值是16进制...和height属性 width和height属性的作用决定滚动文字在页面中的矩形范围大小。... hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。 ...此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。 ... 下面的例子显示了 marquee 元素的 scrollLeft 和 scrollTop 属性的一些用途。
： h1 p：指定标签位置范围，h1标签里的后代p标签，空格代表每一层所有后代（所有选择器没有分隔符） h1>p：h1的子元素p h1 p~a：h1后代里p标签的兄弟a标签 h1 p+a：h1...important 四 元素继承权重 子元素继承父级元素的样式规则 继承没有权重，是NULL 不是所有规则都可以继承，比如边框 五 通配符与继承博弈 通配符权重是0 0 > NULL 六...，可以是数值也可以是百分数 轮廓线：outline-style等，不占据空间 元素显示：display：none，隐藏；block：块元素，inline-block，行级块（可以定宽高）；inline...：url（） 背景裁切：background-clip，content值为背景应用于内容区 背景重复：background-repeat，no-repeat不重复，repeat-x在x轴重复 滚动...，在渐变函数的颜色部分后边直接指定，控制渐变的范围 颜色渐变中间阈值：渐变过渡中间点，隔在颜色之间，控制渐变色占的比例 渐变重复：repeat-linear-gradient() 使用 CSS 3
三、背景图像概述 在本章第1节“背景样式概述”，我们已经给大家分析了在CSS中控制元素的背景样式包括背景颜色和背景图像，其中控制元素的背景图像涉及到的属性比较多，下面稍微给大家讲解一下，以便为读者理清后面的学习思路...image.png 定义背景图像在元素的位置，一般需要定义背景图像的横向位置和纵向位置，例如上图定义了背景图像在横向距离元素左边80px，在纵向距离元素顶边40px。...： image.png 分析： 给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。...因此在这里设置了div元素的宽width和height，其中width值和height值跟图片实际的宽度和高度一样。...这跟hr本身特点有关，在CSS进阶“hr的CSS设置”这一节我们会详细讲解到。 注意：设置有背景图片的元素的宽或高大于背景图片本身的宽或高，才会有平铺效果。
伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...方向 属性名 属性值 含义 水平 left 数字+px 距离左边的距离 水平 right 数字+px 距离右边的距离 垂直 top 数字+px 距离上边的距离 垂直 bottom 数字+px 距离下边的距离...无论是否溢出，都显示滚动条 auto 根据是否溢出，自动显示或者隐藏滚动条 五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。...通过PxCook量取小图片大小，将小图片的宽高设置给盒子 3. 将精灵图设置为盒子的 背景图片 4. ...: 水平 垂直 设置背景图大小：background-size ：宽度 高度
颜色是通过CSS最经常的指定： 十六进制值 – 如: ＃FF0000 一个RGB值 – 如: RGB(255,0,0) 颜色的名称 – 如: red 文字属性 文字对齐 text-align 属性规定元素中的文本的水平对齐方式...repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 示例：background-repeat...css盒子模型 margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
（宽高、边框样式、边距等）以及版面的布局等外观显示样式。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...行内元素的特点： （1）和相邻行内元素在一行上。 （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。 （3）默认宽度就是它本身内容的宽度。...背景固定还是滚动 背景的合写（复合属性） background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 背景图片(image) 语法： background-image : none...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。 固定定位有两点： 固定定位的元素跟父亲没有任何关系，只认浏览器。
Multi Line NewLine Placeholder：当Input Field的text为空的使用，显示的内容 Selection Color：选中编辑的文字的时候的背景颜色 Hide Mobile...Child Controls Size：是否布局组控制子元素的宽高 Child Force Expand：是否子元素适配多余的可用空间 使用细节： 所有子布局元素的最小宽度被添加到一起，它们之间的间距也被添加...结果是水平布局组的最小宽度。 所有子布局元素的首选宽度被添加到一起，它们之间的间距也被添加。结果是水平布局组的首选宽度。...如果水平布局组位于其最小宽度或更小，则所有子布局元素也将具有其最小宽度。 水平布局组越接近其首选宽度，每个子布局元素也将越接近其首选宽度。...如果水平布局组的宽度大于其首选宽度，则将根据子布局元素的灵活宽度按比例分配额外可用空间。 Grid Layout Group ?
有一天，设计师又来了：“这个按钮的背景加个动态星云效果，颜色随着页面滚动变化，行吗？” 还有产品经理：“咱的列表能不能整得像Pinterest那样，排列得艺术点？”...，这里是颜色 inherits: false, // 子元素是否继承该属性 initialValue: '#ff5722' // 默认值 }); 代码：在CSS中使用 :root...效果 设计师可以随时更改品牌色 ，整个网站的背景色会自动更新，无需在每个元素上手动修改。 如果设计师忘了设置--brand-color，页面仍然能用默认值正常显示，避免“翻车”。 2....效果 你的元素背景将布满整齐的小圆点，点与点之间的间距、大小、颜色都可以灵活调整。 3....// 子元素的y坐标 yield { child, // 子元素 inlineOffset: x, // 水平方向偏移
说明他们的作用? block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none：缺省值。像行内元素类型一样显示。 inline：行内元素类型。...默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block：默认宽度为内容宽度，可以设置宽高，同行显示。 list-item：像块类型元素一样显示，并添加样式列表标记。...rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的 所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。...1）水平居中 a、使用 margin: 0 auto;（只适用于子盒子有宽的时候） .child { margin: 0 auto; } b、text-align + display（子盒子有或没有宽度的时候都适用...（6）在使用多行文本时，指定 column-width （ 列宽 ）而不是指定 column-count（ 列数 ），这样它就可以在较小的屏幕上自动显示为单例布局。
一、背景样式 在CSS中，背景样式包括两个方面：背景颜色、背景图片。 在Web2.0 时代，对于元素的背景样式，我们都是使用CSS属性来实现。...二、背景颜色（background-color） 在CSS中，使用background-color属性来定义元素背景颜色。...背景图片(background-image).png （2）background-image与img属性异同 ① 设置宽高 在上例中，若是不为div元素设置width、height属性是不会显示图片的...，因为没有设置时宽度和高度都为0，所以背景图片不会显示，所以在使用background-image属性前一定要看看元素是否设置了宽高。...在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
