儿子辈孙子辈链接和浮动

最新推荐文章于 2020-12-30 15:12:35 发布

weixin_46032763

最新推荐文章于 2020-12-30 15:12:35 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/weixin_46032763/article/details/106565129

版权

 <div class="box1">
        <ul>
            <li>
                <a href="#">abc</a>
            </li>
        </ul>
        <a class="box1-a" href="#">def</a>
    </div>

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }


.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    border: black 1px dashed;
    /* float: left; */
}

.box1 ul li {
    border: white 1px dotted;
    /* float: left; */
}

.box1 ul li a {
    float: left;
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    float: right;
    padding-right: 30px;
}

链接浮动为行内块元素，作为行内块元素的链接a含有行高 a浮动为行内块元素，a宽由字体宽.a padding撑开，a高由字体行高.a padding撑开，li不浮动为块没有给定宽高，又子元素浮动，所以li高只由被给border撑开，li宽为父元素（ul）宽度减去li border。ul 不浮动没有给定宽高，又子元素li同样标准流，所以ul高度由li border撑开，ul宽度为父元素（.box1）宽度减掉ul border.


.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    border: black 1px dashed;
    float: left;
}

.box1 ul li {
    border: white 1px dotted;
    /* float: left; */
}

.box1 ul li a {
    /* float: left; */
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    float: right;
    padding-right: 30px;
}

链接没有浮动所以作为内联元素宽高只由字体撑开，ul浮动作为行内块元素，高度由字体和行高及padding撑开，宽度由字体和padding撑开，注意li此时不浮动作为块元素虽然没有直接指定宽高，但父类ul作为行内块元素有了宽高，又因为在*选择器指定padding.margin都为0，所以li受ul和*选择器限制被动有了宽高链接没有浮动所以作为内联元素宽只由字体撑开，高只由字体和a padding撑开，li没有浮动作为块元素虽然没有指定高度宽度但其中含有的同样为标准流，所以li高度由a中字体行高撑开，ul浮动作为行内块元素，高度由li高度和border margin撑开，宽度由li宽和border margin撑开，又因为在*选择器指定padding.margin都为0，所以ul呈现如图所示。


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    /* float: left; */
    border: black 1px dashed;
}

.box1 ul li {
    float: left;
    border: white 1px dotted;
    /* margin: 1px; */
}

.box1 ul li a {
    /* float: left; */
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    float: right;
    padding-right: 30px;
}

在这里插入图片描述 a没浮动作为内联元素，宽和高只由字体撑开，li浮动作为行内块元素，宽由a宽 a border.a margin 撑开，li高度由a高度、a border、a margin 撑开，ul没浮动作为块元素没有被指定宽高，又子元素li为浮动元素，所以ul只由被给border组成


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    border: black 1px dashed;
    float: left;
}

.box1 ul li {
    border: white 1px dotted;
    float: left;
}

.box1 ul li a {
    /* float: left; */
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    float: right;
    padding-right: 30px;
}

ul li都浮动作为行内块元素，高由字体行高padding撑开，宽由字体padding撑开，a没有浮动作为内联元素宽高只由字体撑开 a不浮动作为内联元素，宽高只由文字撑开，li有浮动为行内块元素，又子元素不浮动，所以li宽由a宽、a border、a margin.li padding撑开，li高由a 高、a border、a margin、li padding撑开，ul浮动为行内块元素，又子元素li浮动，子父元素同为浮动元素，所以ul宽由li宽、li border、li margin、ul padding撑开。


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    border: black 1px dashed;
    float: left;
}

.box1 ul li {
    border: white 1px dotted;
    float: left;
}

.box1 ul li a {
    float: left;
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    float: right;
    padding-right: 30px;
}

ul li a都浮动作为行内块元素，宽由字体padding撑开，高由字体行高padding撑开 a浮动作为行内块元素，宽由所含字体宽.a padding.a border.撑开，高由所含字体行高撑开。li浮动为行内块元素
又子元素同样为行内块元素，所以li宽由a宽.a border.a margin.li padding撑开，li高由a高.a border.a margin.li padding撑开。ul浮动，又子元素li同样为浮动元素，所以ul宽由li宽.li border.li margin.ul padding撑开，ul 高由li 高.li border.li margin.ul padding撑开。


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    float: left;
    border: black 1px dashed;
}

.box1 ul li {
    /* float: left; */
    border: white 1px dotted;
}

.box1 ul li a {
    float: left;
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    /* float: right; */
    padding-right: 30px;
}

ul a浮动作为行内块元素，ul高度由a中字体行高padding,border和li border撑开，a浮动作为行内块元素，高度由字体行高paddding撑开，li 不浮动作为块元素由于没有指定宽高，所以只有上下两边框，又因*选择器padding margin为0，所以li 受ul *限制呈如图所示 a浮动为行内块元素，宽由字体宽.a padding撑开，a高由字体行高.a padding撑开。li不浮动为块元素，又子元素a为浮动元素，所以li没有内容被撑开，只由li border.ul 浮动作为行内块元素，又子元素li不浮动，但孙子元素a浮动，所以ul宽由a宽.a border.ul padding撑开（浮动元素ul宽度由孙子浮动元素a决定，继而决定标准流儿子元素边框宽度）li宽由a宽.a border.li left-border.li right-border相加，ul宽由li宽.li margin.ul padding撑开。


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    float: left;
    border: black 1px dashed;
}

.box1 ul li {
    /* float: left; */
    border: white 1px dotted;
    margin: 1px;
}

.box1 ul li a {
    float: left;
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    /* float: right; */
    padding-right: 30px;
}

相对上段代码，只在li 中添加 margin值，可看到图中li白色边框变化


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    /* float: left; */
    border: black 1px dashed;
}

.box1 ul li {
    float: left;
    border: white 1px dotted;
    /* margin: 1px; */
}

.box1 ul li a {
    float: left;
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    /* float: right; */
    padding-right: 30px;
}

ul 不浮动作为块元素，没有指定宽高只有边框，a li 浮动作为行内块元素，def为链接没浮动作为内联元素同一行显示 a浮动为行内块元素，宽由字体宽. a padding.撑开，高由字体行高.a padding.撑开。li浮动为行内块元素，宽由a宽.a border.a margin.li padding撑开，高由a高.a border.a margin.li padding撑开。ul不浮动为块元素，没有给定宽高，又子元素li浮动，所以ul没有被撑开只有border.


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    float: left;
    border: black 1px dashed;
}

.box1 ul li {
    float: left;
    border: white 1px dotted;
    /* margin: 1px; */
}

.box1 ul li a {
    float: left;
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    /* float: right; */
    padding-right: 30px;
}

ul li a都浮动作为行内块元素 a浮动为行内块元素，宽由字体宽.a padding撑开，高由字体行高.a padding撑开**，li浮动为行内块元素，不论子元素是否浮动，li实体内容都会被子元素撑开**。li宽由a 宽.a border.a margin.li padding撑开，li高由a高.a border.a margin.li padding撑开。ul浮动为行内块元素，ul宽由li宽.li border.li margin.ul padding撑开，ul 高由li高.li border.li margin. ul padding撑开。


* {
    padding: 0;
    margin: 0;
}

.box1 {
    margin: 10px auto;
    width: 200px;
    height: 60px;
    background-color: orange;
    line-height: 50px;
}

.box1 ul {
    /* float: left; */
    border: black 1px dashed;
}

.box1 ul li {
    /* float: left; */
    border: white 1px dotted;
    /* margin: 1px; */
}

.box1 ul li a {
    /* float: left; */
    padding: 0 10px;
    background-color: pink;
    border: green 1px solid;
}

.box1 .box1-a {
    float: right;
    padding-right: 30px;
}

ul li不浮动作为块元素，高宽在没有指定情况下由实体内容和padding撑开，li高由行高和border撑开，ul默认宽度（包含border padding）为父类.box指定宽度200px.a 不浮动作为内联元素，不含有行高，只由文字撑开, a不浮动为内联元素,a宽由字体宽.a padding撑开，a高由字体行高撑开，li不浮动为块元素，没有被指定高宽又子元素同样为标准流元素，li高由a高.a border.a margin.li padding撑开。ul不浮动为标准流且没指定高宽，又子元素同为不浮动，ul高由li高.li border.li margin.ul padding撑开。ul为块宽度没指定,使用默认父（.box1宽度减掉ul:border-left.border-right）宽度，li同样为标准流没有被指定宽度，使用默认宽度（父元素ul减掉left-border.right-border）

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box1 {
            margin: 10px auto;
            width: 200px;
            height: 60px;
            background-color: orange;
            line-height: 50px;
        }
        
        .box1 ul {
            /* float: left; */
            border: black 1px dashed;
        }
        
        .box1 ul li {
            /* float: left; */
            border: white 1px dotted;
            /* margin: 1px; */
        }
        
        .box1 ul li a {
            /* float: left; */
            padding: 0 10px;
            background-color: pink;
            border: green 1px solid;
        }
        
        .box1 .box1-a {
            /* float: right; */
            padding-right: 30px;
            background-color: skyblue;
        }
    </style>

在这里插入图片描述

在这里插入代码片<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        .box1 {
            margin: 10px auto;
            width: 200px;
            height: 60px;
            background-color: orange;
            line-height: 50px;
        }
        
        .box1 ul {
            /* float: left; */
            border: black 1px dashed;
        }
        
        .box1 ul li {
            /* float: left; */
            border: white 1px dotted;
            /* margin: 1px; */
        }
        
        .box1 ul li a {
            /* float: left; */
            padding: 0 10px;
            background-color: pink;
            border: green 1px solid;
        }
        
        .box1 .box1-a {
            float: right;
            padding-right: 30px;
            background-color: skyblue;
        }
    </style>

在这里插入图片描述

weixin_46032763

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
儿子辈孙子辈链接和浮动

<div class="box1"> <ul> <li> <a href="#">abc</a> </li> </ul> <a class="box1-a" href="#">def</a> </div>.box1 { width: 200p.
复制链接

扫一扫