css中永远不要写width：100%

已于 2022-01-22 19:46:57 修改
阅读量1.2k 收藏 1
点赞数 1
文章标签： css html webview
于 2022-01-22 19:45:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57541715/article/details/122640228
版权

css中不要写width：100% div元素宽度默认是auto，而不是100%，（auto指得是能有多宽占多宽，100%是最大是100%）

如图中第一个加上了100%。他会比下面的元素多出2px,(这里多出2px涉及到了‘行盒’)也就是说下边的每个div宽度都是100%-2px。由于样式中写了100%，它的样式就是100%，接着再加上2px,所以比下面的在多2px。

inline-block宽度，默认会和inline的一样，由他们包住的内容所撑开的，有多少内容宽就是多少，但是不同的是 设置上又有div的特点！可以设置宽！

Uaenali
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS控制DIV永远固定在页面底部不随滚动而滚动
01-19
复制代码代码如下: <style type=”text/css”> html,body { width:100%; height:100%; margin:0px; padding:0px; overflow:hidden; } #Main { position:absolute; bottom:0px; left:0px; width:100%; height:100%; overflow:auto; z-index:1; } #ToolBar { position:absolute; bottom:0px; right:16px; width:100%; height:100px; tex
css 相对浏览器动态居中永远保持在屏幕正中
12-01
使用如下css可以使div永远保持在屏幕正中 复制代码代码如下: <style type=”text/css”> .log { position:absolute; /*绝对定位*/ top:50%; /*距顶部50%*/ left:50%; margin:-100px 0 0 -150px; /*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.(感觉在绕口令)*/ width:300px; /*宽为400,那么margin-top为-200px*/ height:200px; /*高为200那么margin-left为-1
CSS快速入门基础知识（七）
A4465643的博客
09-02 154
1.自适应 宽度自适应： width: 100%; 块级元素：宽度默认100% 。 min-width: 最小宽度 max-width 最大宽度 高度自适应： 1. height: auto ; 2. height不写 height:100% ; 继承父元素的高度。（注意，父元素必须要有高度，如果没有，由内容撑开。） min-height: 最小高度 max-height: 最大高度 2.高度塌陷 高度塌陷的原因： 父元素没有添加高度或者height
html inline-block 铺满,浅谈inline-block_html/css_WEB-ITnose
weixin_30974905的博客
06-09 1349
一、区分block，inline，inline-block1、blockblock元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。2、inlineinline元素不会独占一行，多个相邻的行内元素会排...
CSS学习笔记八——宽高自适应
热门推荐
weixin_43328954的博客
02-04 1万+
宽高自适应 一、宽度自适应二、高度自适应三、浮动元素的高度自适应 一、宽度自适应 不写宽度或者写 width：auto就表示宽度自适应，可用于横栏或导航栏。 与 width：100%不同，设为100%已经固定了宽度，宽度始终不变，而宽度自适应是会自动更改宽度，前者在设置 padding 时横向出现滚动条，后者在设置 padding 时会自动压缩宽度大小。 有 min-width、max-width 属性，max-width 用于图片上可避免拉大屏幕时图片失真。 二、高度自适应
如何去掉自适应手机页面的设置图片的width:100%
weixin_30347335的博客
03-17 177
如何去掉自适应手机页面的设置图片的width:100% 在特定class下指定width:auto;即可 posted on 2016-03-17 09:03 TXXT 阅读(...) 评论(...) 编辑 收藏 var allowComments=true,cb...
没有对div设置width，却显示width为100%，这是为什么？
weixin_43923808的博客
09-09 738
就可以了！
width: 100%和width: auto有什么区别
weixin_47450807的博客
04-08 847
一、写在前面 块级元素有宽度width， 行内元素没有宽度width，所以只能在块级元素上验证两者区别 设置当前盒模型是IE盒模型 二、具体例子 2.1、设置children元素margin: 0 此时设置width：100%和width: auto是没有什么区别的。 2.2、设置children元素margin: 0 30px 如果设置children元素margin: 0 30px时，width: 100%的元素宽度不变， 位置向左偏移30px；width: auto的元素宽度变化，宽度 = 父
display: inline-block的多个元素width相加100%，结果元素错位
ListenToSennTyou的博客
11-10 1602
两个或多个display为inline-block的元素，如果以下几种情况：1. 两个元素之间本来没有空格或者间距，而展示出来的页面两个元素之间却有空格； 2. 两个或多个元素相加本来是100%的，却出现了错位，最后一个元素被挤到下一行去了； 那么，原因是：display为inline-block的元素之间（源代码上），如果之间有空格，那么渲染出来的页面元素时间也会有空格，也就是间距。多个元素之间之
breakpointjs:将 CSS 断点导入 JS 的微小同步功能，无需重复自己
07-01
技术在您的CSS您只需添加一个类，您可以在其中根据当前断点更改width ： . temp-responsivejs {width : 0 ;}@media screen and ( max-width : 319 px ) {. temp-responsivejs { width : 1 px }}@media screen and ( ...
css入门笔记
05-15
2.width% height% 3.cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大；直到背景图片碰到某个边缘位置 5.背景图片固定 作用：将普片固定在网页在某个位置，一直...
js-transition-auto:将元素的widthheight设置为与它在auto处的计算值相同，以便CSS widthheight过渡有效
05-21
此函数将元素的宽度/高度设置为与auto其计算值相同，以便CSS宽度/高度过渡有效（在CSS中添加过渡规则）。安装Browserify： npm install --save @digitaledgeit/transition-auto成分 component install ...
css-垂直居中的几种写法
xxuxioxx的博客
05-27 328
垂直居中的几种写法
CSS 媒体查询 响应式开发
生产队的驴
05-27 295
媒体查询（Media Queries）是CSS3的技术，可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式规则。媒体查询可以使网页在不同设备上呈现不同的样式，以实现响应式设计。
CSS实现一个雨滴滑落效果
云加速
05-28 444
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
了解CSS中的link和@import引入CSS的区别
祈澈菇凉
05-28 133
【代码】了解CSS中的link和@import引入CSS的区别。
css 渐变色边框
随风潜入夜，不白头
05-28 296
具体用法，拷贝到你的html中，在浏览器上慢慢调试即可！
css简单介绍
最新发布
taoxirun的博客
05-29 302
css指的是层叠样式(Cascadingstyle sheets)，是用来给HTML标签添加样式的语言。他可以设置HTML页面中 文字大小，颜色，对齐方式及元素的 宽高， 位置 等样式。CSS规则:由两个主要的部分构成:选择器，以及一条或多条声明，声明写在{中选择器:通常是您需要改变样式的 HTML元素，选择器是css和html两者的纽带。在head></head>标签对中写<stvle></style》标签对，然后在里边书写cSS语句。在css中，CSS注释写在/*....*/中。/*颜色:红色:*/
css 写一个水波纹动画，并永远循环播放
03-14
可以使用CSS3的伪元素和动画属性来实现水波纹动画，代码如下： ```css .wave { position: relative; overflow: hidden;...将上述代码应用到HTML元素中，即可实现水波纹动画，并且永远循环播放。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值