CSS权重与盒模型深入解析

"CSS第3天笔记" 在学习CSS的过程中，第三天的笔记主要涵盖了上节课的知识复习、权重问题深入、盒模型、标准文档流以及浮动等核心概念。 一、上节课知识复习 复习了CSS的基本属性，如文本样式（加粗、倾斜、下划线）、颜色设置（背景颜色和前景色）。同时，强调了class和id的区别：class用于CSS，可重复，而id用于JavaScript，必须保持唯一性。一个元素可以拥有多个class，但只能有一个id。此外，还讨论了不同版本IE浏览器对CSS选择器的兼容性，从标签选择器到儿子选择器等。 二、权重问题深入 权重问题是CSS中解决样式冲突的关键。同一标签携带多个类名时，不论在HTML中如何排列，样式冲突由CSS定义的顺序决定，后出现的样式生效。对于!important标记，它能使指定的属性权重达到最大，优先级高于任何其他方式指定的样式。 三、盒模型 盒模型是理解CSS布局的基础，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。width和height仅指内容区域的尺寸，padding和border会增加元素的实际宽度和高度。了解这些可以帮助精确控制元素的尺寸和间距。 四、标准文档流 标准文档流是网页元素默认的排列方式，分为块级元素和行内元素。块级元素占据整行，行内元素则按顺序在同一行内排列。通过display属性，可以实现块级元素和行内元素之间的转换，以满足不同布局需求。 五、浮动 浮动是CSS中常用来创建复杂布局的技术，包括元素的脱标（脱离正常文档流）、元素互相贴靠以及文字环绕（"字围"效果）。浮动元素会影响周围元素的布局，需要谨慎使用，避免产生意外的布局问题。 通过这些笔记，我们可以深化对CSS基础的理解，更好地掌握网页设计中的样式控制和布局技巧。理解并熟练运用这些知识点，将有助于解决实际开发中遇到的各种样式问题。