如何做com的网站,阳江彭志雄,商务网络设计实验报告,有赞微商城入口99、将上例的0%改为30%#xff0c;会如何变化#xff1f; none:延迟2秒间无色#xff0c;3.8秒#xff08;0%-30%占1.8秒#xff09;前无色#xff0c;之后变红到5秒绿最后蓝#xff0c;动画结束时恢复初始#xff08;无色#xff09;。 forward:延迟2秒间无色会如何变化 none:延迟2秒间无色3.8秒0%-30%占1.8秒前无色之后变红到5秒绿最后蓝动画结束时恢复初始无色。 forward:延迟2秒间无色3.8秒0%-30%占1.8秒前无色之后变红到5秒绿最后蓝动画结束时保持最后一帧蓝色位于最右终点。 backward:在延迟2秒间使用0%状态即“无色”3.8秒0%-30%占1.8秒前无色之后变红到5秒绿最后蓝动画结束时恢复初始无色。 both:在延迟2秒间使用0%状态即“无色”3.8秒0%-30%占1.8秒前无色之后变红到5秒绿最后蓝动画结束时保持最后一帧蓝色位于最右终点。 关键点 backward与both延迟期间使用哪个颜色 使用0%状态若无0%则保持初始状态直到第一个改变帧上例为30%的时间改变状态。
100、弹性项目显示时类似inline-block但为何是块元素 块元素block elements通常会占据其父容器的整个宽度并且每个块元素会独占一行。然而当你将一个容器设置为 display: flex 时它的子元素即弹性项目的行为会发生变化。 在弹性盒子Flexbox中弹性项目的默认排列方式是沿着主轴通常是水平轴从左到右排列这与 inline-block 元素的排列方式类似。但是弹性项目并不是 inline-block 元素它们仍然是块级元素只是它们的排列方式被弹性容器所控制。 具体来说弹性容器的默认主轴方向是水平方向flex-direction: row这意味着弹性项目会从左到右排列。如果你希望弹性项目从上到下排列可以设置 flex-direction: column。 以下是一些关键点 块元素 默认情况下块元素会占据其父容器的整个宽度并且每个块元素会独占一行。 弹性项目 在弹性容器中弹性项目默认会沿着主轴水平轴从左到右排列即使它们是块级元素。 inline-block 元素 inline-block 元素会像内联元素一样排列在一行中但它们可以设置宽度和高度。 总结: 弹性项目在弹性容器中的排列方式是由弹性容器的属性如 flex-direction决定的而不是由它们本身的块级或内联特性决定的。这就是为什么即使弹性项目是块级元素它们也可以从左到右排列的原因。 测试 可将弹性项目的width取消它仍然不会独占一行宽度由其内部内容撑开若没有就只有左右两个border线若无这个线就会占着一个“空”位置 另外可以用开发者工具检查里面的computed可以看到它的display是block.
内容提示117-134,187-196就够了 101、align-item,align-content一般不同时使用为什么能同时使用吗 align-items 用于设置每一行的项目在侧轴通常是垂直方向上的对齐方式。常用于设置单行伸缩项目。 align-content 用于设置当项目换行后的多行在侧轴上的分布和对齐方式。常用于设置多行伸缩项目。 所以上面两个使用场景不同所以常不同时出现在一个元素中。 在大多数情况下用 align-items 和 align-content 来达到预期效果时可能会有重叠但在某些情况下例如少量项目且需要特定的对齐和分布同时使用这两个属性可以实现更精细的控制。例如 style.container {display: flex;flex-wrap: wrap; /* 允许项目换行 */height: 400px; /* 固定容器高度 */align-items: center;/* 每一行的项目垂直居中对齐 */align-content: space-between;/* 多行项目在垂直方向上均匀分布 */border: 2px solid #000;background-color: lightgray;}.item {width: 100px;height: 50px; /* 各项具有不同的高度 */background-color: lightblue;margin: 10px;display: flex;align-items: center;justify-content: center;}.item2 {height: 80px;}.item3 {height: 100px;}/stylediv classcontainerdiv classitem1/divdiv classitem item22/divdiv classitem item33/divdiv classitem4/divdiv classitem item25/divdiv classitem6/div/div .container 容器允许项目换行 (flex-wrap: wrap) 且高度固定 (height: 400px)。 align-items: center; 确保每个项目的内容在自身高度内垂直居中对齐。 align-content: space-between; 确保当项目不足以填满容器高度时它们被分布在容器的两端。 这个例子特殊在于 当容器内项目只有两行时align-content: space-between 会将这两个项目推到容器的顶部和底部。 align-items: center; 独自定义每个项目内部内容的垂直居中(单行)。
102、align-items: baseline是按什么对齐的 是按文字x的下边沿进行对齐的。有几中情况 (1)若有多行按照每个伸缩项目flex item的第一行文字的基线来对齐它们。 (2)没有内容文字则按伸缩项目的下边沿对齐。 (3)若只有图片则按图片最下沿对齐。 例如 style.container {width: 600px;height: 400px;background-color: gray;display: flex;flex-flow: row wrap;align-items: baseline;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box4 {width: 250px;height: 250px;display: flex;justify-content: center;align-items: center;}/stylediv classcontainerdiv classbox box11x/divdiv classbox box2pLorem ipsum dolor sit amet consectetur adipisicing elit./ppLorem ipsum dolor sit amet./p/divdiv classbox box3/divdiv classbox box4img src./14多列布局/img5.jpg alt //div/div 备注上面例子为了让img居中再次使用了伸缩盒子。 只要是伸缩盒子box4)它的所有子元素(img)都会块状化都会按伸缩项目进行排列。
103、父元素用display:flex子元素用margin:auto就能自动垂直水平居中为什么 简言之flex有水平与垂直两个方向的轴设置所以会呈现两个方向的自动居中。 margin: auto; 的行为在不同的布局模式下有不同的解释和限制。 1在常规文档流中margin: auto; 主要用于水平居中块级元素。这是因为浏览器默认会尝试在左右两边分配相等的外边距来填充剩余空间。但这种自动分配仅限于水平方向且仅在元素宽度小于其容器宽度时才有效。对于垂直方向margin: auto; 是不起作用的因为常规流布局中垂直空间的分配不由外边距控制。 2在 Flexbox 布局中存在两个轴主轴和交叉轴。justify-content 控制的是主轴上的对齐方式而 align-items 控制的是交叉轴上的对齐方式。通过将 justify-content 设置为 center 并将 align-items 设置为 center可以实现子元素在两个轴上的居中对齐。此时margin: auto; 在子元素上的应用将确保在主轴方向上的居中而 align-items 则确保了在交叉轴方向上的居中。 因此flex中会呈现两个方向的居中。
104、flex-grow是如何分配空间的 当有空余时才按比例分配 到每个盒子上去。 没有空余刚好占完即使有分配比例也不会分配。 另外如果是换行造成的剩余空间则按当前该行各伸缩项目的比较分配剩余空间 style.outer {width: 600px;height: 600px;background-color: gray;display: flex;flex-flow: row wrap;}.box {width: 150px;height: 100px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;flex-grow: 1;}.box2 {width: 200px;}/stylediv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/divdiv classbox box44/div/div 解释 第一行容纳box1-3,600-150200150剩余100按1:1:1分配故 box1为15033.3183.3....第二行只有box4直接全部分配 给它即600。 可以看到容纳不下换行后会对当前行按比较分配剩余的空间。 105、在伸缩盒子规定 style.outer {width: 600px;height: 800px;background-color: gray;display: flex;flex-flow: row wrap;align-items: flex-start;}.box {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;}/* .box1 {height: 400px;} *//* .box5 {height: 300px;} *//* .box3 {align-self: flex-end;} */ /stylediv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/divdiv classbox box44/divdiv classbox box55/div/div 上面有换行时为什么第二行看似是居中的呢 在规范中第二行的排列布局并没有明确规定若推算的话应该是紧贴第一行。但各浏览器为了美观会将第二行放于垂直居中位置也即上下的空隙相等。 为了进一步说明取消上面box1和box5的注释第一行box1-3)会按最高box1为400px)计算整个行高为400px)第二同理会按最高box4-5中最高box5为300px)为行高。 800-400400剩下的400中第二行占300故它上下端空隙为400-300/250。第二行会按align-items: flex-start;继续对齐故box4与box5会顶端对齐。 接着上面继续align-items: flex-start;改为center则间距有会变化第一、二行仍然以每行的伸缩项中最高的高度为准。第一行是400px第二行是300px剩下的是800-400-300100这个分成四份最上面一份最下面一份中间为2份。即第一行最高项目的顶部距容器顶部顶部为25px,第二行最高项底部距容器底端为25px两行中的空隙第一行最高项底端与第二行最高项顶端的距离是50px但若对应的项有align-selfflex-start则会靠近上面50px中的一半处。 为了验证设计了一个尺寸请看下面 !DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8 /titleDocument/titlestyle.outer {width: 650px;height: 800px;background-color: #999;border: 1px solid black;display: flex;flex-flow: row wrap;}.lbox {width: 50px;height: 50px;box-sizing: border-box;border: 1px solid black;display: flex;justify-content: flex-end;align-items: flex-end;}.rightinner {width: 600px;height: 800px;background-color: #ccc;box-sizing: border-box;/* border: 1px solid black; */display: flex;flex-flow: row wrap;align-items: center;}.rbox {width: 200px;height: 200px;box-sizing: border-box;background-color: skyblue;border: 1px solid black;}.rbox1 {height: 400px;}.rbox5 {height: 200px;/* align-self: flex-start; */}.rbox3 {align-self: flex-end;}/style/headbodydiv classouterdiv classleftinnerdiv classlbox lbox150/divdiv classlbox lbox2100/divdiv classlbox lbox3150/divdiv classlbox lbox4200/divdiv classlbox lbox5250/divdiv classlbox lbox6300/divdiv classlbox lbox7350/divdiv classlbox lbox8400/divdiv classlbox lbox9450/divdiv classlbox lbox10500/divdiv classlbox lbox11550/divdiv classlbox lbox12600/divdiv classlbox lbox13650/divdiv classlbox lbox14700/divdiv classlbox lbox15750/divdiv classlbox lbox16800/div/divdiv classrightinnerdiv classrbox rbox11/divdiv classrbox rbox22/divdiv classrbox rbox33/divdiv classrbox rbox44/divdiv classrbox rbox55/div/div/div/body/html 第一行最高rbox1为400px第二行最高为rbox4为200px可修改rbox5为150不会改变整个布局) 进行分配800-400-200200分成四份rbox1距容器顶端为1份50px,rbox4距容器底端为1份50px剩下的2份100px为第一行最底端与第二行最顶端的距离。如果此时有单独的align-self会将这100px再平分。 将上例的rbox5调整为align-self:flex-start将会发现rbox3与rbox5会紧顶汇合在500px高度处。 106、align-self: flex-end;是调整单个项目到侧轴底端吗 是的但不完全正确。 严格的说是调整单个项目到“底端”。这个底端是指下面有人阻碍就在阻碍处停止比如第二行有项目它会阻碍向下掉直接靠近第二行有项目处。 style.outer {width: 600px;height: 600px;background-color: gray;display: flex;flex-flow: row wrap;align-items: flex-start;/* align-content: flex-start; */}.inner {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;}.inner3 {order: -1;align-self: flex-end;}.inner2 {align-self: flex-end;}.inner5 {height: 220px;}/stylediv classouterdiv classinner inner11/divdiv classinner inner22/divdiv classinner inner33/divdiv classinner inner44/div!-- div classinner inner55/div --/div 上面容器中inner3排第一位整行有换行inner4在第二行故inner3在向下掉时会被inner4“托住”或阻碍就会靠近4即此时第一行向下的底端就是第二行的顶端inner2也不会掉到最下端它会靠近第二行。 107、在网页没有内容时使用 body {width: 100%;height: 100%;} 为什么去检查进有宽度值但没有高度值 块级元素block-level elements默认情况下会尽可能地扩展以填满其父元素的宽度除非明确值。如 div, p, section 等在没有内容时默认宽度并不会自动变为 0。这些元素通常会有一个默认的宽度这个宽度基于其父元素的宽度。 但是对于内联元素inline elements如 span 或文本它们的宽度确实是基于它们所包含的内容的宽度。如果一个内联元素没有内容那么它的宽度确实会是 0因为没有内容来确定宽度。 对于body元素自身没有明确时看包含块html元素而html元素的默认尺寸通常就是浏览器的可视区域viewport。也即视口。 默认的html也是0除非内部有内容如果没有内容上面如果对html的height用100%它对标的就是视口,视口的高度。这样body就继承因100%所以使用整个视口高度。 html,body { width: 100%; height: 100%; } 108、子绝父相若父元素使用相对定位但本身无尺寸会怎么 父元素使用相对定位的目的就是为子元素的变化提供锚定物若父元素无尺寸则无法锚定会继续向上寻找锚定物找到后再确定当前子元素的变化。例如 style.header {height: 70px;background-color: gray;}.outer {position: relative;/* height: 700px; */}.inner {width: 400px;height: 400px;background-color: rgba(255, 255, 0, 0.3);position: absolute;top: 50%;left: 0;right: 0;bottom: 0;margin: auto;}/stylediv classheader1/divdiv classouterdiv classinner2222/div/div 由于尽管父元素.outer有相对定位但.outer 没有实际的高度.inner 元素就会穿透这个没有尺寸的父元素继续向上寻找下一个可以作为参考的祖先元素。 当绝对定位元素找不到已定位的祖先元素时它实际上是相对于视口进行定位的而不是严格意义上相对于 body。但由于 body 通常填满了整个视口所以在视觉上看起来就像是相对于 body 定位的。 所以哪怕没有父元素相对定位最终都会以视口为锚定物。 注意 绝对定位元素会向上查找最近的已定位position 不为 static的祖先元素作为其定位参考。如果找不到则会以初始包含块initial containing block为参考而不是严格意义上的视口。 初始包含块通常与视口大小相同但它们并不完全等同。初始包含块是一个概念性的矩形其尺寸和位置通常与视口一致但在某些情况下如使用 transform 属性可能会有所不同。 这里用“视口”来代替初始包含块来理解
109、什么是初始包含块? 初始包含块initial containing block是一个概念性的矩形框它是在渲染页面时确定布局的基准。初始包含块的尺寸和位置通常与视口浏览器窗口的尺寸和位置相匹配但在某些情况下可能有所不同。 比如常用的版心通常它就是初始包含块而视口整个网页通常都比版心大。 初始包含块具有以下特点 - 它是所有元素的根容器是页面的最外层容器。 - 它的尺寸通常由视口的大小决定但也受到一些 CSS 属性的影响比如 transform 属性可以改变初始包含块的尺寸和位置。 - 对于根元素html 元素初始包含块的左上角是文档流的起点。 - 它是页面中所有固定定位position: fixed元素的定位参考。 - 绝对定位元素在没有已定位祖先元素时会相对于初始包含块进行定位。 注意 初始包含块并不是一个实际存在的元素或容器而是一个概念上的概念用于确定页面元素的布局和定位。 110、background-image: linear-gradient(red, yellow, green);背景图为什么是背景色呢 在 CSS 的早期版本中background-image 属性主要用于加载并显示图像文件如 .jpg, .png, .gif 等这要求服务器上必须有相应的图像资源并且在页面加载时需要下载这些图像。 随着 CSS3 的引入有了更多创建复杂视觉效果的方式而不必依赖于预加载的图像文件。CSS3 引入了 linear-gradient, radial-gradient, 和 conic-gradient 这样的渐变类型它们允许开发者直接在 CSS 中定义背景图案通过颜色和透明度的动态变化来生成这些图案。 使用这些渐变你可以创建出类似图像的效果但它们实际上是基于矢量的这意味着它们可以无限放大而不失真同时也不需要额外的网络请求来加载图像文件从而提高了网页的加载速度和性能。此外渐变背景还可以轻松地适应不同的屏幕尺寸和设备使得响应式设计更加灵活。
111、media all有什么用 media all 在技术上是冗余的有时你仍然可能看到它被使用原因有以下几点 明确性 使用 media all 可以明确表明这一组样式是适用于所有设备的这在阅读和维护代码时提供了清晰性。 优先级 媒体查询具有较高的CSS优先级这意味着在同一个选择器中位于媒体查询内的样式可能会覆盖位于媒体查询外的相同属性的样式。 组合使用 当你需要同时使用多个媒体查询时将通用样式放在 media all 下面可以使结构更清晰也便于将特定于设备的样式添加到其他媒体查询中。 兼容性 尽管现代浏览器默认会应用没有媒体查询的样式但在某些旧版或非标准浏览器中明确使用 media all 可能有助于确保样式正确应用。 因此虽然从技术角度讲media all 不是必需的但在实践中它可以帮助保持CSS代码的组织性和兼容性尤其是在处理复杂项目时。例如一个常见的模式是在 media all 中放置基础样式然后在特定的媒体查询中添加响应式设计规则。
112、一个元素浮动后清除浮动后为什么仍然可能不被父元素内容
例如 style.outer {width: 400px;/* height: 300px; */background-color: gray;border: 1px solid black;/* float: left; */}.box {width: 100px;height: 100px;background-color: skyblue;font-size: 30px;box-sizing: border-box;border: 1px solid black;margin: 10px;}.box1,.box2,.box3 {float: left;}.box3 {clear: both;}/stylediv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div 尽管对已经浮动的元素进行清除浮动影响但它仍然一个浮动元素仍然脱离正常的文档流它只是清除浮动元素对后续元素布局造成的影响上面box3清除前面浮动元素对自己的影响(不清除则会尾随在box2的后面)。 注意 box3尽管清除了前面对自己的影响但自己浮动的特征没有改变它仍然是一个浮动元素仍然脱离文档流。 box3会遵守清除浮动的规则垂直位置不受之前浮动元素影响。 但作为浮动元素它仍然不会影响其后续元素的正常文档流布局。 它也不会撑开父元素的高度除非父元素采用了清除浮动的技巧。 如果父元素outer开启左浮动则会创建BFC它将包含其内部的所有浮动子元素确保它们不会溢出到外部元素的范围之外。因此所有box将会被outer容纳。
