CSS和CSS3（背景，图片，浮动等）

2021-10-19 16:00:32 阅读：414 来源： 互联网

标签：CSS3 浮动 50px height padding width background border CSS

CSS背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background</title>
    <style>
        div{
            width: 100%;
            height: 1500px;
            border: 10px solid red;
            background: skyblue url(img/bg-little.png) no-repeat top right fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css3背景

background-size指定了背景图片是否扩大缩小。contain一边紧贴边缘拉伸，最终高或者宽有留白。 cover按照一遍拉伸，很可能内容区域超出。而设置100% 100%是高，宽都能将内容显示出来。具体还是跟图片有关。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Size</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
div {
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid transparent;
    /*background: color position size repeat origin clip attachment image;*/
    /*background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');*/
    background: #abcdef url('bg1.jpg') no-repeat center center;
    background-size: 50%;
    background-origin: content-box;
    background-clip: content-box;
    background-attachment: fixed;
}
span.div_border {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 400px;
    padding: 50px;
    border: 50px solid rgba(255, 0, 0, .25);
}
span.div_padding {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 800px;
    height: 400px;
    border: 50px solid rgba(255, 255, 0, .25);
}
</style>
</head>
<body>
<div></div>
<span class="div_border"></span>
<span class="div_padding"></span>
</body>
</html>

浮动

就是高度丢失了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <style type="text/css">
   * {
           margin:0;
           padding:0;
   }
       .container {
           border:1px solid blue;
           margin:100px;
           /*overflow: hidden;*/
           /*zoom: 1;*/

       }
       .block1 {
           width:50px;
           height:50px;
           background-color: red;
           float: left;
       }
       .block2 {
           width:50px;
           height:50px;
           background-color: black;
           float: left;
       }
       .block3 {
           width:50px;
           height:50px;
           background-color: blue;
           float: left;
       }
   </style>
</head>
<body>
    <div class="container">
        <div class="block1"><span>1</span></div>
        <div class="block2"><span>22</span></div>
        <div class="block3"><span>333</span></div>
    </div>
</body>
</html

还有一个现象，叫文字环绕，将图片左浮动，后面的文字就会环绕图片周围，这是因为浮动元素脱离文档流，但还是在文本流当中。

标签：CSS3,浮动,50px,height,padding,width,background,border,CSS
来源： https://www.cnblogs.com/liqianlong/p/15425046.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS和CSS3（背景，图片，浮动等）