Css

最新推荐文章于 2021-07-29 04:06:59 发布

0&1 * 1

最新推荐文章于 2021-07-29 04:06:59 发布

阅读量83

点赞数

分类专栏： Web 文章标签： Css

本文链接：https://blog.csdn.net/weixin_44820920/article/details/100568472

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、盒子模型

1）组成
在这里插入图片描述

div .text 是div标签下后代元素中class = ‘text’的对象
div.text  是class = ‘text’的div标签
<div class='text'>我是div1</div>
<div class='tar'>我是div2
      <div class='text'>我是div3</div>
</div>

2）边框
在这里插入图片描述

3）边距

二、Reset css

1）组成

在这里插入图片描述

三、浮动

1）组成
在这里插入图片描述
2）使用

3）问题及方案

<title>浮动</title>
    <style>
    ul{
       list-style:none;
    }
    li{
       float:left;
        margin-left: 20px;

    }
    /*发生浮动时*/
     .clearfix::after{
         display: block;
         clear: both;
         content: '';
     }   
    </style>
</head>
<body>
<ul>
    <li>首页</li>
    <li>在线课堂</li>
    <li>搜索</li>
    <li>设置</li>
</ul>
    <div class="a1 clearfix">
        <div class="b1"></div>
    </div>
</body>

四、定位

1）组成
在这里插入图片描述
2）属性

固定定位： div{
            width:200px;
            height:200px;
            background: aqua;
            /*position: fixed;      固定定位*/
            left: 60px;
            bottom: 30px;
        }
    </style>
</head>
<body>
     <div>
         你不错跑
     </div>
     
     相对定位  div{
            width:200px;
            height:200px;
            background: aqua;
            position: relative;
                  /*相对定位*!*!*/
            left: 120px;
           
        }
        
        绝对定位

0&1 * 1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css

一、盒子模型1）组成div .text 是div标签下后代元素中class = ‘text’的对象div.text 是class = ‘text’的div标签<div class='text'>我是div1</div><div class='tar'>我是div2 <div class='text'>我是div3</d...
复制链接

扫一扫