: #fff; /* 设置圆角矩形半径 */ border-radius: 8px; } .local-nav li { /* 5 个 li , 每个占据宽度的 1/5 */..., 这里需要使用精灵图作为背景 ; 精灵图如下 , 尺寸为 64 x 320 像素 , 每个图标的尺寸为 64 x 64 像素 , 这又是一个二倍精灵图 ; 二倍精灵图设置步骤 : 缩小精灵图...: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */ position: fixed;...+ 尺寸 的总高度中垂直居中 */ height: 26px; line-height: 24px; border: 1px solid #ccc; /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间...: 8px; } .local-nav li { /* 5 个 li , 每个占据宽度的 1/5 */ flex: 1; } .local-nav a { /* 设置为 Flex
这两种盒子会在页面流 （page flow）和元素之间的关系 方面表现出不同的行为: 一个被定义成块级的（block）盒子会表现出以下行为: 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间...如果一个盒子对外显示为 inline，那么他的行为如下: 盒子不会产生换行。 width 和height属性将不起作用。...第二个是一个列表，布局属性是 display: flex。 将在容器中建立一个flex布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。...还有一个 ul> 设置为 display: inline-flex，使得在一些flex元素外创建一个内联框。 最后设置两个段落为 display: inline。...image.png 注 : margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。
flex-fill 类强制设置各个弹性子元素的宽度是一样的 flex-grow-1 用于设置子元素使用剩下的空间，以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。...) text-white 白色文本(白色背景上看不清楚) 背景颜色 类名 作用 bg-primary 重要的背景颜色 bg-success 执行成功背景颜色 bg-info 信息提示背景颜色 bg-warning...警告背景颜色 bg-danger 危险背景颜色 bg-secondary 副标题背景颜色 bg-dark 深灰背景颜色 bg-light 浅灰背景颜色 表格 基本使用 例： Third itemli> ul> 大部分基础列表组都是无序的 要创建列表组，可以在 ul> 元素上添加 .list-group 类, 在 其中一个轮播元素上，否则轮播将不可见。另外一定要在 .carousel 上为控制项元件设置一个唯一的 id，特别是当你在一个页面上使用多个轮播的时候。
全家桶1年46，售后保障稳定 下面就display的重要属性进行讲解，并配合一些相关的例子 基本属性 display: none none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间...在设计的过程中有时需要设计一个div宽高都是整个屏幕，整个时候宽度很好设置，可是高度一般很难设置，因为页面一般都是可以滚动的，所以高度一般可变，所以这个时候可以使用一个小技巧，如下。...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。...flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。...弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为0，也就是不具有弹性。
当然存在一个叫clip-path的属性，可绘制三角形，鉴于其兼容性较差通常不会大范围使用它绘制三角形。 很多同学都会基于盒模型编写三角形，但大部分都是复制粘贴的操作。...每个小矩形的递增角度：--Θ:calc(var(--line-index) / var(--line-count) * 1turn) 每个小矩形的背景色相：filter:hue-rotate(var(-...其实这个也不算什么特别技巧，只是很多同学都不会去注意这种用法，有需求都是直接添加标签。也许以下提及的障眼法和内容插入会让同学们对伪元素另眼相看。...带边框气泡对话框 答案当然是可行的。以下是整个带边框气泡对话框的拆解，整体由三部分组成：带边框圆角矩形、黑色三角形、橙色三角形。...有这么一个场景，一个数据集合需遍历到每个DOM上并把某个字段插入到其::after上。这该怎么办，好像95%的同学都不会使用JS获取节点的::before或::after。
例如，如果我们想要一个特定的图像占据 body 元素的整个背景，而不管浏览器窗口的宽度如何？...不过，值得注意的一点是，当设置为 display: flex mode 时，子元素将占据所有垂直空间；这是默认 align-items 值： stretch....我们可以通过使用新 box-flex 属性来解决这个问题。 flex 指示元素占用所有可用空间。...: 1; } 有了这个属性，无论 #main 内容区域的宽度如何， aside 都将消耗每个规格的可用空间。.../font> Hover Over Me li> ul> CSS ul a {</
flew-grow是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间。如果我们使用flex-grow: 0，那这个flex元素就完全不会扩展了。...知识点总结： flex-grow --- 是用来控制一个flex元素相对它同等级flex元素的自身可扩充的空间 flex-shrink --- 作用与flex-grow是恰恰相反，用来控制flex元素收缩的空间...自定义列表符号 ul，li的无序列表有默认的符号·，但是在很多情况下我们希望可以给这个符号加入自己的样式和颜色，甚至是换成自定义的符号。...我们只要使用一个CSS背景图的属性background-attachment: fixed，这个特性会把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。...知识总结 background-attachment: fixed — 把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
当然存在一个叫clip-path的属性，可绘制三角形，鉴于其兼容性较差通常不会大范围使用它绘制三角形。 很多同学都会基于盒模型编写三角形，但大部分都是复制粘贴的操作。...每个小矩形的递增角度：--Θ:calc(var(--line-index) / var(--line-count) * 1turn) 每个小矩形的背景色相：filter:hue-rotate(var(-...其实这个也不算什么特别技巧，只是很多同学都不会去注意这种用法，有需求都是直接添加标签。也许以下提及的障眼法和内容插入会让同学们对伪元素另眼相看。...以下是整个带边框气泡对话框的拆解，整体由三部分组成：带边框圆角矩形、黑色三角形、橙色三角形。...有这么一个场景，一个数据集合需遍历到每个DOM上并把某个字段插入到其::after上。这该怎么办，好像95%的同学都不会使用JS获取节点的::before或::after。
弹性布局管理宽度 在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ; 右侧的搜索按钮始终都是 44x44 像素大小 ; 左侧的搜索栏随着网页布局的宽度变化而变化 ; 此处 使用 Flex 弹性布局管理宽度..., 右侧的按钮直接设置一个固定大小 , 左侧的搜索框设置 flex: 1; 样式 , 也就是 自动占据剩余空间 ; Flex 子项目的 flex 样式默认都为 0 , 只要有一个子项目设置了 flex...+ 尺寸 的总高度中垂直居中 */ height: 26px; line-height: 24px; border: 1px solid #ccc; /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间...: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 */ position: fixed;...+ 尺寸 的总高度中垂直居中 */ height: 26px; line-height: 24px; border: 1px solid #ccc; /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间
item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size flex容器属性 flex-direction 决定主轴方向=项目排列方向 flex-wrap...1px solid rgba(25, 186, 139, 0.17) no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体...就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可 no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255,...> li>125811li> li>104563li> ul> ... ul> li>前端需求人数li> li>市场供应人数li>
、 解决方案： a)margin-top和margin-bottom只设置其中一个值 b)给其中一个设置margin属性的元素外层再嵌套一个盒子，并设置overflow:hidden; 11.假传圣旨问题...: .box :first-child{color:red;} 匹配.box下每个父元素下的第一个子元素 注： :first-child 《=》 :nth-child(1) 都是匹配父元素下的第一个子元素...: .box :last-child{color:blue;} 匹配.box下每个父元素下的最后一个子元素 注： :last-child 《=》 :nth-last-child(1) 都是匹配父元素下的最后一个子元素...; 注：flex-shrink默认值为1,当flex容器剩余空间不足时，flex项目等比例缩小 注：flex-shrink:0; 即使flex容器空间不足，flex项目也不缩小 5.设置flex项目占据主轴的空间...(背景图不会超出容器，但是背景图有可能发生变形) background-size:100%;(背景图有可能超出容器，但是背景图不会发生变形) 3.cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
背景介绍 团队开发中为了解决变量相互覆盖的问题，会将相关的功能的涉及到变量收编到一个对象内。但使用对象收编变量后需要注意 this 合理使用。...页面主体内容： ：作为整个应用的容器。 ：包含搜索框和搜索按钮的容器。...li { list - style: none; }：去除列表项的默认样式。 页面背景：body { background - color: #f0f3f5; } 设置页面背景颜色。...input 设置输入框的样式，包括宽度、高度、内边距、边框圆角和阴影等。 .search - btn 设置搜索按钮的样式，包括宽度、高度、背景颜色、边框圆角和文字颜色等。...搜索结果列表样式：.search - list 设置搜索结果列表的宽度、背景颜色和上边距。
下图中, 元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景, 内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素；而元素背景通常应用于由内容和内边距...; padding: 0.5em; } span, li { border: 2px solid blue; } ul { display: flex;... ul> li>Item One(内联元素弹性盒子)li> li>Item Twoli> li>Item Threeli> ul> 占据空间，绘制于元素内容周围, 根据规范，outline 通常是矩形，但也可以是非矩形的。...，使其在不同的背景颜色中都是可见的 */ p.invert { outline-style: outset; outline-color: invert; }
背景颜色 background-color: red; 背景图片 background-image: url('1.jpg'); 背景图片的特殊示例： 需求介绍：使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上...repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 示例：background-repeat...display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 <!
3、flex属性（子元素使用） 3.1、flex-grow flow-grow：可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值，这个比例值是和其他兄弟子元素占据的剩余空间平分的。...示例： .first{ flex-grow: 1; /*first子元素宽度拉伸，拉伸的宽度占据父元素剩余空间的三分之一*/ } .second{ flex-grow: 0;/*second...子元素宽度不拉伸*/ } .third{ flex-grow: 2;/*third子元素宽度拉伸，拉伸的宽度占据父元素剩余空间的三分之二*/ } 3.2、flex-shrink 同 flex-grow...flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。...>Pythonli> ul> ?
工具区域： 是工具区域，包含一个搜索框和一个快捷导航列表。快捷导航列表 ul class="list"> 包含多个 li> 元素，分别是导航项。 4....background-color: #f5f5f5; 设置页面的背景颜色为浅灰色。...background-color: #fff; 设置文章的背景颜色为白色。 padding: 16px 32px; 为文章添加内边距。 box-shadow 为文章添加一个细微的边框阴影效果。 4.....my-dialog>.block 类设置对话框的内容区域样式，包括宽度、内边距、圆角和背景颜色。 .block>a 类设置分享链接的样式，包括文字颜色、换行方式和行高。....block>button 类设置复制按钮的样式，包括宽度、高度、背景颜色、文字颜色和鼠标指针样式。 :hover 伪类为复制按钮设置鼠标悬停时的背景颜色。 四、工作流程▶️ 1.
浮动元素会生成一个块级框，而不论它本身是何种元素。...如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。...4、flex-basis属性（这个是重点，常用） flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。...它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。...li> 方框 li> ul> 5、底部固定，上部自适应 有人就会说了这个用定位来解决不久完事了，多一个选择啊，对吧？
背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat:...display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 ...这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是定位流，但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 ...="">水滴li> li>金融li> li>优品li> ul> <!
background-attachment 背景图像是否固定或者随着页面的其余部分滚动，防止滚动时图形消失 fixed。 background-color 设置元素的背景颜色。...1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc 属性 描述 color 设置文本颜色 background-color 设置文本的背景颜色 direction 设置文本方向...单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 3）容器的属性 （1）flex-direction属性 决定主轴的方向（即项目的排列方向）。...如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 （4）flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。...浏览器根据这个属性，计算主轴是否有多余空间。 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间，且优先级高于width。
例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。当浏览器读到一个样式表，他就会按照这个样式表来进行文档如何进行格式化（渲染）。...你记不记得很多的网站都是左边一个菜单栏，右边一堆的其他内容啊 ? Example1 占据文档流空间。...元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 ...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
