css居中设置使网页左右抖动的解决办法

最新推荐文章于 2024-04-22 17:35:13 发布
最新推荐文章于 2024-04-22 17:35:13 发布
阅读量1.2k 收藏 1
点赞数
文章标签： css xhtml scroll 浏览器 encoding html

css居中设置使网页左右抖动的解决办法

css中关于margin:0 auto;使网页左右抖动的解决办法
DIV+CSS网页布局的页面中 左右抖动的解决方案。
最近在设计网站时就老有这个问题,设计好会员中心,内容为margin:0 auto;居中时,打开网页的一瞬间网页会向左摆一下,进了另一个页面时,网页又会向右摆一下,然后又向左摆回来,如果经常在页面中跳转,会看得头晕,原因是网页的高度不够时,右边的滚动条是不会出来的,这里网页的宽要加上滚动条的宽,margin:0 auto;时,网页的是居中的,但网页的高能够让浏览器出现滚动条时,这里的网页的宽当然就要减去滚动条的宽了,这时网页就会向左摆一点

不然道上面说的明不明白?应该有好多人都有过这种情况,解决方法很简单,就是在样式表(CSS)中让右滚动条一直出现就行了,网页高不够浏览器出现右滚动条时,也让它出来,代码是:

html{overflow-y:scroll;}

很简单,不过我写网页时的头部是这样子的:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">

不然道其它情况会怎样,没试过。


原文地址:http://www.mianfeimoban.com/jianzhang_cyruanjian/cssjc/20120319/10867.html 欢迎转载!


lose_ever
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页加载时左右跳动原因分析及解决方法
09-22
3. **CSS居中对齐**：使用`margin: 0 auto`可以使一个块级元素在父容器中水平居中。但当页面宽度发生变化时，如果这个元素的宽度固定，那么它的位置也会相应改变，引发视觉上的晃动。 解决这个问题的方法有多种，...
css左右晃动效果
qq_38935512的博客
04-13 3725
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
html 晃动效果,css3特效（上下左右晃动效果）
weixin_35407400的博客
06-03 799
Document.animated {animation-duration: 2s; /*动画时间*/animation-fill-mode: both; /*播放后的状态*/}.animated {animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/}.animated {animation-duration: 2s; /*...
js+css实现抖动效果
YGangCSDN的博客
07-05 591
前端提交时的抖动效果
css 文字左右抖动效果
最新发布
tengyuxin的博客
04-22 448
【代码】css 文字左右抖动效果。
滚动条造成页面抖动问题
Start2019
11-11 4127
总结： 若用到 margin:0 auto; 使页面居中，若部分页面出现滚动条，滚动条默认有 20px，怎么造成页面抖动； 解决办法：参考 1. html{overflow:scoll;} 让页面一直显示滚动条。 overflow 的几个属性值： 2. padding-left: calc(100vw - 100%); 自动计算滚动条的宽度，并让主体左边距离页面该（滚动条的）宽度。 比如：我...
手机网页（WAP网页）底部悬浮广告代码带抖动/关闭效果
03-11
总的来说，"手机网页（WAP网页）底部悬浮广告代码带抖动/关闭效果"是一种利用JavaScript和CSS技术优化移动网页广告展示的实践。它融合了动态视觉效果和用户交互，旨在提升广告的吸引力，同时尊重用户的浏览体验。...
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
在网页设计中，水平居中布局是常见的网页布局方式，通过设置主体元素的宽度和`margin: 0 auto`来实现。然而，这种方式在遇到滚动条时会出现一个问题，即页面内容在滚动条出现和消失时发生跳动，影响用户体验。这是...
CSS3实现跳动的动画效果
12-02
在CSS3中，我们可以利用各种新的属性和方法来创建丰富的动画效果。本示例中，我们将探讨如何通过CSS3实现一个跳动的动画效果。这个效果由两部分组成：元素的阴影部分（`::before`伪元素）和元素本身（`::after`伪...
jQuery模拟窗口抖动效果
10-20
具体来说，使用了.center类来水平居中按钮，使用.absoute定位和top属性来对图片进行绝对定位，使其在页面上的特定位置显示。 然后，核心代码部分使用了jQuery监听按钮点击事件。当用户点击按钮时，将触发动画效果。...
CSS3实现抖动
08-11
shake shake-hard shake-slow shake-little shake-horizontal shake.vertical shake-rotate shake-opacity shake-crazy
布局抖动的元凶及如何避免
Jackshijin的博客
02-26 1356
改变一个元素的特性或者修改其内容有时不仅影响该元素，有时候会导致级联的变化，可能影响该元素的子节点、兄弟节点、父节点的改变，所以每次进行修改时，浏览器都必须重新计算这些改变的影响，但是重新计算布局的代价十分昂贵，浏览器必须尽可能少或者延缓布局的工作。但是如果我们编写的代码不能让浏览器有足够的时间和空间来进行优化，强制浏览器执行大量重新计算，就会造成布局抖动，这是造成布局抖动的元凶。因为我们进行一系...
CSS实现input输入框左右摇动效果
qq_62875177的博客
01-02 641
当输入框中的内容出现不为数字的字符时候，输入框会左右震动，字体并变为红色，直到输入内容符合格式即为数字时候内容变为黑色。要求纯CSS实现。
CSS - 左右摇曳摆动动画（无限循环）
王佳斌
12-28 8359
效果图 代码 @-webkit-keyframes demo{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } /* 使用
【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因
qq_25677349的博客
07-07 1446
margin:0 auto；在不同场景下生效条件如下：        块级元素：给定要居中的块级元素的宽度。        行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）        行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）注：        ①...
CSS小技巧网页居中报表页面左右抖动解决方法
04-08 3473
CSS小技巧网页居中报表页面左右抖动解决方法
未勾选用户协议、隐私政策实现抖动效果
Top丶富 的博客
07-13 1337
实现功能大概需要三个步骤： 一、 用什么实现：其实实现起来很简单，用补间动画就行了。 二、实现的步骤： 1.如果res目录下没有anim文件，就新建一个文件夹； 2.在anim文件夹下创建一个名字叫translate_checkbox_shake.xml的文件，抖动动画 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android"
css3动画之左右摇摆
热门推荐
super_ce的博客
01-09 3万+
@-webkit-keyframes zy{   10% {     transform: rotate(15deg);   }   20% {     transform: rotate(-10deg);   }   30% {     transform: rotate(5deg);   }   40% {     transform: rotate(-5deg);  
css左右摆动动画
yu2015java的博客
11-26 1万+
/*活动摇摆动画*/ @-webkit-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值