class="text-content wm-htb">writing-mode: horizontal-tb; writing-mode...="text-content wm-srl">writing-mode: sideways-rl; writing-mode...官方说法就是：它规定了用户端在媒介中如何处理文档树( document tree )。...匿名盒子 某些情况下需要进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能被 CSS选择器选中，也就是所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为...在块盒子内部，行盒子总是从块盒子的一边延伸到另一边（译注：即占据整个块盒子的宽度）。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。
先来点基础的，单行文本溢出省略 核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行...，高度固定的情况下，设定行高， 控制显示行数） max-height: 40px；（设定当前元素最大高度） 优点 无兼容问题 响应式截断 短板 单纯截断文字, 不展示省略号，观感上较为生硬 适用场景 适用于文本溢出不需要显示省略号的情况...: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号，否则不显示省略号 短板 省略号显示可能不会刚刚好，有时会遮住一半文字 适用场景 适用于对省略效果要求较低...接下来对 C 盒子进行相对定位，将 C 盒子位置向右侧移动 100%，并向左上方向拉回一个 C 盒子的宽高（不然会看不到哟）。这样在文本未溢出时不会看到 C 盒子，在文本溢出时，显示 C 盒子。 ?...收，大道归简，能力封装 凡重复的，让它单一；凡复杂的，让它简单。 每次都要搞一坨代码，太麻烦。这时候你需要考虑将文本截断的能力，封装成一个可随时调用的自定义容器组件。
他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编码实践，给出一些答案。...先来点基础的，单行文本溢出省略 核心 CSS 语句 overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap；（设置文字在一行显示，不能换行）...） position: relative；（根据自身位置移动省略号位置, 实现文本溢出显示省略号效果） word-break: break-all；（使一个单词能够在换行时进行拆分） 优点 无兼容问题...接下来对 C 盒子进行相对定位，将 C 盒子位置向右侧移动 100%，并向左上方向拉回一个 C 盒子的宽高（不然会看不到哟）。这样在文本未溢出时不会看到 C 盒子，在文本溢出时，显示 C 盒子。...收，大道归简，能力封装 凡重复的，让它单一；凡复杂的，让它简单。 每次都要搞一坨代码，太麻烦。这时候你需要考虑将文本截断的能力，封装成一个可随时调用的自定义容器组件。
常用布局：浮动 3.1 引入 通常我们有这样的布局需求：div 进行一行的顺序布局、或 div 进行一行的两端布局 除了可以使用我们之前学过的显示模式转换 display 进行调节，我们还可以使用...3.2 概述及格式 浮动布局：让元素脱离标准流进行“漂浮”的布局方式，可以改变元素默认的排列方式。 多用于让块元素横向排列的需求。...案例 2：右对齐顺序排列 示例 2：要求在一行上，右对齐： 注意：因为从上到下执行代码，红色方块是第一个向右浮动的，自然在最右边 3.3.4 案例 3：两端对齐排列 示例 3：要求在一行上，进行如下两端对齐...清除浮动 4.1 准备代码 4.2 引言 通常情况下，未设置高度的 标准流父元素，在子元素进行浮动时，会导致父元素失去子元素，高 度消失。 进而影响页面排版。...4.8 总结 未设置高度的 标准流父元素，在子元素进行浮动时，会导致父元素失去子元素，高度消失。 这时我们可以采取清除浮动来让布局可控。 5.
爬虫选择器其实就是CSS选择器，和前端开发关系密切，这里先简单介绍一下，让没做过web开发的有个大概了解。...今天主要时一起来了解下CSS语言规则，如果你写过一些CSS样式，对其规则肯定不陌生，CSS规则看起来是这样的： .text-content pre,.text-content pre[class*=language...对于匹配，第一感觉能够比较高效进行表达的应该是编译原理的语法树，如果能够定义一套正确的BNF范式，说不定会很合适。...不难想象，这个对象可以简单的看作是存储CSS规则的数据结构，也就是将前端开发人员的CSS规则转换为内部的C++对象，这个转换过程理想情况下应该是O(n)复杂度，n为规则字符串长度，也就是一次遍历，Chromium...这个过程细节很多，CSS的规则有几十种类型，每个类型都要处理，所以就不细讲了。 回过头来，让我们再看一下CSS规则文本是如何转换为C++中的数据结构CSSSelectorList的。
什么是浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘： ? 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。...，导致被浮动元素覆盖，除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们，这样兄弟元素才会被强制换行。....浮动的元素自己会有一套排列规则，相当于在页面上面浮动着一层新的页面 1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐） <!...deeppink; overflow: hidden; } 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 不推荐使用 3.使用after伪元素清除浮动
然后就是如何计算第一个p标签和第二个p标签移出了可视区域，可视区域不一定是屏幕宽度，可能是一个div设置了width和overflow实现的。 另外就是从左往右以及从右往左的区别。...从右往左 一开始p标签的位置是 position:absolute; left: 0,也就是在‘可视区域’的左边，从右往左就是移动负值。 如何判断移出‘可视区域’？...此时第一段文字+间隔 已经全部出现在可视区域了，接下来就要让第二段文字开始移动。第二段文字的起始位置就是‘可视区域’的宽度。...从左往右比较简单，translateX 移动位置 >= '可视区域宽度' 即为移出可视区域，然后将第一个p标签的 translateX 设置为 -自身宽度即成为了从左边出来的元素。...两个p标签间隔多少就看，第一个p标签开始移动多少距离后让第二个p标签开始移动，这个值就可以直接设定了。
/div> 11)).字符换行 normal 只在允许的断字点换行 break-word 在长单词、URL地址内部进行换行 12...style='text-wrap:none'> normal 只在允许的换行点进行换行。...浏览器只在行中没有其它有效换行点时进行换行。...e-resize 指示矩形框的边缘可被向右（东）移动 ne-resize 指示矩形框的边缘可被向上及向右移动（北/东） nw-resize...指示矩形框的边缘可被向上及向左移动（北/西） n-resize 指示矩形框的边缘可被向上（北）移动 se-resize 指示矩形框的边缘可被向下及向右移动（南/
当你想在网页的不同位置让鼠标显示不 同形状，以体现不同的功能区;当你想让你的网站体现与众不同的风格时，考虑一下在鼠标样式上下功夫吧。...：向右的箭头 ne-resize：向右上方的箭头 n-resize：向上的箭头 nw-resize：向左上方的箭头 w-resize：向左的箭关 sw-resize：向左下的箭头 s-resize：向下的箭头...cursor样式并兼容各大浏览器。...打开google,输入关键字“鼠标样式”，大家会发现有很多网站都有制作绚丽的鼠标样式，并写好了代码。...= ‘inline’; return div; } 就是将鼠标移动到某个 div 上变成手形。
硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。 目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。...'\n' 并换行 一般在富文本中返回换行符不是的标签，而且\n。...不使用正则转换的情况下，可通过下面样式实现换行。...、让div里的图片和文字同时上下居中 这里不使用flex布局的情况。...49、解决vertical-align属性不生效 在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。
不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。...当然，初始化样式有时会对SEO产生一定的影响，但鱼和熊掌不可兼得，所以在力求影响最小的情况下初始化CSS。...浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度（ width）。...26、如何解决IE6双倍 margin的Bug？ 使用 display:inline 27、如何让超出宽度的文字显示为省略号？...在同一个BFC中，两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin会发生折叠。 BFC决定元素如何对其内容进行布局，也决定与其他元素的关系和相互作用。 40、谈谈你对C规范的理解。
在移动端下，浏览器将会出现水平滚动条。 image.png 左边：出现水平滚动条，并且项目没有换行。右边：项目换行，呈两行显示 解决方法很简单。wrapper 应该在空间不足时让项目换行。...{ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } image.png 简而言之，auto-fill 将会在不扩展列宽度的情况下对它们进行排列...问题是，即使 aside 是空的，它的高度也会和 main 的高度相等。 要修复这个问题，可以让 aside 元素与其父元素的起点对齐，这样它的高度就不会扩展了。...一些图片必须在不裁剪或者不调整大小的情况下显示，并且某些平台会强制用户以特定的尺寸裁剪或上传图片。例如，Dribbble 规定上传的缩略图尺寸为 800 x 600 像素。 18....为 input 添加正确的 type 为 input 使用正确的 type。这将改善移动端的用户体验，并使用户更容易访问。
li标签来是想一个横向导航条，具体示例如下：posation [定位]posation属性在css中可以说是一个很重要的属性了，很多布局都是靠着使用该属性来对目标元素进行细致到left，right，top...relative，那么我们就以为相对它的默认位置来做更细致的定位了，我们可以看到div2相对一自己的默认位置分别向下向右便宜了20像素。...因为div1有定位属性，所以div2的位置偏移量全是相对一div1来计算了，如果我们把div1的定位属性去掉的话，div2便没有了父级定位元素，那此时，div2是针对整个body做便宜的，如图：另外最后一点...定义了项目在纵坐标的对其方式，主要用于当项目的高度不一致的时候如何显示，有以下几个值：flex-start: 顶部对齐flex-end： 顶部对齐center： 居中对齐baseline： 项目的第一行文字基线对齐...容器属性 align-content该属性主要顶一个多行效果下的对齐方式，我们知道可以使用flex-wrap来对超出部分进行换行显示，那就会出现一个flex容器里面有多行flex项目的情况，该属性就是定义这种多行情况下的各种对齐方式
③、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 如何将一个元素设置为块状元素？ ...) 层模型有三种形式： 1、绝对定位(position: absolute) 下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。...; top:50px; } 2、相对定位(position: relative) 如下代码实现相对于以前位置向下移动50px，向右移动100px...以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。...id="box1"> 相对参照元素进行定位 ?
CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下： ?...一、所有的菜单项单行显示，不换行 前端的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。...内联元素 在流式布局中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右，例如 span。...我们要的是单行显示，所以使用 span 标签就能实现我们要的效果，但是还要 不换行，这时就要利用 CSS 的 white-space 属性了，它会告诉浏览器遇到 空格 该怎么处理（这里的空格不是单纯意义上的空格...二、菜单可以左右滑动 CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何处理。
如图所示： 在ul li 的末尾处加入向右的箭头 只需在li标签上加入一个css即可： background: #FFFFFF url(../.....强制不换行*/ word-wrap：normal;/*只在允许的断字点换行（浏览器保持默认处理）*/ word-wrap: break-word;/*在长单词或URL地址内部进行换行。...stretch; justify-content:center; -webkit-justify-content: center; } 3、效果3 CSS flex 属性 让所有灵活的项目都带有相同的长度...flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。...其它情况下，该值将参与基线对齐。
浮动元素的浮动位置不能超过包含块的内边界 基本属性 none：不进行浮动（默认） left：浮动在其所在的块容器左侧 right：浮动在其所在的块容器右侧 使用 介绍其实很简单，怎样用好它就需要实践了。...浮动实验 下面通过一步步的实验，来学习并了解float 先来三个box 样式就不贴了 1 2 3 效果：先是box2向右浮动，然后box3紧跟着box2向右浮动。...class="box box3 float-right">3 效果：当下个浮动元素发现空间不够时会换行 ?...要解决这样的问题，我们就是要使用清除浮动——clear。 clear属性 指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 到这些浮动元素的下面。 none：默认值。
一、什么是移动端适配 移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。...由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。...二、移动适配方案 常见的移动适配方案有以下几种： viewport 盒模型 flex rem 2.1、viewport - 可视区 最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候...(向下、向上、向左、向右)的 flex-wrap 内容放置不下时换行方式 flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap justify-content...align-items 定义项目在交叉轴上如何对齐。
领取专属 10元无门槛券
手把手带您无忧上云
