目录 1. white-space 2. word-break 3. overflow-wrap 1. white-space 含义： The white-space CSS property sets...，而 overflow-wrap 和 word-break 是作用在单词上，用于控制长单词是否折行。...含义： The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert...，浏览器会把这个单词挪到下一行去显示： this is a lonnnnnnnnnnnnnnnnng word!...长单词lon...g并没有被挪到下一行，而是直接放在了a后面，然后在父容器的右边界断开了，一点空间都没有浪费。 ----
接下来，写banner里面的html代码，因为图片放在img文件夹中，所以要使用相对路径。...> 因为是图片列表，所以我们习惯性的使用 ul li 来实现，当然，你使用div也可以，效果上都是差不多的，但是那样会令代码看起来不够清晰。...下一个问题，宽度有点太宽了，我们不需要把所有图片都显示出来。 我们给banner加上一个 overflow: hidden; 顺便把背景色去掉。...首先，将两个按钮的透明度设为0，也就是隐藏。 opacity: 0; 下一步，设置content的hover事件。当鼠标划入的时候，就把按钮的透明度改为1。...那么，如果我们要看下一张图片，是不是只要把 ul 的margin-left 减去一张图片的宽度就可以了呢？ 因为要使用动画效果，所以我们引入jQuery。
首行缩进两个字符 在存在首行缩进的需求，我也会使用这个单位。...这些重复使用的值我们完全可以存放在变量里面。...之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图： ?...这样下一个接手得人难免会有点迷糊，而且这样会造成样式越来越难修改。 这个时候，mixin( 可以理解成 class 中的 class )就能发挥它的作用了。...两端对齐 // html姓名手机号码账号密码 // cssdiv { margin: 10px 0;
本文概要 本文将介绍如下几种常见的布局： ? 其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法 一、单列布局 ?...然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行 ?...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...100%，此时，left和right部分会跳到下一行； 通过设置margin-left为负值让left和right部分回到与center部分同一行； center部分增加一个内层div，并设margin...2.利用背景图片 这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。...BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。这个 div 包含两个标签 p。...带有 float 类的项 我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。 .text { overflow: auto; } ?...在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...除了使用 overflow 创建 BFC 外，其他一些 CSS 属性还创建 BFC。正如我们所看到的，浮动元素创建了 BFC。你的浮动项将包含它里面的任何东西。
首行缩进两个字符 在存在首行缩进的需求，我也会使用这个单位。...合理使用变量 一般设计稿中的某一类的文字（元素）都是用相同的字体大小、颜色、行高等样式属性，所以这些值我们不必每次都重复写，因为当 UI 更新设计方案，你需要改的地方就很多了。...这些重复使用的值我们完全可以存放在变量里面。...之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class，如下图： ?...两端对齐 // html 姓名 手机号码 账号 密码 // css div { margin: 10px
BFC 可以防止 margin 折叠 了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。 这个 div 包含两个标签 p。...我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。 .text { overflow: auto; } ? 这实际上是我们创建具有多个列的浮动布局的方法。...查看演示 在多列布局中使用 BFC 如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。...除了使用 overflow 创建 BFC 外，其他一些 CSS 属性还创建 BFC。正如我们所看到的，浮动元素创建了 BFC。你的浮动项将包含它里面的任何东西。...使用overflow或其他的方法创建BFC时会有两个问题。
圣杯布局 实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 将三者都设置 float:left, position:relative (因为相对定位后面会用到...） middle设置 width:100% 占满一行 此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 这时left拉回到middle所在行的最左边... 圣杯布局 <style type="text/<em>css</em>...代码中，middle部分首先要<em>放在</em>container的最前部分，然后是left，right <em>将</em>三者都设置 float:left middle设置 width:100% 占满一<em>行</em> 此时middle占满一<em>行</em>...，除了<em>使用</em>外围container的padding，还可以考虑<em>使用</em>margin，给middle增加一个内层<em>div</em> -- middle_content, 然后设置 margin:0 210px 实现代码 <
(2)浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 问题症状:常见症状是IE6中后面的一块被顶到下一行 碰到频率：90%（稍微复杂点的页面都会碰到...(4)、父级div定义 overflow:hidden 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 优点...建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。...(5)、父级div定义 overflow:auto 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 优点：简单...（6）、避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。 （7）、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下： ?...一、所有的菜单项单行显示，不换行 前端的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。...内联元素 在流式布局中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右，例如 span。...我们要的是单行显示，所以使用 span 标签就能实现我们要的效果，但是还要 不换行，这时就要利用 CSS 的 white-space 属性了，它会告诉浏览器遇到 空格 该怎么处理（这里的空格不是单纯意义上的空格...二、菜单可以左右滑动 CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何处理。
overflow-wrap: break-word;与word-break: break-all;有什么不同 我觉得就是上一行被截断的下一行写下一个单词之后就会换行，我的理解是可能这就是这就是作用把，...就是说截图的下一行只会出现一个单词。..." href="css/reset.css"/> div{ width: 100px; border:1px solid red;...… 但我希望你们听了我的课程会有一些收获，哪怕在技术上对你有一点点的帮助，我就满足了… 敲好每一行代码，讲好每一堂课程 JSONP（JSON with Padding）JSONP...JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取
: 0; }.hwrap { overflow: hidden; }/* (B) 使用CSS动画切换幻灯片 *//* (B1) 幻灯片位置 */.hmove { position: relative;...> 包裹器，将所有幻灯片放在其中。...(A) 基本思路是将幻灯片排成一行。将内部包裹器设置为弹性布局。将所有幻灯片设置为100%宽度。(A) 在外部包裹器上隐藏滚动条，以便“一次显示一张幻灯片”。...right: 200% 将显示第三张幻灯片，依此类推...(B1) 我们使用一组关键帧“自动”旋转幻灯片。(B2) 将关键帧附加到内部包裹器，CSS 将完成其余的魔术。...display: flex; text-align: center; justify-content: center; align-items: center;}/* (C) 使用CSS动画切换幻灯片
同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。...同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。 <!...内容为float-left的div虽然把div3内容向右挤开了一段距离（原因是浮动导致id为div3的盒内的行盒收缩），但是id为div3的盒的左外边缘仍然紧贴其包含块的左边缘。...这是因为当“非float的元素”和“float的元素”在一起的时候，如果非float元素在先，则按照bfc规则，下一个盒子会换行，那么float的元素生成的盒子会在新的一行进行浮动。...所以要将right放在content元素前面。
利用 clear:both 清除浮动 1.clear:both + 多余的标签 `` 将以上div放在浮动元素父级的内部 ``` css .clear1...与1.相比，是将伪类去替代div，感觉本质还是没变 .Clear2:after{ content:'...自身对外界表现正常 不会覆盖float元素，并且自适应的占据这一行剩下的宽度 ####如何触发BFC 使用 float，并且值不为 none 使用 absolute 定位的元素 使用 overflow,...下面是对使用 overflow 的几个属性值来清除浮动时，它们之间的差异性。...width: 100%; } 以上使用的是overflow:auto，下面几点值得我们注意： 1.
.banner { height: 380px ; overflow: hidden ; background: #ccc...> 因为是图片列表，所以我们习惯性的使用 ul li 来实现，当然，你使用div也可以，效果上都是差不多的，但是那样会令代码看起来不够清晰。...下一个问题，宽度有点太宽了，我们不需要把所有图片都显示出来。 我们给banner加上一个 overflow: hidden; 顺便把背景色去掉。...首先，将两个按钮的透明度设为0，也就是隐藏。 opacity: 0; 下一步，设置content的hover事件。...那么，如果我们要看下一张图片，是不是只要把 ul 的margin-left 减去一张图片的宽度就可以了呢？ 因为要使用动画效果，所以我们引入jQuery。
众所周知，前端内容多而杂，经过查阅各种资料，总结了一些知识点，以备后续复习使用。文章分为上（html，css）中(js)下(vue)三部分。...（如div下可包含div） 行内元素（常见的行内元素a,span.img） 一行显示多个 宽度为内容的宽度 不可以设置高度和宽度 标签内一般不包含标签（如a标签内包含a标签） 行内块元素 行内块元素包含块级元素和行内元素的特征...、table-cell等 BFC作用 可以避免外边距重叠的问题，将两个元素放在不同的BFC容器中即可。...高度塌陷 原因 很多情况父盒子不方便给高度，子盒子浮动脱离文档流不占位置，使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签，设clear:both 父级添加overflow:hidden 使用...溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记
一、连续排列的链接图片样式及核心要点 1、实现效果 实现如下效果 , 在下面的布局中 , 水平放置 3 个图片链接 ; 每个图片链接 占 宽度的 1/3 ; 2、标签结构设置 将布局中的 三个 链接图片...-- 链接放在 div 盒子中 使用 a 标签包裹 img 标签 --> <img src=
文本 CSS文本控制可以帮助我们更好地展示网页中文本的信息，并提高网页的视觉效果。 缩进 用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。...使用 line-height 属性，可设置文本行与行之间的高度。...: lowercase;">看看我是如何转换的 hello CSS 效果： 文本溢出 在 CSS 中，可以使用 overflow 属性来处理文本溢出。...行高设置： 根据字体大小适当设置行高，以提高文本的可读性。通常，行高可以设置为字体大小的 1.4 到 1.6 倍。 粗细 CSS 中字体粗细可以使用 font-weight 属性来设置。... 倾斜样式 123 ABC 效果： 颜色 CSS 中字体颜色可以使用 color 属性来设置。
背景 支持ie老版本没办法使用比较新的框架,只能使用原始js实现。 演示地址 实现功能如下: 鼠标放在图上暂停。 点击下面圆点切换图片。 点击左右箭头切换。 自动进行轮播。...position: absolute; border: 0; outline: none; white-space: nowrap; /* 将图片一行排列..." href="css/friends.css"/> 含有滚动条宽度; 故使用overflow:scroll carouImg.style.left = -img.clientWidth
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
