CSS入门

最新推荐文章于 2024-04-03 05:13:44 发布

wh_in_silence

最新推荐文章于 2024-04-03 05:13:44 发布

阅读量318

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/wendy_gong/article/details/120640230

版权

本文介绍了HTML、CSS和JavaScript的基础知识，强调了CSS在网页设计中的重要性。内容包括CSS的起源、快速入门、选择器、美化网页的方法如字体、颜色、阴影、超链接样式等，以及盒子模型、浮动和定位的概念。此外，还探讨了CSS的历史发展，如CSS1.0、CSS2.0和CSS3.0的特性。

摘要由CSDN通过智能技术生成

CSS

HTML+CSS+JavaScript

结构+表现+交互

HTML+CSS英文教程，有时间看看。https://www.cntofu.com/book/61/learning/html-css.md

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

1. CSS简介

1.1 CSS 是什么？

CSS 指的是层叠样式表(级联样式表*) (*Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
CSS：表现(美化网页)
字体、颜色、边距、边框、高度、宽度、背景图片、网页定位、网页浮动

HTML 从未打算包含用于格式化网页的标签！

创建 HTML 的目的是描述网页的内容，例如：

<h1>这是一个标题。</h1>

<p>这是一个段落。</p>

将之类的标签和 color 属性添加到 HTML 3.2 规范后，Web 开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中，这演变为一个漫长而昂贵的过程。

为了解决这个问题，万维网联盟（W3C）创建了 CSS。

CSS 从 HTML 页面中删除了样式格式！

1.2 CSS 发展史

CSS 1.0

CSS 2.0 DIV(块)+CSS, 提出了HTML与CSS分离的思想，网页变得简单，SEO

CSS 2.1 浮动+定位

CSS 3.0 圆角、阴影、动画…浏览器兼容性~

1.3 CSS 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  规范：在html的head里可以在<style >块里编写css代码，称为内部CSS
      语法：选择器{
      声明1；
      声明2；
      。。。；
      声明n;
      声明（由属性和值组成）；
      每一个声明最好用分号结尾
      不同的声明之间用分号间隔开

      }

-->
    <style>
        h1{
            background-color: green;
            color: red;
        }
    </style>
    
</head>
<body>
<h1>这是一个一级标题，背景颜色为绿，颜色为红。</h1>
</body>
</html>

一般建议使用这种方式：

在这里插入图片描述

CSS优势:

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用外部.CSS文件
利用SEO，容易被搜索引擎收录！
Vue

1.4 CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        内部样式
         */
        h1  {
            color: blueviolet;
            background-color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--优先级：就近原则-->
<!--  行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aqua;background-color: blueviolet">这是一个一级标题</h1>
</body>
</html>

/*
外部样式
 */
h1{
    color: blue;
    background-color: blueviolet;
}

扩展：外部样式的两种导入方式：

链接式：

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

导入式：@import 是CSS 2.1 特有的

 <style>
        /*
        外部样式，导入式
         */
        @import url(css/style.css);

    </style>

2. 选择器

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

2.1 基本选择器

标签选择器 :选择一类标签格式：标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择这个页面上所有带有这个标签 的元素*/
        h1{
            color: rgba(255, 31, 46, 0.78);
            background-color: #00ffdd;
            border-radius:25px ;
        }
        p{
            font-size: 30px;
        }
    </style>
</head>
<body>
<h1>我在学习</h1>
<h1>我在学习个锤子</h1>
<p>那只是错觉而已</p>
</body>
</html>

类选择器 class：选择所有class属性一致的标签，跨标签。格式：.类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器的格式  .class的名称{}
        好处，可以多个标签归类,是同一个class，可以复用
         */
        .first{
            border-radius: 30px;
            background-color: blueviolet;
            color: red;
            text-align: center;
        }
        .second{
            color: green;
        }
    </style>
</head>
<body>
<h1 class="first">标题1</h1>
<h1 class="second">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<p class="first">为了验证标签归类</p>
</body>
</html>

id选择器全局唯一格式：#id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器格式，#id选择器名称{}
        id：必须保证全局唯一
         */
        #first{
            border-radius: 30px;
            background-color: blueviolet;
            color: red;
            text-align: center;
        }
        #second{
            color: green;
        }
        #third{
            background-color: gold;
        }
        /*
        验证就近原则
         */
        /*
        id选择器>class选择器>标签选择器
         */
        .title{
            color:green;
        }
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="first" class="title">标题1</h1>
<h1 id="second">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>id
<p id="third">id不可复用</p>
</body>
</html>

优先级：id>class>标签

2.2 层次选择器

后代选择器在某个元素的后面爷爷爸爸你

/*
        后代选择器
         */
        body p{
            background-color: yellow;
        }

子选择器一代，儿子

/*
        子选择器
         */
        body>p{
            background-color: red;
        }

相邻兄弟选择器同辈

/*
        相邻兄弟选择器，只有一个,向下执行
         */
        .bro+p{
            background-color: gold;
        }

通用选择器

  /*
        通用兄弟选择器,当前选中元素的向下的所有兄弟选择器
         */
        .bro~p{
            background-color: brown;
        }

2.3 结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  避免使用 class id 选择器 ，使ul的*/
        /*ul的第一个子元素*/
        ul li:first-child{
            background-color: red;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background-color: blue;
        }
        /*选中p1,定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个子元素nth-child(1),必须是当前元素才生效
        */
        h1:nth-child(1){
            background-color: #00ffdd;
        }
        h1{
            color: red;
        }
        p:nth-child(2){
            background-color: greenyellow;
        }
        /*选中父元素下p元素的第二个类型*/
        p:nth-of-type(2){
            background-color: blue;
        }
        li:nth-child(2){
            color: red;
        }
        a:hover{
            background-color: red;
        }
    </style>
</head>
<body>
<a href="">假装这个是连接</a>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>无序列表：
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

2.4 属性选择器(常用)

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*
        float:浮动
         */
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            background-color: lightblue;
            border-radius: 20px;
            text-align: center;
            color: red;
            text-decoration: none;/*去掉下划线*/
            margin: 10px;/*外边距*/
            font:bold 20px/50px Arial;/*font属性*/
        }
        /* 属性名   or  属性名  =  属性值(正则)
        =  绝对等于
        *= 包含这个值
        ^= 以其值开头
        $=  以其值结尾
        存在id属性的元素  a[]{]
         */
        a[id]{
            background-color: red;
            color: yellow;
        }
        /*id=fist的元素*/
        a[id=first]{
            background-color: brown;
        }
        /*class有link的元素*/
        a[class *= link]{
            background-color: green;
        }
        /*
        选中href中以http开头的元素
         */
        a[href^=http]{
            background-color: purple;
        }
        a[href$=pdf]{
            background-color: orange;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://baidu.com" class="link item first " id="first">1</a>
    <a href="" class="link item active" target="_blank" title="test2">2</a>
    <a href="images/123.html"class="link item ">3</a>
    <a href="images/123.png"class="link item ">4</a>
    <a href="images/123.jpg"class="link item ">5</a>
    <a href="abc"class="link item ">6</a>
    <a href="/abc.pdf"class="link item ">7</a>
    <a href="/a.pdf"class="link item ">8</a>
    <a href="abc.doc"class="link item ">9</a>
    <a href="abcd.doc"class="link item last "id="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:粗细

-->
    <style>
       body{
           font-family: "Times New Roman",楷体;
           color: blue;
       }
        h1{
            font-size: 50PX;
        }
        .p1{
            font-weight: bolder;
        }
        /*  字体风格   */
        .P2{
            font:oblique bolder 16px "楷体";
        }
    </style>
</head>
<body>
<div>
    <h1>  虹猫蓝兔 </h1>
    <p  class="p1"> 虹猫蓝兔》是由湖南宏梦卡通传播有限公司于2006年推出的一部长篇武侠动画连续剧系列，也是中国首部武侠动画电视连续剧。 </p>
    <h2> 虹猫 </h2>
    <p CLASS="P2">
        性别:男
        年龄:18
        亲人：白猫
        星座：狮子座
        优点：活泼开朗,非常有责任心，乐于助人,善于解决各种难题。
        缺点：在别人眼里有点傲慢和个人英雄主义。
        剑名:长虹剑、白孤剑
        剑招:长虹贯日、日照九州、火舞旋风、佛光普照、飞龙在天、神龙九变、灵蛇出洞、一招三式
        其他招式：火舞旋风一至十三式
    </p>
    <p>
        Waiting for you I'm waiting for you
        Waiting for you come here to my dream
    </p>

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

3.3 文本样式

颜色 color
对齐方式 text-align
首行缩进 text-indent
行高 line-height
装饰 text-decoration
文本图片水平对齐：vertical-align:middle;

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

    <!--        颜色 RGB 名字，HSL  RGBA
      text-align: center;
      text-indent: 2em;  段落首行缩进
       height: 200px;
            line-height: 200px;行高和块的高度一致，就可以上下居中
            text-decoration:?????????
      -->
    <style>

        h1{
            color:red;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background-color: greenyellow;
            height: 50px;
            line-height: 50px;
        }
        /*下划线*/
        .pp1{
        text-decoration-color: darkorchid;
            text-decoration-skip: box-decoration;
            text-decoration-style: initial;
            text-decoration-line: underline;
        }
        /*中划线*/
        .pp2{
            text-decoration-color: greenyellow;
            text-decoration-line: line-through;
        }
        /*上划线*/
        .pp3{
            text-decoration-color: firebrick;
            text-decoration-line:overline;
        }
        /*a标签去下划线*/
        a{
            text-decoration: none;
        }
         img,span{
             vertical-align: middle;
         }
    </style>
</head>
<body>
<p>
    <img src="image/jg.png" alt="">
    <span>这是三只松鼠吗？</span>
</p>

<p class="pp1">测试下划线</p>
<p class="pp2">测试下划线</p>
<p class="pp3">测试下划线</p>

<a href="">123</a>
    <h1>  虹猫蓝兔 </h1>
    <p  class="p1"> 虹猫蓝兔》是由湖南宏梦卡通传播有限公司于2006年推出的一部长篇武侠动画连续剧系列，也是中国首部武侠动画电视连续剧。 </p>
    <h2> 虹猫 </h2>
    <p CLASS="P2">
        性别:男
        年龄:18
        亲人：白猫
        星座：狮子座
        优点：活泼开朗,非常有责任心，乐于助人,善于解决各种难题。
        缺点：在别人眼里有点傲慢和个人英雄主义。
        剑名:长虹剑、白孤剑
        剑招:长虹贯日、日照九州、火舞旋风、佛光普照、飞龙在天、神龙九变、灵蛇出洞、一招三式
        其他招式：火舞旋风一至十三式
    </p>
    <p class="p3">
        Waiting for you I'm waiting for you
        Waiting for you come here to my dream
    </p>


</body>
</html>

3.4 阴影

/*text-shadow
         阴影颜色，水平偏移，垂直偏移，阴影半径*/
.price{
            text-shadow: firebrick 10px 0px 10px;
        }

3.5 超链接伪类

正常情况只有：a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*未访问的连接*/
        a:link{
            color: blueviolet;
        }
        /*已经访问的颜色*/
        a:visited{
            color: yellow;
        }
        /*鼠标悬浮的颜色（记住）*/
        a:hover{
            color: firebrick;
            font-size: 50px;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: green;
        }
        /*text-shadow
         阴影颜色，水平偏移，垂直偏移，阴影半径*/
.price{
            text-shadow: firebrick 10px 0px 10px;
        }

    </style>
</head>
<body>
<a href="#">
    <img src="image/java.png" alt="">
</a>
<p>
    <a href="#">码出高效，Java开发手册 </a>
</p>
<p>
    <a href="">作者，孤尽老师</a>
</p>
<p class="price">
    ￥99
</p>
</body>
</html>

3.6 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/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>&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>&nbsp;&nbsp;<a href="#">坚果</a></li>
        <li><a href="#">电饭煲</a>&nbsp;&nbsp;<a href="#">电磁炉</a>&nbsp;&nbsp;<a href="#">电风扇</a></li>

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

#nav{
    width: 300px;
    background: darkgray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background:red;
}
/*ul   li*/
/*ul{*/
/*    background: darkgray;*/
/*}*/
ul li{
    /*行高*/
    height: 30px;
    /*list-style
    none没有无序列表前的圆点，或者有序列表前的数字
    circle 空心圆
    decimal:数字
    square*/
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7 背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>{
    <style>
        div{
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            /*默认是全部平铺 repeat*/
            background-image: url("image/jg.png");
        }
        .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>

#nav{
    width: 300px;
    background: darkgray;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /* 颜色 图片 图片位置 平铺方式*/
    background:red url("../images/TD.jpg") 290px 5px no-repeat;
}
/*ul   li*/
/*ul{*/
/*    background: darkgray;*/
/*}*/
ul li{
    /*行高*/
    height: 30px;
    /*list-style
    none没有无序列表前的圆点，或者有序列表前的数字
    circle 空心圆
    decimal:数字
    square*/
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/TR.png");
    background-repeat: no-repeat;
    /*可在网页自动调节*/
    background-position: 248px 5px;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

3.8 渐变

(2条消息) CSS3渐变属性_葉無聞-CSDN博客_css渐变属性

Grabient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #FFFFFF;
            background-image: linear-gradient(115deg,#FF34FF 0%,#5687FF 50%, #FF0000 100%);
        }
    </style>
</head>
<body>
</body>
</html>

4.盒子模型

4.1 什么是盒子

在这里插入图片描述

margin:外边距

padding：内边距

border：边框

4.2 边框

粗细

样式

颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*初始化内外边距,一般情况会有一个默认的初始化边距*/
        /*body{*/
        /*    margin: 0px;*/
        /*    padding: 0px;*/
        /*    text-decoration: none;*/
        /*}*/
        /*border:粗细、样式、颜色*/
        h2{
            background: rgba(62,59,228,0.98);
            font-size: 16px;
            color: white;
            /*默认初始状态有一个非0的外边距*/
            margin: 0px;
        }
        #box{
            width: 300px;
            height: 200px;
            border:1px solid red;
            padding: 10px;
        }
        form{
            background: #297980;
        }
        #box div:nth-of-type(1) input{
            border:3px solid black;
        }
        #box div:nth-of-type(2) input{
            border:3px dashed #88FF77;
        }
        #box div:nth-of-type(3) input{
            border:3px dotted yellow;
        }

    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户：</span>
            <input type="text" name="" placeholder="用户名">
        </div>
        <div>
            <span>密码：</span>
            <input type="password" name=""  placeholder="密码">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="email" name=""  placeholder="邮箱">
        </div>
    </form>
</div>
</body>
</html>

4.3 内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用，居中元素
          margin: 0px auto;
 -->
    <style>

        h2{
            background: rgba(62,59,228,0.98);
            font-size: 16px;
            color: white;
            /*默认初始状态有一个非0的外边距
            margin 一个值 上下左右外边距均相同。
            两个值，第一个值为上下边距，第二个值为左右边距
            三个值  上   左右   下
            四个值  上  右 下  左*/
            margin: 0px;
        }
        #box{
            width: 300px;
            height: 200px;
            border:1px solid red;
            padding: 10px;
            margin: 0px auto;
        }
        form{
            background: #297980;
        }
        input{
            border:3px dotted #FFFF77;
        }

    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户：</span>
            <input type="text" name="" placeholder="用户名"/>
        </div>
        <div>
            <span>密码：</span>
            <input type="password" name=""  placeholder="密码"/>
        </div>
        <div>
            <span>邮箱：</span>
            <input type="email" name=""  placeholder="邮箱"/>
        </div>
    </form>
</div>
</body>
</html>
</body>
</html>

盒子大小的计算方式：margin+border+padding+内容宽度

在这里插入图片描述

4.4 圆角边框

四个角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid yellow;
            /*左上，右上，右下，左下  顺时针方向*/
            /*圆圈    圆角半径 = 1/2的（宽度+边框） */
            border-radius: 100px;
        }
    </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;
            border: 10px solid yellow;
            border-radius: 60px 60px 0px 0px;
        }
    </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: 100px;
            border: 10px solid yellow;
            border-radius: 120px 0px 0px 0px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            /*图片大小为 300 × 300*/
            border-radius: 150px;
        }

    </style>
</head>
<body>
<img src="images/tx.png" alt="头像"/>
</body>
</html>

在这里插入图片描述

4.5 阴影

边框阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*语法box-shadow: h-shadow v-shadow blur spread color inset;水平 竖直允许负值,
            后四个可选,分别为模糊距离,阴影尺寸,阴影颜色,内部inset/外部outset(默认)阴影*/
            box-shadow:10px 10px 100px yellow  ;
        }
       
    </style>
</head>
<body>
<div></div>
</body>
</html>

图片元素的居中

margin :0 auto 上下边距为0，左右自动，但有时候只设置div可能无法使其居中

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

        img{
            /* margin: 0 auto;居中前提 块元素 有固定的宽度*/
            margin: 0 auto;
            border-radius: 150px;
            box-shadow:10px 10px 50px yellow  ;
        }
    </style>
</head>
<body>
<div style="width: 1000px ;height: 500px;display: block;text-align: center">
    <img src="images/tx.png" alt="">
</div>

</body>
</html>

5.浮动

5.1 标准文档流

块级元素：独占一行

h1-h6,p,div,列表........

行内元素：不独占一行

span,a,img,strong.........

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

5.2 display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*block  块级元素
        inline 行内元素
        inline-block 是块级元素，但可以内联，在一行
        none 此元素不会被显示*/
        div{
            width: 100px;
            height: 100px;
            border: 1px dashed red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px dashed green;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>块级元素</div>
<span>行内元素</span>
</body>
</html>

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

5.3 float

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

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

div{
    margin: 10px;
    padding: 5px;
}
.father{
    border: 1px solid red;
}
.layer01{
    border: 1px solid blue;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px solid blue;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px solid blue;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px solid blue;
    font-size: 14px;
    line-height:20px;
    display: inline-block;
    float: left;
    clear: both;
}

5.4 父级边框塌陷问题

clear 属性定义了元素的哪边上不允许出现浮动元素
right 不允许右侧有浮动元素
left  不允许左侧有浮动元素
both   左侧和右侧均不允许出现浮动元素：
none    默认值。允许浮动元素出现在两侧。

解决方法

增加父级元素的高度

.father{    border: 1px solid red;    height: 800px;}

增加一个空的div

<div class="father">    <div class="layer01"><img src="images/tam1.png" alt=""></div>    <div class="layer02"><img src="images/tx.png" alt=""></div>    <div class="layer03"><img src="images/wonder.png" alt=""></div>    <div class="layer04">        浮动的盒子既可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动的盒子为止    </div>    <div class="clear"></div></div>

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

overflow

/*在父级属性中增加一个 overflow属性*/
.father{
    border: 1px solid red;
    overflow: hidden;
}

父类添加一个伪类：after

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

小结

增加父级元素的高度

简单，元素假设有了固定的高度，就会被限制
浮动元素后增加一个空的div

简单，代码中尽量避免空的div
overflow

简单，下拉的一些场景尽量避免使用
父类添加一个伪类：after（推荐使用）

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

5.5 对比

display

方向不可以控制
float

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

6.定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位
         相对于自己原来位置的偏移
-->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 14px;
            line-height: 25px;
        }
        #father{
            border: 2px solid black;
            padding: 0px;
        }
        #first{
            border: 1px dashed #08ff20;
            background: #ffac0e;
            position: relative;
            top:-20px;
            left: 10px;
        }
        #second{
            border: 1px dashed #ff3852;
            background: #e930ff;
        }
        #third{
            border: 1px dashed #1e30ff;
            background: #ff1a71;
            position: relative;
            right: 20px;
            bottom: -10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

position:relative

生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

相对定位处在标准文档流中，原来的位置会被保留。

练习方块定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            margin: 5px;
            padding: 10px;
        }
        
        a{
            background: hotpink;
            text-decoration: none;
            font-size: 28px;
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        a:hover{
            background: #1e30ff;
            width: 100px;
            height: 100px;
        }

        #first{

        }

        #second{
            position: relative;
            left:200px;
            top:-100px;
        }
        #third{
            position: relative;
            left:100px;
            top:-100px;
        }
        #fourth{
            position: relative;
            top:-100px;
        }
        #fifth{
            position: relative;
            left:200px;
            top:-200px;
        }

    </style>
</head>
<body>
<div id="father">
    <div id="first" class="item">
        <a href="" >链接1</a>
    </div >
    <div id="second" class="item">
        <a href="" >链接2</a>
    </div>
    <div id="third" class="item">
        <a href="" >链接3</a>
    </div>
    <div id="fourth" class="item">
        <a href="" >链接4</a>
    </div>
    <div id="fifth" class="item">
        <a href="" >链接5</a>
    </div>

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

6.2 绝对定位

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

定位：基于XXX定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对与父级元素进行偏移
在父级元素范围内偏移（当父级元素存在定位时，不能超出父级范围）

谷歌浏览器好像会超出范围？？？？？？？？？？？？？？？？？？？？？？？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 14px;
            line-height: 25px;
        }
        #father{
            border: 2px solid black;
            padding: 0px;
            position: relative;
        }
        #first{
            border: 1px dashed #08ff20;
            background: #ffac0e;
        }
        #second{
            border: 1px dashed #ff3852;
            background: #e930ff;
            position: absolute;
            right:30px;
        }
        #third{
            border: 1px dashed #1e30ff;
            background: #ff1a71;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3 固定定位

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 10000px;
        }
        div:nth-of-type(1){
             width: 100px;
             height: 100px;
             background: red;
             position: absolute;
             right: 0px;
             bottom: 0px;
         }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            /*固定定位fixed*/
            position: fixed;
            right: 0px;
            bottom: 0px;
        }

    </style>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
</body>
</html>

6.4 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

**注意：**元素可拥有负的 z-index 属性值。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

<!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/tam1.png" alt=""></li>
        <li class="tipText">国庆节快乐！</li>
        <li class="tipBg"></li>
        <li>时间：2221-10-07 </li>
        <li>地点：火星表面</li>
    </ul>

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

#content{
    width: 310px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000;
}
ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#content ul{
    position: relative;
}
.tipBg,.tipText{
    width: 300px;
    height: 35px;
    position: absolute;
    top:420px
}
.tipText{
    color:#FFFFFF;
    z-index:2/*层级从0到无限大*/
}
.tipBg{
   background: black;
    opacity: 50%;
    filter: alpha(opacity=50);
}

7 动画

CSS动画

js动画

等等

wh_in_silence

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS入门

4.盒子模型4.1 什么是盒子margin:外边距padding：内边距border：边框4.2 边框粗细样式颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*初始化内外边距,一般情况会有一个默认的初始化边距*/
复制链接

扫一扫