HTML+CSS布局(常用css控制属性)小结

下面是详细讲解“HTML+CSS布局(常用css控制属性)小结”的完整攻略：

前言

HTML+CSS 布局是前端开发必备技能之一。本文将介绍 HTML+CSS 布局常用的 CSS 控制属性。

布局基础

HTML 文档节点是有层级结构的，而 CSS 就是通过控制各文档节点样式实现布局。

了解以下要素：

外部容器的宽度和高度
盒模型
内边距
外边距
边框
定位
普通流
浮动
绝对定位
弹性布局
栅格布局

常用 CSS 控制属性

1. 普通流布局

普通流是文档节点的默认布局方式。在未指定样式时，文档节点会按照从上到下、从左到右的顺序排列，行末自动换行。

1.1 display 属性

inline：行内元素，不独占一行，可与其他行内元素并排显示。
block：块级元素，独占一行，可设置宽高、内外边距。
inline-block：行内块级元素，不独占一行，可设置宽高、内外边距。

1.2 position 属性

static：默认值。使用文档流布局。
relative：相对定位，相对于自身的位置，不影响其他节点位置，但占据原来的位置。
absolute：绝对定位，相对于最近的已定位祖先元素，如果没有已定位的元素，则相对于 body。
fixed：相对于浏览器窗口固定位置。
sticky：相对定位的一种特殊形式，先按定位稍偏的方向滚动，在边界到达时“粘”在此处，不再受后面滚动的影响。

2. 弹性盒子布局

弹性盒模型可实现动态伸缩布局，尤其在响应式设计中使用广泛。本文只介绍基本概念和常用样式。

2.1 container 属性

display: flex;：容器为弹性盒子。
flex-direction: row | row-reverse | column | column-reverse;：指定主轴方向。
flex-wrap: nowrap | wrap | wrap-reverse;：指定弹性盒子换行方式。
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：定义沿主轴的对齐方式。
align-items: stretch | flex-start | flex-end | center | baseline;：定义沿交叉轴的对齐方式。
align-content: stretch | flex-start | flex-end | center | space-between | space-around;：定义多行沿交叉轴的对齐方式。

2.2 item 属性

flex-grow: number;：定义项目伸缩比例。
flex-shrink: number;：定义项目收缩比例。
flex-basis: width;：定义项目的基准尺寸。
flex: [flex-grow] [flex-shrink] [flex-basis];：定义项目伸缩比例、收缩比例、基准尺寸。

示例说明

下面是两条示例说明：

普通流布局

将一行平均分成 3 列，每列宽度自适应

<style>
  .span1 {
    float: left;
    width: 33.33%;
  }
</style>
<div>
  <div class="span1">1</div>
  <div class="span1">2</div>
  <div class="span1">3</div>
</div>

弹性盒子布局

实现固定宽度的左侧导航栏和右侧内容区域，导航栏宽度 200px，内容区域宽度自适应

<style>
  .container {
    display: flex;
  }
  .nav {
    width: 200px;
  }
  .main {
    flex: 1;
  }
</style>
<body>
  <div class="container">
    <div class="nav">导航栏</div>
    <div class="main">内容区域</div>
  </div>
</body>

总结

本文介绍了 HTML+CSS 布局基础概念和常用 CSS 控制属性，包括普通流布局和弹性盒子布局。掌握了这些内容可以帮助我们更好地实现网站布局。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML+CSS布局(常用css控制属性)小结 - Python技术站