1.3 Semi Flat 半扁平化 semi Flat风格最突出的表现，就是在扁平化图标的基础上加阴影效果,让图标更具有活力，当然还有其他的表现，比如增强在光感、层级、材质上的三维效果。 ?...需要有个背景大图，大图上有一个文本框，显示标题跟正文，文本框是毛玻璃的效果。 先试试毛玻璃效果，效果见下图 ?...背景图像的某些部分也许无法显示在背景定位区域中。 contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 这里先不管cover还是contain，先设置个cover。...2）scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。...3）local： 背景图像相对于元素内容固定，也就是说当内容随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
设置 fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置 inherit，继承父元素。...background-position用于设置背景图像圆点的位置。...设置是否显示表格中空单元格上的边框和背景 table-layout 设置用于表格单元格列宽的设置方式 盒模型 css盒模型，包含元素内容 content，内边距 padding，...，位于边框边缘的外围，起到突出元素的作用。...，relative相对 top 元素上外边距 right 元素右外边距 bottom 元素下外边距 left 元素的左外边距 z-index 元素的堆叠顺序 z-index用于设置目标对象的定位层序
padding-(top,right,bottom,left)(内边距) - 清除内容周围的区域，内边距是透明的。 content(内容) - 盒子的内容，显示文本和图像。...效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。...relative(相对定位)，其位置相对其正常时的位置。相对定位元素经常被用来作为绝对定位元素的容器块。 fixed，元素的位置相对于浏览器窗口，是固定位置。即使窗口是滚动的它也不会移动。...z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） Overflow visible 默认值。内容不会被修剪，会呈现在元素框之外。.../html> 图像透明 opacity来设定图片透明度，opacity 属性能够设置的值从 0.0 到 1.0 img:hover鼠标控制 使用css来渲染表单 <meta
：背景图片不平铺 --> 文本颜色和文本对齐 的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。.../*相当于将图片的大小设置为父级标签的大小来显示了，因为用户上传的头像的像素我们是不知道的， 就让它按照父级标签的大小来，就能放下整个头像了，就不会出现头像显示不全的问题了...3 . fixed（固定）不管页面怎么动，都在整个屏幕的某个位置 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动...只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index 3 . z-index值没有单位，就是一个正整数
： 事例地址：https://codepen.io/chriscoyier/pen/DELgOJ 2.交换元素的背景 z-index 属性规定了元素如何堆叠在其他定位元素上。...有时，你可能会设置一个 z-index 属性让子元素的层级较低，结果却发现它隐藏在其父元素的背景之后。为了防止这种情况，你可以在父元素上创建一个新的堆叠上下文，防止子元素隐藏在其后面。...背景的变化不会干扰前景的文本，如下面的gif所示： 3.将元素居中 可能，你已经知道如何使用 display: flex; 和 display: grid; 来居中元素。...然而，另一种不太受欢迎的在x轴上居中元素的方法是使用 text-align CSS属性。这个属性在居中文本时就能直接使用。要想在DOM中也居中其他元素，子元素需要有一个 inline 的显示。...我们可以在表单元素上使用 :valid 和 :invalid CSS伪类，当其内容验证成功或失败时，应用适当的样式。 请考虑以下HTML页面结构： <!
定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。...display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。...padding: 用于控制内容与边框之间的距离； Border(边框): 围绕在内边距和内容外的边框。 Content(内容): 盒子的内容，显示文本和图像。...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动，防止滚动时图形消失 fixed。 background-color 设置元素的背景颜色。...background-image 把图像设置为背景，url(/i/eg_bg_04.gif)。 background-position 设置背景图像的起始位置。...z-index 属性 设定了一个定位元素及其后代元素或 flex 项目的 z-order，当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。...击穿Scoped 使用 scoped 后，父组件的样式将不会渗透到子组件中。如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。...它和visibility属性不一样，把 display:none 不会保留元素本该显示的空间，但是 visibility:hidden 还会保留。
此外，它还可以用于扩展卡片组件的可点击区域，该组件具有查看更多链接的功能。请注意，文章的内容(如标题和图像)将位于伪元素之上，因此它不会影响文本的选择或图像的保存。 ?...叠加层 假设有一个带有背景图像的元素，并且设计中有一个渐变叠加层，并且混合模式设置为color，伪元素可以帮到你。 ?...因为在使用:after时，可能需要我们向其他嵌套元素添加z-index，以便伪元素不会与它们重叠。 我们举一个真实的例子。 这是一张由缩略图和标题组成的简单卡片。....card-title { /*Other styles*/ z-index: 1; } 2. before 元素 使用:before元素时，默认情况下可以使用！...无需在卡片标题中添加z-index。 原因是，使用:before时，该元素不会出现在其他同级项的上方，而当元素为:after时，它将出现在其他同级项之上。
经过多年的实践，由于你的眼睛会感觉到它好像是平衡的，这个是一种错觉。 03、设计背景 我之前介绍的示例以灰色背景显示，但你可以尝试其他操作。这有助于你的设计创建一些深度和上下文。...05、使用Z-Index，分层设计 如果你有一些具有透明性的图像，则可以利用它们来创建一些分层。...07、使用空白设计 在我看来，空白多比空白少要好。杂乱无章的设计真的很糟。不过，你可以通过多种方式获得： 保持大背景图可见。 避免带有间隔的文本墙。 不要使用不会吸引太多注意力的图像。...你可以使用Photoshop并在白色背景上创建2–4K高斯噪波，然后将其应用到画板上，从而获得一些噪波纹理。 ? 09、寻找并使用好的字体 有很多可怕的字体，尤其是我们计算机上预装的字体。...11、单色图像背景 一种极其简单但有效的技巧是使用单色图像作为背景，而不是使用纯色。 这个技巧可以帮助你将设计图的纹理增强，同时还留出一些空间。 具怎么做？
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。...Content(内容) - 盒子的内容，显示文本和图像。 主要是用来控制一个标签和其他标签的位置，比如两个标签之间做间隔区分等，比较有用 padding与margin的区别 ? a....显示 控制标签的显示隐藏等 display属性设置一个元素应如何显示 visibility属性指定一个元素应可见还是隐藏 a. display none可以隐藏某个元素，且隐藏的元素不会占用任何空间。... 注意 当多个元素在同一个位置时，就会出现重叠的问题，特别是relative这种场景，在网页右下角添加悬浮窗时，经常会出现遮盖的问题，这时可以用 z-index 属性来指定覆盖顺序...浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻 <!
是一种CSS图像合并技术，该方法时将小图标和背景图像合并到一张图片上，然后利用css的背景定位技术来显示需要显示的图片部分。 CSS精灵有什么优点，就是减少了http请求。...background-attachment:fixed; 背景会被固定住，不会被滚动条滚走。...就两个作用： 1、微调元素； 2、做绝对定位的参考； 4.4 相对定位的定位值 可以使用left、right来描述盒子左、右的移动；可以使用top、bottom来描述盒子的下、上的移动。...7 z-index 1、z-index值表示谁压着谁。数值大的盖住数值小的。 2、只有定位了的元素，才能够有z-index值。也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index值。...而浮动的东西不能够使用。 3、z-index值没有单位，就是一个整数值。默认的z-index值为0。 4、定位了的元素，永远能够压住没有定位的元素。
： 设置元素的背景图片的显示方式： background-attachment: scroll | fixed scroll: 默认值，背景图片随滚动条滚动 fixed:当页面的其余部分滚动时，背景图片不会移动...:设置背景图像的起始位置 background-attachment:背景图像是否固定或者随着页面的其余部分滚动 background-repeat:设置背景图像是否重复以及如何重复 background...设置元素的背景图片的显示方式 background-attachment: scroll | fixed scroll:随着滚动条滚动，fixed:背景图片不会移动 背景图片定位 background-position...image.png id不要滥用，适当使用class css导入式@import 外部css样式 css字体和文本样式 文字：字体，字体大小，颜色，加粗等 文本：行高，对齐方式，文本修饰等...fixed | inherit 使用z-index要有position: absolute 盒子模型： 盒子模型概念，内边距设置，高和宽的设置，边框的设置，外边距设置，盒子的计算，元素显示的方式
让背景图像不影响文本的排版，不想让图像平铺，可以使用background-repeat属性。...我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。 :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。...在鼠标移动到div 上时显示提示信息。提示文本放在内联函数上(如 span) 并使用class=”tooltiptext”。...:hover 选择器用于在鼠标移动到到指定元素div上时显示的提示。 图片廊 以下是使用 CSS 创建图片廊： 显示的图像将是我们在CSS中指定的背景图像宽度：46px;高度：44px; - 定义我们使用的那部分图像background:url(img_navsprites.gif) 0 0;定义背景图像和它的位置
1.精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中 2.该大图当背景后是以左上角对齐的，所以要让其他小背景图片插入进去就要移动大背景图 3.移动大背景图片的位置，此时可以使用...5.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置，根据位置然后移动相应距离。...3.字体图标iconfont 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。...等（推荐） 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性 7.溢出的文字省略号显示 单行文本溢出省略号显示 必须满足三个条件： ...此时如果要让盒子发生变化，标准流中的盒子发生变化就会因为重叠有一部分不会变，所以提高当前盒子的层级即可： 如果没有定位，则加相对定位(保留位置，并且能覆盖标准流) 如果有定位，则加 z-index
行内元素：行内元素不会占有独立的区域，仅仅依靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ... 当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...这样当用户访问该页面时，只需要向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。 ...这种方式固然可以实现圆角背景的效果，但是，如果以后增加或减少列表项中的文字，就需要重新对li定义背景图像，以适应文本内容的多少。
行内元素：行内元素不会占有独立的区域，仅仅依靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。...内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 ...当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。...这样当用户访问该页面时，只需要向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。 ? ...这种方式固然可以实现圆角背景的效果，但是，如果以后增加或减少列表项中的文字，就需要重新对li定义背景图像，以适应文本内容的多少。
;只在水平方向上平铺背景图片 background-repeat:repeat-y;只在竖直方向上平铺背景图片 background-repeat:no-repeat;不平铺背景图片 这三个功能只有在背景图片小于网页大小时才能够使用...一般用于配合JavaScript代码使用 block 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分,使行内元素变成块级元素 inline 按行内元素显示，此时再设置元素的width...（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）...内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。...z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
时，得到的结果不是预想的。 ...框会变浅蓝色的那么个感觉 #outline: none; background-color: #eee; #框里面的背景色 } 12，伪元素选择器 #将p标签中的文本的第一个字变颜色变大小...一行上可以显示多个，可以设置有效的宽高，代表img，input 我们可以通过display属性来重新设置标签属性 4，display：none和visibility：hidden的区别 两者都有隐藏的作用...border：边框 content：盒子的内容，显示文本和图像 margin和padding一样，可以为四边同时设置： margin：2px 四边都是2px margin：2px 3px...3，absolute（绝对定位） 设置为绝对定位的元素框会从文本流出来，也就不会占据原来的位置，同时也会出现父级塌陷的现象，绝对定位是相对于父级位置来的（父级必须是relative，也就是父级要是相对定位的
绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。...可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。...fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。...何时使用margin： 需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。...content属性与::before及::after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。
定义标准的文本 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义穿过文本下的一条线 inherit 继承父元素的text-decoration...) no-repeat right top; 使用背景图片的一个常见案例就是很多网站会把很多图案放在一张图片上，然后根据位置去显示图片。...border（边框）：围绕在内边距和内容外的边框。 content（内容）：盒子的内容，显示文本和图像。 盒子模型： ?...6.4 fixed（固定） fixed：对象脱离正常文档流，使用top、right、bottom、left 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...#i2 { z-index: 999; } 设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上，z-index 仅能在定位元素上凑效。
云服务器
ICP备案
云直播
腾讯会议
实时音视频
