我的li在较大的屏幕上向左浮动，但当它在超小屏幕上时，li会向下浮动。我怎样才能把我的li浮动也放在小屏幕上呢？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

css-浮动

如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样...box2的高，box3在向下向左移动的时候，遇到了box1的外边沿，就停止移动了。...当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的，行盒会缩短并给浮动元素让位。 ? 写一下我理解的行盒的概念。...比如下图的img和span1构成一个行盒，剩下2个span和button构成另外一个行盒。当页面面积发生改变，每行的内容变化，行盒的内容也会变化。...所有元素从上到下依次排列，普通元素可以把父元素的内容撑开。但浮动元素脱离了普通流，元素不是一个个从上到下排列的，浮动元素也不能把父元素撑开，因为父元素压根就看不见浮动元素。 demo链接描述 ?

1.9K3 0

02_Bootstrap基础组件02

如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。...在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。 4.10 强调类这些强调类，通过颜色来表示强调。一般是给 p 元素加这些类名，会显示不同的颜色。把下面的代码放在任何地方都可以正常使用。为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。...class="info">info 6.4 响应式表格将 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上...当屏幕大于 768px 宽度时，水平滚动条消失。

8100 0

您找到你想要的搜索结果了吗？

是的

没有找到

第122天：移动端开发常见事件和流式布局

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。...touchend：当手指离开屏幕时触发。 touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。...2、响应式开发的前景现在的移动设备屏幕越来越大。越来越多的设计师也采用了这种设计。在新建站的一些网站现在普遍采用的响应式开发。那么在前端开发当中也是一项必备的技能。...3、响应式开发的原理 CSS3中的Media Query（媒介查询），通过查询screen的宽度来指定某个宽度区间的网页布局。超小屏幕：768px以下（移动设备）。... col-xx-x类：第一个连接符后边写屏幕尺寸，有xs超小屏幕手机(<768px)、

4.7K4 0

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。...三、浮动浮动在CSS布局中饱受诟病，因为控制起来比较麻烦，但如果掌握了他的特性使用起来还是不难的，在CSS中使用float指定浮动属性值，该属性的值指出了对象是否及如何浮动，浮动的框可以向左或向右移动...d)、float在绝对定位和display为none时不生效当display为node时元素会隐藏，所以float意义不大；当position为absolute绝对定位时元素也将从标准流中脱离，元素使用偏移量移动...f)、浮动元素不能溢出包含块浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。...当div1从float时从标准流中脱离开了，div2在标准流中，可以形象的认为在div2这个队列前没有元素了所以div2要向前靠，脱离标准流的元素的z方向排列时比标准流中的元素排列要靠前一些，但div2

4.7K8 0

BootStrap应用开发学习入门

.col-xs- 超小屏幕手机 (<768px) .col-sm- 小屏幕平板 (≥768px) .col-md- 中等屏幕桌面显示器 (≥992px) .col-lg- 大屏幕大桌面显示器 (...， .form-horizontal #水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同 .form-group #把标签和控件放在其中是获取最佳间距所必需的。....btn-xs #这会让按钮看起来特别小。 .btn-block #这会创建块级的按钮，会横跨父元素的全部宽度。...#按钮状态 .active #按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）按钮元素 / 锚元素 .disable #禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。...从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，以超小屏幕（xs）为例，可用的 .visible-*-* 类是

20.7K2 0

BootStrap应用开发学习入门

.col-xs- 超小屏幕手机 (<768px) .col-sm- 小屏幕平板 (≥768px) .col-md- 中等屏幕桌面显示器 (≥992px) .col-lg- 大屏幕大桌面显示器 (...， .form-horizontal #水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同 .form-group #把标签和控件放在其中是获取最佳间距所必需的。....btn-xs #这会让按钮看起来特别小。 .btn-block #这会创建块级的按钮，会横跨父元素的全部宽度。...#按钮状态 .active #按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）按钮元素 / 锚元素 .disable #禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。...从 v3.2.0 版本起，形如 .visible-- 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，以超小屏幕（xs）为例，可用的 .visible-*-* 类是

17.5K3 0

第213天：12个HTML和CSS必须知道的重点难点问题

right：元素向右浮动。 none：默认值。元素不浮动，并会显示在其在文本中出现的位置。浮动的特性：浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。...块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上 clear属性 clear属性：确保当前元素的左右两侧不会有浮动元素。...BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值 BFC 的区域不会与浮动盒子重叠（清除浮动原理）。计算 BFC 的高度时，浮动元素也参与计算。...超小屏幕(移动设备) 768px 以下小屏设备 768px-992px 中等屏幕 992px-1200px 宽屏设备 1200px 以上由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

2.9K2 0

原生JS实现移动端滑动反弹

1、touchStart当手指触碰到屏幕的时候触发 2、touchmove当手指在屏幕上不断移动的时候触发 3、touchend当手指离开屏幕的时候触发 Touch 事件触发的 Event 对象 //...首次滑动手指触摸到列表向下滑动的时候，列表应该跟着向下滑动，当手指离开屏幕的时候，列表应该停在滑动的位置。这里就会用到上面准备阶段的知识点了，不明白的可以参考上面的概念。...限制滑动区间到上面一步，我们已经可以实现列表的滑动了，但是也存在一个问题，就是向上或者向下的时候没有限制，上下可以无限的滑动，甚至再用点力，就看不到列表了。...我们设定一个反弹区间，就是当 centerY的值大于或者小于某个值的时候，让它触发反弹。设定向上反弹值向上的值比较简单，设置成“ 0”。为什么是“ 0”呢？...向下的值其实跟之前求滑动区间差不多，我们参考下图，当列表向上滑动，滑动到列表底部的时候，只要此时再向上滑动，就让它向下反弹。

12.7K2 0

CSS

再看下面的例子：我在style里面写了两个#p1并且设置了不同的css样式，还有一个10.css文件，文件里面也写了一个#p1，对应一个其他的css样式，最后页面渲染的时候是选择的最后一个link那个文件中的...这种参数的示例：　　　　在抽屉上还可以找到这个图片：　　　　然后：　　　　你就会看到它：好多个小图片组成的　　　　那么有同学会疑问，为什么要将这些小图片做成一个大图呢？...因为其实页面在加载到img标签之后，会单独的往后端发请求，来请求这个图，如果小图很多的话，页面要发好多个请求，那么页面加载的就慢，所以放到一个大图上，每个用这个大图上面的小图的地方，img里面的url都指向这个一个图片的...right top; 　　　　使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。...fixed（固定）不管页面怎么动，都在整个屏幕的某个位置　　　　　　fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动

2.3K1 0

CSS笔记(14)

浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子....当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到. 4.固定定位固定定位是元素固定于浏览器可视区的位置.主要使用场景:可以在浏览器页面滚动元素时元素的位置不会改变....有时候定位不一定是按照浏览器可视区的四条边来定位的,有时候会靠着版心的一侧定位.比如下图中的小箭头图标小算法: 让固定定位的盒子left:50%,走到浏览器可视区(也可以看做版心)的一半位置....案例接下来,我们做一个淘宝轮播图的案例,但是图片的切换效果还要等到学了JS才能实现,我们现在只能先做一个简略版(一张图片上左右两侧有小箭头,可以切换图片,下边有一条小的导航栏,也可以切换图片)...且后端需要强大的逻辑能力,我是肯定没有的...真的好害怕啊...但还是加油继续学吧...昨天又学了下Python,突然感觉忘记了好多东西,啥也不会了,我觉得我还是集中精力学习前端吧,赶紧把视频看完!

9351 0

移动端开发小技巧

例子图： ②按模块细分个人感觉，按模块等细分之后，代码的可读性能够明显地提高，方便维护，而且引入页面的文件个数也减少了，还可以提高性能呢。...百分比的优势在于，同一个百分比的真实尺寸会跟随屏幕大小变化。举个例子，像这种：红色框那里，假设现在的要求是一行4个板块，适应任何屏幕。...100%，并且向左浮动。...并且，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。什么意思呢，简单来说就是这些li的对齐基线的默认方式是以最后一行的文字对齐的。...你只要一谈起，就会想念起每一个人来，我只知道我很想念我所谈到的每一个人。

1K3 0

CSS入门指南-4：页面布局

inline img 是一个标准的行内元素。你可以把两个标签写在两行，但这并不影响图片再浏览器中的显示效果，它们会并列出现在一行上。而且标签直接的空白（标记中的两个 ?...流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能够更好地适应大屏幕，但同时也意味着放弃对页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。...弹性布局与流动布局类似，在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，让人产生一种所有东西都变大了的感觉。...如此一来，只要为内部div设定一次样式，就可以把让所有内容元素与栏边界保持一致的距离。而且，将来再需要调整时也会很方便。任何新增内容元素的宽度都由这个内部div决定。...你可以用百分比做布局，但是这需要更多的工作。如果我们上边的例子中 nav 用百分比宽度做布局，当窗口宽度很窄时 nav 的内容会以一种不太友好的方式被包裹起来。

3.2K1 0

CSS float浮动的深入研究、详解及拓展(二)

或许我们并没有过多的深思，把一些实际上不是浮动该干的事情当作“这必须用浮动来实现”。...又是我反复提到的，浮动破坏了inline box，也就是破坏了高度，所以这里含有浮动属性的li元素实际上是没有高度的。所以呢，要是后面还有同样的li标签的话，就会水平对齐排列的。...您要是在IE下看到ul有高度，认为这是Firefox等浏览器有问题就错了，您把ul的width属性去掉，看看，会发现IE下ul高度也为0，这是IE的layout作祟。...塌陷原因是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。...所以呢，并不是只要有浮动元素就会坍塌，就要清除的，CSS水平高低衡量的标准之一就是改用什么样式就用什么样式，不多用也不少用。下面就来讲讲如何清除浮动，zxx:写到这儿，一下子轻松了。

8000 0

WEB入门.七 CSS布局模型

在显示网页内容时，元素按照从左至右、自上而下的顺序动态分布，如需改变它在网页中的位置，只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。...实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管把元素的宽度设置多窄。...当元素被定义为浮动布局时，在垂直方向上它与未被定义为浮动时的位置一样；但在水平方向上，它将最大程度地靠近包含元素边缘。 3....它们的前边没有险滩，后边没有荒漠，因此虽然幽僻却谈不上什么气势；它们大多很有一些年代了，但始终比较滋润的生活方式并没有让它们保留下多少废墟和遗迹，因此也听不出多少历史的浩叹；它们当然有过升沉荣辱，但实在也未曾摆出过太堂皇的场面...小青看在眼里，忙说："多谢！请问客官尊姓大名。"那小书生道："我叫许仙，就住在这断桥边。"白素贞和小青也赶忙作了自我介绍。

7691 0

浮动清楚浮动及position的用法

关于浮动的两个特点：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。...三种取值 left：向左浮动 right：向右浮动 none：默认值，不浮动参考示例 clear clear属性规定元素的哪一侧不允许其他浮动元素。值描述 left 在左侧不允许浮动元素。...right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。...对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

2.8K4 0

CSS 入门指南（二）：盒模型 & 浮动弹性布局 & CSS 特性

，子级的添加上外边距会产生塌陷问题现象：导致父级一起向下移动【案例】 .one{ width: 300px; height: 300px...浮动布局 – float 2.1 基本概念作用：让块元素水平排列属性名：float left：左对齐 right: 右对齐特点：浮动后的盒子顶对齐具备行内块特点当父级宽度不够时，浮动的子级会换行...并且小的向左浮动，大的不浮动，会咋样呢，来看看吧如下：原因：就是因为只给 one 加了浮动，浮动之后的盒子会脱离标准流的控制，不再占用标准流位置，因此在其看来 one 根本不存在，此时 two 就是第一个盒子...水平方向，侧轴默认在垂直方向属性名：flex-direction 属性值效果 row 水平方向，从左向右（默认） column 垂直方向，从上向下 row-reverse 水平方向，从右向左 column-reverse...style> 文章 3, 优先级优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

8471 0

前端硬核面试专题之 CSS 55 问

sticky ：设置了sticky 的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed...解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素名，从而提高了网页的制作效率。...BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。计算 BFC 的高度时，浮动元素也会参与计算。...因为我的 main 里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。但如果 sidebar 在 main 之后，那上面的一切都会化为泡影。 ?...这样，当我们给右侧的元素单独创建一个 BFC 时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。 ---- 问：浮动的原理和工作方式，会产生什么影响呢，要怎么处理？

2.8K2 0

CSS样式

，第二个值左右） Content(内容) - 盒子的内容，显示文本和图像弹性盒模型弹性盒子是 CSS3 的一种新的布局模式 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式...center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。...值描述 left 元素向左浮动 right 元素向右浮动浮动的原理：浮动以后使元素脱离了文档流浮动只有左右浮动，没有上下浮动脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。...此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象当所有元素同时浮动的时候，会变成水平摆放，向左或者向右当容器不足以横向摆放内容时候，会在下一行摆放清除浮动...浮动副作用：当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动浮动元素会造成父元素高度塌陷后续元素会受到影响 <div class=

2.8K3 0

WEB入门.七 CSS布局模型

在显示网页内容时，元素按照从左至右、自上而下的顺序动态分布，如需改变它在网页中的位置，只能通过修改网页结构中元素排列的先后顺序和分布位置来实现。...实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管把元素的宽度设置多窄。...当元素被定义为浮动布局时，在垂直方向上它与未被定义为浮动时的位置一样；但在水平方向上，它将最大程度地靠近包含元素边缘。 3....当浏览器大小变化的时候，框架也会随之等比例缩放。如图 3.1.24 3.4.6 嵌套分割窗口嵌套分割窗口就是在一个页面中，既有水平分割的框架，又有垂直分割的框架。...小青看在眼里，忙说："多谢！请问客官尊姓大名。"那小书生道："我叫许仙，就住在这断桥边。"白素贞和小青也赶忙作了自我介绍。

5671 0

CSS概要

当有多条声明时，中间可以英文分号“;”分隔最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号 CSS注释 - /*注释语句*/ CSS的某些样式是具有继承性的。...文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些 css样式的前后顺序来决定，处于最后面的css样式会被应用。...流动布局模型具有2个比较典型的特征: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。...在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。浮动模型 float 浮动模型，浮动(Float)如果想让两个块状元素并排显示，需要用到浮动模型。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响

1.9K5 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭