02 CSS样式及浮动

web前端

一、CSS样式及浮动

1、CSS简介及应用

1.CSS简介

• CSS是层叠样式表（Cascading Style Sheets）的缩写，它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。
• 优点：
  • CSS非常容易编写
  • 可以一次设计，随处发布
  • 结合CSS和div元素，更好的控制页面布局
  • 实现表现和结构、内容相分离
  • 更方便搜索引擎的搜索

2.CSS语法

• 选择器｛属性：值｝
• 将CSS引入HTML的方式有三种
  • 外部样式表（优先级最低）
  • 嵌入样式表
  • 内联样式表（优先级最高）
  • （导入样式表）
• 简单选择器
  • 元素选择器(元素名)（优先级最低）
  • 类选择器(.类名)
  • ID选择器(#id名)（优先级最高）
• 伪类和伪元素选择器
  • 选择器:伪类 { 属性: 值; }
  • 选择器:伪元素 { 属性:值; }
• 复合选择器
  1. 交集选择器
     • 连续书写
     • 第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器
  2. 并集选择器
     • 逗号连接
  3. 后代选择器
     • 空格分隔
     • 不仅限于元素的“直接后代”，而且会影响到它的”各级后代“。

2、浮动

1.块级元素和内联元素

• HTML元素分为块级元素和内嵌元素两种类型，二者的不同之处在于块级元素定义的文本是换行的，而内嵌元素定义的文本是不换行的。
• 浏览器按照默认的文本流的输出规则，在浏览器窗口中输入HTML元素，即：
  • 如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。
  • 如果是块级元素，下一个元素就在浏览器下一行显示。
  • 元素中的文本按照元素的级别，浏览器使用不同大小的默认字体表示。

2.标准文档流及浮动

• 在标准文档流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在垂直方向和兄弟元素依次排列，不能并排。
• 使用浮动方式后，块级元素的表现会有所不同。
• CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面内容的宽度确定。

3、盒子模型

1. 盒子模型的概念

• 在CSS中，一个独立的盒子模型content（内容）、border（边框）、padding（内边距）和margin（外边距）4个部分组成。
• 一个盒子实际所占用的宽度或高度是由 “内容+内边距+边框+外边距”组成的。
• 在CSS中可以通过设定 width和height的值来控制内容所占的矩形大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。

2. 盒子的定位

• CSS提供了position这个属性，可以帮助设计者对标记进行定位，从而能够更好的完成网页的布局。position属性可以设置4个值：
  • static：默认值
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位
• z-index
  • z-index属性用于调整定位时重叠块的上下位置，与它的名称一样，想象页面为x-y轴，垂直于页面的方向为z轴，z-index值大的元素位于值小的上方。
  • z-index属性的值为整数，可以是正数也可以是负数。当块被设置了position属性时，该值便可设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

---