02 CSS样式及浮动

Myth丶恋晨 2021-12-20 22:59 239阅读 0赞

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

--------------------

转载于:https://www.cnblogs.com/Gavin520/p/10692201.html