CSS布局基础
CSS（层叠样式表）用于控制网页的外观。在CSS中，有几种基本的布局方式，包括传统的盒模型、浮动（float）、定位（position）、弹性布局（Flexbox）和网格布局（Grid）。每种布局方法都有其特点和适用场景。
- 盒模型
每个HTML元素都可以被视为一个盒子。盒模型由四个部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）
1. 内容区（Content）
这是盒模型的核心部分，用于显示实际的内容，如文本或图片等。内容区的尺寸可以通过CSS属性width和height来设置。
2. 内边距（Padding）
内边距位于内容区与边框之间，用来增加内容与边框之间的空间。它可以通过CSS的padding属性来设置，该属性可以接受一个值（上下左右都相同）、两个值（上下/左右）、三个值（上/左右/下）或四个值（上/右/下/左）来分别设置不同方向上的内边距大小。
3. 边框（Border）
边框围绕在内边距之外，用于定义元素的边界。边框的样式、宽度和颜色可以通过CSS的border属性及其子属性（如border-style、border-width、border-color）来设置。边框不仅增加了视觉上的区分度，还会影响元素的实际尺寸。
4. 外边距（Margin）
外边距位于边框之外，用于控制元素与其他元素之间的间距。通过CSS的margin属性可以设置外边距，其使用方式与padding属性类似，也可以接受一个到四个值来分别设置不同的方向上的外边距大小。外边距的一个重要特性是相邻元素的垂直外边距会合并（称为外边距折叠），但水平外边距不会合并。
盒模型的计算方式
对于块级元素，默认情况下，元素的总宽度是由以下公式计算得出的： [ \text{总宽度} = \text{左边距} + \text{左边框} + \text{左边内边距} + \text{内容宽度} + \text{右边内边距} + \text{右边框} + \text{右边距} ]
而高度的计算方式则是： [ \text{总高度} = \text{顶边距} + \text{顶边框} + \text{顶边内边距} + \text{内容高度} + \text{底边内边距} + \text{底边框} + \text{底边距} ]
需要注意的是，当使用box-sizing: border-box;时，元素的宽度和高度将包括内边距和边框，这意味着设定的宽度和高度就是元素最终占据的空间大小，这通常使得布局更加直观和易于管理。
- 浮动（Float）
浮动主要用于图像与文本的对齐，但也可以用来创建多列布局。通过设置float: left;或float: right;可以使元素向左或向右移动，直到碰到包含块的边缘或其他浮动元素为止。
- 定位（Position）
CSS中的定位属性允许我们以更精确的方式控制元素的位置。常用的值有static（默认值，无特殊定位）、relative（相对于自身原来的位置进行定位）、absolute（相对于最近的非static定位的祖先元素进行定位）和fixed（相对于浏览器窗口定位）。
- 高级布局技术
随着Web标准的发展，CSS引入了更强大的布局工具——Flexbox和Grid，它们使得复杂的布局设计变得更加简单和灵活。
- 弹性布局（Flexbox）
Flexbox是一种一维布局模式，适用于单个轴上的项目排列。使用Flexbox布局可以轻松实现响应式设计，确保页面元素能够根据屏幕尺寸自动调整大小。关键属性包括display: flex;、flex-direction、justify-content、align-items等。
- 网格布局（Grid）
Grid布局是一种二维布局模式，可以同时控制行和列的布局。它非常适合于构建复杂的网页结构。Grid的关键概念包括网格容器（grid container）、网格项（grid item）、网格线（grid line）、网格轨道（grid track）和网格区域（grid area）。主要属性有display: grid;、grid-template-columns、grid-template-rows、grid-gap等。
- 实践技巧
- 响应式设计：使用媒体查询（media queries）来适应不同设备的屏幕尺寸，确保网站在各种设备上都能良好显示。 2.*模块化CSS：将CSS代码拆分为多个小文件，每个文件负责特定的功能或组件的样式，有助于提高代码的可维护性和复用性。
- 预处理器的使用：利用Sass或Less等CSS预处理器，可以编写更加简洁、功能丰富的CSS代码，如变量、嵌套规则、混合宏等特性。
- 性能优化：合理使用CSS属性，避免过度渲染，比如减少不必要的动画效果，使用
will-change属性提示浏览器提前准备渲染等。
- 总结
掌握CSS布局技巧对于成为一名优秀的前端开发者来说至关重要。无论是传统的盒模型还是现代的Flexbox和Grid布局，都有各自的应用场景和优势。
实践设计：
@font-face { font-family: "nav"; src: url(fonts/日本手写体怨霊onryou.TTF); } @font-face { font-family:"main" ; src: url(fonts/PLANK__.TTF); } .shell-main{ background-color: white; width: 80%; height: 40px; margin: 0 auto; position: relative; } .shell-main-nav{ float: left; height: 10px; } .shell-main-nav ul { width: 900px; height: 100%; display: flex; justify-content: space-evenly; align-items: center; position: absolute; right: 5%; } .shell-main-nav ul li { width: 150px; text-align: center; font-family: nav; font-size: 1.875rem; font-weight: bold; } .shell-main-nav ul li a { color: #ffffff; display: block; width: 100%; height: 100%; line-height: 60px; text-align: center; } .shell-main-nav ul .nav-box { position: absolute; bottom: 1px; left: 0; width: 115px; height: 5px; border-radius: 2px; z-index: 999; transition: .5s; } .shell-main-nav ul li:nth-child(2):hover~.nav-box { left: 284px; background-color: red; } .shell-main-nav ul li:nth-child(3):hover~.nav-box { left: 494px; background-color: #8da1f8; } .shell-main-nav ul li:nth-child(4):hover~.nav-box { left: 705px; background-color: #b2ffb1; } .shell-main-nav ul li:nth-child(1):hover~.nav-box { left: 75px; background-color: #9c2386; }
