简单来说，就是 Bootstrap 为了快速布局从外到内写好了三类样式： 外层的固定宽度 .container 或 100% 宽度 .container-fluid 样式； 行 .row 样式，必须包含在...缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 标签包在带 .thumbnail 样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .caption 的容器。...--图片结束--> 效果图： [效果图] 3.2 实现瀑布流 到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙...给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 应该显示多少列，计算一个相对合理的布局方式。...column-width:354px; } #container>div{ width:354px; /*宽度根据实际情况调节，应与上面一致*/ overflow:auto; /*防止内容溢出导致布局错位
图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。 ...bootstrap 的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份: 不过 版本bootstrap3 与 bootstrap4 实现栅格系统方式不一样, bootstrap3...为了兼容 IE，采用的是浮动方式来实现栅格系统： 即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变 container 容器的宽度，对应栅格宽度自然也跟着改变： bootstrap4...在这种布局方式下，当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现滚动条。而且当需求改变时，可能会改动多套代码。 ...通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。
-3.3.7-dist 下载地址： https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip win7 2....scrolling="yes" allowtransparency="yes" onload="changeFrameHeight()"> 4....$('#tabContent '); // 获取tab标签对应的页面div容器对象 var elementHeight = contentContainer.height(); //容器对象自身高度...（如果页面刚加载完，这时还没打开tab页，会出现容器高度为0的情况 var offsetTop = contentContainer.offset().top; //容器距离document顶部的距离...; //浏览器可视窗口的高度(不包括内边距、边框和外边距) // 获取tab页面内容容器高度 var h = windownHeight - (offsetTop-scrollHieght
在实际的网站开发过程中，我们会遇到需要将图片放入一个容器中，并让其按比例缩放以适应容器大小的需求。本文将详细介绍如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度，并按比例显示。...max-width: 100%; max-height: 100%;}上述代码中，一个名为 container 的容器被定义，并设置了宽度为 50% 和高度为 300px。...接下来，我们通过 overflow 属性设置了容器的溢出属性为 hidden，以防止图片溢出容器。...width: 100%; height: 100%; object-fit: cover;}上述代码中，我们定义了一个名为 container 的容器，并设置了宽度为 50% 和高度为 300px。...接下来，我们通过 overflow 属性设置了容器的溢出属性为 hidden，以防止图片溢出容器。
单行内容垂直居中 /*height = line-height*/ .center{ height: 4em; line-height: 4em; overflow: hidden...非固定高度居中 .middle{ position:absolute; top:10px; bottom:10px; } 支持：所有块级、内联元素、所有浏览器 缺点：容器不能固定高度 2...resize:both 高度可变 主要缺陷 Absolute 现代浏览器&IE8+ 是 会导致容器溢出 是 是* ‘可变高度’的特性不能跨浏览器 负margin值 所有 否 带滚动条 大小改变后不再居中...否 不具有响应式特性，margin值必须经过手工计算 Transform 现代浏览器&IE9+ 是 会导致容器溢出 是 是 妨碍渲染 Table-Cell 现代浏览器&IE8+ 是 撑开容器 否 是...会加上多余的标记 Inline-Block 现代浏览器&IE8+&IE7* 是 撑开容器 否 是 需要使用容器包裹和hack式的样式 Flexbox 现代浏览器&IE10+ 是 会导致容器溢出 是 是
环境配置 目前bootstrap有三个版本，分别是 2.x、3.x、4.x，2.x是旧的版本，3.x是新的稳定版本，4.x还在完善中，所以我们目前使用的是3.x版本。...container尺寸是固定的（1170,970,750,100%） container-fluid的尺寸是铺满全屏: 100% b.row:行 默认没有高度，背景色、边框 默认宽度为100% 继承版心的宽度...992,(4)在 768<= 屏幕宽度 < 992时，占6份(二分之一),(5) <768,直接显示一行 5.png 2-版心容器container bootstrap中有两种版心容器可供使用者选择 container...：响应式版心容器 默认样式： 没有高度、边框、颜色 左右15px的padding 宽度是响应式 屏幕宽度 < 768 宽度100% 768 <= 屏幕宽度 < 992 宽度...750 992 <= 屏幕宽度 < 1200 宽度970 1200 <= 屏幕宽度 < 1200 宽度1170 container-fluid：流式版心容器 默认样式： 没有高度、边框
-- 2 以下容器就是整个轮播图组件的整体， 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4...background-position: center center; （2）使img元素绝对定位，left:50%，margin-left: -width/2 2、background使用 - 将容器的高度固定...300\*400的盒子中，最终背景图片的大小是300\*600 * 因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300\*600 （3） contain...200\*400 * 因为背景图的较大边为200，将200放大到目标容器400的高度，放大了2倍，最终结果200\*400 4、图片响应式 （1）目的 + 各种终端都需要正常显示图片...} else { 5 $item.empty(); 6 } 按照目前的情况，如果是小图展示则不需要给容器加上410px的固定高度 - 所以我们可以通过CSS媒体查询的方式解决 1 #main_ad
而且控制权在框架本身，有预制样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。...1.优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断地更新迭代 让开发更简单，提高了开发的效率 2.2Bootstrap 使用 在现阶段我们还没有接触...容器，Bootstrap预先定义好了这个类，叫.container它提供了两个作此用处的类。...1.cintainer类 响应式布局的容器 固定宽度 超小屏幕（100%） 小屏（>=768px）：设置宽度为750px 中屏（>=992px）：设置宽度为970px 大屏（>...我们嵌套最好加1个行row这样可以取消父元素的padding值 而且高度自动和父级一样高。
因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得方便的地方。...这个人的名字有一个很长的单词，这导致了溢出和水平滚动。...内容溢出的问题不仅在于内容是否大于固定的hero 高度。它可以发生在屏幕大小调整作为文本换行的结果。 ? 如果改用min-height，则上述情况根本不会发生。...那是因为内容不足以达到浏览器窗口高度的长度。 修复后，其外观应如下所示： ? 首先，将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％。...为了使其流畅，我们需要以下内容： 纵横比：高度/宽度 容器的宽度：可以是固定数字，也可以是动态数字（100％） 设置height为视口宽度的100％乘以纵横比 设置max-heigh，该高度是容器的宽度乘以纵横比
如果 element1 有某个祖先节点是element2的话就成立 element1 > element2：选择父标签是element1的所有element2元素。...对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。...父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。...stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。...bootstrap地址 ----
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。...overflow:hidden 清除浮动 一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。...因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。...">子元素2 其他部分 三. overflow:hidden 解决外边距塌陷 父级元素内部有子元素...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
）和originalHeight（底部容器的初始高度）。...4：添加touchmove事件监听器，当触摸移动时，根据手指的移动距离计算新的高度，并将底部容器的高度设置为新的高度。...如果底部容器的高度小于初始高度且悬浮框已展开，则将底部容器的高度设置为初始高度，同时将isExpanded标志设置为false。...如果悬浮框与页面顶部的距离小于等于0，则将底部容器的高度设置为窗口高度减去悬浮框与顶部容器之间的距离，并将isExpanded和isDragging标志设置为false。...根据底部容器的高度和展开状态，添加或移除.open类，以控制底部容器的展开和收起。
JQuery-3.2.1.min.js 下载地址： https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js Bootstrap...-3.3.7-dist 下载地址： https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip win7 2....if (contentContainer.offset()) { offsetTop = contentContainer.offset().top; //容器距离document...-去掉浏览器地址栏，书签栏的可视区域的高度，包括横向滚动条的高度。...setTimeout('changeFrameHeight("'+iframeID+'")', 500); // //延迟500毫秒执行 changeFrameHeight方法 } } }); 4.
bootstrap里面父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于...2.2 bootstrap优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断的更新迭代 让开发更简单，提高了开发的效率 里面还有字体图标...bootstrap布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。...1170px 中屏 ( >=992px) 宽度定为 970px 小屏 ( >=768px) 宽度定为 750px 超小屏 (100%) .container-fluid 流式布局容器...列嵌套最好加一个行 row 这样可以取消父元素的padding值，而且高度自动和父亲一样高 <!
使用overflow:hidden隐藏溢出内容 overflow:hidden这种方式可以隐藏掉固定区域外的内容，它可以有效控制显示区域。但应注意，使用它时需要给它定义宽度和高度，否则会无效。...下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询...Bootstrap框架中的网格系统就是将容器平分成12份。 你用过媒体查询，或针对移动端的布局/CSS 吗？...伪元素 (pseudo-elements) 有什么用？...4.流动布局 流动布局是各个区块的位置都是浮动的，不是固定不变的。 float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚到前面元素的下方，不会再水平方向溢出，避免了水平滚动条的实现。
bootstrap-vertical-menu是一款基于Bootstrap的CSS3响应式滑动侧边栏布局模板。...该滑动侧边栏的HTML结构使用作为包裹容器，里面使用无序列表来制作需要的菜单选项。...默认侧边栏菜单的高度和屏幕一样高。...; border: none; border-radius: 0; margin: 0; z-index: 999; } 菜单项的总体高度被控制为侧边栏高度的60%。...如果想修改为和侧边栏一样的高度，可以修改.navbar-vertical-left ul.navbar-nav元素的高度为100%。
常见块级元素、行内元素、行内块元素的特点和区别 块级元素 (常见的块级元素div，p，h，form，li) 一行显示一个; 宽度默认为容器的100%； 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...2. html5有哪些新特性 语义标签（header，footer，nav，artice，section，aside） 音视频标签（audio，video） 画布（canvas） 地理（geolocation...选择属于属于父元素的唯一子元素 扩展: 伪元素：::before，::after，::first-line，::first-letter，::selection、::placeholder 4....hidden //溢出隐藏 10....溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记
此时，由于里面的容器有了一个确定高度值，我们就可以控制容器在内容溢出的处理行为。比如，让它出现滚动条： 行13-14：这里我特意使用样式设置，你也可以通过 classes 设置。...具体可以搜索"css overflow"，有非常详细的说明 你可能与我有一样的观点："出现滚动条，应该作为溢出的默认行为才合理"，我问了一下我们的好朋友，是这样子回答的： 红线内容，我觉得有一定道理。...除了设置固定的高度值，我们也可以设置一个最大高度： 前面加个 max- 前缀就可以 现在我们总结一个要点， 要让一个容器在内容溢出高度时，出现滚动条，必须具备以下条件： 容器本身的高度要被限制，可以是固定高度值...，也可以是最大高度值 容器本身通过 overflow 设置溢出行为 宽度溢出同理 不管怎么说，这种方式的前提是，我们对里面容器的高度，已经有了一个预期值。...再次提醒，里面容器没有限定高度，也没有设置 overflow 。所以高度由内容支撑，内容永远不会超出容器范围。 但是，由于外部的容器限定了高度，所以外层容器出现的溢出
之前对 border-box 的修改依然适用于高度，而且很有用，但是通常最好避免给元素指定明确的高度。 # 控制溢出行为 当明确设置一个元素的高度时，内容可能会溢出容器。...用 overflow 属性可以控制溢出内容的行为,支持： visible（默认值）——所有内容可见，即使溢出容器边缘 hidden——溢出容器内边距边缘的内容被裁剪，无法看见 scroll——容器出现滚动条...height: 150px; width: 100px; } .demo4 .item-visible { overflow: visible; } .demo4 .item-hidden...使用百分比高度是想让一个容器填满屏幕。不过更好的方式是用视口的相对单位 vh，100vh 等于视口的高度。...负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。
scollTop scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为...设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值....总结：元素发生溢出时可以设置scrollTop，设置的值为元素里内容向上滚动的不可见区域的高度 scollHeight 判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false.... element.scrollHeight - element.scrollTop === element.clientHeight 总结：当元素无溢出时为元素本身的高度，当元素发生溢出时为元素内容里面的总高度..."> 4
领取专属 10元无门槛券
手把手带您无忧上云
