1.重置button和input元素的背景 添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。...在下面的例子中，同样的按钮在 Chrome 和 Safari 中，后者添加了默认的灰色背景。 ?...在移动设备上，浏览器会显示一个水平滚动条。 ? 解决方法就是使用 flex-wrap: wrap，这样当水平空间不够时，浏览器会帮我们自动换行。...使用 position: sticky 还需要指定 top 值，不然它无法正常工作。 ?...压缩或拉伸图像 在CSS中调整图像大小时，如果宽高比与图像的宽度和高度不一致，则可能会对其进行压缩或拉伸。
: center; //当网格的长小于整个容器时，整个网格在它的父容器内的上下对齐方式 （口内一个田） justify-content: center; //当网格的宽小于整个容器时，整个网格在它的父容器内的左右对齐方式...设置阴影的颜色。如果没有指定，则由浏览器决定——通常是的值，不过目前Safari取透明。取值参考。...url()表示字体在服务器上的位置，format()用来说明字体格式。 21....给父级元素添加以下任意样式 overflow: hidden; display: flex; display: inline-flex; display: inline-block; position:...解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题 解决子级元素外边距会使父级元素塌陷的问题 42. ul list-style失效 默认情况下ul下的li都会自带一个列表样式，如果个ul
.box{ display: -webkit-flex; /* Safari */ display: flex...flex-flow: flex-direction和flex-wrap的简写，默认值为row nowrap justify-content: 主轴上的对齐方式 flex-start（默认值）：左对齐...stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。...flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size） flex 属性是flex-grow, flex-shrink 和 flex-basis的简写 align-self...position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /*
; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式# 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口，它都在那儿雷打不动...div.sticky { position: -webkit-sticky; // 兼容Safari position: sticky; top: 20px; /* 到顶部20px位置不动 */...它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。...项目会一直在容器的第一行排列，无论有多少个项目，只会都挤在第一行。 ...stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 3.2.2.6 align-content属性# align-content属性定义了多根轴线的对齐方式。
div.sticky { position: -webkit-sticky; // 兼容Safari position: sticky; top: 20px; /* 到顶部20px...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。...justify-content属性定义了项目在主轴上的对齐方式（我们想要使项目在容器中居中时，经常用得到）。...stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 3.2.2.6 align-content属性 align-content属性定义了多根轴线的对齐方式。
如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。...图片 为什么100vh问题会发生在移动设备上？ 我对这个问题进行了一番调查，发现了其中的原因。简短的答案是，浏览器的工具栏高度没有被考虑在内。...如果你想深入了解为什么会发生这种情况，Stack Overflow的这个帖子很有帮助。 如何修复移动设备上的100vh问题？ 第一个建议是尽量少用 vh。...在这些情况下，position sticky不会有帮助，这里介绍一下 fill-available属性。它用起来很简单，只要记住使用前缀和回退值就可以了。...Safari上的垂直 padding 问题 在 min-height（或 height）为 fill-available的元素上添加垂直 padding （bottom 和 top），Safari浏览器上会导致问题
对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。...外边距重叠 块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。...父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。...---- 11.位置 position CSS position属性用于指定一个元素在文档中的定位方式。...每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 space-evenly：flex项都沿着主轴均匀分布在指定的对齐容器中。
: 1; background-color: #999; } 如果不考虑浏览器兼容问题的话，运用flex布局是最简单的方式。...1 垂直方向的布局（sticky footer） 这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。...当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。...粘性布局（sticky） 粘性布局是什么呢？我们先来看看效果演示 没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的 吸附效果。 标题行设置了背景色。...position: sticky; 1 1 先来看看兼容性： 从Can I use上查询可以看出，sticky的兼容性并不是太好，所以大家使用的时候要慎重考虑，如果不要求兼容的情况，用这个还是相当的舒服了
匹配 E 元素的第一个字母 E:before 在 E 元素之前插入生成的内容 E:after 在 E 元素之后插入生成的内容 # display 有哪些值 值 说明 block 块类型。...内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top...'auto' 的 绝对/相对 定位 一个 z-index 值不为 'auto' 的 flex item，即父元素 display: flex | inline-flex opacity 属性值小于 1...overflow: auto 或 overflow: hidden，使用BFC 在 flex 成为主流布局之后，浮动越来越少见了，因为它的副作用较大 # CSS sprites 的理解及其好处 雪碧图...# 关于媒体查询 是什么 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色 媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。...二、static 属性值 static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。...（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）...#toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 20px;
当你在做一个新项目的时候，可以将其作为一份方便的参考指南。 我们开始吧。 1. 重置 button 和 input 元素的背景 添加按钮时，重置它的背景，否则在跨浏览器时它的呈现会有所不同。...下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...添加 flex-wrap 要想让一个元素表现得像弹性容器那样，只需添加 display: flex。但是，如果没有添加 flex-wrap ，那么当屏幕尺寸缩小的时候，将会出现水平滚动条。...Sara Soueidan 写了一篇不错的文章讨论过这个问题。 8. 当视窗高度不足时将元素固定在屏幕顶部 如果你在视窗不够高的时候将一个元素固定在屏幕顶部，会发生什么事呢？...问题是，即使 aside 是空的，它的高度也会和 main 的高度相等。 要修复这个问题，可以让 aside 元素与其父元素的起点对齐，这样它的高度就不会扩展了。
2 √ 层次选择器 选择器 别名 说明 版本 常用 elemP elemC 后代选择器 元素的后代元素 1 √ elemP>elemC 子代选择器 元素的子代元素 2 √ elem1+elem2 相邻同胞选择器...display:flex默认会令子节点横向排列，需声明flex-direction:column改变子节点排列方向为纵向排列；顶部和底部高度固定，所以主体需声明flex:1让高度自适应。...节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。...JS实现吸附效果的代码在网上一搜一大堆，更何况笔者喜欢耍CSS，在此就不贴相关的JS代码了。在此推荐一个很少见很少用的CSS属性position:sticky。...简单来说确认参照物的方式与position:absolute一致。 兼容性勉强还行，近2年发版的浏览器都能支持，Safari和Firefox的兼容性还是挺赞的。
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...# 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。...# 二、static 属性值 static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。...（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）...#toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 20px;
标准盒子模型 在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。...position:absolute，有固定宽度和高度的 div。...或者 column-width）不为 auto 产生的影响 浮动定位和清除浮动时只会应用于同一个BFC内的元素。...浮动不会影响到其他BFC种的元素的布局， 清除浮动只能清除同一个BFC中在它前面的元素的浮动 外边距折叠也只会发生在属于同一BFC的块级元素之间 利用 BFC 避免 margin 重叠 下面这个例子会发现...它的效果和height:1%一样 } 在浮动元素后面加空标签（设clear:both） 给没有设置高度的父元素设置overflow:hidden 一个父亲不能被自己浮动的儿子，撑出高度。
： Presto 内核 盒模型 CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容，可以简单表述为 盒模型由 content，padding，margin，border...=width（content + border + padding） + margin; CSS 如何设置标准模型和 IE 模型: 如果 doctype 协议缺失，会由浏览器自己界定，在 IE 浏览器中...阻止元素被浮动元素覆盖和高度坍塌 阻止浮动元素造成的父级元素高度坍塌问题和遮挡其他元素问题 高度塌陷问题，这时就可以用 BFC 来清除浮动了。...，id 选择器，后代选择器， 属性选择器：属性选择器的标志性符号是 []，匹配含义：^：开头 $：结尾 *：包含。...，浏览器会对 CSS3 的动画做一些优化(比如专门新建一个图层用来跑动画) 代码相对简单 缺点： 在动画控制上不够灵活 兼容性不好 部分动画功能无法实现(如滚动动画，视差滚动等) JS 动画的优缺点 优点
（2）主体部分： ：定义一个容器，作为整个布局的基础。它具有sticky定位，使其在页面滚动时保持固定在顶部。...#board样式： position: sticky;：设置粘性定位，使元素在滚动时保持固定在顶部。 top: 0;：将元素固定在顶部。...width: 50vw; height: 50vw;：设置宽度和高度为视口宽度的 50%，创建一个正方形区域。...min-width: 300px; min-height: 300px;：设置最小宽度和高度为 300px，防止在小屏幕上布局过小。...max-width: 100vh; max-height: 100vh;：设置最大宽度和高度为视口高度的 100%，防止在大屏幕上布局过大。
盒模型的原理决定了如何计算元素的实际尺寸，尤其是在使用 box-sizing 属性时，是否将内边距和边框包含在元素的总宽度和高度中。...效果：如果不设置 display 属性，默认生成的元素都是块级元素。块级元素的特点如下： 会占据一整行。 可以设置宽度和高度，并且可以通过 margin 和 padding 设置各个方向的内外边距。...效果：可以设置宽度和高度，也可以设置左右和上下的内外边距。...在弹性盒布局中，父容器的 flex 属性需要设置为 display: flex，其相关的 flex 属性才会生效。...功能：如果设置了这个属性且在主轴方向上没有设置元素尺寸，则会根据这个属性的配置按配重比例进行充满放大。 (3) flex-shrink 属性 用途：设置当前元素在主轴上的缩小权重。
元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky 对象在常态时遵循常规流。...编码效率后者更高 渲染效率前者更高 因为后者的话它那个content部分要通过width和height去减padding和border 3、flex弹性盒模型 给一个盒子设置display:flex这个盒子就会变成弹性盒子...，有两个轴，一个主轴一个交叉轴，常用属性： flex-direction属性决定主轴的方向（即项目的排列方向） flex-wrap属性定义，如果一条轴线排不下，如何换行。...flex-flow justify-content属性定义了项目在主轴上的对齐方式 align-items属性定义项目在交叉轴上如何对齐 align-content flexbox中的align-self...优点 只会影响它这个元素后面的元素 内容默认提升半层 默认宽由其中的内容决定，会换行排列 这样做的优点就是在图文混排的时候可以==很好的使文字环绕在图片周围==。
没有定位，元素出现在正常的流中 （5）sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出 12、position的值， relative和absolute分别是相对于谁进行定位的？...没有定位，元素出现在正常的流中 5）sticky ：粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。...display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。 visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。...，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果 36、如何实现一个 div 的上下垂直居中？...如果做不到这一点，也应该尝试使用与视口相关的单位（ vw、vh、vmin 和 vmax ），它们的值解析为视口宽度或者高度的百分比。
简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。 本题请实现一个顶栏固定的课程网站首页。...接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果： 目标效果 请在 style.css 文件中补全代码。...当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。...动态的 Tab 栏：设置页面的标题，显示在浏览器的标签页上。...position: sticky; top: 0px：使 Tab 栏在页面滚动时固定在顶部。 .buttons a 样式： 设置 Tab 栏中链接的样式，去除下划线，设置文字颜色和内边距等。
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
