一文带你掌握 CSS 必会知识点

最新推荐文章于 2022-07-29 23:59:40 发布

苍猫不是猫

最新推荐文章于 2022-07-29 23:59:40 发布

阅读量989

点赞数 5

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/wild_onlyking/article/details/106213058

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

子曰：温故而知新，可以为师矣。《论语》-- 孔子

一、CSS样式规则

CSS 规则由两部分构成：选择器，声明。
在这里插入图片描述

二、CSS 样式引用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式引用</title>
    <!-- 3. href:外部css路径 -->
    <link rel="stylesheet" href="css.css" type="text/css">
    <!-- 1. 内部样式-->
    <style type="text/css">
        p{
            color: aqua;
            font-family: "楷书";
            font-size: 20px;
         }
    </style>

     <!-- 4. 外部导入样式-->
    <style type="text/css">
        @import url(css.css);
    </style>
</head>
<body>
    <p>用于定义HTML内容在浏览器中的显示样式</p>  
    <!-- 2. 行内样式-->
    <h1 style="color: red; font-size: 20px;">css行内使用方法</h1> 
</body>
</html>

三、CSS 使用方法优先级

行内样式 > 内部样式 > 外部样式。
链入外部样式表与内部样式表之间的优先级取决于 所处位置的先后。
最后定义的优先级最高（ 就近原则 ）。

四、CSS 选择器

1. 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器种类</title>
    <style type="text/css">
       /* 通过类选择器来为具有此class属性的元素设置CSS样式 */
       .special{color: salmon;font-size: 30px;}
       /* 可以为不同类型的元素的同一个名称的类选择器设置不同的样式规则*/
       p.special，h1.special{
          font-size: 30px;
      }
    </style>
</head>
<body>
     <!--为HTML标签添加class属性-->
    <h1 class="special"><em>CSS</em>是什么</h1> 
     <!--同一个元素可以设置多个类，之间用空格隔开-->
     <p class="special one" >用于定义HTML内容在浏览器中的显示样式</p>
</body>
</html>

2. 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器种类</title>
    <style type="text/css">
       /* p标签样式 */
       p{color: royalblue;}
    </style>

</head>
<body>
    <p>CSS层叠样式</p>
</body>
</html>

3. id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器种类</title>

    <style type="text/css">
       /* class id 区分大小写 */
       #two{color: green;}
    </style>

</head>
<body>
	<h1 id="two"><em class="classred">css</em>使用方法</h1>	 
</body>
</html>

4. 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器种类</title>
    <style type="text/css">
      /* 后代选择器 空格隔开 */
      div h1 em{
          color: grey;
      }
    </style>

</head>
<body>
	<div>
		<h1><em>css</em>选择器</h1>
	</div>	  
</body>
</html>

五、链接伪类

链接的 4 种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        a:link{color:blue;} /* 未访问状态 */ 
        a:visited{color:gray;} /* 已访问状态 */
        a:hover{color:green;}/* 鼠标悬浮状态 */
        a:active{color:orange;}/* 激活状态 */     
    </style>
</head>
<body>
<a href="http://www.imooc.com" target="_blank">css使用方法</a>
</body>
</html>

链接伪类的顺序： Link > Visited > Hover > Active
a:hover 必须置于 a:link 和 a:visited 之后才有效。
a:active 必须置于 a:hover 之后才有效。

六、CSS 继承和层叠

继承：从父元素那继承部分CSS属性。
层叠：不冲突时，多个样式可以重叠为一个样式；冲突时，按不同样式优先级来应用样式。

七、CSS 优先级规则

同一样式表中：
- 权值相同：就近原则（离被设置元素越近优先级越高）。
- 权值不同：根据权值来判断 CSS 样式，哪种 CSS 样式权值高，就使用哪种样式。
选择器权值：
- 通配符选择器：权值为 0。
- 标签选择器：权值为 1。
- 类选择器和伪类：权值为 10。
- ID选择器：权值为 100。
- 行内样式：权值为 1000。
权值规则：
- 统计不同选择器的个数，每类选择器的个数乘以相应权值，把所有的值相加得出选择器的权值。
!import 规则：
- 可以调整样式规则的优先级。
- 添加在样式规则之后，中间用空格隔开。
总结：
- !import 声明最高。
- CSS 使用方法的优先级：行内样式 > 内部样式 > 外部样式。
- 样式表中优先级： id选择器 > class 选择器 > 标签选择器 > 通配符。
- 权值相同：就近原则。权值不同：使用权值高的。

八、CSS 文字和文本样式

1. 文字

字体：`font-family`

<style type="text/css">
font-family:"黑体","宋体";
</style>

大小：`font-size`

<style type="text/css">
font-size:20px;
font-size:1em;
font-size:2%;
</style>

颜色：`font-color`

<style type="text/css">
h1{color:red;}
p{color:rgb(0%,100%,0%);}
div{color:#00880a;}
</style>

粗细：`font-weight`

<!-- 默认值：normal 等于 400 ，700 等于 blod-->
<p class="normal">字体粗细font-weight：normal</p>
<p class="bolder">字体粗细font-weight：bolder</p>
<p class="bold">字体粗细font-weight：bold</p>	
<p class="lighter">字体粗细font-weight：lighter</p>

样式：`font-style`

<style type="text/css">
        .normal{font-style:normal;}
   		.italic{font-style:italic;}
		.oblique{font-style:oblique;}
</style>

<p class="normal">正常的字体</p>
<p class="italic">斜体</p>
<p class="oblique">倾斜</p>

简写：`font`

<style type="text/css">
font:italic bold small-caps 50px/1.5em "黑体","宋体";
</style>

2. 文本样式

水平对齐方式：`text-align`

<style type="text/css">
.text1{text-align:left;}
.text2{text-align:center;}
.text3{text-align:right;}
.text4{text-align:justify;}
</style>

设置元素中文本行高：`line-height`

文字基线

行高和间距
在这里插入图片描述
行高和行内高

<style type="text/css">
h1{height:50px;background-color:#ececec;line-height:50px;}   
</style>

设置元素内容垂直方式：`vertical-align`

在这里插入图片描述

<style type="text/css">
        .sub{vertical-align: sub;}
        .super{vertical-align: super;}
		.baseLine{vertical-align: baseline;}
		.top{vertical-align: top;}
		.textTop{vertical-align: text-top;}
		.middle{vertical-align: middle;}
		.textBottom{vertical-align: text-bottom;}
		.bottom{vertical-align: bottom;}
	</style>

文本样式属性

在这里插入图片描述

九、盒子模型

在这里插入图片描述

1. 宽高属性

/*宽高属性适用块元素和替换元素*/
<style type="text/css">
div{ background-color: #acacac;width:200px;height:100px; max-height:200px;min-height: 100px;min-width:500px;max-width: 300px;}
</style>

2. 边框宽度

<!DOCTYPE HTML>
<html>
<head>
    <title>边框属性</title>
    <meta charset="utf-8"/>
</head>
<style type="text/css">
    p {width: 150px;height: 100px;background-color: #ececec;line-height: 100px;}
    .one {border: 10px #0099ee solid;}
    .two {border-top: 5px red solid;
        border-left: 10px blue dotted;
        border-right: 10px blue dotted;
        border-bottom: 5px red solid;
    }
</style>
<body>
<!-- border属性 -->
<!-- <p>边框属性border</p> -->
<!-- border属性不同方向设置 -->
<p class="one">边框属性border</p>
<p class="two">边框属性border</p>
</body>
</html>

3. 内边框和外边框

在这里插入图片描述

<style type="text/css">
/**
padding的值不可为负值，margin值可为负值
宽度固定，margin：auto 表示水平居中
垂直方向，两个相邻元素都设置外边距，外边距会发生合并，合并后的外边距高度=两个发生合并外边距的高度中最大值
**/
 .one{width:300px;height:300px;background-color: #acacac;padding: 20px 40px 50px 30px;}
 .two{width:300px;height:300px;background-color: #acacac;margin: 20px 40px 50px 30px;}     
</style>

4. 盒子模型计算

标准盒子模型：

在这里插入图片描述

在 CSS 中，width 和 height 指的是 内容区域的宽度和高度。
增加内边距、边框和外边距不会影响内容区域的尺寸，但会 增加元素框的总尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型计算</title>
</head>
<style type="text/css">
    div {margin: 10px;
        padding: 5px;
        border: 1px red solid;
        width: 68px;
        height: 48px;}
</style>
<body>
<!-- 页面总占宽100px,高80px,其中margin:10px\padding:5px\border:1px -->
<div>盒子模型计算</div>
</body>
</html>

5. display 属性

inline：元素将显示为内敛元素，元素前后没有换行符。
block：元素将显示为块级元素，元素前后会带有换行符。
inline-block：行内块元素，元素呈现为inline，具有 block 相应特性。
none：此元素不会被显示。

十、CSS 背景样式

<!--
backgroud-color        :设置元素的背景颜色。
backgroud-image        :把图像设置为背景。
background-position    :设置背景图像的起始位置。
background-attachment  :背景图像是否固定或者随着页面的其余部分滚动。
background-repeat      :设置背景图像是否重复及如何重复。 
-->
<style>
        div {
            width: 100%;
            height: 1500px;
            border: 1px solid #ff0000;
            background: #000000 url(img/bg-little.png) no-repeat top left scroll;
        }
</style>

background-position 说明：
在这里插入图片描述

十一、CSS 列表样式

设置列表项的标记样式类型：

list-style-type:关键字|none
无序列表：
有序列表：
使用图片设置列表项标记

<style>
		ul li {
			list-style-image: url(img/remind.png);
		}
</style>

列表项标记位置

<style>
		ul li {
			list-style-image: url(img/remind.png);
			/* outside  : 默认值，列表项目标记位置在文本以外，且环绕文本不根据标记对齐
			   inside   : 列表项目标记放置在文本以内，且环绕文本根据标记对齐*/
			list-style-position: inside;
		}
</style>

列表样式缩写

<style>
		ul li {
			list-style: url(img/remind.png) inside square  ;
		}
</style>

十二、浮动（Float）

1. CSS 定位机制

普通流（标准流）：默认状态，元素自动 从左往右，从上往下 排列。
块元素：独占一行，可以设置宽高，如果不设置宽高，宽度默认为容器的100%。
行内元素：与其他元素同行显示，不可以设置宽高，宽高就是文字或者图片的宽高。

2. CSS 的 Float

会使元素向左或向右移动，只能左右，不能上下。
浮动元素碰到包含框或另一个浮动框，浮动停止。
浮动元素之后的元素将围绕它，之前的不受影响。
浮动元素会脱离标准流。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text_around</title>
	<style type="text/css">
	.container{
		width:800px;
		height:600px;
		border:2px solid #333;
	}
	.container img{
		float:left;
	}
	</style>
</head>
<body>
	<div class="container">
		<!-- 浮动元素只影响后面元素 -->
		<img src="./img/1.jpg">
		<p>前言 目前Mock技术已经比较成熟，在日常的工作中Mock也可以给我们带来很大的遍历，本篇文章将会使用Moco框架，一步一步搭建一套Mock Server，使得接口的自动化测试更加的提前，也能够使得前后端分离。 共识与痛点 目前，在软件行业内，大家已经达成的共识就是，测试的工作应该从需求阶段就开始，但在实际工作落地的时候，我们也仅仅能够根据需求写一些测试用例。 在开发测试代码的过程中，调试就面临着...前言 目前Mock技术已经比较成熟，在日常的工作中Mock也可以给我们带来很大的遍历，本篇文章将会使用Moco框架，一步一步搭建一套Mock Server，使得接口的自动化测试更加的提前，也能够使得前后端分离。 共识与痛点 目前，在软件行业内，大家已经达成的共识就是，测试的工作应该从需求阶段就开始，但在实际工作落地的时候，我们也仅仅能够根据需求写一些测试用例。 在开发测试代码的过程中，调试就面临着...前言 目前Mock技术已经比较成熟，在日常的工作中Mock也可以给我们带来很大的遍历，本篇文章将会使用Moco框架，一步一步搭建一套Mock Server，使得接口的自动化测试更加的提前，也能够使得前后端分离。 </p>
	</div>
</body>
</html>

3. 清除浮动

元素使用浮动后会脱离普通流，出现 “高度塌陷”
常用方法
- 在浮动元素后使用一个空元素。
- 给浮动元素的容器添加 overflow:hidden。
- 使用 CSS3 的 :after 伪元素。
- 父级元素定义 height。只适合高度固定的布局。
- 父级元素一起浮动。不推荐，会产生新的浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动常用方法</title>
    <style type="text/css">

        /**
        .clear{	
            // 方法一
            clear: both;
        }
        */

        /* 方法三 */
        .clearfix::after {
            content: '.';
            height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            /* 兼容低版本的浏览器 */
            zoom: 1;
        }

        .container {
            width: 500px;
            /* height:100px;   方法四 */
            border: 2px solid #333;
            /* 方法二 */
            /* overflow: hidden; */
            zoom: 1;
            /* float: left;   方法五*/
        }

        .box01 {
            width: 100px;
            height: 100px;
            background: blue;
            color: #fff;
            float: left;
        }

        .box02 {
            width: 100px;
            height: 100px;
            background: red;
            color: #fff;
            float: left;
        }

        .box03 {
            width: 100px;
            height: 100px;
            background: orange;
            color: #fff;
            float: left;
        }

        .box04 {
            width: 500px;
            height: 200px;
            background: green;
        }

    </style>
</head>
<body>
<div class="container clearfix">
    <div class="box01">11111</div>
    <div class="box02">22222</div>
    <div class="box03">33333</div>
    <!-- <div class="clear"></div> -->
</div>

<div class="box04">44444</div>
</body>
</html>

十三、定位（Position）

1. static

静态定位，也叫做自然定位。
作用：块、行垂直排列下去，行内水平从左到右，不写则默认都是静态定位。

2. relative

相对定位。
作用：使元素称为 containing-block 官方说法是可定位的祖先元素。
特点：
- 可以使用 top/right/bottom/left/z-index 进行相对定位。
- 相对定位的元素不会离开常规流。
- 任何元素都可以设置为 relative ,它的绝对定位的后代都可以相对于它进行绝对定位。这个超级好用。
- 可以使用浮动元素发生偏移，并控制他们的堆叠顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>releative属性</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        .block{
            position: relative;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            line-height: 80px;
            border: 2px solid black;
            text-align: center;
            float: left;
            z-index: 8;
        }

        .block:nth-child(2){
            position: relative;
            top: 0px;
            left:-80px;
            border-color: red;
            float: left;;
            z-index: 1;
        }
    </style>

</head>
<body>
    <div class="block">A</div>
    <div class="block">B</div>
    <!-- <div class="block">C</div> -->
</body>
</html>

3. absolute

绝对定位。
作用：使元素脱离常规流。
特点：
- 设置尺寸时，如果设置为百分比，比的是最近定位的祖先元素。
- 上下左右如果为0，那么它将对齐到最近定位祖先元素的各边。
- 上下左右如果设置为 auto，那么会被打回原形。
- 如果没有最近的祖先元素，会认为祖先元素。也就是说如果元素没有已定位（除 static 定位以外）的祖先元素，那么它的位置相对于最初的包含块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <link rel="stylesheet" href="./reset.css">

    <style>
         /* .block{
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            border: 2px solid black;
          } */

          /* .block:nth-child(1){
               position: absolute;
               top: 20px;
               left: 20px;
               border-color: blue;
               z-index: 999999;
          } */

          /* .block:nth-child(2){
               position: absolute;
               top: 20px;
               left: 20px;
               width: 50%;
               height: 50%;
               border-color: red;
               z-index: 1;
          } */

          .parent{
              position: relative;
              width: 200px;
              height: 150px;
              background: blue;
          }
          .child{
              position: absolute;
              width: 80px;
              height: 80px;
              background: red;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto auto;
          }
    </style>
      
</head>
<body>

     <div class="parent">
        <div class="child"></div>
     </div>

    <!-- <div class="block">A</div>
    <div class="block">B</div>
    <div class="block">C</div> -->
</body>
</html>

4. fixed

固定定位。
作用：与 absolute 等同。
特点：固定定位元素不会随着视口的滚动而滚动。同时继承 absolute 特点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fixed</title>
     <link rel="stylesheet" href="./reset.css">

     <style>

         body{
             height: 800px;
             background-color: burlywood;
         }
          .block{
              width: 80px;
              height: 80px;
              line-height: 80px;
              text-align: center;
              border: 2px solid black;
          }

          .block:nth-child(1){
              position: absolute;
              top: 10px;
              left: 20px;
          }

          .block:nth-child(2){
              position: fixed;
              top: 10px;
              left: 20px;
          }

     </style>

</head>
<body>
       <div class="block">绝对定位</div>
       <div class="block">固定定位</div>
</body>
</html>

5. sticky

作用： relative + fixed 结合。可以制造出吸附效果。
特点：
- 如果产生偏移，原位置还是会在常规流中。
- 如果它的最近祖先有滚动，那么它的偏移尺寸就是最近的祖先元素。
- 如果最近祖先元素没有滚动，那么它的偏移标尺是视口。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sticky</title>
       <style>
           .logo{
               width: 100%;
               height: 50px;
               background: gray;
           }

           .nav{
               position: sticky;
               /* 偏移量 */
               top: 0;
               width: 100%;
               height: 50px;
               background: blue;
               color: #ffffff;
               cursor: pointer;
           }

           .content{
               position: relative;
               height: 200px;
               overflow: scroll;
           }
       </style>
    <style>

    </style>
</head>
<body>
    
    <div class="con">
        <div class="logo">
            想象我是网站头图
        </div>
    </div>
    <div class="content">
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <div class="nav">
            想象这里是一堆的 banner 导航按钮 | 编辑 | 发布
        </div>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
        <p>
            假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字 假装自己是一段文字
        </p>
    </div>
</body>
</html>

6. 侧边导航案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边导航栏案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .page {
            width: 100%;
            height: 4043px;
            background: url("./img/mooc.png") center no-repeat;
        }

        .nav {
            width: 160px;
            height: 250px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -103px;
            font-family: '微软雅黑';
        }


        .nav-li {
            width: 160px;
            height: auto;
            border-bottom: 1px solid #fff;
            background: #333;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .nav-li ul {
            width: 160px;
            height: auto;
            background: #fff;
            display: none;
        }

        .nav-li ul li {
            width: 160px;
            height: 40px;
            border-bottom: 1px dashed #666;
            color: #333;
            text-align: center;
            line-height: 40px;
            position: relative;
        }

        .tit {
            width: 160px;
            height: 40px;
        }

        .nav-li:hover ul {
            display: block;
        }

        .list-3 {
            width: 160px;
            height: auto;
            position: absolute;
            left: 160px;
            top: 0px;
            display: none;
        }

        .list-3Dom {
            width: 160px;
            height: 40px;
            background: #444;
            border-bottom: 1px solid #fff;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .nav-li ul li:hover .list-3 {
            display: block;
        }


    </style>
</head>
<body>
<div class="page">
    <div class="nav">
        <div class="nav-li">
            <div class="tit">标题</div>

            <ul>
                <li>
                    二级栏目
                    <div class="list-3">
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                        <div class="list-3Dom">三级栏目</div>
                    </div>
                </li>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
            </ul>
        </div>
        <div class="nav-li">标题
            <ul>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
            </ul>

        </div>
        <div class="nav-li">标题
            <ul>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
            </ul>

        </div>
        <div class="nav-li">标题
            <ul>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
            </ul>
        </div>
        <div class="nav-li">标题
            <ul>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
                <li>
                    二级栏目
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

十四、常见的页面布局

1. 基础行布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    这是页面内容
</div>
</body>
</html>

2. 行布局自适应限制最大宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            max-width: 800px;
            width: 100%;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容这是页面内容
</div>
</body>
</html>

3. 行布局垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }
        .container{
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-400px;
            width:800px;
            height:200px;
            background: #4c77f2;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    这是页面内容
</div>
</body>
</html>

4. 行布局固定宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width:800px;
            height: 50px;
            background: #333;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 50px;
        }
        .footer{
            width: 800px;
            height: 100px;
            background: #333;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 100px;
        }
        .banner{
            width: 800px;
            height: 300px;
            background: #30a457;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 300px;
        }
    </style>
</head>
<body>
<div class="header">这是页面头部</div>
<div class="banner">
    这是页面轮播图
</div>
<div class="container">
    这是页面内容
</div>
<div class="footer">这是页面底部</div>
</body>
</html>

5. 行布局且部分区域自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }
        .container{
            width: 1000px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width:1000px;
            height: 50px;
            background: #333;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 50px;
        }
        .footer{
            width: 1000px;
            height: 100px;
            background: #333;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 100px;
        }
        .banner{
            width: 100%;
            height: 300px;
            background: #30a457;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 300px;
        }
    </style>
</head>
<body>
<div class="header">这是页面头部</div>
<div class="banner">
    这是页面轮播图
</div>
<div class="container">
    这是页面内容
</div>
<div class="footer">这是页面底部</div>
</body>
</html>

5. 行布局且导航条固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            padding-top: 40px;
            text-align: center;
        }
        .header{
            width:100%;
            position: fixed;
            height: 40px;
            background: #414141;
            text-align: center;
            font-size: 16px;
            line-height: 40px;

        }
        .footer{
            width: 800px;
            height: 100px;
            background: #333;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="header">这是页面头部</div>
    <div class="container">
        这是页面内容
    </div>
    <div class="footer">这是页面底部</div>
</body>
</html>

6. 两列布局固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width:1000px;
            margin: 0 auto;
        }
        .left{
            width:600px;
            height: 1000px;
            float:left;
            background: #1a5acd;
            color: #fff;
        }
        .right{
            width: 400px;
            height: 1000px;
            float:right;
            background: #5880f9;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">这是页面左侧</div>
        <div class="right">这是页面右侧</div>
    </div>
</body>
</html>

7. 两列布局自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
       .left{
           width:60%;
           height: 1000px;
           float:left;
           background: #1a5acd;
           color: #fff;
       }
        .right{
            width: 40%;
            height: 1000px;
            float:right;
            background: #5880f9;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="left">这是页面左侧</div>
    <div class="right">这是页面右侧</div>
</body>
</html>

8. 三列布局固定宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局-固定宽</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
        }
        .left{
            width:300px;
            height: 1000px;
            float:left;
            background: #67b581;
        }
        .right{
            width: 200px;
            height: 1000px;
            float:right;
            background: #67b581;
        }
        .middle{
            height: 1000px;
            width:500px;
            background: #175bd8;
            float:left;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">这是页面左侧</div>
    <div class="middle">这是页面中间</div>
    <div class="right">这是页面右侧</div>
</div>
</body>
</html>

9. 三列布局自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .left{
            width:25%;
            height: 1000px;
            float:left;
            background: #67b581;
        }
        .right{
            width: 25%;
            height: 1000px;
            float: right;
            background: #67b581;
        }
        .middle{
            width: 50%;
            height: 1000px;
            background: #175bd8;
            word-wrap: break-word;
            float:left;
        }
    </style>
</head>
<body>

    <div class="left">这是页面左侧</div>
    <div class="middle">这是页面中间</div>
    <div class="right">这是页面右侧</div>

</body>
</html>

10 . 混合布局固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width:800px;
            height: 50px;
            background: #5880f9;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 50px;
        }
        .footer{
            width: 800px;
            height: 100px;
            background: #ed817e;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 100px;
        }
        .left{
            width:200px;
            height: 1000px;
            float:left;
            background: #67b581;
        }
        .right{
            width: 600px;
            height: 1000px;
            float:right;
            background: #d0d0d0;
        }
    </style>
</head>
<body>
    <div class="header">这是页面头部</div>
    <div class="container">
        <div class="left">这是页面左侧</div>
        <div class="right">这是页面右侧</div>
    </div>
    <div class="footer">这是页面底部</div>
</body>
</html>

11. 混合布局自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            color:#fff;
        }
        .container{
            width: 100%;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width:100%;
            height: 50px;
            background: #8b8d91;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 50px;
        }
        .banner{
            width: 100%;
            height: 300px;
            background: #f29196;
            margin: 0 auto;
            text-align: center;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: #8b8d91;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            line-height: 100px;
        }
        .left{
            width:30%;
            height: 1000px;
            float:left;
            background: #4c77f2;
        }
        .right{
            width: 70%;
            height: 1000px;
            float:right;
            background: #67b581;
        }
    </style>
</head>
<body>
<div class="header">这是页面头部</div>
<div class="banner">这是页面轮播图</div>
<div class="container">
    <div class="left">这是页面左侧</div>
    <div class="right">这是页面右侧</div>
</div>
<div class="footer">这是页面底部</div>
</body>
</html>

12. 双飞翼布局

<!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>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>双飞翼布局</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,
        .footer{
            border: 1px solid #333;
            background: #ddd;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }
        .sub,
        .main,
        .extra{
            float: left;
            min-height: 130px;
        }
        .sub{
            margin-left: -100%;
            width: 200px;
            background: #f00;
        }
        .extra{
            margin-left: -220px;
            width: 220px;
            background: #1a5acd;
        }
        .main{
            width: 100%;
        }
        .main-inner{
            margin-left: 200px;
            margin-right: 220px;
            min-height: 130px;
            background: #30a457;
            word-break: break-all;
        }
        .footer{
            clear: both;
        }
    </style>
</head>
<body>
<div class="header">
    <h4>header</h4>
</div>
<div class="main">
    <div class="main-inner">
        <h4>main</h4>
        <p>
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
            这是页面的主体内容
        </p>
    </div>
</div>
<div class="sub">
    <h4>sub</h4>
    <p>
        这是页面的左边
        这是页面的左边
        这是页面的左边
        这是页面的左边
        这是页面的左边
        这是页面的左边
    </p>
</div>

<div class="extra">
    <h4>extra</h4>
    <p>
        这是页面的右边
        这是页面的右边
        这是页面的右边
        这是页面的右边
    </p>
</div>
<div class="footer">
    <h4>footer</h4>
</div>
</body>
</html>

13. 圣杯布局

<!DOCTYPE html>
<html>

<head>
    <title>圣杯布局</title>
    <meta charset="utf-8">
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        min-width: 700px;
    }

    .header,
    .footer {
        float: left;
        width: 100%;
        background: #ddd;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .container {
        padding: 0 220px 0 200px;
    }

    .left,
    .middle,
    .right {
        position: relative;
        float: left;
        min-height: 300px;
    }

    .left {
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: #f00;
    }

    .right {
        margin-left: -220px;
        right: -220px;
        width: 220px;
        background: #30a457;
    }

    .middle {
        width: 100%;
        background: #1a5acd;
    }
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>
                这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容 这是页面的主体内容
            </p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>
                这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边 这是页面的左边
            </p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>
                这是页面的右边 这是页面的右边 这是页面的右边 这是页面的右边
            </p>
        </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

14. 灵活布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>圣杯布局</title>

    <style type="text/css">
        body {background-color: #ffffff; font-size:14px;}
        #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;}
        .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .bd-3-rr {margin:10px 0; min-width:400px;}
        .main {background-color: #03a9f4; color:#ffffff;}
        .aside, .aside-1, .aside-2 {background-color: #00bcd4; color:#ffffff;}
        p {margin:0; padding:20px; text-align: center;}


        /* 左侧栏固定宽度，右侧自适应 */
        .bd-lft {
            zoom:1;
            overflow:hidden;
            padding-left:210px;
        }
        .bd-lft .aside {
            float:left;
            width:200px;
            margin-left:-100%; /*= -100%*/

            position:relative;
            left:-210px; /* = -parantNode.paddingLeft */
            _left: 0; /*IE6 hack*/
        }
        .bd-lft .main {
            float:left;
            width:100%;
        }


        /* 右侧栏固定宽度，左侧自适应 */
        .bd-rgt {
            zoom:1;
            overflow:hidden;
            padding-right:210px;
        }
        .bd-rgt .aside {
            float:left;
            width:200px;
            margin-left:-200px; /* = -this.width */

            position:relative;
            right:-210px; /* = -parantNode.paddingRight */
        }
        .bd-rgt .main {
            float:left;
            width:100%;
        }


        /* 左中右 三栏自适应 */
        .bd-3-lr {
            zoom:1;
            overflow:hidden;
            padding-left:210px;
            padding-right:210px;
        }
        .bd-3-lr .main {
            float:left;
            width:100%;
        }
        .bd-3-lr .aside-1 {
            float: left;
            width:200px;
            margin-left: -100%;

            position:relative;
            left: -210px;
            _left: 210px; /*IE6 hack*/
        }
        .bd-3-lr .aside-2 {
            float: left;
            width:200px;
            margin-left: -200px;

            position:relative;
            right: -210px;
        }

        /* 都在左边，右侧自适应 */
        .bd-3-ll {
            zoom:1;
            overflow:hidden;
            padding-left:420px;
        }
        .bd-3-ll .main {
            float:left;
            width:100%;
        }
        .bd-3-ll .aside-1 {
            float: left;
            width:200px;
            margin-left: -100%;

            position:relative;
            left: -420px;
            _left: 0px; /*IE6 hack*/
        }
        .bd-3-ll .aside-2 {
            float: left;
            width:200px;
            margin-left: -100%;

            position:relative;
            left: -210px;
            _left: 210px; /*IE6 hack*/
        }

        /* 都在右边，左侧自适应 */
        .bd-3-rr {
            zoom:1;
            overflow:hidden;
            padding-right:420px;
        }
        .bd-3-rr .main {
            float:left;
            width:100%;
        }
        .bd-3-rr .aside-1 {
            float: left;
            width:200px;
            margin-left: -200px;

            position:relative;
            right: -210px;
        }
        .bd-3-rr .aside-2 {
            float: left;
            width:200px;
            margin-left: -200px;

            position:relative;
            right: -420px;
        }


    </style>

</head>
<body>

<div id="hd">头部</div>

<div class="bd-lft">
    <div class="main">
        <p>主内容栏自适应宽度</p>
    </div>

    <div class="aside">
        <p>侧边栏固定宽度</p>
    </div>
</div>

<div class="bd-rgt">
    <div class="main">
        <p>主内容栏自适应宽度</p>
    </div>

    <div class="aside">
        <p>侧边栏固定宽度</p>
    </div>
</div>

<div class="bd-3-lr">
    <div class="main">
        <p>主内容栏自适应宽度</p>
    </div>

    <div class="aside-1">
        <p>侧边栏1固定宽度</p>
    </div>

    <div class="aside-2">
        <p>侧边栏2固定宽度</p>
    </div>
</div>

<div class="bd-3-ll">
    <div class="main">
        <p>主内容栏自适应宽度</p>
    </div>

    <div class="aside-1">
        <p>侧边栏1固定宽度</p>
    </div>

    <div class="aside-2">
        <p>侧边栏2固定宽度</p>
    </div>
</div>

<div class="bd-3-rr">
    <div class="main">
        <p>主内容栏自适应宽度</p>
    </div>

    <div class="aside-1">
        <p>侧边栏1固定宽度</p>
    </div>

    <div class="aside-2">
        <p>侧边栏2固定宽度</p>
    </div>
</div>

<div id="ft">底部</div>

</body>
</html>

写在文末

纸上得来终觉浅，绝知此事要躬行。《冬夜读书示子聿》-- 陆游

好了，关于 CSS 基础知识就说到这，各位看官食用愉快。

码字不易，如果本篇文章对您哪怕有一点点帮助，请不要吝啬您的点赞，我将持续带来更多优质文章。

苍猫不是猫

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
一文带你掌握 CSS 必会知识点

子曰：温故而知新，可以为师矣。《论语》-- 孔子一、CSS样式规则CSS 规则由两部分构成：选择器，声明。二、CSS 样式引用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <.
复制链接

扫一扫