CSS小记

最新推荐文章于 2020-03-18 15:00:51 发布

孤༼Evil ༽止辞

最新推荐文章于 2020-03-18 15:00:51 发布

阅读量145

点赞数

分类专栏： html 文章标签： CSS小记

本文链接：https://blog.csdn.net/qq_45649374/article/details/102885386

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，我们还是先来了解下一些今天所讲到底css属性。
CSS 布局 :overflow 、 CSS float(浮动)

第一、CSS overflow 属性用于控制内容溢出元素框时显示的方式。,如：

<head>
    <meta charset="UTF-8">
    <style>
    #overflowtest 
        {color: honeydew;
         background: green;
         width: 400px;
         height: 100px;
         padding: 10px;
         border: 1px solid #ccc;
         overflow: scroll;
        }
    </style>
</head>
<body>
    <h2>练习</h2>
    <div id="overflowtest">
    <p>assfdsvsd</p>
    <p>sdgf</p>
    <p>dfbgdfbg</p>
    <p>sdfgsgs</p>
    <p>sgdfgsdfg</p>
    </div>
</body>

运行结果：
在这里插入图片描述
当然，我们要设置显示框的大小和背景等都可以在 head 里的 style 里面设置

第二、float（浮动,通俗说就是用于将某个东西的位置改变），往往是用于图像，但它在布局时一样非常有用。如：

<head>
    <meta charset="UTF-8">
    <style>
        img 
        {
	        float:right;
        }
    </style>
</head>
<body>
    <img src="../博客资料/a1.gif"/>
    <img src="../博客资料/a2.png"/>
    <img src="../博客资料/a3.gif"/>
</body>

注意，这里的图像路径最好写相对路径
运行结果：
在这里插入图片描述
同样的，我们也可以在head 里的 style 里面设置图片的相关性质
并且也可以以命名的方式来方便我们控制

<style>
        img 
        {
	        float:right;
        }
        .a1
        {
            float:left;
            width:110px;
            height:90px;
            margin:5px;
        }
        .a2
        {
            float:left;
            width:60px;
            height:45px;
            margin:5px;
        }
    </style>
</head>
<body>
    <img class="a1" src="../博客资料/a1.gif"/>
    <img class="a2" src="../博客资料/a2.png"/>
    <img class="a1" src="../博客资料/a3.gif"/>
</body>
</html>

结果如：
在这里插入图片描述
That’s the end of,Thanks!

孤༼Evil ༽止辞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS小记

首先，我们还是先来了解下一些今天所讲到底css属性。CSS 布局 :overflow 、 CSS float(浮动)第一、CSS overflow 属性用于控制内容溢出元素框时显示的方式。,如：<head> <meta charset="UTF-8"> <style> #overflowtest {color: ...
复制链接

扫一扫