6.块属性 子集默认宽度为父级的宽度

最新推荐文章于 2021-12-09 10:55:53 发布
最新推荐文章于 2021-12-09 10:55:53 发布
阅读量751 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css 文章标签： 块属性子集默认宽度为父级的宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hh279768876/article/details/51970599
本文探讨了块级元素如何默认继承父级元素的宽度，并通过一个具体的HTML示例来展示这一特性。文章强调了理解这一行为对于网页布局设计的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

块属性 子集默认宽度为父级的宽度

       子集默认宽度为父级的宽度 挺重要的知识点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>asdasd</title>
    <style type="text/css">
    ul li{        
        background: #ccc;        
        line-height: 60px;
        height: 60px;
        margin-top:10px;     
    }
    div{
        width: 100px;
    }
    </style>
</head>
<body>
    <div>
        <P>asdasdadasdadasdasdadasdadad</P>
        <UL>
            <li>按时大大大啊实打实大师的</li>
        </UL>
    </div>    
</body>
</html>

div 宽度100px；

p 宽度也默认了100px；


Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
前端【1】---HTML入门学习
最新发布
qq_73704268的博客
09-25 1298
HTML 是网页结构的基础，定义了内容和结构HTML 标签可以互相嵌套，形成父子关系，最大父标签为，子标签可以嵌套在
如果父级视觉上没有包含子元素，absolute相对于父级定位
wenb1bai的博客
04-13 523
红色箭头处是父级部分，蓝色框处是子元素部分 父元素代码 .header{ position:relative; height:44px; background: #333; text-align:center; color:#fff; z-index:10; } .header-ti...
html div父集子集,怎么让父极元素的宽度自动设为所有子集的宽度之和呢？或者怎么保证子集不换行？不考虑用js!...
weixin_42314860的博客
06-19 280
慕仙森要让父元素的宽度是所有子元素的宽度之和，那就是说跟据内容自适应，设置父元素的display: inline-block;;要让子元素不换行，在父元素上设置white-space: nowrap Document     div {      white-space: nowrap;      di...
easyUI的dialog父窗口大小
杨明的博客
11-28 1689
var _fileWin = '#fileWin'; function openFileByRecIdView(recId) { var _url_record_files_view = _path + 'AmsArchiveFiles/showView/0/1/' + _jntable + '/'; $(_fileWin).dialog({ width:window.innerWidth
默认div宽度和高度
qq_41700374的博客
02-12 1万+
默认情况下任何元素标签都是有宽度css样式的。 一、认识div默认宽度 div默认的宽度多少？ 答案：默认宽度为100%，父级宽度多少它宽度就多少。 比如一个盒子宽度设置550px,里面一个div默认未设置宽度和未设置float，未设置padding等，在没有设置任何CSS属性情况下这个div宽度就是等于父级宽度550px。 比如一个html布局中，body默认宽度是100%...
css3 计算属性 calc()
abc20140818的博客
03-29 393
.elm { width: calc(expression); } 注意事项： 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式...
Android 面试题总结之Android 基础（六）
fuchenxuan blog
05-30 1万+
Android 面试题总结之Android 基础（六） 在上一章节Android 面试题总结之Android 基础ListView（五） 主要是ListView的优化，原理以及一些基本问题。 在阅读过程中有任何问题，请及时联系。如需转载请注明 fuchenxuan de Blog 本章系《Android 之美 从0到1 – 高手之路》Android基础将会总结了Android
Tree Table 树形表格
qq_60976312的博客
12-09 2927
vue-table-with-tree-grid
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
子元素与父元素的width继承
初夏的博客
03-07 1万+
1，同为内联元素我们知道，内联元素不可以设置width和height，所以其宽度默认都是auto，由内容撑起来。2，同为块级元素子元素默认width是100%，所以会继承父元素的宽度；但是不会继承其高度，可以通过内容把高度撑起来；另外，给子元素添加padding和margin时，可以看到内容的宽度时父元素的宽度减去子元素的margin和padding值；3，父亲是块元素，孩子是内联元素一般的内联元...
css 块级元素 宽度默认继承父类元素宽度
weixin_34413065的博客
01-04 3839
2019独角兽企业重金招聘Python工程师标准>>> ...
nvue爬坑总结
panerapan的博客
07-22 3665
nvue爬坑总结 最近公司项目要做直播，使用了uniapp里面的live-pusher和live-player标签，但live-pusher标签在app是不支持的，除非在nvue页面里面使用，拉流直接使用video标签播放，以下是我的nvue爬坑总结： 文本内容自动宽度 给父级盒子增加align-items: center，这样既能一行显示，又可以自动文本宽度 文本内容一行超出省略号显示 text-overflow: ellipsis; lines:1; 文本内容一行超出换行 min-heig
css设置元素继承父元素宽度_css 子块级元素会继承父块级元素的宽高吗？
weixin_39981093的博客
12-22 1514
展开全部css 子块级元e68a84e8a2ad62616964757a686964616f31333365633864素不会继承父块级元素的宽高。在width属性的值设置成auto的情况下，块级元素内容区的宽度取决于左右外边距是否明确设置了值。如果左右外边距值都是auto，则左右外边距的值都会被重置为默认的值0；如果左右外边距中只有一个值是auto，则该值被重置为0，另一个值有效；如果左右外边距...
vue 树状点击子集获取父级的父级id
05-01
在vue中实现树状点击子集获取父级的父级id，可以通过以下步骤实现： 1. 定义一个树形数据，在该数据中包含每个节点的id、父级id、子节点等信息。 2. 前端页面通过v-for循环该树形数据，并通过v-if判断当前节点是否为父节点。 3. 定义一个方法getFatherId，该方法需要传入当前节点的id。 4. 在该方法中，通过循环遍历这个树形数据，查找当前节点的父节点的父节点，直到找到最上层的父节点并返回其id信息。 代码示例： ```html <template> <div> <ul> <li v-for="item in treeData" v-if="item.parentId === null"> {{ item.name }} <ul> <li v-for="child in item.children" @click="getFatherId(child.id)"> {{ child.name }} </li> </ul> </li> </ul> </div> </template> ``` ```js export default { data() { return { treeData: [{id: 1, name: '一级分类1', parentId: null, children: [ {id: 2, name: '二级分类1-1', parentId: 1, children: [ {id: 3, name: '三级分类1-1-1', parentId: 2}, {id: 4, name: '三级分类1-1-2', parentId: 2} ] } ] }, {id: 5, name: '一级分类2', parentId: null, children: [ {id: 6, name: '二级分类2-1', parentId: 5, children: [ {id: 7, name: '三级分类2-1-1', parentId: 6}, {id: 8, name: '三级分类2-1-2', parentId: 6} ] } ] } ] } }, methods: { getFatherId(id) { let parent = this.treeData.find(item => item.children.find(c => c.id === id)); if (parent) { let grandParent = this.treeData.find(item => item.children.find(c => c.id === parent.id)); if (grandParent) { console.log('grandParent id:', grandParent.id); return grandParent.id; } } } } } ``` 在以上代码中，treeData是一个嵌套的树形数据，通过v-for循环遍历该数据获取每个节点的信息，在getFatherId方法中通过循环遍历该数据查找当前节点的父节点的父节点，直到找到最上层的父节点并返回其id信息。最后在前端页面中绑定该方法，当用户点击节点时，通过调用该方法获取该节点所在的最上层节点的id信息。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值