window 对象的一些常见的属性、方法和事件: 属性: closed 返回窗口是否已被关闭 innerheight 返回窗口文档显示区的高度,会随着浏览器的伸缩而改变 innerwidth 返回窗口文档显示区的宽度...outerheight 返回窗口的外部高度。 outerwidth 返回窗口的外部宽度。 parent 返回父窗口 name 设置或返回窗口的名称。...事件: onresize 此事件会在窗口或框架被调整大小时发生,可以用于当用户试图调整窗口的大小时,显示一个对话框。 代码示例: ? 运行结果: ?...关于writeln()方法,这个方法虽然说可以换行,但是它换行的方式是加一个\n并不是加一个,在浏览器中只会把\n解析成空白符,空白符就会解析成空格,所以使用仅仅使用writeln()方法是没有换行效果的...不过可以配合标签实现换行效果,标签可以进行文本预处理,而\n属于文本中的换行符,所以会被正常识别。 代码示例: ? 运行结果: ?
1) 要求容器在宽度自由伸缩的情况下,A/B/C的宽度始终是1:1:1,如何实现,写出两种方法。...重排: 页面初始渲染 添加/删除可见DOM元素 改变元素位置 改变元素尺寸(宽、高、内外边距、边框等) 改变元素内容(文本或图片等) 改变窗口尺寸 减少重排 分离读写操作 样式集中改变 4)写出清除浮动的方法...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 EM特点 em的值并不是固定的; em会继承父级元素的字体大小。...区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。...PS:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。 块级元素可以设置width,height属性,块级元素即使设置了宽度,仍然是独占一行。...: 我要居中我要居中我要居中 //若想要上面的文本居中,对应的CSS样式因如下所示编写 div{ text-align: center } 4、文本溢出解决方法...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。一般都是以body的font-size为基准。...所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。...这个单位与em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
:clip(裁剪文本)或ellipsis(省略号代表)或string(给定字符串代表) word-wrap:自动换行属性强制换行!...;可能取值:none(默认值;无法调整尺寸),both(可调整宽和高),horizontal(可调整宽度),vertical(可调整高度) 不兼容IE浏览器!...网络视图:网页时按列来进行布局的! 响应式网络视图:通常12列,宽度100%,浏览器窗口拉伸时会自动改变! ? 控制布局,每列的百分比:100%/12=8.33%; ? 示例: 1 30 31 运行结果:当浏览器窗口大小变化时,页面也相应变化; ? ...img{ max-width:100%; height: 200px; } 如果设置width:100%;那么图片或视频初始显示的宽度会特别大
:normal'> pre-line 合并空白符序列,但是保留换行符 normal 忽略空白符 nowrap 文本不会换行,直到出现才换行 pre 空白会被浏览器保留...string 使用给定的字符串来代表被修剪的文本 13)).文本轮廓 14)).文本换行 <div...浏览器只在行中没有其它有效换行点时进行换行。...相对于浏览器窗口进行定位 div{ position:fixed } 10).浮动Float 元素内的内容向某个方向移动 div{ float:left } left 左浮动 right 右浮动...div { resize:both } none 不调整 both 调整元素的高度和宽度 horizontal 调整元素的宽度 vertical
;sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除 新事件:onresize、ondrag、onscroll、onmousewheel、onerror...规定 input 元素中可选择多个值 html5 新事件 事件 描述 onresize 当调整窗口大小时运行脚本 ondrag 当拖动元素时运行脚本 onscroll 当滚动元素滚动元素的滚动条时运行脚本...text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 word-break 规定非中日韩文本的换行规则 word-wrap...允许对长的不可分割的单词进行分割并换行到下一行 text-decoration 文本修饰符:overline、line-through、underline 分别是上划线、中划线、下划线 @font-face...FireFox浏览器私有属性 -ms-:代表IE浏览器私有属性 -webkit-:代表safari、chrome浏览器私有属性 -o-:代表opera浏览器私有属性 博客地址:https://ainyi.com
响应式截断,根据不同宽度做出调整 文本超出范围才显示省略号,否则不显示省略号 省略号位置显示刚好 基于上述的准则,下面我就讲介绍各种技巧实现截断效果,并根据上述的评判标准得出最优解。...实现效果 优点:属性浏览器原生支持,各大浏览器兼容性好。 缺点:就是只支持单行文本截断,并不支持多行文本截取。 适用场景:单行文字截断最简单实现,效果最好,放心使用。...text-overflow:ellipsis; 可选属性,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。 实现效果: ? 实现效果 优点: 响应式截断,根据不同宽度做出调整。...实现效果 优点: 兼容性好,对各大主流浏览器有好的支持 响应式截断,根据不同宽度做出调整 缺点:但是它无法识别文字的长短,即文本超出范围才显示省略号,否则不显示省略号。...实现效果 这里我目前看到最巧妙的方式了。只需要支持 CSS 2.1 的特性就可以了。 优点: 兼容性好,对各大主流浏览器有好的支持。 响应式截断,根据不同宽度做出调整。
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。...给容器设置的样式 flex-direction flex-diretion主要是用来调整主轴的方向的,默认是水平方向 了解即可,一般来说,很少调整主轴的方向。...stretch:元素的高度会被拉伸到最大(不能给死高度)。 flex-wrap flex-wrap属性控制flex容器是单行或者多行,默认不换行 nowrap:不换行(默认),会压缩子盒子的宽度。...wrap:当宽度不够的时候,会换行。 align-content align-content用来设置多行的flex容器的排列方式。 flex-start:各行向侧轴的起始位置堆叠。...align-items与align-content的区别 align-items调整的是侧轴的对其方式,不换行一般用align-items align-content:必须是多行才生效,如果单行,没有效果
可以不用再多写一个 dom 可以用 content 搭配出很多效果 例子: 固定尺寸 2:1 的容器 文本前后增加 icon 或图片 使用 data-* 和 content: attr(data-*)...absolute 绝对定位 绝对定位(position:absolute),相对于父级而言进行位置偏移,如果没有父级或者父级没有进行定位,则继续往上一级寻找参照物,直至最终的浏览器窗口。...它的特殊之处在于它不用像absolute疯狂“找爸爸”,它天生参照于浏览器窗口!当为对象设置固定定位后,该对象即处于浏览器窗口画面中的固定位置,无视文档长短、窗口大小和滚条滚动。...它可以自动识别屏幕宽度、并做出相应调整的网页设计、布局和展示的内容可能会有所改变。...1.允许网页宽度自动调整 所有主流浏览器都支持这个设置。
image.png 1.设置布局 Shiny使用fluidPage创建一个显示界面,该显示界面可自动调整为用户浏览器窗口的尺寸。还可以通过在fluidPage函数中设置元素对用户界面进行布局。...3.文字格式 p 一段文字 a 超级链接 br 换行符(例如,空行) div 具有统一样式的文本 span 行内文本的统一样式 pre... 以固定宽度的字体按原样显示文本 code 格式化的代码块 img 一个图像 strong 粗体文字 em <em...("div creates segments of text with a similar style....要插入图像,需要img函数指定图像文件的名称作为src参数(例如img(src = "my_image.png"))。还可以设置其他HTML参数,例如高度和宽度。请注意,高度和宽度将以像素为单位。
cm在其官网对大多数附加高级功能都有简单介绍,笔者梳理了cm官网上的文档,对其中常用的高级功能进行了尝试。下面是汇总好的使用示例,大家可以根据自己的需要进行调整。...element.appendChild(div); } 增加样式调整: .autocomplete-div { display: inline-block; width...特殊用法和踩过的坑 4.1 自动高度 codemirror默认的高度是300px,如果想要调整默认高度,可以在mounted方法中增加下面一段代码,这段代码的含义是调整cm高度为(当前浏览器高度-200...)px,并且在窗口发生变化时,重新再做出调整。...$nextTick(() => { window.addEventListener('resize', () => { //监听浏览器窗口大小改变 //浏览器变化执行动作
-- 这里放要显示的数据 --> 在这个例子中,我们定义了一个名为 container 的容器元素,并为其设置了 page-break-inside: avoid; 属性...然后,我们定义了一个名为 page 的父元素,并为其设置了 page-break-after: always; 属性,表示在该元素之后始终分页。 当数据超出一页时,浏览器会自动将剩余部分放到下一页。...CSS 实现打印 Table 单元格换行显示 white-space: normal;:默认值,文本在遇到空格或换行符时换行,单词内部不会强制分割。...@media print { .navbar, .ad-banner { display: none; } } 2.调整字体大小和颜色:可以根据打印需求调整文本的字体大小和颜色。...属性来控制打印版本中图片的最大宽度,避免图片溢出页面边界。
通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。 可能的值 值 | 描述 left | 把文本排列到左边。默认值:由浏览器决定。...其行为方式类似 HTML 中的 标签。 nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。 pre-wrap | 保留空白符序列,但是正常地进行换行。...像下面这样写 css 代码,使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要。...有效的避免了如下问题: 当浏览器窗口比元素的宽度还要窄时,浏览器会显示一个水平滚动条来容纳页面。...,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 原题中参考资料 双飞翼布局 <!
-- href 超链接的地址 target 是否新开一个浏览器的窗口,默认在原来的窗口上跳转 两个 a 之间的字就是 link_text --> <!...-- 单独一个br代表换行 --> 这是一个加粗的字体 这是一个倾斜的字体 这是一个带下划线的字体 这是一个带中划线的字体...-- --> 老子是div 老子是div 老子是div <!...-- --> 这是一个p 这是一个p 这是一个p <!...-- 1.块级标签 h1-h6 div p hr 默认占浏览器的宽度 能设置长和宽 2.行内标签 a img u s i b span 根据内容决定长度 不能设置长和宽 -->
需求场景1 实现需求:如下图,点击左侧的导航,打开对应tab页面,其中tab页面的内容为 iframe,这里希望iframe的高度和宽度,根据浏览器窗口大小变化而变化,同时页面内容过多,或者过宽时,出现...width="100%" 设置用于控制iframe页面宽度根据浏览器宽度变化而变化 iframe代码片段2 基本同“iframe代码片段1”,只是给changeFrameHeight函数增加iframeID...}); } 说明: window.innerHeight 获取浏览器窗口的高度-去掉浏览器地址栏,书签栏的可视区域的高度,包括横向滚动条的高度。.../** * 浏览器窗口大小发生变化时,自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight() */ $(...当调整浏览器窗口的大小时,发生 resize 事件。
网页字符编码 html的基本结构 网页在浏览器窗口中显示的标题 .../最多用两个不要多写 07-常用标签02 p 段落标签 br 换行标签 字符实体 空格 < < 小于号 大于号 & &字符实体 div块标签 span标签 08-常用标签小结 标题 a标签 链接 img 图片标签 scr alt title p 标签 br 换行 div 块标签 span 圈住一块文字 < < 空格 & & 今日头条界面内容展示...用div细分模块方便界面布局 样式设置及调整 10-什么是CSS?...实现HTML和CSS的分离和复用 15-CSS常用选择器01 标签选择器类选择器 层级选择器 16-CSS常用属性 文本属性 font-size 字体大小 color 文字颜色 font-family
前言 前面我们介绍了tkinter主窗口的一系列操作,本篇文章我们将介绍Label控件,Label(标签)控件,是 Tkinter 中最常使用的一种控件,主要用来显示窗口中的文本或者图像,并且不同的 Lable...font 指定 Lable 中文本的 (字体,大小,样式)元组参数格式,一个 Lable 只能设置一种字体 fg 设置 Label 的前景色 height/width 设置 Lable 的高度/宽度,...Label 没有获得焦点的时候高亮边框的颜色,系统的默认是标准背景色 highlightcolor 指定当 Lable 获得焦点的话时候高亮边框的颜色,系统默认为0,不带高亮边框 image 指定 Label..."active"和"disabled" takefocus 默认值为False,如果是 True,表示该标签接受输入焦点 text 用来指定 Lable 显示的文本,注意文本内可以包含换行符 underline...: 图片 边框的宽度可以通过 borderwidth 来调整,其样式可以通过relief来设置(默认为平的 flat);填充区的大小调整分为水平方向和垂直方向,可以使用padx和pady来调整;内容区则主要用来显示文字或者图片
`) , column-reverse (`列元素排列的方向相反`) flex-wrap : 当弹性盒子子类元素宽度超过父元素宽度时,使用其 wrap 值可以自动换行。...下面,我们可以快速查看一个HTML正常布局流的示例, 其文本内容并不会随着窗口的变化而变化: body { width: 500px; margin: 0 auto; } p {...flex 属性,此时调整浏览器窗口宽度将会根据宽度进行自适应 */ flex: 1 auto; margin: 5px; font-size: 18px; line-height... 执行结果: 综上所述,弹性盒子的真正价值可以体现在它的灵活性/响应性,如果你调整浏览器窗口的大小,或者增加一个 Seven 效果结果: 其网格布局的子元素中div边框随着窗口变化而变化。
标签上 title 与 alt 属性的区别是什么? alt 是给搜索引擎识别,在图像无法显示时的替代文本; title 是关于元素的注释信息,主要是给用户解读。...你可以根据需要调整这些属性值。 和直接修改原始html文件有什么区别? 使用 iframe 嵌入一个外部 HTML 文档与直接修改原始 HTML 文件有一些区别。...嵌入的文档在其自己的窗口或框架内运行,与主文档相互独立,从而实现了代码隔离。 样式隔离:iframe 内的 HTML 文档拥有自己的样式表,与主文档的样式相互独立。...eg:div , p ,form , ul , li , ol , dl 等。它们的出现,往往独自占领一行。在没有设置宽度的情况下,默认宽度总是其父元素的宽度。...(1)行内元素有:a b span img input select (2)块级元素有:div p ul ol li dl dt dd h1-h6 (3)常见的空元素:br-换行,hr-水平分割线
,且会自动换行 2.段落标签 p:自带换行,有段落间距 3.文本类型标签 共同点都不带换行 常用的文本类型标签 b与strong:内容加粗 i与em:内容斜体 sup:上角标 sub:下角标...:创建一个新窗口打开 _top:覆盖上一条记录 _parent:覆盖所有的记录 且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色 5.图片标签 <img title="这是二哈" alt="二哈...(高度) cols number 设置多行<em>文本</em>框<em>的</em>显示列数(<em>宽度</em>) disabled disabled 布尔属性,设置当前<em>文本</em>框为禁用状态 8.label标签 <form id="form1" name...for 属性应当与相关元素的 id 属性相同 结合CSS可以控制表单文本或控件对齐,美化表单 10.button标签 只是个简单的按钮 六.单标签 br:换行 hr:分割线 表单使用的标签 img:图片标签...七.div标签 div标签自带换行,主要是用来网页大体的分区框架的划分 八.注意 html中不区分大小写 如果你写的显示内容没有写在body内,浏览器解析后还是会默认把内容丢到body内
领取专属 10元无门槛券
手把手带您无忧上云