2019银川住房建设规划信息网站,心理学网站可以在线做量表,广州网站建设功能,企业如何做好网站运营管理1 标准流#xff08;也称为普通流、文档流#xff09;
标准流#xff08;也称为普通流、文档流#xff09;是CSS中元素布局的基础方式#xff0c;它决定了元素在页面上的默认排列方式。这种布局方式遵循HTML文档的结构#xff0c;不需要额外的CSS样式来指定元素的位置。…1 标准流也称为普通流、文档流
标准流也称为普通流、文档流是CSS中元素布局的基础方式它决定了元素在页面上的默认排列方式。这种布局方式遵循HTML文档的结构不需要额外的CSS样式来指定元素的位置。
块级元素Block-level elements
块级元素通常用来构建页面的结构和布局框架。它们的特点包括
独占一行即每个块级元素前后都会有换行。可以设置宽度width和高度height属性。默认情况下块级元素的宽度会填满其父元素的宽度除非设置了其他值高度则由其内容决定。常见的块级元素包括div、p、h1-h6、ul、ol、dl、form、table
行内元素Inline elements
行内元素通常用于包裹文档中的文本或其他行内内容。它们的特点包括
不会独占一行多个行内元素会并排排列在同一行直到遇到父元素的边缘或其他块级元素才会换行。默认情况下不能设置宽度和高度属性尽管可以通过CSS的某些属性或方法间接实现。常见的行内元素包括span、a、i、em、strong、b 等。
在实际开发中我们通常会结合使用标准流和其他布局技术来创建符合设计要求的页面布局。例如使用标准流来构建页面的基本结构然后使用浮动或定位来微调元素的位置或者使用Flexbox和Grid来实现复杂的响应式布局。
2 浮动float)
如何让多个块级盒子(div)水平排列成一行比较难虽然转换为行内块元素可以实现一行显示但是他们之间会有大的空白缝隙很难控制。 div {/*float: left;*/width: 150px;height: 200px;background-color: pink;display: inline-block;}我们可以使用浮动来解决以上问题
div {float: left;width: 150px;height: 200px;background-color: pink;}浮动Float是CSS中用于实现复杂布局的一种重要技术特别是在需要改变元素默认排列方式时。浮动最初设计用于实现文本环绕图片的效果但后来被广泛应用于网页布局中特别是用于实现多个块级元素在同一行内排列显示。
网页布局第一准则多个块级元素纵向排列找标准流多个块级元素横向排列找浮动。
float 属性在 CSS 中被用来创建浮动框也称为浮动元素这些框会被移动到其容器的左侧或右侧直到其左边缘或右边缘触及包含块即最近的已定位祖先元素如果没有这样的祖先元素则为初始包含块通常是视口或另一个浮动元素的边缘。
float 值描述left元素向左浮动直到其左边缘触及包含块或另一个浮动元素的边缘。right元素向右浮动直到其右边缘触及包含块或另一个浮动元素的边缘。none默认值。元素不浮动按照标准流进行排列。
在这个表格中float属性的每个值都对应了一个描述解释了当该值被应用时元素的行为。left和right值使得元素能够脱离文档流的正常位置并分别向左或向右移动直到它们触碰到其父元素或最近的已定位祖先元素的边界或另一个浮动元素的边界。而none值则意味着元素将保持其标准流中的位置不进行浮动。
浮动元素会脱离标准流(脱标)
当元素被设置为浮动float时它确实会脱离标准流也称为普通流或文档流的控制并移动到指定位置向左或向右浮动这个过程通常被称为“脱标”。浮动元素不再保留原先在标准流中的位置。 .box1 {width: 200px;height: 200px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: rgb(0, 153, 255);}.box1 {float: left;width: 200px;height: 200px;background-color: pink;
}.box2 {width: 300px;height: 300px;background-color: rgb(0, 153, 255);
}多个盒子例如div元素都设置了浮动无论是向左浮动float: left;还是向右浮动float: right;并且它们有足够的空间在同一行内显示那么这些盒子将会按照属性值一行内显示并且通常是顶端对齐排列的。
div {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: purple;height: 249px;}.four {background-color: skyblue;}bodydiv1/divdiv classtwo2/divdiv3/divdiv classfour4/div
/body浮动的元素是互相贴靠在一起的不会有缝隙如果父级宽度装不下这些浮动的盒子 多出的盒子会另起一行对齐。
当元素被设置为浮动float之后它们会表现出与行内块元素inline-block相似的某些特性
当元素被设置为浮动float之后它们会表现出与行内块元素inline-block相似的某些特性尽管它们在本质上是不同的。以下是浮动元素和行内块元素在表现上的一些相似之处 水平排列无论是浮动元素还是行内块元素它们都可以水平排列在同一行内直到遇到容器边界或另一个元素对于浮动元素是另一个浮动元素或容器的边缘对于行内块元素是另一个行内元素或容器的边缘。 可以设置宽度和高度浮动元素和行内块元素都可以设置width和height属性这与真正的行内元素如span不同后者通常不能设置宽度和高度。 不会独占一行与块级元素如div不同浮动元素和行内块元素都不会独占一行。它们会根据需要共享容器的宽度并在同一行内排列。 span,div {float: left;width: 200px;height: 100px;background-color: pink;}/* 如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度 */p {float: right;height: 200px;background-color: purple;}bodyspan1/spanspan2/spandivdiv/divpppppppp/p
/body浮动元素经常和标准流父级搭配使用 为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置符合网页布局第一准侧。 使用标准流的父元素排列上下位置 在这一步中我们通常会使用块级元素如div作为布局的主要结构元素并通过标准流即文档流来排列这些元素以决定它们在页面上的垂直位置。这些父元素通常不会设置浮动或定位而是保持其默认的块级行为占据完整的行宽并顺序排列在页面上。 内部子元素采取浮动排列左右位置 在确定了父元素的上下位置之后我们会在这些父元素内部使用浮动元素通常也是块级元素但设置了float属性来排列子元素以决定它们在页面上的水平位置。浮动元素会根据float: left;或float: right;的属性值向左或向右移动并尽可能地靠近其父元素的左边缘或右边缘。如果父元素的宽度足够大可以容纳多个浮动元素则这些元素会水平排列在同一行内如果宽度不够则后续的浮动元素会被推送到新的一行。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle浮动布局练习3/titlestyle.box1 {width: 1226px;height: 100px;background-color: green;margin: 0 auto;}.box2 {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.rightdiv {float: left;width: 234px;height: 300px;background-color: pink;margin-left: 14px;margin-bottom: 14px;}/style
/headbody
div classbox1/div
div classbox2div classleft左青龙/divdiv classrightdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/div
/div
/body/html
先设置盒子的大小之后设置盒子的位置
“网页布局第二准则先设置盒子的大小之后设置盒子的位置”是一个很好的布局实践原则。这个原则强调了在进行网页布局时应该首先确定各个元素盒子的尺寸宽度、高度等然后再确定它们在页面上的位置。这样做有助于避免布局混乱使得整个页面的结构更加清晰和有序。
具体来说这个原则可以分解为以下几个步骤 确定盒子的大小 宽度Width根据设计需求和页面布局为盒子设置合适的宽度。宽度可以是固定的像素值也可以是百分比值或者是使用auto让浏览器自动计算宽度。高度Height同样地根据设计需求为盒子设置合适的高度。高度也可以是固定的、百分比值或自动计算。内边距Padding、边框Border和外边距Margin这些属性也会影响盒子的实际大小因此在设置盒子大小时也需要考虑它们。 设置盒子的位置 定位方式根据需要使用不同的定位方式如标准流、浮动、绝对定位、相对定位、固定定位或粘性定位来设置盒子的位置。具体位置通过top、right、bottom、left等属性对于绝对定位、相对定位、固定定位和粘性定位或margin属性对于标准流和浮动来精确控制盒子的位置。
需要注意的是虽然这个原则强调了先设置盒子大小再设置位置但在实际布局过程中这两个步骤并不是完全独立的。很多时候我们需要根据页面的整体布局和设计需求灵活地调整盒子的大小和位置以达到最佳的视觉效果和用户体验。
为什么需要清除浮动 由于父级盒子很多情况下不方便给高度但是子盒子浮动又不占有位置最后父级盒子高度为 0 时就会影响下面的标准流盒子。
由于浮动元素不再占用原文档流的位置所以它会对后面的元素排版产生影响。 给div1 div2 设置了 float: left; 清除浮动方法div styleclear:both/div
body
div classdivdiv classdiv-son-1/divdiv classdiv-son-2/div
/div
div styleclear:both/div
div classdiv2/div
/body
