HTML+CSS基础笔记：元素类型、布局与样式

"html+css笔记总结1" 这篇笔记主要涵盖了HTML和CSS的基础概念与关键特性。作者通过一系列小节，详细介绍了HTML元素的分类、CSS布局相关属性以及样式设置技巧。 1. **padding, border, margin关系** - 在CSS中，`width`和`height`通常指的是内容区域的尺寸，不包括`padding`, `border`和`margin`。`padding`定义了内容区域和边框之间的空间，`border`则是围绕内容和填充的边框线，而`margin`则是元素与其他元素之间的外部间距。 2. **块元素与内联元素** - **块元素**如`div`和`ul`，它们在默认情况下占据整个宽度，形成一个独立的块，并且可以设置`width`和`height`。 - **内联元素**如`a`和`span`，它们只占据自身内容的宽度，不能设置`width`和`height`。但通过`display`属性可以转换元素类型。 3. **display属性** - `display`属性用于控制元素的布局方式。`block`使元素变为块元素，`inline`将其变为内联元素，`inline-block`则结合了两者特性。`none`可以隐藏元素且不保留其空间。 4. **Tab键的代码补全功能** - 编辑器中的Tab键可以用来快速生成HTML结构，如输入`div.类名`后按Tab键，会自动生成`<div class="类名"></div>`。 5. **float与position** - `float`属性使得元素可以浮动，从而脱离正常文档流，常用于创建多列布局。 - `position`属性用于元素的定位，如`relative`, `absolute`, `fixed`等，其中`relative`相对于其正常位置，`absolute`相对于最近的非静态定位祖先元素，`fixed`则是相对于浏览器窗口。 6. **高度塌陷与外边距重叠** - 高度塌陷通常发生在父元素没有设定固定高度，且子元素浮动的情况下，导致父元素高度计算出现问题。 - 外边距重叠是CSS中一个特殊的规则，相邻的垂直外边距可能会合并，解决方法如使用`clearfix`类或`overflow:hidden`。 7. **a标签去下划线** - 使用`text-decoration: none;`可以去掉`a`标签的下划线，常用于创建无下划线链接。 8. **字体设置** - `font`属性可以同时设置字号、行高和字体家族，如`font: 16px/1.5 Arial, sans-serif;`。 - `color`用于设置文本颜色。 9. **图片规范与background属性** - 图片规范涉及尺寸、格式和优化，通常建议使用响应式图片。 - `background`属性可以设置元素的背景，包括背景颜色、图像、重复方式和位置等。 10. **table边框问题** - 表格的边框处理可以通过CSS来调整，如`border-collapse`和`border-spacing`属性来控制单元格边框的合并和间距。 这些笔记内容是学习HTML和CSS基础知识的良好起点，可以帮助理解网页布局和样式设计的基本原理。