: #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布局，但是每个列表是一个块级元素 —— 像段落一样 —— 会充满整个容器的宽度并且换行。...还有一个 设置为 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 item 大部分基础列表组都是无序的 要创建列表组，可以在 元素上添加 .list-group 类, 在 <...需要将 .active 添加到其中一个轮播元素上，否则轮播将不可见。另外一定要在 .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 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 — 把背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
弹性布局管理宽度 在搜索框中 , 左侧是搜索栏 , 右侧是搜索按钮 ; 右侧的搜索按钮始终都是 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; /* 设置该搜索框占据除右侧固定大小按钮之外的剩余父容器空间
当然存在一个叫clip-path的属性，可绘制三角形，鉴于其兼容性较差通常不会大范围使用它绘制三角形。 很多同学都会基于盒模型编写三角形，但大部分都是复制粘贴的操作。...每个小矩形的递增角度：--Θ:calc(var(--line-index) / var(--line-count) * 1turn) 每个小矩形的背景色相：filter:hue-rotate(var(-...其实这个也不算什么特别技巧，只是很多同学都不会去注意这种用法，有需求都是直接添加标签。也许以下提及的障眼法和内容插入会让同学们对伪元素另眼相看。...以下是整个带边框气泡对话框的拆解，整体由三部分组成：带边框圆角矩形、黑色三角形、橙色三角形。...有这么一个场景，一个数据集合需遍历到每个DOM上并把某个字段插入到其::after上。这该怎么办，好像95%的同学都不会使用JS获取节点的::before或::after。
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,...> 125811 104563 ... 前端需求人数 市场供应人数
、 解决方案： 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 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
下图中, 元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景, 内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素；而元素背景通常应用于由内容和内边距...; padding: 0.5em; } span, li { border: 2px solid blue; } ul { display: flex;... Item One(内联元素弹性盒子) Item Two Item Three <p class="demo...outline 不<em>占据</em><em>空间</em>，绘制于元素内容周围, 根据规范，outline 通常是矩形，但也可以是非矩形的。...，使其在不同的<em>背景</em><em>颜色</em>中<em>都是</em>可见的 */ 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]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。...>Python ?
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。
背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat:...display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。...元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 ...这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是定位流，但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 ...="">水滴 金融 优品 <!
浮动元素会生成一个块级框，而不论它本身是何种元素。...如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。...4、flex-basis属性（这个是重点，常用） flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。...它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。... 方框 5、底部固定，上部自适应 有人就会说了这个用定位来解决不久完事了，多一个选择啊，对吧？
例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。当浏览器读到一个样式表，他就会按照这个样式表来进行文档如何进行格式化（渲染）。...你记不记得很多的网站都是左边一个菜单栏，右边一堆的其他内容啊 ? Example1 <!...有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 ...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
flex – 给需要设置弹性布局的子元素设置该属性 flex-grow：占父元素的剩余空间的多少 比如这个例子： a ...b c .flex{display:flex;width:600px;margin:0;padding:0;list-style:none;} .flex...:3;width:50px;} flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。...本例中b,c两项都设置的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3 flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a... a b c .flex{display:flex;width:400px;
:nth-child) 标签选择器(div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*) 优先级： !...在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算...属于同一个BFC的两个相邻Box的margin会发生重叠 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反 BFC的区域不会与float...flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
