下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。【H5 前端开发笔记】第 14 期CSS 页面布局中的块元素和内联元素在网页布局中HTML 元素通常分为两大类1️⃣块级元素Block Element2️⃣内联元素Inline Element理解这两种元素的区别是学习CSS 布局、Flex、Grid、响应式设计的重要基础。一、什么是块级元素Block Element块级元素是指在页面中独占一行的元素。特点默认独占一整行可以设置宽度和高度可以设置margin 和 padding可以包含块元素或内联元素示例div这是一个块元素/divdiv这是第二个块元素/div页面效果这是一个块元素 这是第二个块元素每个元素都会自动换行。二、常见块级元素常见的块元素包括标签说明div最常用的布局元素p段落h1 - h6标题ul无序列表ol有序列表li列表项section内容区header页头footer页脚示例header网页头部/headersection网页内容/sectionfooter网页底部/footer三、块元素的 CSS 特点示例divclassbox/divCSS.box{width:200px;height:100px;background:red;}特点可以设置宽度可以设置高度可以设置边距四、什么是内联元素Inline Element内联元素不会独占一行而是在同一行排列。特点不会换行宽度由内容决定一般不能设置宽高示例span前端/spanspan开发/spanspan学习/span页面效果前端 开发 学习五、常见内联元素常见的内联元素标签说明span常用文本容器a超链接strong加粗em斜体label表单标签b粗体i斜体示例p这是一个span重要/span的内容/p六、内联元素的 CSS 特点示例spanclasstextHello/spanCSS.text{width:200px;height:100px;background:yellow;}结果宽高不会生效因为内联元素默认不能设置宽高。七、块元素 vs 内联元素特性块元素内联元素是否换行会不会宽度默认100%内容决定高度可以设置一般不生效margin可以部分有效padding可以可以八、display 属性CSS 可以改变元素的显示类型。使用display:值;常见值属性说明block块元素inline内联元素inline-block行内块元素none隐藏元素九、把内联元素变成块元素示例spanclassboxHello/spanCSS.box{display:block;width:200px;height:100px;background:red;}结果span变成块元素。十、把块元素变成内联元素示例divclassitemA/divdivclassitemB/divdivclassitemC/divCSS.item{display:inline;}结果A B C三个元素在一行。十一、行内块元素inline-blockinline-block是一种非常重要的布局方式。特点不换行可以设置宽高示例divclasscard1/divdivclasscard2/divdivclasscard3/divCSS.card{display:inline-block;width:100px;height:100px;background:orange;}效果[1] [2] [3]常用于商品卡片图片列表导航菜单十二、实际开发中的应用网页布局通常使用header nav main aside footer结构示例header头部/headernav导航/navmain内容/mainfooter底部/footer这些通常都是块级布局结构。十三、现代布局方式虽然块和内联是基础但现代布局更多使用Flex 布局Grid 布局例如display:flex;但理解块元素与内联元素是学习这些布局技术的基础。十四、本期总结网页元素主要分为类型说明块元素独占一行内联元素同一行排列CSS 可以通过display改变元素类型。常见值block inline inline-block none如果你愿意我可以继续帮你整理下一篇第 15 期CSS选择器全面详解标签选择器 / 类选择器 / ID选择器 / 后代选择器 / 子选择器这一章是CSS 学习最核心的内容之一也是前端面试高频题。
【H5 前端开发笔记】第 14 期：CSS 页面布局中的块元素和内联元素
下面是一份结构清晰、适合整理为技术专栏或学习笔记的内容。【H5 前端开发笔记】第 14 期CSS 页面布局中的块元素和内联元素在网页布局中HTML 元素通常分为两大类1️⃣块级元素Block Element2️⃣内联元素Inline Element理解这两种元素的区别是学习CSS 布局、Flex、Grid、响应式设计的重要基础。一、什么是块级元素Block Element块级元素是指在页面中独占一行的元素。特点默认独占一整行可以设置宽度和高度可以设置margin 和 padding可以包含块元素或内联元素示例div这是一个块元素/divdiv这是第二个块元素/div页面效果这是一个块元素 这是第二个块元素每个元素都会自动换行。二、常见块级元素常见的块元素包括标签说明div最常用的布局元素p段落h1 - h6标题ul无序列表ol有序列表li列表项section内容区header页头footer页脚示例header网页头部/headersection网页内容/sectionfooter网页底部/footer三、块元素的 CSS 特点示例divclassbox/divCSS.box{width:200px;height:100px;background:red;}特点可以设置宽度可以设置高度可以设置边距四、什么是内联元素Inline Element内联元素不会独占一行而是在同一行排列。特点不会换行宽度由内容决定一般不能设置宽高示例span前端/spanspan开发/spanspan学习/span页面效果前端 开发 学习五、常见内联元素常见的内联元素标签说明span常用文本容器a超链接strong加粗em斜体label表单标签b粗体i斜体示例p这是一个span重要/span的内容/p六、内联元素的 CSS 特点示例spanclasstextHello/spanCSS.text{width:200px;height:100px;background:yellow;}结果宽高不会生效因为内联元素默认不能设置宽高。七、块元素 vs 内联元素特性块元素内联元素是否换行会不会宽度默认100%内容决定高度可以设置一般不生效margin可以部分有效padding可以可以八、display 属性CSS 可以改变元素的显示类型。使用display:值;常见值属性说明block块元素inline内联元素inline-block行内块元素none隐藏元素九、把内联元素变成块元素示例spanclassboxHello/spanCSS.box{display:block;width:200px;height:100px;background:red;}结果span变成块元素。十、把块元素变成内联元素示例divclassitemA/divdivclassitemB/divdivclassitemC/divCSS.item{display:inline;}结果A B C三个元素在一行。十一、行内块元素inline-blockinline-block是一种非常重要的布局方式。特点不换行可以设置宽高示例divclasscard1/divdivclasscard2/divdivclasscard3/divCSS.card{display:inline-block;width:100px;height:100px;background:orange;}效果[1] [2] [3]常用于商品卡片图片列表导航菜单十二、实际开发中的应用网页布局通常使用header nav main aside footer结构示例header头部/headernav导航/navmain内容/mainfooter底部/footer这些通常都是块级布局结构。十三、现代布局方式虽然块和内联是基础但现代布局更多使用Flex 布局Grid 布局例如display:flex;但理解块元素与内联元素是学习这些布局技术的基础。十四、本期总结网页元素主要分为类型说明块元素独占一行内联元素同一行排列CSS 可以通过display改变元素类型。常见值block inline inline-block none如果你愿意我可以继续帮你整理下一篇第 15 期CSS选择器全面详解标签选择器 / 类选择器 / ID选择器 / 后代选择器 / 子选择器这一章是CSS 学习最核心的内容之一也是前端面试高频题。
