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值一样时，将保持原有的高低覆盖关系。

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。