前端基础02：CSS

已于 2022-11-07 23:50:52 修改
阅读量513 收藏
点赞数
分类专栏： 前端入门 文章标签： css 前端 css3
于 2022-10-15 22:04:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_61467488/article/details/127231944
版权
这篇博客详细介绍了CSS的基础知识，包括选择器、盒子模型、浮动和定位等内容。学习CSS有助于理解网页结构和样式分离，提升网页设计美感。通过实例讲解了CSS的选择器，如基本选择器、层次选择器、属性选择器，以及如何美化网页元素，如字体、颜色、边距等。此外，还探讨了浮动和定位的概念，以及如何解决浮动带来的父级边框塌陷问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

学习路线

  1. 什么是CSS
  2. CSS怎么用 (快速入门)
  3. CSS选择器 (重点 + 难点)
  4. 美化网页 (文字，阴影，超链接，列表，渐变…)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画 (特效效果)

一、什么是CSS

  • CSS：Cascading Style Sheets 层叠样式表
  • 发展史
    • CSS 1.0
    • CSS 2.0
      • DIV (块) + CSS
      • HTML 与 CSS 结构分离的思想，网页变得简单
      • SEO (搜索引擎优化)
    • CSS 2.1
      • 浮动、定位
    • CSS 3.0
      • 圆角、阴影、动画…
      • 浏览器兼容性
  • 作用：美化网页
    • 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
      在这里插入图片描述
  • CSS的优势
    1. 内容和样式分离。
    2. 网页结构表现统一，可以实现复用。
    3. 样式非常丰富。
    4. 利于SEO，容易被搜索引擎收录。(使用Vue前端框架就很难被搜索引擎收录)

二、快速入门

1. 练习格式

在这里插入图片描述

2. 基本入门
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--style：可以编写css的代码
        规范：在head标签中，每一个声明最好使用分号结尾。
        语法：
            选择器{
                    声明1;
                    声明2;
                    声明3;
            }
    -->
    <style>
        h1{
            color: blue;
        }
    </style>

</head>
<body>

	<h1>我是标题</h1>

</body>
</html>
3. HTML、CSS结构分离 (推荐使用)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>

	<h1>我是标题</h1>

</body>
</html>

h1{
    color: blue;
}
4. CSS的三种导入方式
  1. 内部样式
  2. 外部样式
  3. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

	<!--行内样式：在标签元素中，添加一个style属性，编写样式即可。-->
	<h1 style="color: red">我是标题</h1>

</body>
</html>

/*外部样式：css/style.css*/
h1{
    color: yellow;
}
  • 优先级
    • 就近原则：即谁离目标更近，就执行哪种样式。
    • 也可理解为覆盖原则：离目标最近的样式覆盖了前面的样式。
  • 拓展：外部样式的两种写法
    • 链接式 (推荐)
      <!--链接式-->
<link rel="stylesheet" href="css/style.css">
    • 导入式
      <!--导入式-->
<style>
    @import "css/style.css";
</style>

三、选择器 (重点)

作用：选择页面上的某一个或者某一类元素。

1. 基本选择器 (重点)
  • 标签选择器
    • 标签{}
    • 选择一类标签。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        /*标签选择器，会选择到页面上此标签的所有元素。*/
        h1{
            color: #ff0000;
            background: bisque;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>
	
	<h1>学Java</h1>
	<h1>学Java</h1>
	<p>听狂神说</p>

</body>
</html>
  • 类选择器
    • .class{}
    • 选择所有class属性一致的标签。
    • 可跨标签使用。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

    <style>
        /*类选择器的格式；.class的名称{}
          好处：可以将多个标签归类为同一个class，使用同一种格式。
            */
        .qinjiang{
            color: aqua;
        }
        .kuangshen{
            color: chartreuse;
        }
    </style>

</head>
<body>
	
	<h1 class="qinjiang">标题1</h1>
	<h1 class="kuangshen">标题2</h1>
	<h1>标题3</h1>
	
	<p class="kuangshen">正文</p>

</body>
</html>
  • id选择器
    • #id{}
    • 全局唯一，不能重复使用。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style>
        /* id选择器的格式：#id名称{}
           id必须保证全局唯一！不能重复使用！
         */
        #qinjiang{
            color: pink;
        }
        .style1{
            color: green;
        }
        h1{
            color: blueviolet;
        }
    </style>

</head>
<body>

	<h1 class="style1" id="qinjiang">标题1</h1>
	<h1 class="style1">标题2</h1>
	<h1 class="style1">标题3</h1>
	<h1>标题4</h1>
	<h1>标题5</h1>

</body>
</html>
  • 优先级
    • 不遵循就近原则，精准度越高优先级越高。
      即，id选择器 > 类选择器 > 标签选择器。
2. 层次选择器
  • 后代选择器
    • 选择此标签下的所有标签。
  • 子选择器
    • >
    • 选择此标签下一级的所有标签。
  • 相邻兄弟选择器
    • +
    • 选择此标签同级的下一个标签。
  • 通用兄弟选择器
    • ~
    • 选择此标签同级的后面的所有标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器*/
        body p{
            background: red;
        }
        /*子选择器*/
        body>p{
            background: blue;
        }
        /*相邻兄弟选择器*/
        .active+p{
            background: blueviolet;
        }
        /*通用兄弟选择器*/
        .active~p{
            background: bisque;
        }
    </style>

</head>
<body>

	<p>p0</p>
	<p class="active">p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
	    <li>
	        <p>p4</p>
	    </li>
	    <li>
	        <p>p5</p>
	    </li>
	    <li>
	        <p>p6</p>
	    </li>
	</ul>
	<p class="active">p7</p>
	<p>p8</p>
	<p>p9</p>

</body>
</html>
3. 结构伪类选择器
  • 是针对HTML层次“结构”的伪类选择器，通过元素的特定位置从而进行定位，减少 HTML文档对ID或者类名的定义。
  • 伪类：在:后添加一些条件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: chartreuse;
        }

        /*p:nth-child(n)：定位到父元素，再选择第n个子元素。
          如果父元素的第n个子元素不是p标签，则不生效。*/
        p:nth-child(3){
            background: blueviolet;
        }
        /*p:nth-of-type(n)：定位到父元素，再选择第n个类型为p的子元素*/
        p:nth-of-type(2){
            background: pink;
        }

        /*hover：鼠标悬停效果*/
        a:hover{
            background: black;
        }

    </style>

</head>
<body>

    <a href="">123123</a>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>
</html>

在这里插入图片描述

4. 属性选择器 (重点 + 常用)
  • 类选择器和id选择器的结合。
  • 常用的通配符
    • =：绝对等于
    • *=：包含
    • ^=：以…开头
    • $=：以…结尾
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: coral;
            text-align: center;
            color: green;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*含有id属性的元素*/
        a[id]{
            background: yellow;
        }
        /*id属性的值为second的元素*/
        a[id=second]{
            background: aqua;
        }
        /*class中含有active的元素 (也可使用正则表达式)
            =：绝对等于
            *=：包含*/
        a[class*="active"]{
            background: blueviolet;
        }
        /*选中href中以image开头的元素*/
        a[href^=image]{
            background: pink;
        }
        /*选中href中以jpg结尾的元素*/
        a[href$=jpg]{
            background: crimson;
        }

    </style>

</head>
<body>

<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://www.baidu.com" class="links item first" id="second">2</a>
    <a href="" class="links item active" target="_blank" title="test">3</a>
    <a href="images/123.html" class="links item">4</a>
    <a href="images/123.png" class="links item">5</a>
    <a href="images/123.jpg" class="links item">6</a>
    <a href="abc" class="links item">7</a>
    <a href="abcd.doc" class="links item last">8</a>

</p>

</body>
</html>

在这里插入图片描述


四、美化网页元素

1. 为什么要美化网页
  • 有效的传递页面信息。
  • 美化网页，吸引用户。
  • 凸显页面的主题。
  • 提高用户体验。
  • 一般使用span标签标记需要突出的字。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title1">java</span>

</body>
</html>
2. 字体样式
  • 为何在font-family属性中设置多个值
    • 若用户电脑未安装第一种字体Calibri Light，则执行第二个字体，以此类推。
    • 最后申明的sans-serif，专指西文中没有衬线的字体，与汉字字体中的黑体相对应。
  • font属性的简写
    • font缩写的时候必须有font-size和font-family两个值，否则不生效，其他值可省略，有默认值。
    • 例：font: bold italic 18px arial;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    font-family: 字体
    font-size: 字体大小
    font-weight: 字体粗细
    color: 字体颜色
    -->
    <style>
        body{
            font-family: "Calibri Light", 楷体, sans-serif;
            color: coral;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }

    </style>

</head>
<body>

<h1>Java</h1>

<p class="p1">
    Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
</p>

<p>
    Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
</p>

<p>
    Back-end Development refers to the server-side development. It focuses on databases, scripting, website architecture. It contains behind-the-scene activities that occur when performing any action on a website. It can be an account login or making a purchase from an online store. Code written by back-end developers helps browsers to communicate with database information.
</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{
            font: oblique bolder 12px 楷体;
        }
    </style>

</head>
<body>

<p>
    Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。
</p>

</body>
</html>
3. 文本样式
  • 颜色：color
  • 对齐方式：text-align: center (居中对齐)
  • 首行缩进：text-indent: 2em (段落首行缩进两个字符)
  • 行高：line-height
    • 单行文字上下居中：line-height = height
  • 装饰：text-decoration
    • underline (下划线)
    • line-through (中划线)
    • overline (上划线)
    • none (a标签去下划线)
  • 文本图片水平对齐：vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色的表示方式：
        英文单词
        RGB
        RGBA

    text-align：排版
        center：居中

    text-indent：首行缩进
            2em：段落首行缩进两个字符

    height: 300px;
    line-height: 300px;
        行高和块的高度一致就可以实现上下居中效果。

    text-decoration: underline  下划线
    text-decoration: line-through  中划线
    text-decoration: overline  上划线
    text-decoration: none  a标签去下划线

    vertical-align: middle  文本图片水平对齐
    -->
    <style>
        h1{
            color: rgba(0, 255, 255, 0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #ffc0cb;
            height: 300px;
            line-height: 300px;
        }
        .p11{
            text-decoration: underline;
        }
        .p22{
            text-decoration: line-through;
        }
        .p33{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
        img, span{
            vertical-align: middle;
        }
    </style>

</head>
<body>

<a href="">123</a>

<p class="p11">123123</p>
<p class="p22">123123</p>
<p class="p33">123123</p>

<h1>Java</h1>

<p class="p1">
    Java是一门面向对象的编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
</p>

<p class="p2">
    Back-end Development refers to the server-side development.
</p>

<p>
    <img src="images/a.png" alt="">
    <span>123</span>
</p>

</body>
</html>
4. 超链接伪类
  • 未访问的链接：a:link
  • 已访问的链接：a:visited
  • 当有鼠标悬停在链接上：a:hover (最常用)
  • 被选择的链接：a:active
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认状态*/
        a{
            text-decoration: none;
            color: black;
        }
        /*未访问的链接*/
        a:link{
            color: aqua;
        }
        /*已访问的链接*/
        a:visited{
            color: red;
        }
        /*当有鼠标悬停在链接上 (最常用)*/
        a:hover{
            color: pink;
            font-size: 50px;
        }
        /*被选择的链接*/
        a:active{
            color: chartreuse;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>
</body>
</html>
5. 文本阴影
  • text-shadow属性：水平偏移 垂直偏移 阴影半径 阴影颜色
    在这里插入图片描述
/*text-shadow：水平偏移 垂直偏移 阴影半径 阴影颜色*/
#price{
	text-shadow: 5px 0px 1px cornflowerblue;
}
6. 列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

#nav{
    width: 300px;
    background: gray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色  图片  图片位置  平铺方式*/
    background: red url("../images/d.png") 280px 10px no-repeat;
}

/*ul li*/
/*
list-style:
    none  去掉圆点
    circle  空心圆
    decimal  数字
    square  正方形
 */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background: url("../images/r.png") 240px 5px no-repeat;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

在这里插入图片描述

7. 背景
  • 背景颜色：background-color
  • 背景图片：background-image: url(" ")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/a.jpg"); /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

    </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>
8. 渐变
background-color: #FA8BFF;
background-image: linear-gradient(135deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);

五、盒子模型

1. 什么是盒子

在这里插入图片描述

  • margin：外边距
  • padding：内边距
  • border：边框
2. 边框
  • 边框的粗细：border-width
  • 边框的样式：border-style
  • 边框的颜色：border-color
  • 简写：border: 1px solid red;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*body等标签会有一些默认值，需要手动设置为0*/
        body, h1, h2, ul, li, a{ /*开发中的常见操作*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        #box{
            width: 300px;
            /*border：粗细  样式  颜色*/
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background: cornflowerblue;
            color: white;
        }

        form{
            background: cornflowerblue;
        }

        .div1>input{
            border: 3px solid black;
        }
        .div2>input{
            border: 3px dashed salmon;
        }
        .div3>input{
            border: 6px solid yellow;
        }

    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div class="div1">
            <span>姓名：</span>
            <input type="text">
        </div>
        <div class="div2">
            <span>密码：</span>
            <input type="text">
        </div>
        <div class="div3">
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

在这里插入图片描述

3. 外边距，内边距
  • 简写：
    • margin/padding: 0 上下左右
    • margin/padding: 0 1px 上下 + 左右
    • margin/padding: 0 1px 2px 3px 上右下左(顺时针)
  • 外边距的妙用：元素居中
    • margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--外边距的妙用：居中元素
            margin: 0 auto;
    -->
    <style>
        /*body等标签会有一些默认值，需要手动设置为0*/
        body, h1, h2, ul, li, a{ /*开发中的常见操作*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /*
        margin: 0  上下左右
        margin: 0 1px  上下 + 左右
        margin: 0 1px 2px 3px 上右下左(顺时针)
         */
        #box{
            width: 300px;
            /*border：粗细  样式  颜色*/
            border: 1px solid red;
            margin: 0 auto;
        }

        h2{
            font-size: 16px;
            background: cornflowerblue;
            color: white;
        }

        form{
            background: cornflowerblue;
        }

        input{
            border: 1px solid salmon;

        }
        
        div{
            padding: 10px
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div class="div1">
            <span>姓名：</span>
            <input type="text">
        </div>
        <div class="div2">
            <span>密码：</span>
            <input type="text">
        </div>
        <div class="div3">
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

在这里插入图片描述

4. 圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--border-radius：圆角边框
        一个参数：四角
        两个参数：左上+右下  右上+左下
        四个参数：左上  右上  右下  左下 (顺时针方向)
        -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px 10px 5px;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*半圆*/
        div{
            width: 100px;
            height: 50px;
            background: pink;
            border-radius: 50px 50px 0px 0px;
        }
        /*圆形头像*/
        img{
            border-radius: 48px; /*图片为96*96*/
        }
    </style>

</head>
<body>

<div></div>
<img src="images/a.jpg" alt="">

</body>
</html>
5. 盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        box-shadow：盒子阴影
        margin: 0 auto     居中
            要求：是一个块元素并且有固定的宽度
    -->
    <style>
        img{
            display: block; /*变为块元素*/
            margin: 0 auto;
            border-radius: 48px;
            box-shadow: 10px 10px 10px black;
        }
    </style>

</head>
<body>

    <img src="images/a.jpg" alt="">
    
</body>
</html>

六、浮动

1. 标准文档流
  • css标准文档流就是css的“默认”状态。指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
  • 标准文档流将元素分为块级元素和行内级元素：
    • 块级元素(block level)：div h* p ul li dl dt dd
      • 能够设置宽度和高度。
      • 不能并排。
      • 不设置宽度的情况下，默认为父级的宽度。
    • 行内级元素(inline level)：span a b u i em strong
      • 不能设置宽高。
      • 可以并排。
  • 两种元素可以互相转换。
    • 行内转块级：display: block (常用)
    • 块级转行内：display: inline (几乎不会用到)
2. display (元素类型转换)
  • display: none：将元素设置为none时，被隐藏的元素不会占用自身固有宽度高度空间，也无法显示；
  • display: block：将元素设置为block时，被隐藏的元素会变为块级元素；行内元素将会变为块级元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度；
  • display: inline：将元素设置为inline时，被隐藏的元素会变为行内元素并显示；块级元素将会变为行内元素，宽度、高度、text-align、margin-top、margin-bottom无效；
  • display: inline-block：将元素设置为inline-block时，被隐藏的元素会变为行内块元素并显示；inline-block既具有block的宽高特性又具有inline的同行元素特性。 通过inline-block结合text-align: justify还可以实现固定宽高的列表两端对齐布局；
  • display: inherit：继承父元素display属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
     block  块元素
     inline  行内元素
     inline-block  块元素，但是可以内联 (并排)
     -->

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>
3. float (浮动)
  • 什么是浮动
    • 在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置。
  • 浮动的原理
    • 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。
  • 浮动的生成
    • 使用css属性float：left/right/none 左浮动/右浮动/不浮动 (默认)
  • 浮动的影响
    • 浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成inline-block类型的元素，即同时拥有块级与行内元素的特征。
    • 因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌 (前提是父容器高度小于A元素高度)。
  • 清除浮动与闭合浮动
    • 清除浮动：使用clear元素清除外面浮动，解决外面浮动对自己的影响。
    • 闭合浮动：当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最大化清除。

左右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.jpg" alt=""></div>
    <div class="layer02"><img src="images/2.jpg" alt=""></div>
    <div class="layer03"><img src="images/3.jpg" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。
    </div>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
/*浮动时边框会塌陷*/
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}
4. 父级边框塌陷的问题 (闭合浮动)
  • 解决方法：
    1. 增加父级元素的高度
      • 优点：简单
      • 缺点：元素有了固定的高度，就会被限制
    #father{
    border: 1px #000 solid;
    height: 800px;
}
    1. 通过在父元素的末尾添加一个空元素，设置clear: both属性
      • 优点：简单
      • 缺点：代码中尽量避免空div
    <div class="clear"></div>

    .clear{
    clear: both;
    margin: 0;
    padding: 0;
}
    1. 通过在父元素中增加一个overflow: hidden或者display: table属性来闭合浮动
      • 优点：简单
      • 缺点：会被限制，不美观
    #father{
border: 1px #000 solid;
overflow: hidden;
}
    1. 父类添加一个伪类：after (推荐)
      • 优点：无副作用
      • 缺点：写法稍复杂
    #father{
    border: 1px #000 solid;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 150px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="content">
    <img src="images/1.jpg" alt="">
    <p>闭合浮动：当前块级中，其子元素使用了浮动，会给当前块内部和块外部的布局带来影响，所以将当前块中的浮动闭合，能将影响最大化清除。</p>
</div>
</body>
</html>

clear

/*
clear：
    right：右侧不允许有浮动元素
    left：左侧不允许有浮动元素
    both：两侧不允许有浮动元素 (常用)
    none：允许有浮动元素
*/
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
    clear: both;
}
5. 对比
  • display
    • 方向不可以控制
    • 无父级边框塌陷问题
  • float (推荐)
    • 左右可控
    • 父级边框塌陷问题 (可解决)

七、定位

1. 相对定位
  • position: relation
  • 上下左右：top bottom left right
  • 相对定位的偏移元素参考的是元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位：
            相对于自己原来的位置进行偏移-->
            
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: pink;
            border: 1px dashed blue;
            position: relative; /*相对定位：上下左右*/
            top: -20px; /*向上移动20px*/
            left: 20px; /*向右移动20px*/
        }
        #second{
            background-color: pink;
            border: 1px dashed green;
        }
        #third{
            background-color: pink;
            border: 1px dashed black;
            position: relative;
            bottom: -20px;
            right: 20px
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习

  1. 使用<div>和超链接<a>布局页面。
  2. 每个超链接宽度和高度都是100px，背景颜色为粉色，鼠标指针移上去时变为蓝色。
  3. 使用相对定位改变每个超链接的位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #father{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
            margin: 0 auto;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 12px;
            display: block;
            position: relative;
        }
        a:hover{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 12px;
            display: block;
            position: relative;
        }
        #two, #four{
            left: 200px;
            bottom: 100px;
        }
        #five{
            left: 100px;
            bottom: 300px;
        }
    </style>

</head>
<body>

<div id="father">
    <div><a href="" id="one">链接1</a></div>
    <div><a href="" id="two">链接2</a></div>
    <div><a href="" id="three">链接3</a></div>
    <div><a href="" id="four">链接4</a></div>
    <div><a href="" id="five">链接5</a></div>
</div>

</body>
</html>

在这里插入图片描述

2. 绝对定位
  • 绝对定位是相对于已定位的最近的祖先元素，如果最近的祖先元素没有设置定位，那么它的位置就相对于最初的包含块。(body)
  • 绝对定位会脱离文档流，元素的初始位置占据的空间不会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: pink;
            border: 1px dashed blue;
        }
        #second{
            background-color: pink;
            border: 1px dashed green;
            position: absolute;
            right: 30px;
            top: -30px;
        }
        #third{
            background-color: pink;
            border: 1px dashed black;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
3. 固定定位
  • 固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 1000px;
        }
        /*绝对定位：相对于浏览器*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*固定定位*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: skyblue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

在这里插入图片描述    在这里插入图片描述

4. z-index
  • 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
    • 元素可拥有负的 z-index 属性值。
    • z-index 仅能在定位元素上奏效。
  • 设置透明度：opacity
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""></li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-1-1</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul, li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.tipText{
    color: white;
    z-index: 999; /*设置层级*/
}
.tipBg{
    background: black;
    opacity: 0.5; /*设置透明度*/
}

在这里插入图片描述


八、总结

在这里插入图片描述

解决安国量产工具无法识别u盘的方法
12-22
解决安国量产工具无法识别u盘的方法 解决安国量产工具无法识别u盘的方法
安国U盘量产无法识别芯片处理
热门推荐
好
04-26 1万+
从上次帮朋友修好U盘之后，在朋友介绍下又拿来了几个盘，经检测都是扩容的，好几个都正常处理了，但是有一个，却检测不到芯片，网上找了好久，按照下面方法解决好了，分享下 在淘宝网上买了一8G的黑片金士顿,用MyDiskTest_v298测试不是扩容盘,用ChipGenius_v4_00获得信息如下:     　设备描述: [K:]USB 大容量存储设备(Kingst
安国主控，U盘量产，起死回生
ke_csdn的专栏
08-26 9358
废旧U盘量产屏蔽坏块，暂时还能使用。
关于U盘被写保护无法格式化的解决方法
njzgIdba的博客
03-12 1万+
最近U盘在上传文件的时候出现了问题，需要格式化才能打开U盘。后来换了一台电脑能打开U盘，但是U盘还是存在问题的，EFI系统分区无法正常打开（由于我的U盘之前用于作启动盘）。后来我就想着把数据备份一下，把U盘格式化，恢复成普通U盘。那么问题来了，点击格式化，提示U盘被写保护无法格式化，然后我捣鼓了半天，试过各种方法，比如更改U盘属性，更改注册表，下载小插件强制格式化，结果都是一点用都没有，差点就想把U盘扔了。后来用U盘量产工具的方法解决了，真的是非常有用的方法，实测有效，下面分享一下。 第一步： 下载Ch
U盘被写保护解决经历
凉云半的博客
09-23 3621
因为要重装系统，在网上下载的GHOSTwin7系统的iso文件放在U盘里，提示不能粘贴，将U盘格式化有FAT32格式化成了NTFS，复制GHOST文件在虚拟机安装，安装失败。 再使用U盘就提示U盘被写保护了，不能格式化也不能存储文件。 在网络上搜了一些方法根本没有作用最后只能采用U盘量产工具 第一步，下载ChipGenius查看U盘型号如下： Flask型号为安国品牌AU6989SN/AU6989ANL [E50B] - F/W FD00 第二步，下载安国对应的U盘量产工具 寻找量产工具的过程十分复杂，在
安国Au6980的量产工具V6.13
04-15
安国Au6980的量产工具V6.13 , 可用于AU6980A41\AU6980B41
杰理之修改PID和VID【篇】
u013820168的博客
11-30 2654
99999999999999999999
android USB如何修改VID?
曹浩洋的专栏
06-04 3433
1.Android 手机driver端： [GB Version] File to modify: alps\mediatek\custom\[Chip]\kernel\usb\src\mtk_usb_custom.h Modification: VENDOR_ID [ICS and JB Version] File to modify: alps\mediatek\config
USBee AX逻辑分析仪修改USB设备PID和VID
wv112406的博客
07-24 1974
淘宝上20几块的一逻辑分析仪，自代软件是USBee AX Pro，不好用。按https://vandersonpc.com/repro-usbee-ax/这里提供方法修改PID, VID，可就以使用saleae和plusView，需要Linux环境，改完之后可以MacOS, Windows, Linux使用，因为改的是EEPROM。Bilibili上有哥们拆下来用编程器改的也可以用。查看内容，下面a9 08 14 00是VID和PID。重新插拨USB，就可以看修改后PID,VID了。
安国主控U盘修改VID PID工具
08-27
安国主控U盘修改VID PID工具
安国Ver12.09.26.00量产工具特别版
12-04
安国Ver12.09.26.00量产工具特别版,百分百可以用
安国量产工具FC MpTool(Ver 03.00.02)
01-09
安国量产工具FC MpTool(Ver 03.00.02)
安国FC8308_FC8508 量产工具
01-03
安国FC8308_FC8508 好用量产工具,当你用别的不好使时，试试这个
Mocha-Bot:摩卡（Mocha）Discord机器人
03-31
摩卡博特 摩卡（Mocha）Discord机器人 笔记 要使事情正常运行，您需要安装一些东西，其中包括： 最新的Python （在安装Python之后只需将命令复制到命令提示符中） 任何Python IDE（我个人更喜欢 ）
SMI优盘批量格式化/修改PID/VID工具(ReFixInfo.exe).rar
09-05
软件介绍: ReFixInfo.exe汉化版是SMI专用批量修改PID/VID 、批量格式化工具功能：更新VID/PID，更新制造商/产品名更新设备版本，更新卷ID，更新描述/LED设置重设写保护，开启格式化。
Alcor主控芯片U盘VID/PID序列号改写工具.rar
09-04
Alcor主控U盘VID/PID序列号改写工具Rework_1.0.0.2.exe能够修改产品的VID/PID序列号、客户信息、产品信息序列号设置方式：随机设置、固定、递增还可以拷贝文件。Rework(修改产品VID,PID,序列号)
U盘引导重新改序列号，mac，vid，pid教程.mp4
10-15
U盘引导重新改序列号，mac，vid，pid教程.mp4
U盘引导重新改序列号，mac，vid，pid教程.zip
最新发布
10-16
本教程视频文件名为“U盘引导重新改序列号，mac，vid，pid教程.mp4”，主要针对那些需要在U盘上进行引导序列号、MAC地址、VID和PID修改的用户。视频中可能会详细介绍修改这些标识符的步骤，涉及的工具，以及修改过程...
U盘量产工具_修复、U盘写保护无法格式化、U盘文件乱码格式
GZHarryAnonymous的博客
09-30 6195
U盘量产工具_修复 适用情况： U盘内文件格式乱码 U盘格式化提示写保护 问题原因： U盘内逻辑混乱、扇区毁坏 修复方法： 使用其对应的量产工具 具体流程： 使用相关工具或方法确定当前U盘唯一标识： Vid：vender identification Pid：product identification 推荐方法：使用ChipGenius工具 工具下载链接：https:/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值