css总结

网页布局的方式

• 在实际开发中，根据具体的布局需求，可以选择合适的布局方式或结合使用多种方式来实现理想的网页布局效果。
• position
  • static（默认值）：元素按照正常的文档流进行布局。
  • relative：相对其正常位置进行偏移，不影响其他元素的布局。
  • absolute：相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块。会脱离文档流，可能覆盖其他元素。
  • fixed：相对于浏览器窗口进行定位，不是相对于其最近的已定位祖先元素进行定位，滚动页面时元素位置固定，会脱离文档流。
  • 如果一个元素被设置为 position: absolute（绝对定位）
    • 那么它的位置将基于离它最近的具有：
      • position: relative、
      • position: absolute
      • position: fixed 这
      • 几种定位属性之一的祖先元素来确定。
• float
  • 使元素向左或向右浮动，直到碰到容器边界或其他浮动元素。
  • 浮动元素会脱离文档流，会脱离文档流，影响后续非浮动元素的布局，并尽可能地向左或向右移动，直到碰到父元素的边界或其他浮动元素。
  • clear浮动
    • 当父元素未设置高度，且内部的子元素使用了浮动，导致父元素高度塌陷时，需要清除浮动来使父元素能够正确地包含浮动的子元素；
    • 如果后面的元素受到前面浮动元素的影响，导致布局错乱，此时也需要清除浮动。
    • 常见的清除浮动的方法有：
      • 在父元素上添加 overflow: hidden; 或 overflow: auto;
      • 在父元素内部的最后添加一个空的 div ，并设置其样式为 clear: both;
      • 使用 :after 伪元素在父元素上清除浮动；
• flex
  • 适用于一维的灵活布局，特别是在一行或一列内的元素排列。
  • 可以方便地实现元素在一行或一列中的对齐、排列顺序、伸缩等。
  • 能够自适应容器的大小，轻松处理不同屏幕尺寸和设备类型。
• grid
  • 适合二维的、规则的网格布局。
  • 定义网格的行和列来布局元素。
  • 可以精确地控制元素在网格中的位置和跨越的行列数量。

行内元素，块级元素、行内块级元素

• 块级元素：
  • 独自占据一行，垂直方向上会自动换行。常见的块级元素有 div、p、h1-6等。
  • 可以设置宽度、高度、内外边距等属性。
  • 可以包含其他块级元素和行内元素。
• 行内元素：
  • 不会独自占据一行，多个行内元素可以在同一行显示。例如span、a等。
  • 设置宽度和高度无效，水平方向的内外边距有效，垂直方向的内外边距无效。
  • 通常只能包含文本和其他行内元素。
• 行内块级元素：
  • 可以像行内元素一样在一行内排列，又可以设置宽高、内外边距等属性。常见的行内块级元素如 img、input等。
  • 可以设置宽度、高度、内外边距等属性；
  • 可以包含文本和其他行内元素。

html5中新增的用于网页布局的语义标签

• header：通常用于表示页面或章节的头部，包含标题、导航链接等。
• nav：用于定义导航链接的部分。
• main：表示页面的主要内容部分，每个页面应仅有一个 main 元素。
• footer：通常用于表示页面或章节的底部，包含版权信息、联系信息等。
• section：用于对页面内容进行逻辑分区或章节划分。
• aside：用于表示与页面主要内容相关的侧边栏内容。
• article：用于表示独立的、可复用的内容块，如博客文章、论坛帖子等。
• 使用这些语义标签可以使网页的结构更清晰，也有利于搜索引擎优化和屏幕阅读器等辅助技术更好地理解网页内容。