div的width:auto和width:100%的区别

最新推荐文章于 2022-10-18 16:16:29 发布
最新推荐文章于 2022-10-18 16:16:29 发布
阅读量395 收藏
点赞数
分类专栏： 学习前端之javascript笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sukla/article/details/80867716
版权

1、div默认的盒子模型是display:content-box

2、当设置width:100%的时候，就是指content内容区域的宽度是100%，只要设置了margin、border、padding的话，div最后显示出来会超出父容器宽度

3、当设置width:auto的时候，会根据盒子模型的外边距margin、边框border、内边距padding的值来调整内容content的宽度，使得div在显示上占据一整行并且没有超出父容器宽度

Sukla
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
12-14
前言 本文介绍的是利用CSS3的新属性box-sizing，解决div宽度设置width:100%后再设置padding或margin超出父元素的问题，有需要的朋友们可以参考借鉴。 语法 box-sizing: content-box|border-box|inherit; 值一、content-box  这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 值二、border-box  为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高
div width=auto 与 width = 100%
dly667的博客
11-06 414
块级元素（div、p等）的初始宽度是auto。auto使块级元素占满父节点在水平方向上的所有可用空间。 具体公式如下：[html] view plain copy ‘margin-left'+border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right' = width of
div 的width:auto到底代表什么意思
GUANTINA的博客
08-01 7866
width：auto意义
div width=auto 与 width = 100% 区别
xiongzhengxiang的专栏
07-16 2591
块级元素（div、p等）的初始宽度是auto。auto使块级元素占满父节点在水平方向上的所有可用空间。 具体公式如下： ‘margin-left'+border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right' = width of containing block请参考
设置div的width: 100%显示时，问题来了
少油少盐不要辣
04-14 1332
要设置div 100%显示，必须设置其上一级div的宽度或高度，否则无效。
解析width:100%;与width:auto;的区别
01-21
<div> <p>1111 </div> div{ ...如果是p的width:100%，则说明p的width会得到980px就已经充满div区域，然后自己又有padding，所以会超出div。 而当width:auto时它是总体宽度（包括width，margin,padd
DIV背景图片在Firefox下不显示通过overflow:auto可解决
12-13
在一个大的div里有2个横列(DIV)，并且在大的div里加入背景图片。可是改好后，在Firefox下却无法正确显示背景图片。代码是这样的： 1.HTML(样本)： 复制代码代码如下: <div id=”footer”> <div id=”footer_left”>...
div使用margin:0px auto不居中的原因分析及解决
12-07
复制代码代码如下: <div id=”cnbruce”>margin: 0 auto 看看内容居中否</div> 如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“<body>”声明文本居中，即 复制代码代码如下: <style&gt...
css中position:fixed实现div居中上下左右居中
01-21
margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中，那么把 left:0; 或者 right:0; 即可 下面附一个...
css中position:fixed实现div在窗口上下左右居中
01-21
margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可 如果只需要上下居中，那么把 left:0; 或者 right:0; 即可 下面附一...
CSS中DIV设置 width：auto 或者不设置与 width：100%区别
weixin_46499257的博客
10-18 1127
CSS中DIV设置 width：auto 或者不设置与 width：100%区别
关于div宽度和高度的100%设定的问题
weixin_45806273的博客
11-23 2783
设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明白这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数...
div宽度设置width:百分百后，设置padding或margin超过父元素解决方案
yunduanaoligei的博客
11-26 588
前言 今天分享下”div宽度设置width:百分百后，设置padding或margin超过父元素解决方案“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。文中详细介绍的是利用CSS3的新属性box-sizing，处理div总宽设置width:100%后再设置padding或margin超过父属性的难题，有须要的朋友们能够参照借鉴。 语法 1 ​​box-sizing: content-box|border-box|in
npm 插件 制作 发布 更新
Sukla的博客
12-28 1915
1，插件功能 是一个消息弹窗 效果如图   2，创建package 自己新建一个目录 view-toast-m-m 在 view-toast-m-m 目录下执行  npm init 会在目录下生成 package.json 文件 3，编写插件 新建目录 view-toast-m-m /src/lib  view-toast-m-m /src/lib 目录下创建 vue-toa
单页应用中刷新时保持登录
Sukla的博客
12-15 1683
1，登录之后将用户信息存到 cookies 中 在页面每次加载时候 向后端校验 cookies 中的用户信息是否有效 如果失效 就将登录状态变为登出
EXT 使用百度地图
Sukla的博客
12-20 1370
1，效果如图 2，index.html 中引入 3，view /** * Created by Sukla on 2017/12/19. */ Ext.define('app.view.common.baiduMap.BaiduMapView', { extend: 'Ext.panel.Panel', alias: 'widget.baidu-map',
变量声明提前，函数声明提前
Sukla的博客
07-01 1231
1、var声明的变量提到当前script块的头部,赋值留在原位置，如果在赋值之前访问变量，返回undefinedconsole.log('第一次调用：'+sukla) var sukla='sukla' console.log('第二次调用：'+sukla) VM238:1 第一次调用：undefined VM238:3 第二次调用：sukla undefined2、function fn(){}...
var定义的变量不能用delete删除
Sukla的博客
07-01 1067
1、delete只能删除不是通过var定义的变量var deletefalse='删除不了' undefined deletetrue='能删除' "能删除" delete deletefalse false delete deletetrue true deletefalse "删除不了" deletetrue VM540:1 Uncaught ReferenceError: deletetru...
输完密码后回车登录
Sukla的博客
12-15 1040
1，给密码输入框添加键盘事件 onkeydown 在匹配到 enter 键的时候 执行登录方法
<div style="width: 100%; height: 10%;"> <div style="background-color: blue; width: 10%; margin: 0 auto;">xx</div> <div style="background-color: black; width: 10%; float: right;">dd</div> <div style="background-color: gray; width: 10%; float: right; margin-right: 20px;">ss</div> </div> 把这段代码写成less样式
最新发布
07-11
width: 100%; height: 10%; .child-blue { background-color: blue; width: 10%; margin: 0 auto; } .child-black { background-color: black; width: 10%; float: right; } .child-gray { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值