企业官网建设流程全解析

肇庆市网站建设平台,免费个人网站源码,郑州哪家做网站最好,网络服务器无响应改进措施或应对策略目录 CSS 布局与表格详解 一、浮动#xff08;float#xff09; 浮动的定义 开启浮动的方法 浮动特性 二、高度塌陷问题 产生原因 解决方案#xff08;面试重点#xff09; 三、BFC#xff08;块级格式化上下文#xff09; BFC 概念 BFC 核心功能 创建 BFC 的…目录CSS 布局与表格详解一、浮动float浮动的定义开启浮动的方法浮动特性二、高度塌陷问题产生原因解决方案面试重点三、BFC块级格式化上下文BFC 概念BFC 核心功能创建 BFC 的方法四、clear 属性详解功能说明属性值对照表应用示例五、表格基础表格基本结构 表格标签说明六、表格样式与布局基础样式设置单元格合并技巧视觉效果增强七、表格结构划分三大部分说明八、完整表格示例核心要点速查表CSS 布局与表格详解一、浮动float浮动的定义浮动float是一种使元素脱离标准文档流的布局方式元素会向左或向右移动直到碰到父元素边界或其他浮动元素。开启浮动的方法float: left; /* 左浮动 */ float: right; /* 右浮动 */浮动特性脱离文档流原位置不再保留可与其他浮动元素并排显示文本和行内元素会自动环绕浮动元素二、高度塌陷问题产生原因当所有子元素都浮动时父元素因无法获取浮动子元素的高度而导致高度塌陷进而引发布局混乱。解决方案面试重点固定高度法优点简单直接缺点缺乏灵活性BFC 方案overflow: hidden;空 div 清除法div styleclear: both;/div伪元素清除法推荐.clearfix::after { content: ; display: block; clear: both; }使用时只需为父元素添加.clearfix类。三、BFC块级格式化上下文BFC 概念一种独立的渲染区域内部元素的布局不会影响外部元素。BFC 核心功能解决父子元素外边距折叠避免高度塌陷防止被浮动元素覆盖创建 BFC 的方法overflow: hidden;其他方式还包括display: flow-root;、position: absolute;等。四、clear 属性详解功能说明用于清除前面浮动元素对当前元素的影响。属性值对照表值作用none默认值不清除浮动left清除左侧浮动影响right清除右侧浮动影响both清除两侧浮动影响最常用应用示例.box3 { clear: both; }五、表格基础表格基本结构table tr td单元格内容/td /tr /table 表格标签说明标签用途table定义表格整体tr定义表格行td定义标准单元格th定义表头单元格六、表格样式与布局基础样式设置table { border-collapse: collapse; /* 边框合并 */ } td, th { border: 1px solid #000; text-align: center; vertical-align: middle; }单元格合并技巧td rowspan2纵向合并单元格/td td colspan3横向合并单元格/td视觉效果增强tr:nth-child(2n) { background-color: #f9f9f9; } tr:hover { background-color: lightblue; }七、表格结构划分三大部分说明标签用途特点thead表头区域固定显示在顶部tbody主体内容自动包裹所有trtfoot表尾区域通常放置汇总数据注意即使未显式定义tbody浏览器也会自动创建并将所有tr包含其中。 因此选择行时应使用tbody tr选择器。八、完整表格示例table border1 thead trth日期/thth收入/thth支出/thth结余/th/tr /thead tbody trtd10.24/tdtd500/tdtd300/tdtd200/td/tr /tbody tfoot trtd colspan3总计/tdtd200/td/tr /tfoot /table核心要点速查表知识点关键代码主要用途清除浮动.clearfix::after解决高度塌陷BFC 创建overflow:hidden解决布局问题清除浮动影响clear:both恢复正常文档流单元格合并rowspan/colspan合并相邻单元格表格结构tbody自动包裹行元素视觉优化nth-child(2n)实现斑马纹效果