下面是对于CSS的一些必记属性整理的详细讲解：
CSS的一些必记属性整理
1. display 属性
display属性常用于控制元素的显示方式。具体的取值有：
none：元素不显示，同时占用的空间也不保留block：元素被渲染为块级元素，通常会独占一行，可以在其中设置宽度、高度、内外边距等属性inline：元素被渲染为行内元素，通常不支持设置宽度、高度、内外边距等属性inline-block：元素被渲染为行内块级元素，可以支持设置宽度、高度、内外边距等属性flex：元素被渲染为弹性布局容器，可以通过子元素的属性来控制布局方式、对齐方式等
2. position 属性
position属性用于控制元素的定位方式。具体的取值有：
static：默认定位方式，元素遵循普通文档流的布局规则relative：相对定位方式，元素相对于自身原先在文档流中所处的位置进行定位，不影响其他元素的布局absolute：绝对定位方式，元素相对于最近的非static定位祖先元素进行定位，如果没有祖先元素则相对于<html>元素进行定位fixed：固定定位方式，元素相对于<html>元素进行定位，不随滚动条滚动而变化sticky：粘性定位方式，原本在普通文档流中的元素在满足一定条件时切换为固定定位，当滚动到指定位置时会停留在该位置
3. box-sizing 属性
box-sizing属性用于控制一个盒子的尺寸计算方式。具体的取值有：
content-box：默认值，指定元素的宽度和高度属性仅包括内容，不包括内边距和边框border-box：指定元素的宽度和高度属性包括内容、内边距和边框，不包括外边距
示例1：控制元素的尺寸
.box {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
padding: 20px;
font-size: 24px;
text-align: center;
line-height: 100px;
}
在这个示例中，我们使用了border-box属性来控制.box元素的尺寸计算方式，并设置了宽度、高度、内边距、字体大小等属性来对元素进行样式设置，最终得到一个带有边框、内边距、文本居中等样式的方形盒子。
示例2：控制元素的定位
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
</div>
.container {
position: relative;
width: 800px;
height: 600px;
}
.box {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 36px;
color: #fff;
}
.box-1 {
left: 0;
top: 0;
background-color: #f00;
}
.box-2 {
right: 0;
top: 0;
background-color: #0f0;
}
.box-3 {
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: #00f;
}
在这个示例中，我们使用了position属性来控制.box元素的定位方式，并结合left、right、top、margin-left、margin-top等属性来对元素进行定位和布局，最终实现了三个不同位置的盒子元素。
希望以上内容能够对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS的一些必记属性整理 - Python技术站
微信扫一扫 
支付宝扫一扫 