css四个块 |css 隐藏元素不保留位置

/* 这是一个CSS注释 */
p {
color: red;
font-size: 16px;
border: 1px solid black;
}

在上面的代码中，大家使用了p选择器，代表样式会应用在所有的p标签上。紧接着是颜色、字体大小和边框的属性，并使用冒号（:）将它们与具体的值分隔开。多个属性可以通过分号（;）来分隔。两个花括号（{}）包含的代码块被称为样式声明，一个选择器可以同时对应多个样式声明。

.btn {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
}

在这个例子中，大家使用.btn选择器对应所有拥有btn类名的元素，设置了一个绿色背景、白色字体、12px上下间距和24px左右间距、无边框、圆角四周和光标为指针的按钮样式。使用类选择器是一种在HTML中样式化多个元素的简单快捷的方式。

h1::before {
content: "标题 ";
font-weight: bold;
}

大家在这个例子中使用伪元素选择器(::before)来插入一个标题前缀。::before是在选定元素的开头插入新内容。content属性用于插入要添加的内容，并将其和font-weight属性一起用于改变标题样式。注意：使用双冒号(::)而不是单冒号来选择伪元素。

@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

最后让大家看一下媒体查询选择器。在这个例子中，大家定义了一个宽度小于600像素时的页面样式。使用媒体查询可以根据设备的不同尺寸来设置不同的样式。媒体查询使用括号中的条件来匹配特定的媒体类型，例如电脑屏幕、平板电脑和手机。在括号中可以指定多个条件，使用逗号来分隔。在媒体查询中使用样式声明块来设置特定条件下的样式。