常用属性
颜色和背景
- color
颜色属性定义文本的颜色。
p { color: red; }
- background-color
background-color属性定义元素的背景颜色。
body { background-color: lightblue; }
字体
- font-family
font-family属性定义元素的字体。
body { font-family: Arial, sans-serif; }
- font-size
font-size属性定义元素的字体大小。
h1 { font-size: 32px; }
- font-weight
font-weight属性定义元素的字体粗细。
h1 { font-weight: bold; }
盒子模型
- width
width属性定义元素的宽度。
div { width: 200px; }
- height
height属性定义元素的高度。
div { height: 100px; }
- margin
margin属性定义元素周围的空白区域。
div { margin: 10px; }
- padding
padding属性定义元素内部的空白区域。
div { padding: 10px; }
- border
border属性定义元素的边框。
div { border: 1px solid black; }
定位和布局
- position
position属性定义元素的定位类型。
div { position: relative; }
- top, right, bottom, left
这些属性定义元素相对于其父元素位置的偏移量。
div { position: absolute; top: 10px; right: 20px; }
- display
display属性定义元素的布局类型。
div { display: flex; }
常见设置
盒子模型重置
CSS的盒子模型中，元素的宽度和高度不仅包括内容，还包括内边距、边框和外边距。有时候我们需要将元素的大小仅限制在内容内。可以通过以下代码来实现：
* { box-sizing: border-box; }
浮动
浮动可以使元素脱离文档流，并且可以将其他元素环绕在它的周围。以下是浮动一个元素到左侧的示例：
img { float: left; }
清除浮动
由于浮动会导致元素脱离文档流，因此在使用浮动时可能会出现布局问题，即其他元素遮盖了浮动元素。可以通过以下代码来解决该问题：
.clearfix::after { content: ""; display: table; clear: both; }
在需要清除浮动的元素的父元素上添加“clearfix”类名，然后使用这段CSS样式。
响应式设计
现代网站和应用程序需要能够在各种设备和屏幕大小上正确显示。响应式设计是指为不同的屏幕大小和设备类型提供不同的界面布局。以下是一个响应式设计的示例：
@media (max-width: 768px) { .sidebar { display: none; } }
在此示例中，如果屏幕宽度小于768像素，则侧边栏将被隐藏。
总之，掌握常见的CSS属性和设置对于前端开发人员非常重要
