- width/height：定义内容区尺寸可取值px、%、auto等；
- padding：内容与边框的间距如`padding: 10px 20px`表示上下10px、左右20px；
- margin：盒子与外部元素的间距支持负值，可实现元素重叠；
- border：边框样式如`border: 2px solid #333`定义宽度、样式、颜色。
二、文本样式：内容可读性的核心
文本是网页信息传递的主体，其样式直接影响用户体验。核心属性包括：
- color：文本颜色支持十六进制、RGB、关键词，如`color: #f44336`；
- font-size：字体大小常用px、rem，如`font-size: 16px`；
- line-height：行高控制文本行间距，设为`1.5-1.8`倍字号以提升可读性；
- text-align：文本对齐方式left/center/right/justify；
- font-family：字体类型如`font-family: "Microsoft YaHei", sans-serif`。
三、背景与边框：视觉美化的关键
背景和边框是提升页面质感的重要手段。核心属性包括：
- background-color：背景颜色如`background-color: #f5f5f5`；
- background-image：背景图片如`background-image: url("bg.jpg")`；
- background-size：背景图尺寸cover：覆盖容器；contain：整显示图片；
- border-radius：圆角边框如`border-radius: 8px`实现圆角效果，50%则为圆形。
四、定位与显示：元素位置的控制
定位决定元素在页面中的位置关系，显示类型则定义元素的布局特性。核心属性包括：
- position：定位类型 - static默认，正常文档流； - relative相对自身原位置偏移； - absolute相对于最近定位父元素偏移； - fixed固定于视口，不随滚动变化；
- display：显示类型 - block块级元素，独占一行，可设宽高； - inline行内元素，不独占一行，不可设宽高； - inline-block行内块元素，兼具行内与块级特性。 五、弹性布局Flexbox：现代布局首选 Flexbox是处理元素排列的高效工具，尤其适合响应式布局。核心属性包括：
- display: flex：将容器设为弹性容器；
- flex-direction：主轴方向row：水平；column：垂直；
- justify-content：主轴对齐方式flex-start/center/flex-end/space-between；
- align-items：交叉轴对齐方式stretch/center/flex-start。
六、响应式设计基础：适配多设备
通过媒体查询和相对单位，实现不同屏幕尺寸的适配。核心内容包括：
- media queries：媒体查询如`@media (max-width: 768px) { ... }`定义小屏样式；
- rem单位：相对根元素html字体大小的单位如`font-size: 1rem`，根元素设为16px时，1rem=16px；
- 百分比单位：宽度、高度等属性使用%，实现元素随容器尺寸变化。 以上核心样式与属性构成CSS的基础框架，通过灵活组合，可实现从简单文本排版到复杂页面布局的多样化需求。
CSS 核心样式和属性有哪些是必备的？
必须要掌握的:CSS 核心样式和属性
CSS层叠样式表是网页视觉呈现的核心，掌握其核心样式和属性是实现精准布局、美观设计的基础。以下从布局、文本、背景等关键维度，梳理前端开发必须掌握的核心内容。
一、盒模型：布局的基石
每个HTML元素在页面中都表现为一个“盒子”，由内容区content、内边距padding、边框border 和外边距margin 组成。核心属性包括：