CSS基础知识总结之背景、尺寸、显示、盒子、定位

最新推荐文章于 2022-03-16 11:13:14 发布

微风不燥

最新推荐文章于 2022-03-16 11:13:14 发布

阅读量302

点赞数

分类专栏：基础知识总结

本文链接：https://blog.csdn.net/spb111/article/details/75091845

版权

基础知识总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

背景

（1）background-color：背景颜色

（2）background-image:url("图片路径");

（3）background-repeat:图片复制属性，几个常用取值

①repeat，重复，默认

②no-repeat，不重复

③repeat-x，横轴重复

④repeat-y，纵轴重复

⑤round，循环

（4）background-position：位置

①top，顶部

②bottom，底部

③right，右边

④left，左边

⑤center，中心

background-color: #a1ff54;
background-image: url("");
background-repeat:repeat-x;

background-position: center;

当然可以将一组属性封装到一个属性background中，表达更加简洁。有书写顺序：background-color background-image，background-repeat background-position

background: gainsboro url("") no-repeat right top;

尺寸

（1）height:高度

（2）width:宽度

div{
    width:200px;
    height:200px;
    background-color:#3695ff;
}

（3）max-height最大高度

（4）max-width最大宽度

（5）min-height最小高度

（6）min-width最小宽度

显示

（1）隐藏元素的方法

①visibility：hidden，仅仅隐藏内容，该元素所占的位置依然存在。

②dispaly：none，不仅隐藏内容，而且隐藏一切格式。

（2）display可以设置元素的显示模式。

①inline，将块级元素以内联元素的形式显示，通俗的讲就是在一行显示，此时width和height属性无效，其空间取决于元素的内容。

②Inline-block，将块级元素以内联的形式来显示，同是兼具块级元素的某些特征，比如可以使用width和height属性设置所占位置大小。

③block,可以将内联元素以块级元素的形式来显示，自己理解的就是可以换行。

边距

（1）margin外边距

①margin：**px；表示上下左右外边距都是**px

margin: 30px

margin-top

margin-right

margin-bottom

margin-left

③一起设置四个方向的外边距，顺序分别是上右下左。

margin: 10px 20px 30px 40px;

（2）padding内边距，同margin

（3）border边框

顺序是border-width:10px;宽度

 border-style 边框的样式

    ①solid实线

    ②dotted虚线

    ③double双实线

    ④groove 凹槽。就像相框一样，看着像立体的。

 border-color: red;

border: 10px dashed red;

（4）outline轮廓

outline: 5px dotted gold;

定位

定位方式有：

static（静态的），默认。无定位，元素正场出现在流中。

div{
    width:200px;
    height:200px;
    background-color:#a1ff54;
    position:static;
}

<body>
<div></div>静态定位的演示

<.body>

fixed（固定的），

relative（相对的），

<style type="text/css">
   #div1{
        width: 200px;
        height: 200px;
        background-color: #a1ff54;
        position:fixed;
    }
    #div2{
        width: 200px;
        height: 200px;
        top: 200px;
        background-color: red;
       position:relative;
    }
</style>

<styletype="text/css">
    #div1{
        width: 200px;
        height: 200px;
        background-color: #a1ff54;
        position:fixed;
    }
    #div2{
        width: 200px;
        height: 200px;
        left: 30px;
        top:50px;
        background-color: red;
        position:relative;
    }
</style>

从结果可以看出，fixed定位会将元素从流中摘出来，定位取决去left和top

重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是

#div1{
    width:200px;
    height:200px;
    background-color:#a1ff54;
    position:fixed;
    z-index:1;
}
#div2{
    width:200px;
    height:200px;
    left:30px;
    top:50px;
    background-color:rgb(256,0,0);
    position:relative;

<style type="text/css">
    #div1{
         width:200px;
         height:200px;
         background-color:#a1ff54;
     }
    #div2{
        width:200px;
        height:200px;
        left:20px;
        top:30px;
        background-color:rgb(256,0,0);
        position:relative;
    }
    #div3{
        width:100px;
        height:100px;
        background:blue;
    }
</style>