CSS笔记(一)基础知识_9.在css中,不能设计差异化样式,只能选择全部的当前标签的选择器是()。(类选择-CSDN博客

本文链接：https://blog.csdn.net/qq_51246916/article/details/112966741

CSS

第一周
CSS简介
CSS语法规范
选择器
- 基础选择器
- 复合选择器
字体
- font-family
- font-size
- font-weight
- font-style
- 复合属性
- 总结
文本属性
- color
- text-align
- text-decoration
- text-indent
- line-height
- 文本属性总结
CSS引入方式
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表
- 总结
第二周
Emmet语法
- 快速生成HTML结构语法
- 快速生成CSS结构语法
CSS元素显示模式
- 块元素
- 行内元素
- 行内块元素
- 总结
- 元素显示模式转换
css背景
- 背景图片
- 背景平铺
- 背景位置
- 背景图片位置
- 背景图片固定
- 背景复合写法
- 背景色半透明
- 背景总结
CSS三大特性
- 层叠性
- 继承性
- 优先级
- 总结/注意
- 权重的叠加
盒子
- border
- 圆角边框(border-radius)
- 盒子阴影
- 文字阴影(text-shadow)
浮动
- 浮动特性(重难点)
- 清除浮动
常见的图片格式
5.3 CSS属性书写顺序(重点)
综合练习
- 头部制作
第三周
定位
- 定位组成
- 1.3静态定位static(了解)
- 1.4相对定位relative (重要)
- 1.5绝对定位absolute (重要)
- 1.6子绝父相的由来
- 1.7固定定位fixed ( 重要)
- 1.8粘性定位sticky(了解)
- 总结
- 1.10定位叠放次序z-index
- 1.11定位的拓展
元素的显示与隐藏
- 4.1 display属性
- 4.2 visibility可见性
- 4.3 overflow溢出

第一周

CSS简介

CSS是层叠样式表( Cascading Style Sheets )的简称.
有时我们也会称之为CSS样式表或级联样式表。
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式。
CSS也是一种标记语言
CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式( CSS )相分离。

CSS语法规范

在head和/head之间，新建一个style标签，在里面写css。
在这里插入图片描述
● 选择器是用于指定 CSS样式的HTML标签,花括号内是对该对象设置的具体样式
● 属性和属性值以"键值对”的形式出现
● 属性是对指定的对象设置的样式属性, 例如字体大小、文本颜色等
● 属性和属性值之间用英文":“开
● 多个“键值对”之间用英文”;"进行区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css语法规范</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{
            改成什么样式
            } */
            p {/* p后面要有空格 */
                color: brown;
                font-size: 15px;/*px是像素的意思 */
                属性冒号后也要有空格
            }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

在这里插入图片描述

选择器

基础选择器

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,颃面中某一类标签指定
统-的CSS样式。
作用
标签选择器可以把某一类标签全部选择出来 ,比如所有的div标签和所有的span标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式,只能选择全部的当前标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之标签选择器</title>
    <style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: pink;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

在这里插入图片描述

类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签 ,可以使用类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 类选择器口诀： */
        /* 样式点定义 结构类（class）调用 */
        /* 一个或多个 开发最常用 */
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">1</li>
        <li class="red">2</li>
        <li>3</li>
    </ul>
</body>
</html>

注意
①类选择器使用"." ( 英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
②可以理解为给这个标签起了一个名字,来表示。
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名,尽量使用英文字母来表示。
⑤命名要有意义,尽量使别人-眼就知道这个类名的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利用类选择器画三个盒子</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
   <div class="red"></div>
   <div class="green"></div>
   <div class="red"></div>
</body>
</html>

在这里插入图片描述

类选择器的多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签.简单理解就是一个标签有多个名字.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类名的使用方式</title>
    <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

在这里插入图片描述

    <title>利用类选择器画三个盒子</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>
</html>

感觉box跟define差不多取共同部分并且修改也更方便了。
官方一点的作用：
(1)可以把一-些标签元素相同的样式(共同的部分)放到一个类里面.
(2)这些标签都可以调用这个公共的类然后再调用自己独有的类.
(3)从而节省CSS代码,统一修改公非常方便.

id选择器

在这里插入图片描述

    <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
      #pink {
          color: pink;
      }
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>pink老师</div>
</body>

重点：区别！
在这里插入图片描述
就像这样写虽然没报错，也会都变粉，但这违背了代码的规范，是没有意义的。

通配符选择器

    <title>基础选择器之通配符选择器</title>
    <style>
     * {
         color: red;
     }
     /* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

基础选择器总结

在这里插入图片描述

复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
● 复合选择器可以更准确、更高效的选择目标元素(标签)
● 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
● 常用的复合选择器包括 :后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

在这里插入图片描述

    <title>复合选择器之后代选择器</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink */

        ol li {
            color: pink;
        }
		要找蓝翔，得按这个顺序找
        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: red;
        }

        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
</body>
</html>

在这里插入图片描述
区分两个ul就得再写个class。

子元素选择器

在这里插入图片描述

    <title>复合选择器之子元素选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

在这里插入图片描述

并集选择器

在这里插入图片描述

    <title>复合选择器之并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
		/* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)示,比如:hover、:first-child 。

链接伪类

    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333333;
            text-decoration: none;
        }
        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: red;
        }
        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }
    /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>
</html>

注意事项
1.为了确保生效,请按照LVHA的循顺序声明:link - :visited - :hover - :active。
在这里插入图片描述

focus伪类

在这里插入图片描述

    <title>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: black;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

总结

在这里插入图片描述

字体

font-family

    <title>CSS字体属性之字体系列</title>
    <style>
        h2 {
            font-family: '仿宋';
        }
        p {
            font-family: '仿宋';
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

在这里插入图片描述

font-size

在这里插入图片描述

    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它</p>
</body>
</html>

font-weight

在这里插入图片描述

    <title>CSS字体属性之字体大小</title>
    <style>
       .bold {
           /* font-weight: bold; */
           /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
           /* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
           font-weight: 700;    
       }
       h2 {
           font-weight: 400;   
           /* font-weight: normal;    */
       }
    </style>
</head>
<body>
    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold">拼死也要克服它,</p>
    <p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>

在这里插入图片描述

font-style

    <title>CSS字体属性之文字样式(风格)</title>
    <style>
      p {
          font-style: normal;
      }
      em {
          /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
          font-style: italic;
      }
    </style>
</head>
<body>
    <p>标准</p>
    <em>倾斜</em>
    
</body>

在这里插入图片描述

复合属性

    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft yahei'; */
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

在这里插入图片描述

总结

在这里插入图片描述

文本属性

color

在这里插入图片描述

<title>CSS文本外观属性之颜色</title>
    <style>
       div {
           /* color: deeppink; */
           /* color: #cc00ff; */
           color: rgb(255, 0, 255);
       }
    </style>
</head>
<body>
   <div>is粉色</div>
</body>

text-align

在这里插入图片描述

<title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: center; */
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>

text-decoration

在这里插入图片描述

    <title>CSS文本外观之装饰文本</title>
    <style>
       div {
           /* 下划线 */
           /* text-decoration: underline;   */
         /* 删除线 */
           text-decoration: line-through;
           /* 上划线 */
           text-decoration: overline;

       }
       a {
           /* 取消a默认的下划线 */
           text-decoration: none;
           color: #333;
       }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>

text-indent

在这里插入图片描述

<title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }
    </style>
    </head>
<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
    <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

line-height

在这里插入图片描述
把行高变大变小，改的都是上间距和下间距，文本高度是不变的。
行高的测量
工具：FSCapture
方法：
上一行的下沿到。这一行的下沿。长。即为行高。

文本属性总结

在这里插入图片描述

CSS引入方式

行内样式表（行内式）

在这里插入图片描述

<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>

内部样式表（嵌入式）

在这里插入图片描述
没有完全分离意思是。css代码虽然抽取出来了但还是写在HTML文件里的。

外部样式表

在这里插入图片描述
HTML文件

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

CSS文件
p { color: aquamarine; }

总结

在这里插入图片描述

第二周

Emmet语法

快速生成HTML结构语法

在这里插入图片描述

<body>
    <!-- 输入div*3即可获得 -->
    <div></div>
    <div></div>
    <div></div>
    <!-- 父子关系：输入ul>li即可获得 -->
    <ul>
        <li></li>
    </ul>
    <!-- 兄弟关系：输入div+p即可获得 -->
    <div></div>
    <p></p>
    <!-- 输入.nav即可获得 -->
    <div class="nav"></div>
    <!-- 输入#ban即可获得 -->
    <div id="ban"></div>
    <!-- 输入p.one即可获得 -->
    <p class="one"></p>
    <!-- 输入ul>li#two即可获得 -->
    <ul>
        <li id="two"></li>
    </ul>
    <!-- 输入.demo$*5即可获得 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- 输入div{hhhhhh}*3即可获得 -->
    <div>hhhhhh</div>
    <div>hhhhhh</div>
    <div>hhhhhh</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

快速生成CSS结构语法

这个，大概就是输入缩写。难以语言表达。看完视频只能说tql，txl。需要复习时直接回顾一下这个视频吧。
快速生成css

CSS元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占-行,比如一行可以多个<span>.
HTML元素-般分为块元素和行内元素两种类型。

块元素

常见的块元素有<h1>~<h6>、<p>、 <div>、 <ul>、 <o|>、 <li>等 ,其中<div>标签是最典型的块元素。
块级元素的特点:
① 比较霸道,自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器(父级宽度)的100%。
④ 是一个容器及盒子,里面可以放行内或者块级元素。

注意:
●文字类的元素内不能使用块级元素
●<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
●同理，<h1>~ <h6>等都是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、 <b>、 <em>、 <i>、 <del>、 <s>. <ins>、 <u>、 <span>等,其中
<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
①相邻行内元素在一行上, 一行可以显示多个。
②高、宽直接设置是无效的。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。

注意
1.链接内不能再放链接
2.特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签一一<img/>、 <input/>、 <td> ,它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点:
①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个 (行内元素特点)。
②默认宽度就是它本身内容的宽度(行内元素特点)。
③高度,行高、外边距以及内边距都可以控制(块级元素特点)。

总结

在这里插入图片描述

元素显示模式转换

特殊情况下,我们需要元素模式的转换,简单理解: -个模式的元素需要另外-种模式的特性
比如想要增加链接<a>的触发范围。
● 转换为块元素: display:block;
● 转换为行内元素: display:inline;
● 转换为行内块: display: inline- block;

    <title>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color:cornflowerblue;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            /* 行内块元素 */
            display: inline-block;
        }
    </style>
</head>

在这里插入图片描述

小米侧边栏练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米侧边栏</title>
    <style>
        a {
            /* 行变块 */
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #ffffff;
            /* 去除下划线 */
            text-decoration: none;
            text-indent: 2em;
            /* 单行文字垂直居中 */
            line-height: 40px;
        }
        a:hover {
            background-color:#ff6700;
        }
    </style>
</head>
<body>
    <a href="https://www.mi.com/p/1915.html" target="_blank">手机 电话卡</a>
    <a href="https://www.mi.com/a/h/9819.html" target="_blank">电视 盒子</a>
    <a href="https://www.mi.com/a/h/7529.html" target="_blank">笔记本 显示器</a>
    <a href="https://www.mi.com/p/9285.html" target="_blank">家电 插线板</a>
    <a href="https://www.mi.com/p/9289.html" target="_blank">出行 穿戴</a>
    <a href="https://www.mi.com/a/h/8363.html" target="_blank">智能 路由器</a>
    <a href="https://www.mi.com/p/9290.html" target="_blank">电源 配件</a>
    <a href="https://www.mi.com/p/9291.html" target="_blank">健康 儿童</a>
    <a href="https://www.mi.com/p/9292.html" target="_blank">耳机 音箱</a>
    <a href="https://www.mi.com/buy/detail?product_id=11674" target="_blank">生活 箱包</a>
</body>
</html>

css背景

背景图片

输入bgi贼拉快
在这里插入图片描述

背景平铺

bgr你懂的

在这里插入图片描述

   <title>背景图片平铺</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            /* 1.背景图片不平铺 */
            /* background-repeat: no-repeat; */
            /* 2.默认的情况下,背景图片是平铺的 */
            /* background-repeat: repeat; */
            /* 3. 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 4. 沿着Y轴平铺 */
            background-repeat: repeat-y;
            /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */
        }
    </style>
</head>

<body>
    <div></div>

背景位置

在这里插入图片描述
1.参数是方位名词
● 如果指定的两个值都是方位名词 ,则两个值前后顺序无关,比如left top和top left效果一致
● 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

    <title>背景位置-方位名词</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
        }
    </style>
</head>

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

背景图片位置

1.参数是方位名词
● 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left 效果一致
● 如果只指定了一一个方位名词,另-个值省略,则第二个值默认居中对齐
2.参数是精确单位
● 如果参数值是精确坐标,那么第一个肯定是x坐标,第二个-定是y坐标
● 如果只指定一个数值,那该数值一定是x 坐标,另-个默认垂直居中
3.参数是混合单位
● 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x 坐标,第二个值是y坐标

背景图片固定

在这里插入图片描述

背景复合写法

为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中。从而节约代码量
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background:

背景颜色
图片地址
平铺
滚动
位置

背景色半透明

在这里插入图片描述

背景总结

在这里插入图片描述
背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置
(精灵图也是一种运用场景)

五彩导航练习
看到这个练习的成品。。我觉得沙雕极了。but 它却具有一定的练习价值！！！不能嫌人家丑就不弄了呀hhhhhh！
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例-五彩导航</title>
    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: pink;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }

        .nav .bg1 {
            background: url(images/bg1.png) no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(images/bg11.png);
        }

        .nav .bg2 {
            background: url(images/bg2.png) no-repeat;
        }

        .nav .bg2:hover {
            background-image: url(images/bg22.png);
        }
        .nav .bg3{
            background-image: url(images/bg3.jpg);
        }
        .nav .bg4{
            background-image: url(images/bg4.png);
        }
        .nav .bg5{
            background-image: url(images/bg5.png);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>
</body>

</html>

CSS三大特性

层叠性

在这里插入图片描述
长江后浪推前浪

继承性

孩子可以继承父亲的样式
在这里插入图片描述

    <title>行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px  当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

在这里插入图片描述

优先级

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS优先级</title>
    <style>
       /* 类选择器 */
        .test {
            color: red;
        }
        /* 元素选择器 */
        div {
           color: pink!important;/*!important 最高级*/
        }
        /* id选择器 */
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <!-- style行内选择器 -->
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
</html>

总结/注意

继承的权重是0，如果该元素没有直接选中,不管父元素权重多高,玩素得到的权重都是0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css权重注意点</title>
    <style>
        /* 父亲的权重是 100  */
        #father {
            color: red!important;
        }
        /* p继承的权重为 0 */
        /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认制定了一个样式 蓝色的 有下划线  a {color: blue;}*/
        a {
            color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>
</html>

权重的叠加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重的叠加</title>
    <style>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */
        ul li {
            color: green;
        }
        /* li 的权重是 0,0,0,1    1 */
        li {
            color: red;
        }
        /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */
        .nav li {
            color: pink;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>

盒子

所谓子模型:就是把HTML页面中的布局元素看作是一个矩形的耔,也就是一个盛装内容的容器。
CSS盒子模型本质上是一个子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容
在这里插入图片描述

border

在这里插入图片描述

border-style

在这里插入图片描述

复合写法

在这里插入图片描述

表格的细线边框

在这里插入图片描述

内边距( padding )

**加粗样式**
上！右！下！左！

在这里插入图片描述

外边距( margin )

在这里插入图片描述

    <title>盒子模型之外边距margin</title>
    <style>
      div {
          width: 200px;
          height: 200px;
          background-color: pink;
      }
      /* .one { 
           margin-bottom: 20px; 
       } */
      .two {
          margin-top: 20px;
      }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>
</html>

在这里插入图片描述
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并

在这里插入图片描述

清除内外边距

在这里插入图片描述

    <title>清除内外边距</title>
    <style>
        /* 这句话也是我们css 的第一行代码 */
       * {
           margin: 0;
           padding: 0;
       }
       span {
           background-color: pink;
           margin: 20px;
       }
    </style>
</head>
<body>
   123
   <ul>
       <li>abcd</li>
   </ul>
   <span>行内元素尽量只设置左右的内外边距</span>
   很多时候这种上下的边距是不起作用的
</body>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #cccccc;
            margin: 100px auto;
        }
        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #cccccc;
            font-size: 14px;
            font-weight: normal;
            line-height: 32px;
            padding-left: 15px;
        }
        .box ul li a{
            font-size: 12px;
            text-decoration: none;
            color: #666;
        }
        .box ul li a:hover{
            text-decoration: underline;
        }
        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 23px;
        }
        .box ul {
            padding-top: 7px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
    

</body>
</html>

圆角边框(border-radius)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半  等价于 100px */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>
    1. 圆形的做法:
    <div class="yuanxing"></div>
    2. 圆角矩形的做法:
    <div class="juxing"></div>
    3. 可以设置不同的圆角:
    <div class="radius"></div>
</body>

</html>

在这里插入图片描述

盒子阴影

在这里插入图片描述
复习指路☞

文字阴影(text-shadow)

在这里插入图片描述

浮动

有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
在这里插入图片描述

浮动特性(重难点)

加了浮动之后的元素，会具有很多特性需要我们掌握的.
1.浮动元素会脱离标准流(脱标)

特性1

设置了浮动( float )的元素最重要特性:
1.脱离标准普通流的控制(浮)移动到指定位置(动), (俗称脱标)
2.浮动的盒子不再保留原先的位置
在这里插入图片描述

给浮动的盒子设置浮动后

特性2

浮动的元素会一行内显示并且元素顶部对齐
在这里插入图片描述

特性3

浮动的元素会具有行内块元素的特性
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
● 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
● 浮动的盒子中间是没有缝隙的,是紧換着一起的
● 行内元素同理

在这里插入图片描述

常见网页布局
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: thistle;
            line-height: 50px;
            text-align: center;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: rgb(230, 132, 173);
            line-height: 150px;
            margin: 10px auto;
            text-align: center;
        }
        .box {
            width: 980px;
            margin: 0 auto;
            height: 300px;
            background-color: white;
        }
        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: wheat;
            margin-right: 10px;
            line-height: 300px;
            text-align: center;
        }
        .box .last {
            margin-right: 0;
        }
        .footer {
            height: 200px;
            line-height: 200px;
            background-color: tomato;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>
</html>

浮动布局注意点
1.浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流.

清除浮动

在这里插入图片描述

法1：额外标签法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>

</body>

</html>

法2：父级添加overflow属性

在这里插入图片描述

法3：父级添加after伪元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

法4：父级添加双伪元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素清除浮动</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>
</html>

总结

在这里插入图片描述

常见的图片格式

jpg图像格式: JPEG ( JPG )对色彩的信息保留较好, 高清,颜色较多,我们产品类的图片经常用jpg格式的.
gif图像格式 : GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果
png图像格式是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景.如果想要切成背景透明的图片,请选择png格式.
PSD图像格式PSD格式是Photoshop的专用格式 ,里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说,最大的优点我们可以直接从上面复制文字,获得图片，还可以测量大小和距离.

5.3 CSS属性书写顺序(重点)

建议遵循以下顺序:
1.布局定位属性: display / position/ float / clear / visibility / overflow (建议display第一个写,毕竟关系到模式)
2.自身属性: width/ height / margin/ padding / border / background
3.文本属性: color/ font / text-decoration/ text- align/ vertical-align/ white- space / break-word
4.其他属性(CSS3 ) : content / cursor / border-radius/ box-shadow/ text-shadow/ background:linear gradient…

综合练习

头部制作

在这里插入图片描述

实际开发中,我们不会直接用链接a而是用li包含链接(li+ a)的做法。
1.li+a语义更清晰, -看这就是有条理的列表型内容。
2.如果直接用a ,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索弓擎有降权的风险),从而影响网站排名
注意:
1.让导航栏-行显示，给li加浮动,因为li是块级元素,需要-行显示.
2.这个nav导航栏可以不给宽度将来可以继续添加其余文字
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    background-color: #f3f5f7;
}
.header {
    height: 42px;
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px;
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: inline-block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #006eff;
}
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 50px;
}
.search input {
    float: left;
    width: 360px;
    height: 40px;
    border: 1px solid rgb(0,153,255);
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    text-indent: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* button的边框需要手动消除 */
    border: 0;
}
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
}
.user img {
    
    vertical-align: middle;
}

疑惑：为什么点击搜索按钮会有一个黑框框/

第三周

定位

1.浮动可以让多个块级盒子-行没有缝隙排列显示 ,经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。

定位组成

定位:将盒子定在某一个位置 ,所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。 边偏移则决定了该元素的最终位置。
在这里插入图片描述

1.3静态定位static(了解)

静态定位是元素的默认定位方式,无定位的意思。
语法:

选择器{ position: static; }

●静态定位按照标准流特性摆放位置,它没有边偏移
●静态定位在布局时很少用到

1.4相对定位relative (重要)

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。
语法:
选择器{ position: relative; }
相对定位的特点: ( 务必记住)
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)
即使他走了他的位置别人也不能使用

1.5绝对定位absolute (重要)

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。
语法:选择器{ position: absolute; }
绝对定位的特点: (务必记住)
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位( Document文档)。
2.如果祖先元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。( 脱标)

1.6子绝父相的由来

弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。
这个“子绝父相”太重要了,是我们学习定位的口诀,定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方 ,不会影响其他的兄弟盒子。
②父盒子需要加定位限制子盒子在父盒子内显示。
③父盒子布局时,需要占有位置,因此父亲只能是相对定位。
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。

总结:因为父级需要占有位置,因此是相对定位，子盒子不需要占有位置,则是绝对定位

1.7固定定位fixed ( 重要)

固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。
语法:
选择器{ position: fixed; }
固定定位的特点: (务必记住)
1.以浏览器的可视窗口为参照点移动元素。
● 跟父元素没有任何关系
● 不随滚动条滚动。
2.固定定位不占有原先的位置。
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。
脱标：脱离标准流

固定定位小技巧:固定在版心右侧位置。
小算法:
1.让固定定位的盒子left: 50%.走到浏览器可视区(也可以看做版心)的一半位置。
2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置
就可以让固定定位的盒子贴着版心右侧对齐了。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
  
</body>
</html>

1.8粘性定位sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的
语法:
选择器{ position: sticky; top: 10px; }
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top、left、 right、 bottom 其中-一个才有效

总结

在这里插入图片描述

1.10定位叠放次序z-index

在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器{ z-index: 1; }
●数值可以是正整数、负整数或0,默认是auto ,数值越大,盒子越靠上
●如果属性值相同,则按照书写顺序,后来居上
●数字后面不能加单位
●只有定位的盒子才有z-index属性
普通的标准流没有这个属性

1.11定位的拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0auto水平居中,但是可以通过以下计算方法实现水平和垂直居中。
①left: 50%; :让盒子的左侧移动到父级元素的水平中心位置。
②margin-left: -100px; :让盒子向左移动自身宽度的一半。

绝对定位水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位水平垂直居中</title>
    <style>
        .box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.定位特殊特性

绝对定位和固定定位也和浮动类似。
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位 ,如果不给宽度或者高度,默认大小是内容的大小。

3.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

4.绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容。
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。字会围绕浮动元素

3.网页布局总结
通过盒子模型,清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位可以让每个盒子排列成为网页。
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门]用法。
1.标准流
可以让盒子上下排列或者左右排列,垂直的块级子显示就用标准流布局。
2.浮动.
可以让多个块级元素- -行显示或者左右对齐盒子 ,多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就
用定位布局。

元素的显示与隐藏

类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
本质:让一个元素在页面中隐藏或者显示出来。

4.1 display属性

display属性用于设置一个元素应如何显示。
● display:none ; 隐藏对象
● display : block ; 除了转换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不再占有原来的位置。
后面应用及其广泛,搭配JS可以做很多的网页特效。

4.2 visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。
●visibility : visible;元素可视
●vibility : hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来位置，就用visibility : hidden
如果隐藏元素不想要原来位置，就用display : none (用处更多重点)

4.3 overflow溢出

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>显示隐藏元素之overflow</title>
    <style>
        .peppa {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="peppa">
        《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
        Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、
    </div>

</body>
</html>