企业网站怎样做seo优化 应该如何做,安卓优化大师app下载安装,百度点击软件还有用吗,做阿里巴巴网站口碑CSS 页面布局技术允许我们拾取网页中的元素#xff0c;并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 一、正常布局流#xff08;Normal Flow#xff09;
CSS的布局基础是“正常流”#xff0c;也就是页面元素在没有特别指定布局方式时的默认排列…CSS 页面布局技术允许我们拾取网页中的元素并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。 一、正常布局流Normal Flow
CSS的布局基础是“正常流”也就是页面元素在没有特别指定布局方式时的默认排列方式。正常流分为两种主要类型
块级元素默认情况下块级元素会独占一行并且从上到下排列。常见的块级元素有div、p、h1、ul等。行内元素行内元素不会独占一行它们会在一行内从左到右排列直到空间不足再换行。常见的行内元素有span、a、img等。
举个简单的例子
divp这是一个段落。/pp这是另一个段落。/p
/div 两个段落p都是块级元素它们会按照正常流的规则垂直排列。而且即使你在p标签之间加入了许多空格段落依然会在页面中按照垂直方向排列。 二、Display属性
display属性决定了元素的布局行为。最常见的display值包括block、inline、inline-block、none以及我们将在后文讨论的flex和grid。
block将元素定义为块级元素使其独占一行。inline将元素定义为行内元素使其在行内排列。inline-block结合了block和inline的特性元素本身是行内元素但可以设置宽高等属性。none完全隐藏元素元素不占据任何空间。
一个例子展示了这些不同的display值的效果
div styledisplay: block;这是一个块级元素/div
span styledisplay: inline;这是一个行内元素/span
div styledisplay: inline-block; width: 100px;这是一个inline-block元素/div display属性是理解CSS布局的基础它控制了元素在页面上的布局行为。 三、弹性盒子Flexbox
弹性盒子Flexbox是CSS3引入的一种布局模式用来为不同尺寸的屏幕设计复杂的布局。通过设置display: flex;你可以将一个容器变成弹性容器Flex container而其内部的子元素则成为弹性项Flex items。 1. 设置 display: flex;
将父元素设置为display: flex;后子元素将自动按照水平默认或垂直方向排列并且能够灵活调整大小以适应容器。
div styledisplay: flex;div stylebackground-color: lightblue;Item 1/divdiv stylebackground-color: lightgreen;Item 2/divdiv stylebackground-color: lightcoral;Item 3/div
/div 三个子元素在同一行水平排列因为默认情况下flex-direction是row。 2. 设置 flex 属性
flex属性是弹性盒子的核心用于设置弹性项如何在弹性容器中分配空间。它通常写作flex: 1;、flex: 2;等表示子元素在容器中所占的相对比例。
div styledisplay: flex;div styleflex: 1; background-color: lightblue;Item 1/divdiv styleflex: 2; background-color: lightgreen;Item 2/divdiv styleflex: 1; background-color: lightcoral;Item 3/div
/div Item 2占据的空间是Item 1和Item 3的两倍。 3. 弹性盒子布局的其他属性
justify-content控制弹性项在主轴默认水平轴上的对齐方式。常见值有flex-start左对齐、center居中、space-between两端对齐间隔均匀等。align-items控制弹性项在交叉轴默认垂直轴上的对齐方式。常见值有stretch拉伸、center居中、flex-start顶部对齐等。
div styledisplay: flex; justify-content: space-between; align-items: center;div stylebackground-color: lightblue;Item 1/divdiv stylebackground-color: lightgreen;Item 2/divdiv stylebackground-color: lightcoral;Item 3/div
/div 上面的代码展示了如何通过justify-content和align-items控制子元素的排列方式。 四、Grid布局
Grid布局是CSS的一种二维布局系统可以非常轻松地创建复杂的网页布局。与Flexbox相比Grid布局能够同时控制行和列。
1. 设置 display: grid;
通过设置display: grid;你可以将一个容器变成网格容器Grid container并在其中定义行和列。
div styledisplay: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;div stylebackground-color: lightblue;Item 1/divdiv stylebackground-color: lightgreen;Item 2/divdiv stylebackground-color: lightcoral;Item 3/divdiv stylebackground-color: lightpink;Item 4/div
/div 网格容器被定义为三列两行每个单元格大小为100px。子元素将自动填充这些网格单元。 2. 在网格内放置元素
你可以通过grid-column和grid-row属性来指定元素在网格中的位置。
div styledisplay: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;div stylebackground-color: lightblue; grid-column: 1 / 3; grid-row: 1 / 2;Item 1/divdiv stylebackground-color: lightgreen;Item 2/divdiv stylebackground-color: lightcoral;Item 3/divdiv stylebackground-color: lightpink;Item 4/div
/div 此例中Item 1占据了网格的前两列和第一行。 3. Grid布局的其他属性
gap设置网格单元格之间的间隔。grid-template-areas定义命名网格区域可以用于创建更语义化的布局。
div styledisplay: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: header header headersidebar content contentfooter footer footer;div stylegrid-area: header; background-color: lightblue;Header/divdiv stylegrid-area: sidebar; background-color: lightgreen;Sidebar/divdiv stylegrid-area: content; background-color: lightcoral;Content/divdiv stylegrid-area: footer; background-color: lightpink;Footer/div
/div 通过grid-template-areas我们创建了一个包含头部、侧边栏、内容区和底部的布局。 五、浮动Float
浮动是CSS中的一个经典布局方法用于将元素从正常流中移出并使其在父容器内左右浮动。通过设置float: left;或float: right;可以使元素分别浮动到父容器的左侧或右侧。
div styleoverflow: hidden;img srcimage.jpg stylefloat: left; margin-right: 20px;p这是一个浮动示例图片将浮动到左侧文本将围绕在图片周围。/p
/div 在这个例子中图片浮动到左侧文本则环绕在图片右侧。
需要注意的是浮动元素之后的内容通常会出现“塌陷”问题即元素的父容器高度会变为0。解决方法是在浮动元素之后使用清除浮动clear技术
.clearfix::after {content: ;display: table;clear: both;
}
使用.clearfix类可以确保父容器包裹住浮动的子元素。 六、定位技术Position
CSS定位是通过设置position属性来改变元素在文档中的位置。主要的定位方式包括 1. 简单定位示例
简单的定位属性包括static默认、relative、absolute、fixed和sticky。
div styleposition: relative; top: 20px; left: 30px;这是一个相对定位的元素
/div 2. 相对定位Relative
相对定位使元素相对于其正常位置进行移动。它不会影响文档流中其他元素的布局。
div styleposition: relative; top: 10px; left: 15px;这是一个相对定位的元素
/div 元素相对于其原始位置向下移动了10px向右移动了15px。 3. 绝对定位Absolute
绝对定位的元素相对于最近的已定位祖先元素进行定位如果没有则相对于初始包含块。绝对定位的元素脱离了文档流不会影响其他元素的布局。
div styleposition: relative;div styleposition: absolute; top: 0; right: 0;这是一个绝对定位的元素/div
/div 内部的绝对定位元素相对于其父元素的右上角进行定位。 4. 固定定位Fixed
固定定位的元素相对于浏览器窗口进行定位即使页面滚动元素也会保持在固定位置。
div styleposition: fixed; bottom: 0; right: 0;这是一个固定定位的元素
/div 一个固定在浏览器窗口右下角的元素即使页面滚动它的位置也不会改变。 5. 粘性定位Sticky
粘性定位结合了相对定位和固定定位的特点当元素在页面中滚动到一定位置时会“粘”住并保持在该位置。
div styleposition: sticky; top: 0; background-color: yellow;这是一个粘性定位的元素
/div 当页面滚动时元素会在到达顶部时固定在顶部。 七、表格布局
表格布局是一种老式但仍然有效的布局方式特别适用于展示结构化数据。表格布局使用table、tr、td等标签定义行和列。
table border1trth姓名/thth年龄/th/trtrtd张三/tdtd28/td/trtrtd李四/tdtd24/td/tr
/table 上述示例如何使用表格布局来展示数据。 八、多列布局
多列布局Multi-column Layout是一种将内容分为多个列的布局方式类似于报纸的排版。通过column-count和column-width等属性可以轻松实现多列布局。
div stylecolumn-count: 3; column-gap: 20px;这是一个多列布局的示例。通过使用CSS的多列布局属性我们可以将内容分为多个列。这种布局方式非常适合用于展示较长的文本内容如新闻文章或博客文章。
/div 文本被分成了三列并且列与列之间有20px的间隔。 九、CSS布局综合练习题
为了更好地理解这些布局技术我们来看看两个综合练习题并提供相应的代码示例。
题1创建一个三栏布局
使用Flexbox创建一个响应式三栏布局其中左栏和右栏固定宽度中间栏自适应剩余空间。
div styledisplay: flex;div styleflex: 0 0 200px; background-color: lightblue;左栏/divdiv styleflex: 1; background-color: lightgreen;中间栏/divdiv styleflex: 0 0 200px; background-color: lightcoral;右栏/div
/div 题2创建一个简单的网格布局
使用Grid布局创建一个三行三列的网格其中第一行的两个单元格合并为一个单元格第三行的三个单元格合并为一个单元格。
div styledisplay: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;div stylegrid-column: span 2; background-color: lightblue;合并两个单元格/divdiv stylebackground-color: lightgreen;单元格2/divdiv stylebackground-color: lightcoral;单元格3/divdiv stylebackground-color: lightpink;单元格4/divdiv stylegrid-column: span 3; background-color: lightgray;合并三个单元格/div
/div 如有表述错误及欠缺之处敬请指正补充。
