二、博客详情页标题及发布时间制作 首先咱们先制作博客详情页的标题和发布时间，此时先把顶部的头部栏复制过来，点击前台添加一个页面，命名为详情页： 接着复制整个首页中的主要内容行到详情页之中，因为大体布局一致...，在此我们只需要设置当前博文头部行的高度为包裹、背景色为透明即可： 由于头部标题本身上内边距是有一定距离的，在此设置这个行的上内边距以及距离顶部的一段距离，这样才可以使上部分像有一个隔断的颜色...，当然你也可以设置边距样式达到同样的效果： 接着设置内边距： 此时页面效果如下： 接着往这个行中添加一个行命名为标题，同样设置高度为包裹背景色为透明： 由于标题还距离左右两侧有一定的边距...，并且接下来的所有内容都距离左右有一定边距，此时直接设置父容器的左右内边距是最方便的方法： 直接设置主要内容行的内边距： 接着往标题行中添加文本，设置字体大小以及文本组件的宽度为100%：...设置完毕后在左行中添加一个文本用于记录时间： 此时页面效果如下： 但此时我们的时间和点赞区域应该有一定的内边距，设置他们的父容器上下内边距： 此时页面显示如下： 接着在右按钮中添加一个按钮
Flexbox 在某些情况下，在flexbox中使用自动页边距非常有用。当一个子项目有一个margin是auto 时，它将被推到远的另一边。...使用CSS网格时，可以使用自动页边距实现类似于 flexbox 的结果。...但是，在多语言网站上工作时要当心颠覆这些价值观。 更好的是，使用flexbox或grid属性，以防使用它们完成工作。 如果没有，那么请使用自动页边距作为最后的选择，而应使用CSS逻辑属性。...Flexbox 和 自动边距 当谈到flexbox时，它有无限的可能性。 通过将其与自动边距相结合，我们可以构建功能强大的布局。 考虑下面的例子 ? 我们在右侧包含一行标题，描述和一个操作按钮的行。...CSS将如下所示： .item__action { margin-inline-start: auto; } CSS grid 和自动边距 在向网格项目添加边距时，它可以是固定值，百分比或自动值
、分页显示顶部没有留白等问题。...eg1：尺寸、页边距设置 @page{ size: 5.5in 8.5in; margin: 30px; } 注：这里除了可以用长度值声明尺寸，还可使用纸质尺寸关键字”A4″或“legal”；亦可通过关键字指定页面方向...当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。...eg2：设置第一页、奇数页或偶数页样式（以首页为例） @page :first { /*首页设置*/ } 注：left、right分别为偶数页、奇数页选择器。...中。
、分页显示顶部没有留白等问题。...eg1：尺寸、页边距设置 @page{ size: 5.5in 8.5in; margin: 30px;} 注：这里除了可以用长度值声明尺寸，还可使用纸质尺寸关键字”A4″或“legal...当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。...eg2：设置第一页、奇数页或偶数页样式（以首页为例） @page :first { /*首页设置*/} 注：left、right分别为偶数页、奇数页选择器。...table中。
可以将表格缩小一点或者将上面或者下面页边距设小一点，打开菜单栏-->文件-->“页面设置”命令中调整上下的数字，将其改小一点。...5.如果是你画了一个表格，占了一整页，造成最后一个回车在第二页删不了，可以将表格缩小一点或者将上面或者下面页边距设小一点，在文件》》页面设置中，上下的数字改小一点。 ...我们经常遇到的情况是上述第5种情况，针对这种情况做一个详细说明： 在Word2003中插入一张表格并使该表格充满当前页时，会在当前页后面产生一个空白页。...6.如果是你画了一个表格，占了一整页，造成最后一个回车在第二页删不了，可以将表格缩小一点或者将上面或者下面页边距设小一点，在文件/页面设置中，上下的数字改小一点。...设置完毕单击“确定”按钮 以上就是常用到的word怎么删除空白页的方法技巧 删除Word空白页的方法 我们在Word中编辑文字页面，或者是插入一张表格后，当内容充满当前整页时，会在当前页后面产生一个空白页
需要注意的是，一般定义变量时，这个变量的四个数据属性都默认为 true（这个前面面向对象那里讲过），所以都是可以删除或者修改的。...关于边距的问题 在 IE、Opera 中，screenTop 保存的是最外层 window 对象可见页面的边距，这就导致即使浏览器紧贴屏幕，那么返回的距顶部距离不会是零而是工具栏高度，因为浏览器工具栏不算可见页面...在 Chrome、Firefox、Safari 中，screenX 或者 screenTop 保存的就是窗口距屏幕的位置，将工具栏也包括在里面 总结，并不是每个浏览器都支持上述方法，另外一点，对于距顶部的距离...2020年第2号洪水 // rsv_idx 2 // rsv_dl fyb_n_homepage // hisfilter 1 位置操作 改变 URL 来打开新页面...history.go(1);//前进一页 也可以是传入 URL，它会根据最近访问这个 URL 的时间来跳转，如果没有该方法不执行 back() 和 forward() 前几一页，后退一页 length
img标签属性： 标签属性 描述 alt 当图片加载失败时，显示的文字 title 当鼠标悬浮再图片时显示的文字 代码示例： <img...超链接标签属性： 标签属性 描述 target 点击超链接的动作 href 要跳转的网址 代码示例：跳转到https://www.acai.cloud地址时用浏览器空白标签页打开...acai.cloud 设置a标签点击不刷新页面： acai.cloud... 去除a标签下划线： a{ text-decoration: none; } 设置a标签锚点功能：点击回到顶部，页面跳转到顶部位置...顶部位置 …… 回到顶部 ul列表标签？
items: [ // 设置底部导航栏条目, 每个条目可以设置一个图标 BottomNavigationBarItem(...title: Text("主页") ), // 设置底部导航栏条目, 每个条目可以设置一个图标 BottomNavigationBarItem...decoration: InputDecoration( // 设置内容边距, 左右边距为 10, 上下边距为...items: [ // 设置底部导航栏条目, 每个条目可以设置一个图标 BottomNavigationBarItem(...decoration: InputDecoration( // 设置内容边距, 左右边距为 10, 上下边距为
// 设置边距 margin: EdgeInsets.only(top: 10), // 设置装饰, 背景深橙色...items: [ // 设置底部导航栏条目, 每个条目可以设置一个图标 BottomNavigationBarItem(...title: Text("主页") ), // 设置底部导航栏条目, 每个条目可以设置一个图标 BottomNavigationBarItem...decoration: InputDecoration( // 设置内容边距, 左右边距为 10, 上下边距为...height: 200, // 设置边距 margin: EdgeInsets.only(top: 10),
margin 折叠 简而言之，当两个垂直元素具有margin，并且其中一个元素的margin大于另一个元素时，发生边距折叠。在这种情况下，将使用更大的margin，而另一个将被忽略。 ?...此外，CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...请注意，子元素固定在其父元素的顶部。那是因为它的边距折叠了。...结果表明，基于 writing-mode 的页边距工作得非常好。 我认为这些用例就足够了。让我们继续一些有趣的概念！ 组件封装 大型设计系统包含许多组件。向其直接添加边距是否合乎逻辑？...或者，当它垂直堆叠时在移动设备上将如何工作？很多很多的复杂性。
这个地方有个不足就是，由于导航条目的图标和标题使用了半透明，所以当背景图片比较复杂时，导航条目显示的就不是很清晰了。后面的内容中我们再介绍如何解决这个问题。...点击上图的 自定义添加网址 可以添加自己想放在常用导航中的导航条目： ? 在上图的 1 区域中，可以设置自定义导航条目的地址、名称 和 图标颜色。点击 添加 之后，就会在 3 区域 展示。...这就避免了我们想搜索某个内容时再单开一个新页面的情况。 该搜索支持内容包括：支持本地书签、tab页、历史记录搜索以及网络内容。...更多快捷键的说明如下： 快捷键 说明 o 搜索CSDN、书签、历史记录、标签页，在当前页面跳转选中的结果 shift + o 搜索CSDN、书签、历史记录、标签页，在新页面打开选中的结果 b 搜索书签，...在当前页面跳转选中的结果 shift + b 搜索书签，并在新页面打开选中的结果 shift + t 搜索并切换标签页 该插件还支持右键菜单，如下图，我们选中一段文本，然后右击，从列表中可以选择 CSDN
边距塌陷(Collapsing margins) 在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距，称为边距塌陷。...「如果'min-height'属性为零，并且框没有顶部或底部边框，也没有顶部或底部填充，并且框的'height'为0或'auto'，并且框不包含边距，则框自身的边距会折叠 行框，其所有流入子页边距（如果有的话...image-20200519001704179 边距塌陷如何解决 通用型 1.改变盒子模型（非 block 模型） 2.创建新的 BFC 限制型 查看刚才不会发生高度坍塌的情况 边距塌陷如何计算 1.当两个或更多边距坍塌时...，当边距全为正数的时候，结果页边距宽度是边距塌陷宽度的最大值。...2.当边距全为负数的时候，取最小值。 3.在存在负边距的情况下，从正边距的最大值中减去负边距的绝对值的最大值。
.仅限IE浏览器 width=pixels 窗口的宽度.最小.值为100 replace Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目...支持下面的值： true – URL 替换浏览历史中的当前条目。 false – URL 在浏览历史中创建新的条目。 _blank – URL加载到一个新的窗口。...，还是替换浏览历史中的当前条目。...支持下面的值： true – URL 替换浏览历史中的当前条目。 false – URL 在浏览历史中创建新的条目。...这是一个经常遇到的问题，特别是在用frame框架的时候 解决办法: window.location 改为 top.location 即可在顶部链接到指定页 或 window.open(“
反之也如此； 计算 BFC 的高度时，浮动元素也參与计算。 当一个元素设置了新的 BFC 后，就和这个元素外部的 BFC 没有关系了，这个元素只会去约束自己内部的子元素。...父子元素边距重叠 场景一：先来看这段代码，预计实现的结果应该是父容器距离页面顶部 100px，子容器距离父容器 100px 。...原因：根据规范，一个盒子如果没有添加 BFC，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠。 解决： 通过给父容器添加 overflow: hidden 属性，使之成为 BFC 。...现象：发生了边距重叠，两个兄弟元素的上边距和下边距发生了重叠。 规则：正正取最大，负负取最负，正负就相加。 原因：块级元素的上外边距或下外边距有时（直接接触/相邻时）会合并为一个外边距。...现象：发生了边距重叠，所有的空元素的边距重叠成一个空元素的边距。 原因：如果一个块级元素没有任何内容并且设置了 margin-top 和 margin-bottom 时会发生 margin 合并。
2min-widthmin-width 规定元素设置最小宽度。2widthwidth规定元素内容区的宽度。1 边距 元素描述版本marginmargin规定元素中四个方向的外边距属性。...1paddingpadding规定元素的内边距，该属性不可为负值，其简写形式可一次性设置四个边的内边距。1padding-bottom设置元素的下内边距。1padding-left设置元素的左内边距。...当元素之间重叠时，z-order可决定元素显示的顺序。一般z-index较大的元素会在z-index较小的上方显示。...2 弹性盒 元素描述版本align-content规定弹性内容的侧轴方向上右额外的空间时，如何排布每一行。当弹性容器只有一行时无作用。...单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。
2.4 实例题（根据盒模型解释边距重叠） 例：父元素里面嵌套了一个子元素，已知子元素的高度是 100px，子元素与父元素的上边距是 10px，计算父元素的实际高度。 ?...父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。...2.5.2 BFC原理（渲染规则|布局规则）： （1）内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置； （2）Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻...文字环绕效果，设置 float； （5）BFC 的区域不会与 float Box 重叠（清浮动）; （6）计算 BFC 的高度时，浮动元素也参与计算。...2.6.2 IFC原理（渲染规则|布局规则）： （1）内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置； （2）这些 Box 之间的水平方向的 margin，border 和padding
边距折叠 简而言之，当两个垂直元素有一个边距，并且其中一个的边距大于另一个时，就会发生边距折叠。 在这种情况下，将使用较大的边距，而忽略另一个边距。...在上面的模型中，一个元素具有底部边缘，而另一个元素具有顶部边缘。 具有较大边距的元素获胜。 为避免此类问题，建议根据本文使用单向边距。...负边距 它可以与四个方向的边距一起使用，在某些用例中非常有用。 让我们假设以下内容： 父级有 padding: 1rem，这导致子级从顶部、左侧和右侧偏移。 但是，子元素应该紧贴其父元素的边缘。....element { display: flex; flex-wrap: wrap; } 当视口尺寸较小时，它们确实会在新行中结束， 见下图： 需要解决的是in-between设计状态，两个item...例如，根据视口宽度设置具有最小值和最大值的边距。 答案是肯定的！ 我们可以。 最近，CSS 数学函数在 Firefox 75 中得到支持，这意味着它们在所有主流浏览器中都受 CanIUse 支持。
前言 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。...由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。...向右侧对齐多个组件 导航条目前不支持多个 .navbar-right 类。为了让内容之间有合适的空隙，我们为最后一个 .navbar-right 元素使用负边距（margin）。...如果有多个元素使用这个类，它们的边距（margin）将不能按照你的预期正常展现。 将在 v4 版本中重写这个组件时重新审视这个功能。...固定在顶部 添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding
，当hover-class="none"时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态 hover-start-time...，如果 controls 属性值为 false 则设置 author 无效 binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code...} bindplay EventHandle 当开始/继续播放时触发play事件 bindpause EventHandle 当暂停播放时触发 pause 事件 bindtimeupdate EventHandle...当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} bindended EventHandle 当播放到末尾时触发 ended 事件...] } }, methods: { } } ---- 若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理
预定义的内部主题有： default circles rectangles rounded inmargin 2.2.2 外部主题 外部主题主要控制的是幻灯片顶部尾部的信息栏、边栏、图表、帧标题等一帧以外的内功格式...在每一帧当中，内容有一定的水平边距，并且整体垂直居中显示。...目录页也是帧，需要在目录帧中通过使用 \tableofcontents 才能产生目录并将其显示到目录帧中。...逐条显示是最为常用的覆盖效果，其基本命令是 \pause，表示幻灯片在此处会停顿一下，在 \pause 后面的所有内容会在 pdf 文件的下一页显示。...pdf 动画是把动画内容分别画在许多页中，再通过 pdf 文件中自动快速翻页产生的效果。beamer 提供了 \animate 和 \animatevalue 命令生成动画。
领取专属 10元无门槛券
手把手带您无忧上云
