1什么是CSS

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

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现层(美化网页)

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

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

1.2发展史

CSS1.0

CSS2.0 DIV(块)+CSS HTML和CSS结构分离网页变得简单 SEO

CSS2.1 浮动定位

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

1.3快速入门

练习格式

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

基本入门

建议使用这种规范

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

CSS的优势

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

1.4CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.内部样式-->
    <style>
        h1 {
            color: green;
        }
    </style>
    <link rel="stylesheet" href="CSS/css.css">
</head>
<body>
<!--优先级:就近原则-->

<!--1.行内样式 在标签元素中 编写一个style属性 编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

/*3.外部样式*/
h1 {
    color: yellow;
}

拓展外部样式两种写法

链接式 html内

/*3.外部样式*/
h1 {
    color: yellow;
}

导入式 @import是CSS2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入式-->
    <style>
        @import url("CSS/style.css");
    </style>
</head>
<body>
<h1>林宏程</h1>
</body>
</html>

2选择器

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

2.1基本选择器

2.1.1标签选择权

选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器 会选择到页面上所有的这个标签的元素
        */
        h1{
            color: red;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>学java</h1>
<h1>学java</h1>
<p>林宏程</p>
</body>
</html>

2.1.2类选择器

选择所有class属性一致的标签跨标签 .类名{}

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

    <style>
        /*类选择器的格式 .class的名称*/
        /*可以多个标签归类 是同一个class*/
        .title1{
            color: red;
        }
        .title2{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="title1">标题1</h1>
<h2 class="title2">标题2</h2>
<h3 class="title1">标题3</h3>

<p class="title1">P标签</p>
</body>
</html>

2.1.3ID选择器

全局唯一 #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器 id必须保证全局唯一
          #id名称{}
          不遵循就近原则
          id选择器>类选择器>标签选择器
        */

        #title1{
            color: red;
        }
        .style1{
            color: green;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="title1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级

ID选择器>类选择器>标签选择权

2.2层次选择器

总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        body p{
            color: red;
        }

        /*子选择器*/
        body>p{
            background: aqua;
        }

        /*相邻兄弟选择器 只有一个 向下一个*/
        .active +p{
            background: antiquewhite;
        }

        /*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: green;
        }
    </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>p7</p>
<p>p8</p>

</body>
</html>

html结构

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.2.1后代选择器

在某个元素后面所有标签祖爷爷爷爷爸爸你

/*后代选择器*/
body p{
    color: red;
}

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.2.2子选择器

在某个元素指定的后一代标签儿子

/*子选择器*/
body>p{
    background: aqua;
}

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.2.3向下弟弟选择器

只有一个向下一个感觉应该叫弟弟选择器因为他还只能向下选择

/*相邻兄弟选择器 只有一个 向下一个*/
.active +p{
    background: antiquewhite;
}

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.2.4向下所有弟弟选择器

当前选中元素的向下的所有兄弟元素

/*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: green;
}

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.3结构伪类选择器

伪类:条件

<!DOCTYPE html>
<html token string">"en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: green;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }

        /*选中p1:定位到父元素 选择当前的第一个元素 按照元素
          nth-child(1) 选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效
        */
        p:nth-child(1){
            background:blue;
        }

        /*
            nth-of-type(2)选中父元素下的p元素的第二个 按照类型
        */
        p:nth-of-type(2){
            background: yellow;
        }
        /*动画特效 选中更改背景颜色*/
        a:hover{
            background:black ;
        }

    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <a href="">a1</a>
    <h1>h1</h1>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.4属性选择器(常用)

id+class 结合的选择器

格式:

标签[属性名=属性值(正则)] {

}

= 绝对等于

*=包含

^=以什么开头

$=以什么结尾

<!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: blue;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*
        格式
        标签[属性名=属性值(正则)] {}

        a[id]{}
        存在id属性的元素

        a[id=first]{} 包含id=first的元素
        =绝对等于
        */
        a[id=first]{
            background: green;
        }

        /*
         class中有links的元素
         *=包含这个元素
        */
        a[class*=links]{
            background: yellow;
        }

        /*选中href中以http开头的元素
        ^=以这个开头
        */
        a[href^=http]{
            background: red;
        }

        /* 选中以href中以pdf结尾的元素
        $=以这个结尾*/
        a[href$=pdf]{
            background: aqua;
        }

    </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/123.html" class="links item active" >3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.png" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>


</body>
</html>

3美化网页元素

3.1为什么要美化

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

span标签

重点要突出的字使用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>

3.2字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--{
            font-family: 字体 不同语言可以写不同个数字体;
            font-size: 字体大小;
            font-weight: 字体粗细;
            color: 字体颜色;
            }  -->
    <style>
        body {
            font-family: "Arial Black",微软雅黑;
            color: aqua;
        }

        h1 {
            font-size: 50px;
        }

        p {

        }

        .p1 {
            font-weight: lighter;
        }
    </style>
</head>
<body>
<h1>
    哼 &nbsp; 哼~~~
</h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>

<p>
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
</p>

<p>
    English is great
</p>
</body>
</html>

3.3文本样式

color 颜色:

1.单词

2.RGB:00~FF 红绿蓝三色调配 255 255 255

3.RGBA:00~FF 红绿蓝三色调配 255 255 255 A是透明度 0~1
text-align: 排版(如居中);

text-align: center;
text-indent: 缩进;

text-indent: 2em; em代表的是几个字体的距离
line-height :行高

background: blue;

height: 300px;

line-height: 300px;

行高和块的高度一致就可以上下居中
装饰

text-decoration: underline;
文本图片水平对齐

vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    1.color 颜色:
        1.单词
        2.RGB:00~FF 红绿蓝三色调配 255 255 255
        3.RGBA:00~FF 红绿蓝三色调配 255 255 255 A是透明度 0~1

    2.text-align: 排版(如 居中);
        text-align: center;
        vertical-align: middle;
    3.text-indent:  缩进;
        text-indent: 2em; em代表的是几个字体的距离

    4.行高
        background: blue;
        height: 300px;
        line-height: 300px;
        行高和块的高度一致 就可以上下居中

    5.装饰
        text-decoration: underline;

-->
    <style>
        img,span{
            vertical-align: middle;
        }

        h1{
            color:rgba(0,255,255,0.2) ;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 100px;
            line-height: 100px;
        }

        .l1{
            /*下划线*/
            text-decoration: underline;
        }
        .l2{
            /*中划线*/
            text-decoration: line-through;
        }
        .l3{
            /*上划线*/
            text-decoration: underline;
        }
        a{
            /*超链接去下划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<h1>
    哼 &nbsp 哼~~~
</h1>

<p class="p1">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</p>

<p class="p2">
    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!!!!!!
</p>

<p class="p3">
    English is great
</p>

<p>
    <img src="image/a.jpg" alt="图片错误">
    <spna>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</spna>
</p>
</body>
</html>

3.4文本阴影和超伪链接

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

        /*鼠标悬浮的状态*/
        a:hover {
            color: orange;
            font-size: 20px;
        }

        /*鼠标按住未释放的状态*/
        a:active {
            color: green;
            font-size: 100px;
        }

        /*未访问过链接*/
        a:link{
            color: aqua;
        }

        /*访问过链接*/
        a:visited{
            color: gray;
        }

        /*text-shadow: 阴影颜色 水平偏移 垂直偏移 模糊半径;*/
        #price{
            text-shadow: cornflowerblue 10px 0px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/a.jpg" alt="图片失效">
</a>

<p>
    <a href="#">驴</a>
</p>

<p>
    <a href="">作者 我</a>
</p>

<p id="price">
    $99
</p>
</body>
</html>

3.5列表

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部产品分类</h2>
    <ul>
        <li><a href="">图书</a>&nbsp;&nbsp;&nbsp;<a href="">音箱</a>&nbsp;&nbsp;&nbsp;<a href="">数字商品</a></li>
        <li><a href="">家庭电器</a>&nbsp;&nbsp;&nbsp;<a href="">手机</a>&nbsp;&nbsp;&nbsp;<a href="">数码</a></li>
        <li><a href="">电脑</a>&nbsp;&nbsp;&nbsp;<a href="">耳机</a>&nbsp;&nbsp;&nbsp;<a href="">鼠标</a></li>
    </ul>

</div>


</body>
</html>

css代码

#nav{
    width: 300px;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    background-color: red;
}
/*ul li*/
/*
list-style: ;
none   去掉圆点 去掉数字
circle 空心圆
decimal 数字
square 正方形
*/

ul{
    background-color: gray;
}

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

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

a:hover{
    color:orange;
}

3.6背景

背景颜色和背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1080px;
            height: 1920px;
            border: 1px solid #ff0000;
            background-image: url("image/a.jpg");
            /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div class="div1"></div>
<br>
<div class="div2"></div>
<br>
<div class="div3"></div>

</body>
</html>

对淘宝导航做个模仿

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部产品分类</h2>
    <ul>
        <li><a href="">图书</a>&nbsp;&nbsp;&nbsp;<a href="">音箱</a>&nbsp;&nbsp;&nbsp;<a href="">数字商品</a></li>
        <li><a href="">家庭电器</a>&nbsp;&nbsp;&nbsp;<a href="">手机</a>&nbsp;&nbsp;&nbsp;<a href="">数码</a></li>
        <li><a href="">电脑</a>&nbsp;&nbsp;&nbsp;<a href="">耳机</a>&nbsp;&nbsp;&nbsp;<a href="">鼠标</a></li>
    </ul>
</div>


</body>
</html>

CSS

#nav {
    width: 300px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 30px;
    margin: 0px;
    /* 颜色 图片 图片位置 平铺方式*/
    background: lightseagreen url("image/a.jpg") no-repeat 200px -33px;
}

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

ul {
    background-color: gray;
    margin: 0px;
    padding: 0px;
}

ul li {
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
    background-color: aqua;
    background-image: url("image/a.jpg");
    background-repeat: no-repeat;
    background-position: 200px -27px;
}

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

a:hover {
    color: orange;
}

3.7渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #0093E9;
            background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

        }
        
    </style>
</head>
<body>
    
</body>
</html>

4.盒子模型

4.1什么是盒子模型

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

margin 外边距

padding 内边距

border 边框

4.2边框

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*body总有一个外边距*/
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        #box{
            /*border 粗细 样式 颜色*/
            width: 300px;
            border:1px solid red ;
        }

        form{
            background: aqua;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }

        div:nth-of-type(2)>input{
            border: 3px dashed blue;
        }

        h2{
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>会员登入</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>

        <div>
            <span>密码:</span>
            <input type="text">
        </div>

        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>

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

4.3内外边距

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

公式:margin+border+padding+内容宽度

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

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

        #box {
            /*border 粗细 样式 颜色*/
            /*外边框的妙用 居中元素
              margin: 0 auto;

           */
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        h2 {
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            margin: 0;
        }

        form {
            background: aqua;
        }

        input {
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px 2px;
        }

    </style>
</head>
<body>

<div id="box">
    <h2>会员登入</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>

        <div>
            <span>密码:</span>
            <input type="text">
        </div>

        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>

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

4.4圆角边框

圆角边框

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

    <style>

        div{
            border: 10px solid red;
            width: 100px;
            height: 100px;
            /*圆圈:   圆角=半径*/
            /*左上 右上 右下 左上 顺时针方向*/
            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{
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background: red;
            /*圆圈:   圆角=半径*/
            /*左上 右上 右下 左上 顺时针方向*/
            /*先配置好width和height在配置边距会容易很多*/
            border-radius: 50px 50px 0px 0px;
        }
        img{
            /*头像像素100*100  半径是50 设置圆角50就是个圆  */
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div></div>
<img src="image/a.jpg" alt="">
</body>
</html>

4.5盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--margin:0 auto
    要求 块元素块元素有固定的宽度
    -->
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*阴影颜色 水平偏移 垂直偏移 模糊半径*/
            box-shadow: yellow 10px 10px 100px;
            margin: 0 auto;
        }

        img {
            border-radius: 50px;
            /*阴影颜色 水平偏移 垂直偏移 模糊半径*/
            box-shadow: yellow 10px 10px 100px;
        }
    </style>
</head>
<body>

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

</body>
</html>

5浮动

5.1标准文档流

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

块级元素独占一行

h1~h6 p div list...........

行内元素不独占一行

span a img strong....

行内元素可以包括在块级元素中反之不行

5.2display

block-inline 就是将img这种块级元素放在行内元素中因为图片经常会另起一行想要多个图片放同一行就是用这个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;
        }
        span{
            /*block 块元素
              inline 行内元素
              block-inline 是块元素 但是可以内联 在一行
              none 消失
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            display: inline-block;

    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
<p>浮动的盒子可以向左浮动 也可以向右浮动 直到它的边缘碰到包含框或另一个浮动盒子为止</p>
</body>
</html>

这个也是一种实现行内元素排列的方式但是我们很多情况都使用float

5.3float

1.左右浮动 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
        span{
            /*
            float:
            right 右浮动
            left 左浮动
            */
            width: 100px;
            height: 100px;
            border: red solid 10px;
            float: right;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
<p>浮动的盒子可以向左浮动 也可以向右浮动 直到它的边缘碰到包含框或另一个浮动盒子为止</p>
</body>
</html>

5.4父级边框塌陷的问题

clear

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

解决方案

1.增加父级元素的高度

简单元素假设有了固定的高度就会被限制

#father{
    border: 1px #000 solid;
    height: 800px;
}

2.在最后增加一个空的div 清除浮动

简单代码中尽量避免空div

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


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

3.overflow 在父级元素中增加一个overflow hidden属性可以隐藏多出来的浮动元素

简单下拉的一些场景避免使用

#father{
    border: 1px #000 solid;
    overflow: hidden;
}

4.父类增加一个伪类 after(推荐)

推荐写法复杂一些但是没有副作用

#father:after{
    content: '';
    display: block;
    clear: both;
}

5.5对比

display

方向不可控制
float

浮动起来会脱离标准文档流所以要解决父级边框塌陷的问题

6.定位

6.1相对定位

相对定位 position:relative

相对于原来的位置进行制定的偏移

<!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 #de1717;
        }

        .first {
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
            position: relative;/*相对定位:上下左右*/
            /*距离上离近20px*/
            top: -20px;
            /*距离上离开10px*/
            left: 10px;
        }

        .second {
            background-color: #548555;
            border: 1px dashed #5485e5;
        }

        .third {
            background-color: #d59255;
            border: 1px dashed #d59230;
            position: relative;
            /*距离下离开10px*/
            bottom: 10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="first">第一个盒子</div>
    <div class="second">第二个盒子</div>
    <div class="third">第三个盒子</div>
</div>
</body>
</html>

/*距离上离近20px*/
            top: -20px;
            /*距离上离开10px*/
            left: 10px;

 /*距离下离开10px*/
            bottom: 10px;

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: red solid 2px;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: blue;
        }
        .a2{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a4{
            position: relative;
            top: -100px;
            right: -200px;
        }
        .a5{
            position: relative;
            top: -300px;
            right: -100px;
        }

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

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

6.2绝对定位

定位基于XXX定位上下左右

没有父级元素定位的前提下相对于浏览器定位
假设父级元素存在定位我们通常会相对于父级元素

在父级元素范围内移动

总结 :相对于父级或浏览器的位置进行制定的偏移绝对定位的话它仍然在标准文档流中原来的位置会被保留

<!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 #de1717;
            position: relative;
        }
        .first{
            background-color: #3e6a55;
            border: 1px dashed #3e6a45;
        }
        .second{
            background-color: #548555;
            border: 1px dashed #5485e5;
            position: absolute;
            right: 20px;
            top: -1px;
        }
        .third{
            background-color: #d59255;
            border: 1px dashed #d59230;

        }
    </style>
</head>
<body>
<div id="father">
    <div class="first">第一个盒子</div>
    <div class="second">第二个盒子</div>
    <div class="third">第三个盒子</div>
</div>
</body>
</html>

6.3固定定位

<!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: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4z-index图层

opacity: 0.5;透明度

html

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

    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/a.jpg" alt=""></li>
        <li class="tipText">学习Java&nbsp;冲冲冲</li>
        <li class="tipBg"></li>
        <li>时间 2020.1.1</li>
        <li>地点:月球一号基地</li>
    </ul>
</div>

</body>
</html>

css

#content{
    width: 380px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;

}
ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content>ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 140px;
}
.tipBg{
    background: black;
}
.tipText{
    z-index: 999;
    color: white;
    /*rgba也可以设置透明度*/
    opacity: 0.5;

}

7.动画

略过使用JS更加方便

8总结

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

2.CSS入门基础1什么是CSS2选择器3美化网页元素4.盒子模型5浮动6.定位7.动画8总结

1什么是CSS

1.1什么是CSS

1.2发展史

1.3快速入门

练习格式

基本入门

CSS的优势

1.4CSS的三种导入方式

2选择器

2.1基本选择器

2.1.1标签选择权

2.1.2类选择器

2.1.3ID选择器

优先级

2.2层次选择器

总体代码

html结构

2.2.1后代选择器

2.2.2子选择器

2.2.3向下弟弟选择器

2.2.4向下所有弟弟选择器

2.3结构伪类选择器

2.4属性选择器(常用)

3美化网页元素

3.1为什么要美化

3.2字体样式

3.3文本样式

3.4文本阴影和超伪链接

3.5列表

html代码

css代码

3.6背景

3.7渐变

4.盒子模型

4.1什么是盒子模型

4.2边框

4.3内外边距

4.4圆角边框

4.5盒子阴影

5浮动

5.1标准文档流

5.2display

5.3float

5.4父级边框塌陷的问题

1.增加父级元素的高度

2.在最后增加一个空的div 清除浮动

3.overflow 在父级元素中增加一个overflow hidden属性 可以隐藏多出来的浮动元素

4.父类增加一个伪类 after(推荐)

5.5对比

6.定位

6.1相对定位

练习

6.2绝对定位

6.3固定定位

6.4z-index图层

7.动画

8总结

继续阅读

3.overflow 在父级元素中增加一个overflow hidden属性可以隐藏多出来的浮动元素