《CSS网页布局》课件

网页布局CSS网页布局是网站设计的关键要素是用来定义网页样式的语言，CSS它可以控制网页元素的排版、位置、颜色、字体等方面布局概述CSS网页布局布局模型响应式布局布局控制网页元素在网页上的位提供多种布局模型，如普通文档响应式布局通过媒体查询使网页在不CSS CSS置和排列方式，影响视觉呈现流、浮动、定位和等，用于同屏幕尺寸和设备上自适应，提供最Flexbox实现不同布局效果佳用户体验普通文档流默认布局1元素按照其在代码中的顺序进行排列，从左到右，从上到HTML下块级元素2占据整行，高度由内容决定，可以设置宽高和边距内联元素3在行内排列，高度由内容决定，无法设置宽高和边距文档流顺序4元素按照其在代码中的位置排列，并根据块级和内联元素HTML的特性自动换行位置属性static relative默认值，元素按照正常的文档流进行排列相对于元素在文档流中的原始位置进行定位absolute fixed相对于最近的已定位祖先元素进行定位，相对于浏览器窗口进行定位，即使滚动页如果没有已定位祖先元素，则相对于浏览面，元素的位置也保持不变器窗口进行定位浮动元素文档流之外块级元素浮动元素脱离标准文档流，浮动元素主要应用于块级元允许元素漂浮在其他内容之素，如或标签div p上清除浮动常见用途清除浮动可以防止父元素高网页布局•度坍塌，确保父元素包含浮图片排版•动元素的全部内容多栏布局•相对布局定位参考偏移设置

1.

2.12元素相对于其在普通文档使用、、top rightbottom流中的默认位置进行定位和属性调整元素的位left置视觉效果

3.3可通过属性控制元素的层叠顺序z-index绝对定位脱离文档流参考点定位属性元素不再占据文档流中的任何空间绝对定位元素的位置相对于其最近的使用、、、属top rightbottom left其他元素会忽略它，就像它不存在一定位祖先元素进行定位如果没有定性来确定绝对定位元素的位置例如样位祖先元素，则相对于元素进，将元素的顶部放置在body top:100px行定位距其定位父元素顶部像素的位100置固定定位固定位置元素相对于浏览器窗口固定，滚动页面时元素位置不变常用场景导航栏、悬浮按钮、固定广告等代码示例position:fixed;top:10px;right:20px;层叠上下文层叠规则定位属性决定元素在页面上如何排列属性影响元素在层叠position，优先级高的元素会覆盖优上下文中的位置和层叠顺序先级低的元素属性z-index定义元素在层叠上下文中的堆叠顺序，值越大，元素越靠近用户灵活盒子布局灵活盒子布局（）是一种强大的布局模型，Flexbox CSS用于以更灵活的方式对网页元素进行排列和对齐允许您以一行或多行的方式排列元素，并控制其Flexbox方向、大小、间距、对齐方式等网格布局网格布局是一种强大的布局方法，它使用行和列来创建二维布局，并以灵活的方式组织网页内容网格布局允许您在二维空间内排列元素，并通过定义行和列的大小和间距来控制元素的位置和对齐方式网格布局提供了更大的灵活性，并可以轻松地创建响应式设计，以适应不同的屏幕尺寸和设备自适应网格布局响应式网格灵活布局跨设备兼容根据屏幕大小调整网格列数和尺寸，利用网格布局，创建灵活的网格确保网页内容在不同设备上呈现最佳CSS提供最佳用户体验结构，适应各种屏幕尺寸效果响应式设计多设备兼容自适应布局适应不同屏幕尺寸，例如手机、平板电脑和台式机布局根据屏幕尺寸动态调整，以优化显示提供一致的用户体验，无论用户使用何种设备使用媒体查询来定义不同屏幕尺寸的样式规则CSS媒体查询设备类型屏幕尺寸

1.

2.12识别不同设备类型桌面根据屏幕尺寸调整布局、手机、平板等宽度、高度、像素密度方向特定功能

3.

4.34区分横屏和竖屏调整布识别设备功能触摸屏、局和内容展示方式打印机、鼠标悬停等视觉格式化模型网页模型布局CSS视觉格式化模型定义了网页元素的显示方布局模型决定了网页元素的排版方式CSS式，它是一个框模型，用于描述网页元素，它通过属性来控制网页元素的尺寸CSS在页面中的位置、大小和布局、位置和布局元素盒子网页显示每个网页元素都被视为一个盒子，盒子模视觉格式化模型通过控制元素盒子模型的型包含了元素的边框、内边距、外边距和属性，来实现网页元素的各种显示效果内容区域盒子模型边框内边距内容外边距边框是包围内容和内边距的内边距是内容和边框之间的内容是盒子模型中的实际内外边距是盒子模型之间的空边界空白区域容，例如文本、图片等白区域边距合并定义影响相邻元素的上下边距会合并为一个较大的边距影响元素之间的间距和布局效果合并后的边距是相邻两个边距中较大的一个可能导致元素之间出现意想不到的间距尺寸单位像素点px pt12是最基本的单位，对应屏用于印刷行业，代表1/72幕上的单个像素点英寸，与屏幕分辨率无关英寸百分比in%34以英寸为单位，用于设置相对长度单位，根据父元页面或元素的大小，英素的尺寸计算，常用于响1寸等于厘米应式设计

2.54文本属性字体系列字体大小设置文本的字体系列，例如设置文本的字号大小，例如宋体、黑体、微软雅黑等、、等12px16px20px字体风格文本颜色设置文本的字体风格，例如设置文本的颜色，例如正常、斜体、粗体等、、等#000000#ffffff red字体属性字体系列字体大小字体样式字体粗细使用属性指定使用属性设置字使用属性设置使用属性设置font-family font-size font-style font-weight字体系列，例如体的尺寸，可以使用像素字体样式，例如字体的粗细，例如Arial,normal值、百分比或其正常、斜体或正常、粗Helvetica,sans-serif px%italicnormalbold他单位倾斜体或更细obliquelighter可以指定多个字体系列，浏览器会按顺序尝试使用通常使用像素值，例如通常使用或可以使用数字值italic oblique100-第一个可用字体，它们在视觉上很相似表示不同粗细，例如16px900正常和粗体400700背景属性颜色图像12可以使用颜色属性设置背可以使用background-景颜色，可以是单色、渐属性设置背景图像image变色或图像，可以是本地图像或网络图像重复位置34可以使用可以使用background-background-属性设置背景图像属性设置背景图repeat position的重复方式，例如重复像的位置，例如左上角、不重复或平铺、居中或右下角列表样式列表标记使用属性设置列表标记类型常见的类型包括、、、、list-style-type disccircle squaredecimal lower-等您可以根据需要选择合适的标记类型roman自定义列表标记使用属性设置自定义列表标记图像例如，您可以使用图像来代替默认的标记list-style-image列表标记位置使用属性控制列表标记的位置，可以选择（内嵌）或（外边距）list-style-position insideoutside表格布局表格结构表格属性表格样式使用标签定义表格，标签定义使用、、等属性设使用样式设置表格的字体、颜色table trborder widthheight CSS表格行，标签定义表格单元格置表格的边框、宽度和高度、背景等属性，使表格更加美观td伪元素生成新内容扩展元素功能增强可访问性伪元素用于创建不属于文档结构的可以使用伪元素来创建视觉效果，伪元素可用于添加隐藏文本，例如一部分的元素，例如，添加内容到例如，添加箭头、图标或装饰性边，为屏幕阅读器提供额外的信息元素前或后框伪类伪类选择器选择器用于选取特定状态下的元素常见伪类•a:hover•a:active•a:visited•input:focus应用场景实现交互效果，如鼠标悬停、点击、获得焦点等选择器优先级重要性优先级顺序

1.

2.12中的样式规则可能存重要性从低到高依次为CSS在冲突优先级决定哪个通用选择器、元素选择器规则更重要、类选择器、选择器、ID内联样式优先级权重优先级继承

3.

4.34每个选择器都具有权重如果权重相同，则优先级权重高的选择器会覆盖权由声明的顺序决定重低的选择器继承与层叠继承层叠子元素可以继承父元素的样当多个样式规则应用于同一式属性，例如字体大小和颜元素时，层叠规则决定哪个色规则优先优先级顺序层叠规则由选择器类型、重较后声明的规则优先于较早要性声明和元素的出现顺序声明的规则，除非优先级更决定高重置与规范化重置样式规范化样式重置所有元素的默认样式，确保一致性定义基本的样式，提供一致的视觉风格预处理器CSSSass Less是一种成熟的预处理器，拥有强大的功能，如是一个轻量级的预处理器，易于学习和使用，Sass CSSLess CSS变量、嵌套、混合、函数等它提供了比更强大的它提供了基本的功能，如变量、混合和嵌套它非常适合Less功能，但也更加复杂初学者学习预处理CSS框架CSS提高开发效率一致性体验响应式设计预定义样式和组件，减少确保跨平台和跨浏览器的内置响应式布局机制，适重复编码，加速开发流程一致性，提升用户体验应不同屏幕尺寸和设备遵循最佳实践，提升代码提供灵活的网格系统，方提供可复用代码库，方便质量，减少错误便调整页面布局快速构建页面元素。