CSS笔记

气运2020

于 2022-02-28 09:44:23 发布

阅读量528

点赞数

分类专栏： JavaWeb笔记-狂神文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_46307478/article/details/123175429

版权

JavaWeb笔记-狂神专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS

HTML + CSS + JavaScript

结构 + 表现 + 交互

如何学习?

CSS 是什么
CSS 怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画

1. CSS简介

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

网站F12，开发者工具

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+ CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画…浏览器兼容性

1.3 快速入门

注意规范

HTML+CSS未分离的格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 规范 <style> 可以编写CSS代码，写在header中
    每一个声明最好使用分号;结尾
   语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
        color:red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

HTML与CSS分离的格式——推荐使用的规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--使用link标签链接到css-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

h1{
	color:red;
}

CSS的优势：

内容与表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

1.4 CSS的三种导入方式

行内样式
内部样式
外部样式

优先级：就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部样式，在head内使用style标签定义样式-->
    <style>
        h1 {
            color: green;
        }
    </style>

    <!--3.外部样式：在单独的css文件中定义样式，再链接到html -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--1.行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题 </h1>

<!--优先级总结：就近原则——行内样式>（内部样式，外部样式）哪个离元素更近使用哪个

</body>
</html>

拓展：外部标签的两种写法

链接式

html中的link标签

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

导入式

@import是CSS2.1中特有的

<style>
    @import url("css/style.css");
</style>

2. 选择器

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

选择器是前端最重要的，必须掌握基础选择器（标签、类、id）和属性选择器。

2.1 基本选择器

标签选择器：选择一类标签标签名{}
类选择器：选中所有class属性一致的标签，可以跨标签 .class名{}
id选择器：全局唯一 #id名称{}

**选择器的优先级：**固定的——id选择器>类选择器>标签选择器

1）标签选择器

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

    <style>
        /*标签选择器：会选择页面上所有这个标签的元素*/
        h1 {
            color: red;
        }

        p {
            font-size: 80px;
        }
    </style>

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

</body>
</html>

2）类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器格式   .class名称{}
        好处：可以多个标签归类，是同一个class，可以复用，可以跨标签*/
        .song {
            color: chartreuse;
        }

        .song2 {
            color: aqua;
        }

        .song3 {
            color: red;
        }
    </style>
</head>
<body>
<h1 class="song">标题1</h1>
<h1 class="song2">标题2</h1>
<h1 class="song3">标题3</h1>
<h1 class="song3">标题3</h1>

<p class="song">学习</p>

</body>
</html>

3）id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器格式   #id名称{}
        id必须保证全局唯一
        不遵循就近原则，固定的：id选择器>类选择器>标签选择器
        */
        #song1 {
            color: rebeccapurple;
        }

        .style1 {
            color: red;
        }

        h1 {
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1 id="song1" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

2.2 层次选择器

1、后代选择器：在某个元素的后面所有，空格隔开祖爷爷爷爷爸爸你

/*后代选择器*/
/*意为body后的所有p标签，都被选中*/
body p{
	background-color: aquamarine;
}

2、子选择器：只有后面的第一代，>隔开只看爸爸的儿子

/*子代选择器*/
/*意为只有body后的第一代p标签，被选中*/
body>p{
    background-color: red;
}

3、相邻兄弟选择器：同辈相邻的下一个元素，只有一个，对下不对上，+隔开

/*相邻兄弟选择器*/
/*意为.activate的同一辈的相邻的下一个p标签，仅对下一个不对上*/
.active+p{
    background-color: green;
}

4、通用选择器：同一辈相邻的下面所有元素，对下不对上，~隔开

/*通用选择器*/
/*意为.activate的同一辈的相邻的下面所有p标签，仅对下不对上*/
.active~p{
    background-color: blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        /*意为body后的所有p标签，都被选中*/
        body p{
            background-color: aquamarine;
        }
        /*子代选择器*/
        /*意为只有body后的第一代p标签，被选中*/
        body>p{
            background-color: red;
        }
        /*相邻兄弟选择器*/
        /*意为.activate的同一辈的相邻的下一个p标签，仅对下一个不对上*/
        .active+p{
            background-color: green;
        }
        /*通用选择器*/
        /*意为.activate的同一辈的相邻的下面所有p标签，仅对下不对上*/
        .active~p{
            background-color: blue;
        }

    </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>
</body>
</html>

2.3 结构伪类选择器

伪类：带有冒号:的，增加一些条件

/*结构伪类选择器，冒号:表示伪类，冒号前是帮助定位的父元素，作为伪类*/
/*ul的第一个元素*/
/*意为ul下的的第一个li标签*/
ul li:first-child{
    background-color: green;
}
/*ul的最后一个元素*/
ul li:last-child{
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用class和id选择器-->
    <style>
        /*结构伪类选择器，冒号:表示伪类，冒号前是帮助定位的父元素，作为伪类*/
        /*ul的第一个元素*/
        /*意为ul下的的第一个li标签*/
        ul li:first-child{
            background-color: green;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
            background-color: red;
        }

        /*选中p1——定位到父元素作为伪类，选择当前的第一个元素*/
        /*根据位置：意为选中当前元素p的父级元素，选中父级元素的第2（n）个子元素,并且该子元素是当前元素才生效*/
        p:nth-child(2){
            background-color: #663399FF;
        }

        /*根据类型：意为选中当前元素p的父级元素，选择父元素中的子元素，类型为p的元素*/
        p:nth-of-type(2){
            background-color: yellow;
        }

    </style>
</head>
<body>
<h1>hhhhhh</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
</ul>
</body>
</html>

2.4 属性选择器（常用）

属性选择器可以把id和class结合，功能更强大，还可以使用正则表达匹配

可以搜索通配符获得更多的使用方式

语法格式：
    1.标签[属性名]{}
    2.标签[属性名=属性值]{}    (属性值中可以使用正则匹配)
符号：
    =：绝对等于这个值
    *=：包含这个值
    ^=:以该值作为开头
    $=:以该值作为结尾

<!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: 18px;
            background-color: #a0aaaa;
            text-align: center;
            color: aliceblue;
            text-decoration: none; /*去掉下划线*/
            margin-right: 5px;
            line-height: 50px; /*行高*/
        }

        /*属性选择器：
        语法格式：
            1.标签[属性名]{}
            2.标签[属性名=属性值]{}    (属性值中可以使用正则匹配)
        符号：
            =：绝对等于这个值
            *=：包含这个值
            ^=:以该值作为开头
            $=:以该值作为结尾

        例如：选择a标签中带有id属性的   a[id]
        选择a标签中带有id属性,且属性值为**的   a[id="first"]
        */

        /*标签a中存在id属性的元素*/
        a[id] {
            background-color: yellow;
        }

        /*标签a中class有links的元素*/
        a[class*="links"] {
            background-color: red;
        }

        /*标签a中herf以https开头的元素*/
        a[href^="https"] {
            background-color: green;
        }

        /*标签a中herf以doc结尾的元素*/
        a[href$="doc"] {
            background-color: blue;
        }


    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/3.html" class="links item">3</a>
    <a href="images/3.png" class="links item">4</a>
    <a href="images/3.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="abc.doc" class="links item">8</a>
    <a href="/abc.pdf" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

3. 美化网页元素

3.1 CSS的作用

有效的传递页面信息
美化网页、页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

**span标签：**重点要突出的字，使用span标签套起来（没有实际用处，只是约定俗成）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title {
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习 <span id="title">Java</span> ，一起学习！
</body>
</html>

3.2 字体样式

字体front
font-size: 20px;    字体大小
font-family: 楷体;   字体,可以同时指定中英文字体
font-weight: bold;  字体的粗细
color: #4d4848;     字体颜色


组合方式：
font：字体样式粗细 字号/行高 字体样式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--字体front
    font-size: 20px;    字体大小
    font-family: 楷体;   字体,可以同时指定中英文字体
    font-weight: bold;  字体的粗细
    color: #4d4848;     字体颜色
     -->
    <style>
        /*body标签可以针对网页的所有元素，如改变网页中的所有字体*/
        body {
            font-family: 楷体, "Arial Black";
        }

        h1 {
            font-size: 40px;
            font-weight: bold;
            color: #4d4848;
        }

        /*组合方式：
        font：字体样式粗细 字号/行高 字体样式；
        */
        h2 {
            font: bold 30px/50px 微软雅黑;
        }

    </style>
</head>
<body>
<h1>棋魂</h1>
<h2>故事介绍</h2>
<p>
    《棋魂》是刘畅执导，胡先煦、张超、郝富申、韩沐泊、翟冠华、纪李等主演的少年热血棋幻剧。
</p>
<p>
    该剧改编自崛田由美原作、小畑健作画的日本经典同名漫画《棋魂》。
    讲述了时光在机缘巧合之下发现一个古老的棋盘，从而认识了盘踞在棋盘内、历经千年的南梁围棋第一人——褚嬴，并在他的熏陶下逐渐对围棋产生兴趣，并励志成为职业围棋手的故事。
</p>
<p>
    有的人循规蹈矩，有的人离经叛道，
    有的人悬崖勒马，为自己下出乾坤逆转，
    有的人却为别人做活一片青天，
    有的人即便曲折，终会拨云见日，
    还有的却无悔于人生，
    有的人十年落拓 初衷不改，
    还有的人志在远方，匠心不变，
    有的人参透世间万物，有的人悟尽人生几何，
    有的人他为冠军而生，
    还有的人会被众多人铭记，她生下了冠军，
    有的人壶中藏日月，有的人袖里能定乾坤，
    有的人春风桃李俯首甘为火种，
    有的人浪子回头成为星河里最亮一颗，
    有的人高山流水凌云揽胜，一生只为一盘棋，
    而有的人冥冥之中只为你而存在，
    正是上天为你选中的对手，
    有的人是你的开心果，
    是你的催泪弹，
    是你牵肠挂肚的小欢喜，
    是你割舍不下的小业障，
    更是你三十修来的福分，
    换来这一段相识，相伴，形影不离!
</p>
</body>
</html>

3.3 文本样式

颜色 color rgb rgba
文本对齐方式 text-align:center;
首行缩进 text-indent:2em;
行高 line-height; 单行文字上下居中，让行高=height
装饰（下划线等） text-decoration
文本图片水平对齐 vertical-align: middle;

color颜色：
    单词；
    RGB；#000000，rgb(255,0,0)
    RGBA：颜色+透明度，rgba(255,0,0,0.5)
text-align: center；
    排版：居中，居左，居右(此处的居中是左右居中）
text-indent:2em;
    首行缩进：1个em代表1个字
line-height: 100px;
    行高：要想上下居中，需要设置文本的行高与块的高度一致
text-decoration: underline;
    装饰：下划线underline;删除线line-through；上划线overline;
    超链接去下划线none
vertical-align: middle;
	水平对齐：要有参照物的概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--文本样式：

        color颜色：
            单词；
            RGB；#000000，rgb(255,0,0)
            RGBA：颜色+透明度，rgba(255,0,0,0.5)
        text-align: center；
            排版：居中，居左，居右(此处的居中是左右居中）
        text-indent:2em;
            首行缩进：1个em代表1个字
        line-height: 100px;
            行高：要想上下居中，需要设置文本的行高与块的高度一致
        text-decoration: underline;
            装饰：下划线underline;删除线line-through；上划线overline

            -->
    <style>
        h1 {
            color: rgba(0, 0, 255, 0.3);
            text-align: center;
        }

        .p1 {
            text-indent: 2em;
        }

        .p3 {
            background-color: aliceblue;
            line-height: 100px;
            height: 100px;
        }

        .p2 {
            text-decoration: underline;
        }

        .p4 {
            text-decoration: line-through;
        }

        .p5 {
            text-decoration: overline;
        }

        a {
            text-decoration: none; /*超链接去下划线*/
        }

    </style>
</head>
<body>
<h1>棋魂</h1>
<a href="">棋魂电视剧集</a>
<h2>故事介绍</h2>
<p class="p1">
    《棋魂》是刘畅执导，胡先煦、张超、郝富申、韩沐泊、翟冠华、纪李等主演的少年热血棋幻剧。
</p>
<p class="p2">
    该剧改编自崛田由美原作、小畑健作画的日本经典同名漫画《棋魂》。
    讲述了时光在机缘巧合之下发现一个古老的棋盘，从而认识了盘踞在棋盘内、历经千年的南梁围棋第一人——褚嬴，并在他的熏陶下逐渐对围棋产生兴趣，并励志成为职业围棋手的故事。
</p>
<p class="p4">123</p>
<p class="p5">123</p>
<p class="p3">
    有的人循规蹈矩，有的人离经叛道，
    有的人悬崖勒马，为自己下出乾坤逆转，
    有的人却为别人做活一片青天，
    有的人即便曲折，终会拨云见日，
    还有的却无悔于人生，
    有的人十年落拓 初衷不改，
    还有的人志在远方，匠心不变，
    有的人参透世间万物，有的人悟尽人生几何，
    有的人他为冠军而生，
    还有的人会被众多人铭记，她生下了冠军，
    有的人壶中藏日月，有的人袖里能定乾坤，
    有的人春风桃李俯首甘为火种，
    有的人浪子回头成为星河里最亮一颗，
    有的人高山流水凌云揽胜，一生只为一盘棋，
    而有的人冥冥之中只为你而存在，
    正是上天为你选中的对手，
    有的人是你的开心果，
    是你的催泪弹，
    是你牵肠挂肚的小欢喜，
    是你割舍不下的小业障，
    更是你三十修来的福分，
    换来这一段相识，相伴，形影不离!
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--水平对齐：要有参照物的概念
        -->
    <style>
        img, span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src="images/test.PNG" alt="">
    <span> 逢考必过！ </span>
</p>

</body>
</html>

3.4 超链接伪类

鼠标悬浮的样式
a:hover {
            color: #c06a2c;
            font-size: 50px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的初始样式*/
        a {
            text-decoration: none;
            color: black;
        }

        /*鼠标悬浮的样式——重点记住*/
        a:hover {
            color: #c06a2c;
            font-size: 50px;
        }

        /*鼠标单击没有释放的样式*/
        a:active {
            color: #7643a9;
        }

        /*未访问前的样式*/
        a:link {
            color: #2d3131;
        }

        /*鼠标单击访问完的样式*/
        a:visited {
            color: #124848;
        }

        /*加阴影:阴影颜色  水平偏移  垂直偏移 阴影半径*/
        #price {
            text-shadow: #c06a2c 8px 0px 3px;
        }


    </style>
</head>
<body>
<a href="#">
    <img src="images/test.PNG" alt="">
</a>
<p>
    <a href="#">Java开发手册</a>
</p>
<p>
    <a href="#">作者：老师</a>
</p>
<p id="price">
    价格：￥99
</p>

</body>
</html>

3.5 文本阴影

加阴影:阴影颜色  水平偏移  垂直偏移 阴影半径
#price{
            text-shadow: #c06a2c 8px 0px 3px;
        }

3.6 列表样式

list-style:
    none:去掉原点
    circle：空心圆
    decimal：数字
    square：正方形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="//jiadian.jd.com">家用电器</a>
        </li>
        <li>
            <a href="//shouji.jd.com/">手机</a>
            <a href="//wt.jd.com">运营商</a>
            <a href="//shuma.jd.com/">数码</a>
        </li>
        <li>
            <a href="//diannao.jd.com/">电脑</a>
            <a href="//bg.jd.com">办公</a>
        </li>
        <li>
            <a href="//channel.jd.com/home.html">家居</a>
            <a href="//channel.jd.com/furniture.html">家具</a>
            <a href="//jzjc.jd.com/">家装</a>
            <a href="//channel.jd.com/kitchenware.html">厨具</a>
        </li>
        <li>
            <a href="//phat.jd.com/10-603.html">男装</a>
            <a href="//phat.jd.com/10-507.html">女装</a>
            <a href="//phat.jd.com/10-156.html">童装</a>
            <a href="//channel.jd.com/1315-1345.html">内衣</a>
        </li>
        <li>
            <a href="//beauty.jd.com/">美妆</a>
            <a href="//channel.jd.com/beauty.html">个护清洁</a>
            <a href="//channel.jd.com/pet.html">宠物</a>
        </li>
        <li>
            <a href="//mro.jd.com/">工业品</a>
        </li>
    </ul>

</div>


</body>
</html>

#nav {
    height: 300px;
    width: 300px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    line-height: 35px;
    background-color: red;
}

/*ul li*/
/*
list-style:
    none:去掉原点
    circle：空心圆
    decimal：数字
    square：正方形


*/
ul {
    background-color: antiquewhite;
}

ul li {
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}

a:hover {
    color: #c06a2c;
}

3.7 背景

背景颜色
背景图片

div {
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/test.PNG");
    /*背景图片默认是全部平铺的    */
}

.div1 {
    background-repeat: repeat-x; /*水平平铺*/
}
.div2 {
    background-repeat: repeat-y; /*竖直平铺*/
}
.div3 {
    background-repeat: no-repeat; /*不平铺*/
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    line-height: 35px;
    /*组合写的方式*/
    /*background：背景颜色   背景图片  图片位置x,y  平铺方式*/
    background: red url("../images/down2.PNG") 200px 1px no-repeat;

}

ul {
    background-color: antiquewhite;
}

ul li {
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    /*拆分写的方式*/
    background-image: url("../images/right.PNG");
    background-repeat: no-repeat;
    background-position: 180px 8px;

}

3.8 背景渐变

background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);

背景颜色设置的参考网站：

https://www.grabient.com/

4. 盒子模型

4.1 什么是盒子

（可以直接在盒子上修改边距，查看效果）

margin：外边距
padding：内边距
border：边框

4.2 边框

1、边框的粗细

2、边框的样式

3、边框的颜色

/*边框border的组合方式
border: 粗细   样式   颜色
    粗细： 1px;
    样式：solid   实线      dashed  虚线*/
#box{
    width: 300px;
    border:1px solid red;
    line-height: 30px;

}
h2{
    font-size: 16px;
    background-color: #c06a2c;

}
form{
    background-color: #c06a2c;
}
/*选中第一个div下面的input标签*/
div:nth-of-type(1) input{
    border:2px solid black;
}
div:nth-of-type(2) input{
    border:2px dashed #7643a9;
}

4.3 外外边距

/*外边距margin：
margin：0 0 0 0   上右下左的顺序，顺时针旋转
margin：1px 2px       分别代表上下、左右，第一个是上下的边距，第二个数左右的边距
margin：0 auto    代表上下边距是0，左右边距自动对齐
margin：3px        带表上下左右四个方向的边距，代表整体*/
#box{
    width: 300px;
    border:1px solid red;
    line-height: 30px;
    margin: 0 auto;
}
h2{
    font-size: 16px;
    background-color: #c06a2c;
    margin-top: 0;/*上边距为0*/
    margin-bottom: 0;/*上边距为0*/

}

/*内边距padding：
padding：0 0 0 0   上右下左的顺序，顺时针旋转
padding：1px 2px       分别代表上下、左右，第一个是上下的内边距，第二个是左右的内边距
padding：3px        带表上下左右四个方向的内边距，代表整体*/
input{
    padding: 3px;
}

盒子的计算方式：你这个元素到底多大？

元素大小=margin+border+padding+实际内容宽度

4.4 圆角边框

/*圆角边框 border-radius
    border-radius：10px    四个角的圆角
    border-radius：30px  10px   左上和右下角对应第一个的圆角，右上和左下对应第二个
    border-radius：10px 20px 30px 40px  分别代表左上、右上、右下、左下，顺时针方向
    */

div {
    width: 100px;
    height: 100px;
    background-color: #FFBBEC;
    border-radius: 40px 30px 20px 1px;
}

/*圆圈：
border-radius:圆角等于盒子宽度*/
.d2 {
    width: 100px;
    height: 100px;
    background-color: #c06a2c;
    border-radius: 50px;
}

/*半圆*/
.d3 {
    width: 100px;
    height: 50px;
    border: 10px solid #FFBBEC;
    border-radius: 100px 100px 0 0;
}

/*扇形*/
.d4 {
    width: 50px;
    height: 50px;
    border: 10px solid #FFBBEC;
    border-radius: 100px 0 0 0;
}

4.5 阴影

/*盒子阴影
    box-shadow:位置x  位置y  羽化半径  颜色
*/

div {
    margin: 0 auto; /*居中的前提：块元素有固定的宽度*/
    width: 100px;
    height: 100px;
    border: 10px solid #688dcc;
    box-shadow: 10px 10px 100px #505f77;
}

前端参考网站：（用现成的改）

模板之家、飞冰、

5. 浮动

5.1 标准文档流

块级元素：独占一行

h1-h6  p  div  列表

行内元素：不独占一行

span	a	img	strong

行内元素可以被包含在块级元素中，反之，则不可以。

5.2 display

/*display:调整元素特性
    block  设置为块元素
    inline-block    是块元素，但是可以内敛，在一行
    inline      设置为行内元素
    none    消失，直接隐藏，不占空间
*/
div {
    width: 100px;
    height: 100px;
    border: 1px solid darkred;
    display: inline;
}

span {
    width: 100px;
    height: 100px; /*行内元素与width和height无关*/
    border: 1px solid darkred;
    display: block; /*行内元素设置为块元素后可以设置宽高有效*/
    display: inline-block;
}

5.3 float

float: right; /*向右浮动*/
float: left; /*向左浮动*/

div {
    margin: 10px;
    padding: 5px;
}

#father {
    border: 1px solid #000000;
}

.layer01 {
    border: 1px #688dcc dashed;
    display: inline-block;
    float: right; /*向右浮动*/

}

.layer02 {
    border: 1px #688dcc dashed;
    display: inline-block;
    float: left; /*向左浮动*/

}

.layer03 {
    border: 1px #688dcc dashed;
    display: inline-block;
    float: left;

}

.layer04 {
    border: 1px #688dcc dashed;
    display: inline-block;
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/test.PNG" alt=""></div>
    <div class="layer02"><img src="images/down.PNG" alt=""></div>
    <div class="layer03"><img src="images/right.PNG" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到
    </div>
</div>

</body>
</html>

5.4 父级边框塌陷

塌陷的问题如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5DvT0ZH6-1646012650132)(…/AppData/Roaming/Typora/typora-user-images/image-20220227215611048.png)]

clear

/*
clear:right     右侧不允许有浮动
clear:left     左侧不允许有浮动
clear:both     两侧不允许有浮动
*/

解决方案：

1、增加父级的高度

#father {
    border: 3px solid #000000;
    height: 400px;
}

2、最后增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow溢出

内容超出固定的范围，用溢出解决
overflow:hidden;	超出部分直接隐藏
overflow:scroll;	超出部分用滚动条显示

在父级元素中增加一个overflow属性

#father {
    border: 3px solid #000000;
    overflow: hidden;
}

4、在父类添加一个伪类:after

#father {
    border: 3px solid #000000;
}
#father:after{
    content: "";
    display: block;
    clear: both;
}

此方法等价于第二种手动添加一个div，设置清楚浮动；可以避免html中一个空div的问题。

小结（针对浮动导致的父级边框塌陷问题）：————面试

浮动元素后面增加div

简单；但代码中应该尽量避免空div
设置父级元素高度

简单；但是元素设置了固定高度后，就会被限制
overflow

简单；但是hidden后，多出的部分会被隐藏，下拉的场景避免使用
父类添加一个伪类：after——推荐使用

写法稍微复杂，但是没有副作用，推荐使用

5.5 对比

以下两个属性都可以让两个元素放在同一行

display

方向不可以控制
float

方向可以自由决定，但是浮动起来会脱离标准文档流，所以要解决父级边框塌陷问题

6. 定位

原始：

6.1 相对定位

相对定位：

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置仍然被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 20px;
        }

        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        /*相对定位：相对于自己原来的位置进行偏移
        */
        #father {
            border: 1px solid #666;
        }

        #div1 {
            border: 1px dashed #020202;
            background-color: black;
            position: relative; /*相对定位：上下左右*/
            top: -20px; /*距离上面-20，向上移*/
            left: 20px; /*距离左边20，向右移20*/
        }

        #div2 {
            border: 1px dashed #c06a2c;
            background-color: #c06a2c;
            position: relative;
            top: 15px; /*距离上面15px*/
        }

        #div3 {
            border: 1px dashed #124848;
            background-color: #124848;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
    <div id="div3">盒子3</div>

</div>
</body>
</html>

提示：使用display将行内元素a变为块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0 auto;
        }

        .box {
            border: 2px solid red;
            padding: 10px;
            width: 300px;
            height: 300px;
        }

        a {
            text-decoration: none;
            text-align: center;
            font-size: 14px;
            line-height: 100px;
            color: white;
            background-color: #FFBBEC;
            width: 100px;
            height: 100px;
            display: block; /*变成块级元素*/
        }

        a:hover {
            background-color: #688dcc;
        }

        .a2, .a4 {
            position: relative;
            left: 200px;
            top: -100px;
        }

        .a5 {
            position: relative;
            left: 100px;
            top: -300px;
        }


    </style>
</head>
<body>
<div class="box">
    <a class="a1" herf="">链接1</a>
    <a class="a2" href="">链接2</a>
    <a class="a3" href="">链接3</a>
    <a class="a4" href="">链接4</a>
    <a class="a5" href="">链接5</a>
</div>

</div>

</body>
</html>

6.2 绝对定位

定位：基于XXX定位，上下左右，不保留原来的位置

1、没有父级元素定位（或者父级元素未设置相对、绝对定位）的情况下，相对于浏览器定位。

2、假设父级元素存在定位，我们通常会相对于父级元素定位。

3、在父级元素范围内移动

绝对定位：

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 20px;
        }

        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid #666;
            position: relative;
        }

        #div1 {
            border: 1px dashed #020202;
            background-color: black;
        }

        #div2 {
            border: 1px dashed #c06a2c;
            background-color: #c06a2c;
            position: absolute;
            right: 20px;
        }

        #div3 {
            border: 1px dashed #124848;
            background-color: #124848;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="div1">盒子1</div>
    <div id="div2">盒子2</div>
    <div id="div3">盒子3</div>

</div>
</body>
</html>

6.3 固定位置fixed

固定不变的位置，如导航栏、广告位等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        bodey {
            height: 800px;
        }

        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: 100px;
            background-color: yellow;
            /*固定定位：*/
            position: fixed;
            left: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

6.4 z-index

层级的概念：最低层是0，依次向上，最高无限制

图层

<!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/test.PNG" alt=""></li>
        <li class="tipText">学习Java</li>
        <li class="tipBg"></li>
        <li>时间：2022.2.28</li>
        <li>地点：北京</li>
    </ul>
</div>
</body>
</html>

#content {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    border: 1px solid #505f77;
    width: 400px;
}

ul li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

/*父级元素相对定位*/
#content ul {
    position: relative;
}

/*相对于父级元素定位*/
.tipText, .tipBg {
    position: absolute;
    width: 400px;
    top: 178px;
    height: 25px;
}

.tipBg {
    background-color: #666666;
    opacity: 0.5; /*设置背景透明度*/
}

.tipText {
    color: white;
    z-index: 1; /*最低层是0*/
    text-align: center;
}