web开发 css3 display float

最新推荐文章于 2022-06-02 16:27:57 发布

Sermiscry

最新推荐文章于 2022-06-02 16:27:57 发布

阅读量103

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/Sermisry/article/details/119683118

版权

web 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

display
float

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style type="text/css">
        /*把span的实现变为块级元素*/
        span {
            display: block;
        }
        a.first {
            display: block;
        }
        /*把p元素改成行内元素*/
        p {
            display: contents;
        }
        /*请将无序列表横向显示*/
        #nav li {
            display: inline;
        }
    </style>
</head>
<body>
    <span>四是四，十是十</span>
    <span>四不是十，十不是四</span>
    <span>四十是四十，十四是十四</span>
    <span>四十不是十四，十四不是四十</span><br><br>
    <a href="https://www.baidu.com/" target="_blank" class="first">百度</a>
    <a href="https://www.bilibili.com/" target="_blank" class="first">哔哩哔哩</a>
    <a href="https://blog.csdn.net/Sermisry" target="_blank" class="class">csdn</a><br><br>
    <p>四是四，十是十</p>
    <p>四不是十，十不是四</p>
    <p>四十是四十，十四是十四</p>
    <p>四十不是十四，十四不是四十</p>
    <br><br>
    
    <ul id="nav">
        <li><a href="https://www.douyu.com" target="_blank">斗鱼</a></li>
        <li><a href="https://www.zhihu.com" target="_blank">知乎</a></li>
        <li><a href="https://www.huya.com" target="_blank">虎牙</li>
    </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style type="text/css">
        div {
            border: 2px solid lightblue;
            margin: 2px;
        }
        p {
            border: 2px dotted pink;
        }
        #block p {
            width: 6em;
            display: block;
        }
        #inline p {
            width: 6em;
            display: inline;
        }
        #inline-block p {
            width: 6em;
            display: inline-block;
        }
        #nav a {
            /*修改代码，使宽度和高度生效*/
            display: inline-block;
            width: 200px;
            height: 50px;
            color: white;
            background: #429296;
            text-align: center;
            line-height: 50px;
        }
        #none {
            display: none;
        }
        #hidden {
            visibility: hidden;
        }
        span {
            display: list-item;
            margin-left: 1em;
        }
    </style>
</head>
<body>
    <div id="block">Lorem ipsum dolor sit amet consectetur adipisicing elit. <p>行内元素左右没有相邻</p>Culpa veritatis recusandae sequi a consequatur temporibus! Asperiores, facere voluptate? Aliquam.</div>
    <div id="inline">Lorem ipsum dolor sit amet consectetur adipisicing elit. <p>块级元素不能设置width</p>Culpa veritatis recusandae sequi a consequatur temporibus! Asperiores, facere voluptate? Aliquam.</div>
    <div id="inline-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. <p>行内块是可以换行的，但是左右相邻</p>Culpa veritatis recusandae sequi a consequatur temporibus! Asperiores, facere voluptate? Aliquam.</div><br><br>

    <div id="nav">
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <a href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>
        <a href="https://blog.csdn.net/Sermisry" target="_blank">博客</a>
    </div>

    <p>有我！</p>
    <p id="hidden">我即存在又不存在嘿嘿</p>
    <p>还有我！</p>
    <p id="none">但是没有我0.0</p>

    <span>让span也能表现出</span>
    <span>用的是display的list-item</span>
    <span>li的样式</span>
</body>
</html>

float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float属性</title>
    <style type="text/css">
        img {
            width: 200px;
            float: right;
        }

        div.pink {
            background-color: pink;
            width: 100px;
            height: 100px;
        }
        div.lightblue {
            background-color: lightblue;
            width: 200px;
            height: 100px;
            float: left;
        }
        div.cornsilk {
            background-color: cornsilk;
            width: 300px;
            height: 100px;
        }
        div.seagreen {
            background-color: seagreen;
            width: 400px;
            height: 100px;
        }

        /*float也可以改变元素的显示样式，比如把span变成块级元素*/
        span {
            width: 250px;
            height: 250px;
            background-color: pink;
            border: 5px solid lightblue;
            float: left;
            font-size: 10px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <img src="corn.jpg" alt="cornfeast">
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum doloribus cum nemo optio official</div>
    <br><br>
    <div class="pink"></div>
    <div class="lightblue"></div>
    <div class="cornsilk"></div>
    <div class="seagreen"></div>
    <br><br>
    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, itaque natus, dolore eum dolorum libero rem quidem similique omnis sequi quia eius asperiores animi, dignissimos soluta non quas? Dolorum, autem!</span>
</body>
</html>

布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右两列布局</title>
    <style type="text/css">
        /*利用float实现两列布局*/
        div.left {
            background-color: pink;
            width: 50%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }
        div.right {
            background-color: lightblue;
            width: 50%;
            float: right;
            padding: 20px;
            box-sizing: border-box;
        }
        /*利用float实现三列布局*/
        div.left2 {
            background-color: pink;
            width: 33.3%;
            float: left;
            padding: 20px;
            box-sizing: border-box;
        }
        div.middle2 {
            background-color: cornsilk;
            width: 33.3%;
            float: left;
            /*这里如果是right那么就会把中间和右边的换过来*/
            padding: 20px;
            box-sizing: border-box;
        }
        div.right2 {
            background-color: lightblue;
            width: 33.3%;
            float: right;
            padding: 20px;
            box-sizing: border-box;
        }
        footer {
            clear: left;
        }
    </style>
</head>
<body>
    <h1>两列布局演示</h1>
    <div class="left">
        <h2>这里是左侧</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem a culpa beatae saepe distinctio tempore facilis,voluptates fugiat neque maiores qui eligendi pariatur. Ea, sunt debitis. Officia necessitatibus earumconsectetur!</p>
    </div>
    <div class="right">
        <h2>这里是右侧</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cum enim est ab. Accusantium, ipsum sitexcepturi aperiam repellendus iusto nostrum modi dignissimos beatae eaque laboriosam, a porro ad cum?</p>
    </div><br><br>

    <h1>三列布局演示</h1>
    <div class="left2">
        <h2>这里是左侧</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem a culpa beatae saepe distinctio tempore facilis,voluptates fugiat neque maiores qui eligendi pariatur. Ea, sunt debitis. Officia necessitatibus earumconsectetur!</p>
    </div>
    <div class="middle2">
        <h2>这里是中间</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet aliquid natus, ducimus repudiandae maxime veritatis ipsum est quo repellat commodi nihil laborum placeat earum laboriosam neque iste voluptatibus inventore recusandae?it's so long.it's so long.如果这里的文本太长，那么下面的footer就会到右侧，这不河里，所以要用到clear，让左侧的浮动清除</p>
    </div>
    <div class="right2">
        <h2>这里是右侧</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore cum enim est ab. Accusantium, ipsum sitexcepturi aperiam repellendus iusto nostrum modi dignissimos beatae eaque laboriosam, a porro ad cum?</p>
    </div>
    <footer>Copyright @ 2021 Something.com.cn All rights reserved.</footer>
</body>
</html>

Sermiscry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web开发 css3 display float

文章目录displaydisplay<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>display</title> <style type="text/css"> /*把span的实现变为块级元素*/ span { display: block;
复制链接

扫一扫