css整理

最新推荐文章于 2024-04-28 09:25:11 发布

lizhiqiang987

最新推荐文章于 2024-04-28 09:25:11 发布

阅读量179

点赞数

文章标签：盒子模型 css定位 css选择器 css背景尺寸相关属性 css

本文链接：https://blog.csdn.net/lizhiqiang987/article/details/75090229

版权

2.3背景相关属性

body{
    background-color:#37ff68;
    background-image: url("1.jpg");
    background-repeat:no-repeat;
    background-position: right bottom;
}

backgroup-color：背景色

backgroup-image：设定背景图片，需要设置图片的url地址

backgroup-repeat：图片的复制选项

repeat：在水平和垂直两个方向上进行复制

no-repeat：不复制

repeat-x：在水平方向上复制

repeat-y：在垂直方向上复制

也可以将这一组属性值封装到一个属性background中，表达更加简洁，书写顺序是：

背景色 backgroup-color

背景图片 backgroup-image

重复方式 backgroup-repeat

位置 backgroud-position

background: greenu url("1.jpg") no-repeat right;

2.4尺寸相关属性

heigh：高度

width：宽度

div{
    height: 200px;
    width: 200px;
    background-color: red;
}

max-width：最大宽度 min-width：最小宽度

max-height：最大高度 min-height：最小高度

2.5显示相关属性

隐藏元素的方式：

（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在

（2）display：none，不仅隐藏内容，且不占位置

display可以设置元素的显示模式

inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素内容。

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

li{
    display:inline-block;
    width:100px;
    background-color: blueviolet;
}
span{
    display: block;
    background-color: red;
}

也可以将内联元素以块级元素形式来显示，即display：block

2.6盒子模型

margin：外边距

margin-top、margin-right、margin-bottom、margin-left

使用方式：

（1）margin：30px，表示上下左右外边距都为30px

（2）margin-left：30px；单独设置上下左右外边距

（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px、20px、30px、40px

padding：内边距

也有上下左右边距，和margin类似，不在阐述。

border：边框

/*border: 5px dashed blue;*/
border-width: 10px;
border-style: dashed;
border-color: blue;

border-width 边框宽度

border-style 边框线条类型

border-color 边框颜色

Word中设置边框的操作

也可以使用更优化的书写方式

outline：轮廓线，用法同border

2.7定位

定位方式有：static、fixed、relative、absolute

static静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性影响。

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

fixed

#div1{
    width: 200px;
    height: 200px;
    background-color: red;
}
#div2{
    width: 200px;
    height: 200px;
    background-color:blue;
}

效果显示为：

#div1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: fixed;
    left: 30px;
    top: 20px;
}
#div2{
    width: 200px;
    height: 200px;
    background-color:blue;
}

效果显示为

从结果可以看出：fix定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top。

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

relative相对定位

<head>
    <meta http-equiv="Content-Type" content="textml; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color:rgba(255,0,0,1);
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: relative;
            top: 20px;
            left: 30px;
        }
        #div3{
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
     <div id="div2"></div>
     <div id="div3"></div>
</body>
</html>

从结果可以看出，相对定位是从原有位置进行位移，但并不影响后续位置。

absolute绝对定位

结果为：

从结果可以看出：绝对定位的元素从流中被“摘”出来，依靠left、top属性进行定位。

与fixed类似，但是参照物不同

fixed参照根元素（html）

absolute参照父容器

3.选择器

所谓选择器，指的是选择施加样式目标的方式。

3.1元素选择器

用标签作为选择器，选中所有相应的元素

<head>
    <meta http-equiv="Content-Type" content="textml; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            font-size: 32px;
            color: red;
        }
        p{
            font-size: 36px;
            color: aqua;
        }
    </style>
</head>
<body>
    <div>元素选择器</div>
    <p>元素选择器</p>
    <p>元素选择器</p>
</body>

3.2id选择器

顾名思义，是根据id来选择元素，其样式定义形式为：

#id/name{

.......}

#div1{ width: 200px;
            height: 200px;
            background-color: red;
        }#div2{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
    </style>
</head>
<body>
     <div id="div1"></div>
     <div id="div2"></div>
</body>

显示效果：

3.3类型选择器

根据class属性来选择元素，其样式定义形式为：

.class/name{

........

}

显示结果为：

从结果可以看出：.odd{......}定义的样式会施加到所有class=“odd”的元素上，比如上例中的第一个和第三个div，当然也包括class=“odd”的<p>

3.4属性选择器

根据某个属性的特征（比如有无、值等）来选择

(1)根据有无属性来选择

<head>
    <meta http-equiv="Content-Type" content="textml; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        [title]{
            width: 100px;
            height: 50px;
            background-color: red;
            border: 1px solid green;
        }
    </style>
</head>
<body>
      <div title="div1">1</div>
      <div title="div2">2</div>
      <div>3</div>
      <div title="a div">4</div>
      <div title="div a">5</div>
</body>

运行结果：

从结果上可以看出，所有具有title属性的元素都应用了红色背景色的样式。

（2）根据属性的值来选择

运行结果：

从运行结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2

~=：选中属性值包含指定完整单词的元素，类似word中的全字匹配

显示效果：

title^=‘div’：选中的title属性值以‘div’开头的元素

[title^='div']

显示效果：

title$=‘div’：选中的title属性值以‘div’结尾的元素

[title$='div']

显示效果：

title*=‘div’：选中title属性值包含‘div’的元素

[title*='div']

显示效果：

lizhiqiang987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css整理

2.3背景相关属性body{ background-color:#37ff68; background-image: url("1.jpg"); background-repeat:no-repeat; background-position: right bottom;} backgroup-color：背景色backgroup-ima
复制链接

扫一扫