css基础知识总结

曾经终败给现在 2023-03-02 05:16 63阅读 0赞

*  ### 1.[CSS盒子模型与怪异盒模型][CSS] ###

**         盒子模型（Box Modle）**可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。

**盒子模型**分为两种 第一种是**W3c标准的盒子模型（标准盒模型）** 、第二种**IE标准的盒子模型（怪异盒模型）**

当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

一、**标准盒模型与怪异盒模型的表现效果的区别之处：**

**1、****标准盒模型**中**width**指的是内容区域**content**的宽度；**height**指的是内容区域**content**的高度。

**标准盒模型下盒子的大小**  =** content** + **border** + **padding** + **margin**

![format_png][]

** 2、****怪异盒模型**中的**width**指的是内容、边框、内边距总的宽度（content + border + padding）；**height**指的是内容、边框、内边距总的高度

**怪异盒模型下盒子的大小=width（content + border + padding） + margin**

**![format_png 1][]**

**二、****如何选择盒模型**

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，

如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。

** 代码**

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>怪异盒子练习</title>
        <style>
            div{
                width: 234px;
                height: 460px;
                background-color: #2e233e;
                padding: 20px 0px;
                box-sizing: border-box;
            }
            div li{
                font-size: 14px;
                height: 42px;
                line-height: 42px;
                padding-left: 30px;
            }
            a{color: white}
            li:hover{background-color: #ff6700;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
                <li><a href="">电器商城</a></li>
            </ul>
        </div>
    </body>
    </html>

**布局**

**![format_png 2][]**

**除此之外，我们还可以通过属性box-sizing来设置盒子模型的解析模式**

可以为**box-sizing**赋三个值：

**content-box**：* 默认值*，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)

**border-box**：border和padding划归到width范围内，可以理解为是IE的怪异盒模型

*  当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
 *  当设置为box-sizing:border-box时，将采用怪异模式解析计算；

## **创建CSS** ##

CSS 创建样式表分为三种情况：  
**内部样式表**

<head>
      <style type="text/CSS">
          选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
          div{width:200px; height:200px; border:1px solid red;}
      </style>
    </head>

**行内式(内联样式)**

**外部样式表(外链式)**

**样式优先级：内联样式>内部样式>外部样式**

三种样式表区别：

行内样式表 ：优点 书写方便；缺点 没有实现样式和结构相分离；使用情况 较少；控制范围 控制一个标签(少)。

内部样式表：优点 部分结构和样式相分离； 缺点 没有彻底分；使用情况 较多；控制范围 控制一个页面(中)。

外部样式表：优点 完全实现结构和样式相分离； 缺点 需要引入；使用情况 最多，推荐；控制范围 控制整个站点(多)。

## **CSS背景(background)** ##

background 属性用于定义 HTML 元素的背景。  
定义元素背景效果的 CSS 属性有五种：

background-color          背景颜色
    background-image          背景图像
    background-repeat         背景图像设置水平或垂直平铺或不平铺
    background-position       背景图像设置定位
    background-attachment     背景图像设置固定或滚动
    
    背景属性简写：
    body{
        background:green url('images/fix.gif') no-repeat fixed 12px 24px;
    }
    当使用简写属性时，属性值的顺序依次为：
    background-color --> background-image --> background-repeat --> 
    background-attachment --> background-position

## **块级元素和行内元素** ##

块级元素(block-level)：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。  
**块级元素特点**：

*  总是从新行开始
 *  高度，行高，外边距以及内边距都是可以控制的
 *  宽度默认是容器的100%
 *  可以容纳内联元素和其他块元素

行内元素(inline-level)：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度，宽度，对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。  
**行内元素的特点：**

*  和相邻行内元素在一行上。
 *  高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
 *  默认宽度就是它本身内容的宽度。
 *  行内元素只能容纳文本或则其他行内元素。（a特殊）  
      
    **注意**：  
    1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。  
    2. 链接里面不能再放链接。

## **16 行内块元素(inline-block)** ##

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。  
**行内块元素的特点**：

*  和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
 *  默认宽度就是它本身内容的宽度。
 *  高度，行高、外边距以及内边距都可以控制。

## **浮动(float)** ##

**CSS的定位机制有3种：普通流（标准流）、浮动和定位。**

**浮动**：

> **浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。**
> 
> **由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。**

**语法**：选择器\{float:属性值;\} 属性值可以是left/right/none/inherit  
**目的**：为了让多个块级元素同一行上显示。

## 清除浮动 - 使用 clear ##

> 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
> 
> clear 属性指定元素两侧不能出现浮动元素。
> 
> **语法**：选择器\{clear:属性值;\} 属性值可以是left/right/both/none/inherit  
>

## **23 定位(position)** ##

position 属性值分为四种：

*  static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
 *  relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
 *  absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
 *  fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。

叠放次序（z-index的特点：

*  z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
 *  如果取值相同，则根据书写顺序，后来居上。
 *  后面数字一定不能加单位。
 *  只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性

### 文章目录 ###

*   *  [1.为什么要清][1.]
        
        **目录**
        
        1.CSS盒子模型与怪异盒模型
        
        创建CSS
        
        CSS背景(background)
        
        块级元素和行内元素
        
        16 行内块元素(inline-block)
        
        浮动(float)
        
        清除浮动 - 使用 clear
        
        23 定位(position)
        
        文章目录
        
        1.为什么要清除浮动？
        
        2.清除浮动的方法有哪些？
        
        2.1 元素后添加空标签并设置clear:both
        
        2.2 父元素设置overflow：hidden
        
        2.3 父元素设置高度
        
        2.4 父元素设置伪类（推荐使用）
        
        --------------------
        
        [除浮动？][1.]
     *  [2.清除浮动的方法有哪些？][2.]
        
         *  [2.1 元素后添加空标签并设置clear:both][2.1 _clear_both]
         *  [2.2 父元素设置overflow：hidden][2.2 _overflow_hidden]
         *  [2.3 父元素设置高度][2.3]
         *  [2.4 父元素设置伪类（推荐使用）][2.4]
         *  [2.5 父元素也设置浮动][2.5]

## 1.为什么要清除浮动？ ##

浮动在使用过程中会产生某些缺陷，比如**父级元素的高度坍塌**等。为了避免这些缺陷，我们需要清除浮动。

## 2.清除浮动的方法有哪些？ ##

### 2.1 元素后添加空标签并设置clear:both ###

`clear:both`属性用来设置元素的左侧和右侧不允许存在float元素。我们可以利用这个属性来清除浮动。

**使用方法：**  
在浮动元素后加一个新的空标签，设置空标签的css属性为"clear:both"。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>清除浮动之clear:both</title>
    		<style type="text/css">
    		.DIV1{
    			height:100px;
    			width:100px;
    			background:red;
    			float:left;
    		}
    
    		.DIV2{
    			height:100px;
    			width:100px;
    			background:blue;
    			float:right;
    		}
    			
    		.clear{clear:both;}  //设置空元素的样式为clear：both
    		
    		</style>
    	</head>
    	<body>
    	<div class="DIV1">1</div>
    	<div class="DIV2">2</div>
    	<div class="clear"></div>  //在浮动元素后加个空元素；
    	</body>
    </html>

**优点：**

*  通俗易懂，好理解

**缺点：**

*  增加很多多余的代码，非常不利于代码的阅读和后期的维护

推荐指数：★☆☆☆☆

### 2.2 父元素设置overflow：hidden ###

`overflow:hidden`的作用是将超出元素border的内容部分进行隐藏。用overflow：hidden来清除浮动也是前端实践技巧中的偏方。

**使用方法：**  
在父级元素上定义overflow:hidden。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>清除浮动之overflow:hidden</title>
    		<style type="text/css">
    		.father{
    			overflow:hidden;
    		}
    		
    		.DIV1{
    			height:100px;
    			width:100px;
    			background:red;
    			float:left;
    		}
    
    		.DIV2{
    			height:100px;
    			width:100px;
    			background:blue;
    			float:right;
    		}	
    		</style>
    	</head>
    	<body>
    	<div class="father">
    		<div class="DIV1">1</div>
    		<div class="DIV2">2</div>
    	</div>
    	</body>
    </html>

**优点：**

*  代码简洁

**缺点：**

*  内容较多时会被遮挡

推荐指数：★★☆☆☆

### 2.3 父元素设置高度 ###

**使用方法：**  
直接给父元素设置高度。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>清除浮动之直接加高度</title>
    		<style type="text/css">
    		.father{
    			height:500px;    //直接给父元素设置高度
    		}
    		
    		.DIV1{
    			height:100px;
    			width:100px;
    			background:red;
    			float:left;
    		}
    
    		.DIV2{
    			height:100px;
    			width:100px;
    			background:blue;
    			float:right;
    		}	
    		</style>
    	</head>
    	<body>
    	<div class="father">
    		<div class="DIV1">1</div>
    		<div class="DIV2">2</div>
    	</div>
    	</body>
    </html>

**优点：**

*  操作简单，不会产生多余代码

**缺点：**

*  有时候不知道父元素的高度

推荐指数：★★★☆☆

### 2.4 父元素设置伪类（推荐使用） ###

**使用方法：**  
给父元素设置after伪类，并用zoom兼容IE

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>清除浮动之父元素设置伪类</title>
    		<style type="text/css">
    		.father{
    			zoom:1;    //为了兼容IE浏览器
    		}
    		.father:after{
    			content:"";
    			display:block;
    			clear:both;
    			visibility:hidden;
    			height:0
            }
    		
    		.DIV1{
    			height:100px;
    			width:100px;
    			background:red;
    			float:left;
    		}
    
    		.DIV2{
    			height:100px;
    			width:100px;
    			background:blue;
    			float:right;
    		}	
    		</style>
    	</head>
    	<body>
    	<div class="father">
    		<div class="DIV1">1</div>
    		<div class="DIV2">2</div>
    	</div>
    	</body>
    </html>

**优点：**

*  符合float思想，结构语义化正确

**缺点：**

*  IE浏览器兼容性问题

推荐指数：★★★★☆

# CSS 定位详解 #

CSS中的定位使用来布局的熟练应用对页面美化有很好的帮助，下面就进行详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。

1、静态定位（static）

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2、绝对定位（absolute）

绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位。绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

绝对定位的定位方法：如果它的父元素设置了除static之外的定位，比如position:relative或position:absolute及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非相对于浏览器窗口，相对于窗口定位的是fixed）。

<head>
    	<style type="text/css">
    		.box {
    			background: red;
    			width: 100px;
    			height: 100px;
    			float: left;
    			margin: 5px;
    		}
    		.two {
    			position: absolute;
    			top: 50px;
    			left: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box" >One</div>
    	<div class="box  two" >Two</div>
    	<div class="box" >Three</div>
    	<div class="box">Four</div>
    </body>

将class="two"的div定位到距离<body>的顶部和左侧分别50px的位置。会改变其他元素的布局，不会在此元素本来位置留下空白。

![70][]

3、相对定位（relative）

相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

<head>
    	<style type="text/css">
    		.box {
    			background: red;
    			width: 100px;
    			height: 100px;
    			float: left;
    			margin: 5px;
    		}
    		.two {
    			position: relative;
    			top: 50px;
    			left: 50px;
    		}
    	</style>
    </head>
    <body>
    	<div class="box" >One</div>
    	<div class="box  two" >Two</div>
    	<div class="box" >Three</div>
    	<div class="box">Four</div>
    </body>

将class="two"的div定位到距离它本来位置的顶部和左侧分别50px的位置。不会改变其他元素的布局，会在此元素本来位置留下空白。

![70 1][]

4、固定定位（fixed）

固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。

固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

5、绝对定位vs相对定位

绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；相对定位元素在首层，与文本流一起存放，它们之间互相影响。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序 。

[CSS]: https://www.cnblogs.com/nyw1983/p/11326599.html
[format_png]: /images/20230208/ca60c289247840509961d835f14c89a8.png
[format_png 1]: /images/20230208/e7f42acd1dc842b1a13bbeca2e414fde.png
[format_png 2]: /images/20230208/e0d0d9ef7f0a4f66acbb7807c4bf7a5b.png
[1.]: https://blog.csdn.net/u011394526/article/details/107379795#1_3
[2.]: https://blog.csdn.net/u011394526/article/details/107379795#2_5
[2.1 _clear_both]: https://blog.csdn.net/u011394526/article/details/107379795#21_clearboth_6
[2.2 _overflow_hidden]: https://blog.csdn.net/u011394526/article/details/107379795#22_overflowhidden_54
[2.3]: https://blog.csdn.net/u011394526/article/details/107379795#23__102
[2.4]: https://blog.csdn.net/u011394526/article/details/107379795#24__148
[2.5]: https://blog.csdn.net/u011394526/article/details/107379795#25__200
[70]: /images/20230208/5a333a25f06c49929b596978a2711499.png
[70 1]: /images/20230208/8df2aaf2a38949d3a9bb566343f92857.png