1.相对定位：relative 如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或者水平位置，让这个元素“相对于”它原来的位置进行移动，这时元素依然占据原来的位置，但移动后会覆盖其他的元素...4.浮动：float 浮动的框可以左右移动，直至其碰到包含框或另一浮动框的边缘。浮动同样会使元素脱离文档流。 ? ? 上面说浮动会使元素脱离文档流，文档流中的元素会将其当做不存在，实际上并非如此。...当下一个元素存在文本内容时，文本内容会受到浮动元素的影响，会移动留出空间，实际上。创建浮动框使文本围绕图像。即浮动元素旁边的行框被缩短。 ?...使其下降位置到浮动框下边。...2.也可以对父元素添加overflow:hidden属性，该属性会自动清理包含的任何浮动元素。 缺点：可能会对原来的布局有所影响，例如增加滚动条或截断内容。 3.使用js代码动态控制。
（注2：更多内容请查看我的目录。） 1. 简介 一旦一个盒子遵循常规流或者浮动摆放好后，它有可能根据这个位置来相对位移，这被称作相对定位。...一个相对定位盒保持其常规流中的大小，包括断行和原本为其保留的空间。 2. left 和 right 对于相对定位元素而言， left 和 right 在不改变盒大小的同时使其水平位移。...如果包含块的 direction 属性值为 ltr ，则 left 值胜出而将 right 值修改为 - left 。...如果包含块的 direction 属性值为 rtl ， 则 right 值胜出而将 left 值忽略。...top 使其下移， bottom 则使其上移。 top 或 bottom 没有造成盒的分割或拉伸，因此使用值始终满足： top = - bottom 。如果二者均为 auto ，其值则均为 0 。
，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素...，其会完全脱离文档流，子元素从文档流中脱离,将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理...BFC后的特点： 1.开启BFC的元素不会被浮动元素所覆盖 2.开启BFC的元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动的子元素 可以通过一些特殊方式来开启元素的BFC： 1、设置元素的浮动...BFC 以使其可以包含浮动元素 元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题
让我们深入探讨不同类型的动画。 渐变动态文字 为了给渐变文字添加动画效果，我们将包含 animate-pulse 类。这个类会给元素应用一个脉动动画，给它一个微妙但引人注目的效果。...> 在这个例子中，我们有一个包含文本“渐变文本”的 元素。...用途：使用此动画，我们可以展示数据加载、图像加载或文件上传的处理过程。 4、双重弹力圆形 这段动画代码创建了一个包含两个圆的动画。其中一个是较大的圆形，会反弹，另一个是较小的圆形，在其下方旋转。...弹力圆圈 这段动画代码将创建一个带有两个弹跳元素的加载动画效果。最外层的元素将弹跳，而在其中，将有一个嵌套的元素也会弹跳。 此外，还有一个小点状元素会随着其他元素一起移动和弹跳。...用途：我们可以使用这个动画来展示文件或图像的处理和加载。 7. 移动的箭头 这段动画代码将在SVG元素上创建一个移动动画效果。SVG代表一个绿色箭头，动画将通过改变箭头的X位置来使其水平来回移动。
jQuery的核心思想 window提供一个全局函数jQuery jQuery函数接受一个选择器 选择器会获取这些元素，但不会返回这些元素 会返回一个对象，称为jQuery构造出来的对象 对象里有一些函数...(‘div’).has(‘p’); //选择包含p元素的div元素 (‘div’).not(’.myClass’); //选择class不等于myClass的div元素 (‘div’).filter...也提供了在DOM树上的移动方法： (‘div’).next(‘p’); //选择div元素后面的第一个p元素 (‘div’).parent(); //选择div元素的父元素 (‘div’).closest....val() 取出某个表单元素的值 选择网页中的元素需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的...五、元素的操作：移动 jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
内容可以漂浮在浮动周围。 绝对定位 Absolutr Positioning 。在绝对定位模型中，一个盒子完全从标准流中脱离（对后面的同胞元素无影响）并相对于包含块来分配一个位置。...absolute：盒的位置（还可能包括大小）由 top 、 right 、 bottom 、 left 属性指定。这些属性是相对于盒的包含块来指定移动距离的。绝对定位盒脱离文档流。...注意用户代理可能用其他方法打印不可见内容。 用户代理会将根元素上的 position 视为 static 。...IFC中是不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC。每个IFC对外表现为块级元素，与div垂直排列。...多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素。 Flexbox 下的子元素不会继承父级容器的宽度。
div>排版内容div> 排版中使用，相当于一个容器 确定逻辑部分：逻辑部分是页面上相互关联的一组元素...内联元素： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。...块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100% 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示 ...然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位 如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口... 相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)， 然后相对于以前的位置移动，移动的方向和幅度由
语法： .类选器名称{css样式代码;} 注意： 1、英文圆点开头 2、其中类选器名称可以任意起名（但不要起中文噢） 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来，如下： <span...； ②、元素的高度、宽度及顶部和底部边距不可设置； ③、元素的宽度就是它包含的文字或图片的宽度，不可改变。...元素内容与边框之间是可以设置距离的，称之为“填充”。...实际上，块状元素都会以行的形式占据位置。 ②、内联元素都会在所处的包含元素内从左到右水平分布显示。...) 层模型有三种形式： 1、绝对定位(position: absolute) 下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可 以使用dom中的方法，但不能再使用Jquery的方法。...对于jquery对象只能使用 jquery的方法，而dom对象只能使用dom的方法，如要获取第三个div>元素的内容。...(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容 6、扩展我们需要的功能 $.extend({ min:...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法
局限性： 使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端 -webkit-line-clamp...用来限制在一个块元素显示的文本的行数。...clientHeight你可以简单的理解为元素的总的高度，当然也包括overflow样式属性导致的视图中不可见内容 scrollHeight为元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条...不包括overflow样式属性导致的视图中不可见内容 2.2 代码 div id="aboutUs-content">在前端开发中，有一个非常好用的工具，Visual Studio Code，简称...div> //js代码,获取元素的clientHeight、scrollHeight，当clientHeight < scrollHeight时，发生了溢出， 方法二，使用插件 1.
相关概念 内容区（content） 用于显示文本和图像 内边距（padding） 内容区至边框的边距 边框（border） 内容区的边界 外边距（margin） 两个元素的边距之间的距离...负值:向左移动 margin-top 正值:向下移动 负值:向下移动 margin-bottom 正值:下一个兄弟元素向下移动 负值:下一个兄弟元素向上移动 margin-right 正值:下一个兄弟元素向右移动...负值:下一个兄弟元素向左移动 内容水平居中 使用margin即可. div{ margin:0 auto; } 固定写法,其中0表示上下 auto表示左右....盒子模型的类型 块级元素 可以设置宽高 内联元素 水平方向的内边距有效的 - 控制文本内容在水平方向的位置 垂直方向的内边距有效的 - 文本内容的位置没有变化，内边距向上和向下进行扩展 垂直方向的外边距无效的...解决方案: 简单的解决方案有两种: 为上一个元素设置下外边距为300px 为下一个元素设置上外边距为300px 网上的方法 可以在两个元素中间再添加一个新的元素.但不推荐.因为 为了解决间题增加无用的元素和内容
注意： 实际开发中，一个页面基本都包含了这三种布局方式 3.浮动 loat 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。...浮动元素会脱离标准流（脱标） 浮动的元素会一行内显示并且元素顶部对齐 浮动的元素会具有行内块元素的特性 浮动元素会脱离标准流（脱标） 脱离标准普通流的控制（浮） 移动到指定位置（动），（俗称脱标） 浮动的盒子不再保留原先的位置...class="box1">浮动的盒子div> div class="box2">标准流的盒子div> 浮动的元素会一行内显示并且元素顶部对齐 如果多个盒子都设置了浮动...），则以最近的已经定位的祖先元素为基准移动位置。...class="fixed"> div> 我是h的内容 我是h的内容 我是h的内容 我是h的内容
移动端主流浏览器，处理Webkit内核浏览器即可 (H5C3 支持得相当好) 1.2 常见移动端屏幕尺寸 ? 2. 视口 视口（viewport）就是浏览器显示页面内容的屏幕区域。...2.2 视觉视口 （visual viewport） 它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。 ?...-- 单位：长度、百分比、cover、contain cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（不考虑图片是否有超出部分） contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域...不同的是rem是相对于html元素的字体大小 /* 父元素 为 12px */ div { font-size: 12px; } /* 此时 p 字体大小是 60px*/ p { font-size...做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。 Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout 中。...Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。 Footer: 底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。...2.3.2、搭建整体框架 在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容： ?...需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全 局的布局文件。...首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。 ?
原因：inline-block默认的对齐方式baseline(基线对齐)。 正常情况下，line-block元素的基线是其内部最后一个行内元素基线。...在内容非空或者overflow不为visible的情况下，它的基线是其下边距。 inline-block设为overflow:hidden后，因为要遵循基线对齐，另一个元素就向下偏移了。...解决： 方案1：设置为浮动元素，浮动元素的display默认为block，就不遵循inline-block的baseline对齐规则了。...3、穿透的 div ( pointer-events: none ) 禁用 HTML 元素的 hover/focus/active 等 和鼠标行为说拜拜┏(＾0＾)┛ 使用场景： 1)防止透明元素和可点击元素重叠不能点击...4、-webkit-text-size-adjust:100%; 解决移动端微信字体被自动放大的问题 5、-webkit-tap-highlight-color:transparent; 改写iOS
--CSS：--> div,.one,.two{ font -size: 30px; } 1.2.3 关系选择器 父元素：直接包含子元素的元素叫做父元素 子元素：直接被父元素包含的元素是子元素...祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。...后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后 代元素。...：默认情况下设置margin-right不会产生任何效果 margin- bottom：下外边距，设置一个正值，其下边的元素会向下移动 margin-left：左外边距，设置-一个正值， 元素会向右移动...margin也可以设置负值，如果是负值则元素会向相反的方向移动，元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。
第1条跳过，对根元素应用外边距不在情理之中 第2条引入了一个新概念，叫“间隙”，英文名clearance，看样子与clear属性有关，实际符合直觉，是指clear属性导致元素位置移动形成的间隙，见CSS...隐含两个关键点： 具有clear属性 并且（clear属性）让元素位置发生移动了 如果满足这两个条件，就说一个元素带有间隙 注意：如果应用了clear属性，元素的实际位置不变，比如通过margin-top...’visible’的块盒（当该值已被传播到视口时除外）会为其内容建立新的块格式化上下文 在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。...行框 包含来自同一行的盒的矩形区域叫做行框 一个行框总是足够高，能够容纳它包含的所有盒。 行框是CSS对行的抽象表示，每行元素都处于同一个行框里。...（in-flow）孩子的上外边距 盒的下外边距与其下一个流内紧挨着的兄弟的上外边距 最后一个流内孩子的下外边距与其height计算值为’auto’的父元素的下外边距 盒的上外边距和下外边距，要求该盒没有建立新的块格式化上下文
在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。 值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。...div1和div2的垂直距离由大的margin决定，也就是div2的40px而不是二者之和60px。 其次，行内元素是会被折断的，当宽度受到限制的时候，它会自动移动到下一行。...，元素的尺寸和位置往往是由该元素所在的包含块决定的。...对于其它元素，除非元素使用的是绝对位置，containing block 由最近的块级祖先元素盒子的内容边界组成。...元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
，执行的回调函数 例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在div>元素中，并将加载按钮变为不可用。...元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果，如下图所示： cookie插件——cookie 使用cookie插件后，可以很方便地通过cookie对象保存、...tabs({options}); selector参数为选项卡整体外围元素，该元素包含选项卡标题与内容，options参数为tabs()方法的配置对象，通过该对象还能以ajax方式加载选项卡的内容。...例如，将三个元素与工具提示插件相绑定，当把鼠标移动在元素内容时，以动画效果弹出对应的提示图片，移出时，图片自动隐藏，如下图所示： 元素中，鼠标在列表项元素移动时，可以自定义其获取焦点(focus)时的背景颜色，即设置表项元素选中时的背景色.
其具有以下特性：完整的基础CSS插件；丰富的预定义样式表；基于jQuery的js插件集；非常灵活的响应式栅格系统，而且崇尚移动先行的思想。...随着bootstrap的火爆，出现了很多优秀插件，比如Font Awesome字体。 Bootstrap官网地址，demo和文档非常丰富。 其下载后的源码结构为： ?...Tip： BootStrap包含aria-xxx开头的属性，被称为辅助属性，用于支持有阅读障碍的人士。...使用行在水平方向上创建一组列 具体内容放在列中，只有列可以作为行的直接子元素 接下来看一下.container样式的源码，可以看出其核心就是.container和@media的设置 .container...突然有个思路，就是最外围的.container是根据@media设置像素的，其中的内容均是使用的相对大小。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
