整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

21.HTML 浮动、定位和显示属性

SS中的浮动(Floats)、定位(Positioning)和显示(Display)属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景,帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

浮动(Float)

浮动是CSS中用于实现元素排列的一种方式,它可以让元素脱离正常的文档流,并可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动元素的边缘。

.element {
  float: left; /* 或者 'right' */
}

使用场景

  • 文字环绕图片。
  • 创建水平导航栏。
  • 无网格系统时的列布局。

注意事项

  • 清除浮动(Clearing Floats):使用clear属性可以防止元素被浮动元素覆盖。
.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}
  • 包含浮动(Containing Floats):浮动元素的父容器可能不会扩展以包含浮动的子元素,可以通过清除浮动或使用其他技术(如overflow)来解决这个问题。
  • 浮动塌陷(Float Collapse):浮动元素不占据空间,可能导致父元素高度塌陷。

定位(Position)

定位属性允许你控制元素的位置,它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用场景

  • 相对定位(Relative Positioning):元素相对于其正常位置进行偏移。
.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}
  • 绝对定位(Absolute Positioning):元素相对于最近的已定位父元素进行定位。
.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}
  • 固定定位(Fixed Positioning):元素相对于视口进行定位,即使页面滚动也不会移动。
.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}
  • 粘性定位(Sticky Positioning):元素基于用户的滚动位置在相对和固定定位之间切换。
.sticky-element {
  position: sticky;
  top: 10px;
}

注意事项

  • 定位元素可能会脱离文档流,影响周围元素的布局。
  • z-index属性可以控制堆叠顺序。
  • 绝对定位元素的容器应有position: relative;,以便正确定位。

显示(Display)

display属性是CSS中最重要的用于控制布局的属性之一,它定义了元素如何显示在页面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用场景

  • 块级元素(Block):display: block;使元素表现为块级,占据新的行。
.block-element {
  display: block;
}
  • 内联元素(Inline):display: inline;使元素在文本行中显示,不开始新行。
.inline-element {
  display: inline;
}
  • 内联块元素(Inline-Block):display: inline-block;允许元素并排排列,同时拥有块级元素的宽度和高度属性。
.inline-block-element {
  display: inline-block;
}
  • 弹性盒子(Flex):display: flex;创建了一个弹性容器,其子元素可以灵活地在容器内排列。
.flex-container {
  display: flex;
}
  • 网格(Grid):display: grid;创建了一个网格容器,可以定义行和列以及在网格内放置元素。
.grid-container {
  display: grid;
}
  • 隐藏元素(None):display: none;将元素隐藏,且不为元素保留空间。
.hidden-element {
  display: none;
}

注意事项

  • 使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
  • display: flex;和display: grid;为现代布局提供了更多控制,通常比浮动和定位更优。

示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS样式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在这个例子中,我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航,以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚,并使用固定定位为页面添加了一个始终可见的固定元素。最后,我们使用了overflow: hidden;来清除头部中浮动元素的影响。

结语

浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性,前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展,我们也需要不断学习和适应新的CSS特性,以保持我们技能的前沿性。

)CSS 标准盒子模型(Box Model)

在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

1.1Margin(外边距)清除边框外的区域,外边距是透明的

1.2Border(边框)围绕在内边距和内容外的边框

1.3Padding(内边距)清除内容周围的区域,内边距是透明的

1.4Content(内容)盒子里填充的内容比如文本,图像等

标准盒子模型

宽度为100px的div

根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px

2)DIV+CSS布局

Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等

DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both

clear属性作用是清除浮动,其值为:1)left 2)right 3)both

d2向右浮动 float:right

因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置

d2设置为右浮动其他两个div位置的变化:

1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示

2)d2脱离文档流,d3自动填充到d2的位置

d1,d2全部设置为右浮动

1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图

2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置

3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮动,d3设置为右浮动

当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图

当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局

注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守

TML即超文本标记语言是一种用于创建网页的标准标记语言。对于初学者来说一般可以使用工具来生成html,如:DW,HB等,这些都是所见即所得的工具,在设计视图将需要展现的文字、段落、图片等内容通过软件排好版,在代码视图将由软件自动生成对应的HTML代码,这些代码由客户电脑上的浏览来解析执行。

HTML语言是一种优美的语言,几乎所有的标记都是成对出现的,配合CSS样式和JS脚本来控制页面显示的样式及效果。有一定开发经验的高手往往可以直接用代码视图来编写网页,不管是软件生成html还是手写HTML代码最终显示的效果都是一致的。如下图是由DW设计的网页,下方代码对应的就是HTML代码,视图效果和代码是一一对应的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">