CSS盒子模型和部分选择器

来源：互联网发布：ubuntu安装numpy 编辑：程序博客网时间：2024/06/08 19:00

2.5显示相关属性

隐藏元素的方法：

div{
    height: 300px;
    /*visibility: hidden;*/
    display:none;
}

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

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

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

li{
    /*display: inline;*/
    display:inline-block;
    width: 200px;
    background-color: red;
}

span{
display: block;
}

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

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

③　block：将内联元素以块级元素形式来显示。

2.6盒子模型

Margin：外边距

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

使用方式

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

（2）Margin-left：30px；表示左边距是30px，即单独设置上下左右边距

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

Padding：内边距

padding-top、padding-right、padding-bottom、padding-left

使用方式

1．padding：30px；表示上下左右内边距都是30px

2．padding-left：30px；表示左边距是30px，即单独设置上下左右边距

3．padding:10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px 30px 40px

Border：边框

Border-width：边框宽度

Border-style：边框线条类型

Border-color：边框颜色

Solid：实线

Dotted:点线

Double：两倍的

Dashed:虚线

Groove：槽线

Outline：轮廓线

2.7定位

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

Static：静态定位（默认）

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

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

#div1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: fixed;
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yellow;

}

Fixed：

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

}

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

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

Relative：相对定位

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

#div3{
    width: 100px;
    height: 100px;
    background-color: aqua;
}

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

Absolute：绝对定位

#div1{
    width: 200px;
    height: 200px;
    background-color: red;
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    left: 30px;
    top: 20px;
}
#div3{
    width: 100px;
    height: 100px;
    background-color: aqua;
}

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

与fixed类似，但参照物不同

Fixed参照根元素（html）

Absolute参照父容器

3选择器

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

3.1元素选择器

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

<head>
 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
 <title></title>
 <styletype="text/css">
 div{
 font-size: 24px;
 color: red;
 }
 p{
 font-size: 32px;
 color: greenyellow;
 }
 </style>
</head>
<body>
 <div>元素选择器</div>
 元素选择器1
 元素选择器2
</body>

3.2 id选择器

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

#idname{

.............

}

<head>
 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
 <title></title>
 <styletype="text/css">
 #div1{
 width: 200px;
 height: 200px;
 background-color:red;
 }
 #div2{
 width: 200px;
 height: 200px;
 background-color:pink;
 }
 </style>
</head>
<body>
 <divid="div1"></div>
 <divid="div2"></div>
</body>

3.3类选择器

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

.className{

..........

}

<head>
 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
 <title></title>
 <styletype="text/css">
 .even{
 width: 200px;
 height: 100px;
 background-color:red;
 }
 .odd{
 width: 200px;
 height: 100px;
 background-color:pink;
 }

 </style>
</head>
<body>
 <divclass="odd"></div>
 <divclass="even"></div>
 <divclass="odd"></div>
</body>

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

3.4属性选择器

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

（1）根据有无属性来选择

<head>
 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
 <title></title>
 <styletype="text/css">
 [title]{
 width: 50px;
 height: 50px;
 background-color:red;
 border: 1px solid black;
 }
 </style>
</head>
<body>
 <divtitle="div1">1</div>
 <divtitle="div2">2</div>
 <div>3</div>
 <divtitle="a div">4</div>
 <divtitle="div a">5</div>
</body>

运行结果：

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

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

<head>
 <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
 <title></title>
 <styletype="text/css">
 [title='div2']{
 width: 50px;
 height: 50px;
 background-color:red;
 border: 1px solid black;
 }
 </style>
</head>
<body>
 <divtitle="div1">1</div>
 <divtitle="div2">2</div>
 <div>3</div>
 <divtitle="a div">4</div>
 <divtitle="div a">5</div>
</body>

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

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

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

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

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

阅读全文

0 0