CSS 适应页面宽度（防止页面宽度溢出或左右扩张）

最新推荐文章于 2024-04-29 11:52:31 发布
最新推荐文章于 2024-04-29 11:52:31 发布
阅读量3.3k 收藏 2
点赞数 2
分类专栏： CSS 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z772330927/article/details/106158163
版权

CSS 适应页面宽度

在制作页面时我们会遇到页面宽度溢出或者向左右扩张的问题，其中一个愿意是宽度没有设置，还有一种原因是用了padding导致页面宽度发生变化，在不同的分辨率中显示的样式可能是不一样的。在这里给大家推荐一个CSS的样式calc。按照你所需的宽度，减去你左右扩张的宽度。这个样式可以防止你的宽度溢出，让页面按照这个宽度自适应。

    width: calc(100% - 40px);  
    padding: 0 20px；
今天代码敲了吗
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
博客园定制CSS代码 设置页面宽度
ltimaginea的博客
11-01 1512
博客园定制CSS代码，设置页面宽度 下面CSS代码中， width 项的值控制页面宽度 #home { //opacity: 1.0; margin: 0 auto; width: 75%; min-width: 750px; //background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; //box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } ...
css width 宽度溢出现象
weixin_30516243的博客
03-05 244
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="learn web, first day"> <meta name="description" content...
CSS3 - 让元素设定的宽度和高度不被内边距撑开（box-sizing属性说明）
热门推荐
qq_23614619的博客
07-04 1万+
http://www.hangge.com/blog/cache/detail_1098.html有时我们会给页面的元素（比如div）设置个固定的高度或宽度。但如果给这个div又设置了内边距或者边框的话，那么这个div就会被撑大。也就是其实际的尺寸变成了：设置的宽高尺寸+内边距+边框。这样就有可能对我们的布局造成影响，如果不想让内边距和边框影响到我们设置的固定尺寸，可以借助 box-sizing ...
CSS 控制溢出行为
最新发布
weixin_44565776的博客
04-29 841
CSS控制溢出行为是为了解决当盒子设置了一个高度或者宽度，文本内容可能会溢出盒子问题。
最佳网页宽度及其实现
weixin_30780221的博客
12-01 303
1. 设计网页的时候，确定宽度是一件很苦恼的事。 以minifun.cn为例，根据Google Analytics的统计，半年多以来，访问者的屏幕分辨率一共有81种。最小的分辨率是122x160，这应该是手机；最大的分辨率是3360x1050，天知道是什么设备。 一张网页要在大小如此悬殊的各种屏幕上，都呈现令人满意的效果，难度可想而知。举例来说，一张400px宽的图片，在800px的...
网页中页面的最佳宽度CSS实现
JohnZhongJob的博客
12-19 1930
    在屏幕分辨率越来越多的情况下，我们的精力有限，如果不能根据不同的分辨率实现不同的样式表。那么，采用弹性布局，实现网页宽度自适应是一个不错的选择。     在做弹性布局时，最重要的也就是body标签或者最外层的div区域的设置。 margin: 10px auto; 这样可以保证网页在任何分辨率下都会居中。 min-width: 780px; max-width: 1260px;...
css_防止溢出_边框/元素水平居中/(响应式设计:媒体查询)适配不同尺寸的不同布局提高网页可读性
xuchaoxin1375的博客
01-21 963
文章目录layouts and positionreferences布局和留白防止溢出block元素和inline元素块级元素内联元素flex控制box-sizing溢出控制min-\*属性overflow控制元素水平居中 layouts and position references Normal Flow - Learn web development | MDN (mozilla.org) Flexbox - Learn web development | MDN (mozilla.org) Orde
禁止页面放大缩小&&禁止页面左右晃动
weixin_40030173的博客
04-16 426
禁止页面放大缩小： <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0"> 禁止页面左右晃动： html, body {height:100%;overflow:auto;margin: 0;} html{overflow-y:scroll;}
CSS中使用expression完美设置页面最小宽度(兼容ie)
09-25
否则，页面宽度将自动适应内容。 值得注意的是，`expression`是Internet Explorer的一个非标准特性，并不被其他浏览器支持。因此，使用`expression`可能会导致跨浏览器兼容性问题。在现代浏览器中，应当优先使用CSS...
页面宽度自适应 jquery动态设置css样式
09-25
求点击父页面的一个按钮以后，整个父页面向左移动，左侧则用来显示图片，结果dialog和原页面不在一个层上，dialog直接弹出的，并不在div里边，下面有个不错的解决方法，大家可以参考下
CSS控制图片大小-适应宽度
10-30
以前一直用js控制图片的大小，有的时候我们的广告也会被变得很小，所以一般都是直接在内容区控制，图片大小，这个方法用css 的expression方法
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度，需要的朋友可以参考下
CSS 实现div宽度根据内容自适应
09-24
2. **使用Grid布局**：在CSS Grid布局中，可以通过`auto-fit`或`auto-fill`配合`fr`单位来创建自适应宽度的列。同样，对于老版本浏览器，需要提供回退方案。 3. **百分比宽度**：如果知道内容的最大宽度，可以设置...
用CSS让元素宽度自适应内部元素的方法
10-08 2830
用CSS让元素宽度自适应内部元素的方法 window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElem...
css-溢出属性
qq_62779007的博客
03-16 158
<!doctype html><html><head><meta charset="utf-8"><title>溢出属性</title><style>div{width:200px;height: 200px;background-color: yellow;/*white-space: nowrap;/*overflow: visible;*//*显示溢出*//*overflow: hidden;*//*溢出隐藏，文本裁切
CSS小结：一行内文本超出指定宽度溢出的处理
web前端基础入门教程
03-03 3691
看到标题你一定很容易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像还有很多人不记得遇到这样的情况该如何处理。 　 　　一般的文字截断（适用于内联与块）： .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-spac...
设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap
CNyuCHengrui的博客
03-07 1186
30秒讲完 通常需要设置文本溢出的地方使用这三句css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 并且设置一个宽度以后可以获得超过宽度的文本进行…省略 但是有时候会出现页面宽度变窄以后不能够使得元素自适应缩小 页面结构打乱 替代 可以将white-space: nowrap;text-overflow;删除 使用-webkit-line-clamp: 1; display: -webkit-box; -webkit-b
css文本省略和自适应宽度
m0_73075579的博客
04-27 228
【代码】css文本省略和自适应宽度。
html怎么防止左边溢出,css防止溢出 css+div 溢出隐藏 无效
weixin_39778400的博客
06-03 495
div+css 为什么div内的div总会溢出，怎么解决明明设定的宽度是一样的，为什么会里面的div会出来呢，CSS布局HTML小编今天和大家分享解决办法除了宽以外你还设置了什么？ 你把宽度设置好以后，再加一个overflow试试： width: 300px; overflow: hidden;/*div里添加的东西再多，高度或宽度也不变。width:200px; white-space:nowr...
css缩小页面宽度字体溢出div怎么解决
06-02
1. 使用 CSS 的 `overflow` 属性来处理字体溢出问题，将其设置为 `hidden` 或 `scroll`，这样当内容溢出时，可以自动显示滚动条或者隐藏溢出的内容，不影响页面布局。 ```css div { overflow: hidden; /* 或者 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值