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

本文探讨了块级元素如何默认继承父级元素的宽度,并通过一个具体的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;


在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、付费专栏及课程。

余额充值