css笔记

2021-05-08 21:20 web前端 css 14577 字 · 45 分钟

CSS初体验

css的作用是给页面中的元素（标签）设置样式（颜色、大小、字体、位置等等）

ヾ(๑╹◡╹)ﾉ”咱们首先给P标签一点颜色看看~

特点：css的相关设置都放在 style 标签中，style是一个双标签，它放在head里面，title下面

结构：

<style>
    选择器 {
        属性名1: 属性值1;
        属性名2: 属性值2;
        ...
    }
</style>

示例:

<style>
    p {
        color: red;
        font-size: 30px;
    }
</style>

总结：css 是用来给页面上的结构添加样式的 (尺寸、颜色、位置等等)

CSS的相关属性

color：设置字体的颜色
font-size：设置字体的大小
background-color：设置背景(颜色)
width：设置宽度
height：设置高度

CSS概念

层叠样式表（Cascading style sheets）

作用： 给html标签设置样式 ( 给人穿衣服、化妆)

注意：

• 符号必须是英文状态下的
• 每一句样式键值对写完之后，必须记得加一个分号。

字体属性（font-）

字体大小

font-size：设置字体大小

font-size  设置字体的大小   
取值如：font-size: 12px;  
注意：在css大多数数值都需要添加单位

字体粗细

font-weight：字体的粗细

取值：

• 数字 : 正常(400)、粗(700)（没有单位）
• 关键字 : 正常(normal)、粗( bold )

字体风格

font-style：字体的样式

font-style 设置字体的风格(样式)
取值：
    normal 显示标准的字体样式（默认）
    italic 字体倾斜

字体类型

font-family：字体类型

注意：

• 一些冷门字体很多电脑里面默认没有安装，此时会显示不出来。实际工作中，默认都是一些主流字体如宋体、微软雅黑等等……
• 字体可以写多组，中间用逗号隔开（第一个不兼容会使用第二个，第二个不行会使用第三个）可以同时设置几个字体类型隶书，楷体（UI给咱们什么，就写什么~）
• 你们写字体的时候，都要加上引号

代码：

p {
    /* 样式: 斜体   默认:正常  斜体*/
    font-style: italic;

    /* 粗细  默认 : 正常  粗体 */
    font-weight: bold;

    /*  字体大小  默认: 16px ; */
    font-size: 116px;

    /* 类型  默认: 微软雅黑; */
    font-family: '隶书';
} 

层叠性问题~

连写形式

font: 样式 粗细 大小 类型 
font: font-style font-weight font-size  font-family
font: italic bold 100px 宋体;

记忆 :

• 【样式、粗细、大小、家庭】 记住这八个字就行

• 稍微舒服==swsf
• 或者直接记 : font: italic bold 40px '宋体';

省略：

• 可以省略前两个

font:  40px '微软雅黑';

注意点：

• 连写是注意是swsf这个顺序
• 【连写只能省略前两个】
• 给同一标签设置的相同的属性，写在下面的样式会覆盖上面的样式！！
• 推荐样式单独设置使用！！！（一般用的最多的是font-size）

开发人员调试

开发者调试工具：调试、查错、找BUG。程序员的必备装备~

打开方式：

• 右键 –> 查看网页源代码：”查看源码”

• 右键–>检查：”检查元素/打开控制台”

调试的作用：

• 修改属性值（点击属性值）
  • 直接修改
  • 鼠标滚轮
  • 键盘的上下键
• 添加属性
  • 在上一个属性值的分号之后点击一下，就可以添加样式
• 控制样式生效
  • 点击每个属性前的小框，可以控制。
  • 如果样式中有一个删除线，表示该样式不生效（失效）
• 查看是否生效
  • 样式是否有删除线（一般都是被覆盖）
• 查看报错（原因）
  • 属性值之后没有分号（没有分号会认为这一行没结束）
  • 格式写的有问题（中文的标点）
  • 属性名或属性值有错误

注意：

• 在基础班只关注elements这个面板，右侧的style就是当前标签对应的css样式
• 在调试工具中修改，仅仅是改变了当前页面的样式效果，刷新之后就没有了，需要添加到代码中才行

简单（基本）选择器

标签选择器、类选择器、ID选择器

选择器就是用来选中对应的标签的，然后给选中的标签加上对应的样式

标签选择器（标签名）

要求：四个标签都设置为红色

<p>我是p标签</p>
<p>我也是p标签</p>
<div>我是div</div>
<div>我也是div</div>

作用：根据指定的标签名，来设置指定的标签的样式

结构：

 <style>
    标签名(选择器) {
        属性名1: 属性值1;
        属性名2: 属性值2;
        ....
    }
</style>

特点：

• 标签选择器会选中页面中所有符合标签名的标签
• 标签选择器不管嵌套关系多深，都能选择到
• 标签选择器不能只选择一个，而是会选中所有这一类标签

类选择器（.）

要求：满足下面的要求（做衣服）

/*没穿衣服的样子*/
<p>小红</p>
<p>小黄</p>
<p>小粉</p>
<div>我是一个想红的div</div>

/*穿好衣服的样子*/
<p class="red">小红</p>
<p class="yellow">小黄</p>
<p class="pink">小粉</p>
<div class="red">我是一个想红的div</div>

作用：根据指定的类名，来设置指定的标签的样式（穿衣服）

结构：

<style>
    .类名(选择器) {
        属性名1: 属性值1;
        属性名2: 属性值2;
        ....
    }
</style>

步骤：

1. 声明自定义类名.自定义类名 {属性1:值1;属性2: 值2;}（先做一件衣服）
2. 给对应的元素添加class类名属性 class=”自定义的类名” （把衣服给标签穿上）

效果：

• 所有拥有这个类名的这些标签都加上对应样式
• 可以给相同标签名的标签定义不同的样式（用的最多）

注意：

1. 类名的命名方式：数字 字母 下划线 不能以数字开头！！
2. 一个标签可以使用多个类选择器，每个类名之间以空格隔开 （覆盖问题-》层叠样式表）
3. 一个类选择器，可以用在多个标签上（一种衣服可以很多人穿-》撞衫）

ID选择器(#)

要求：都设置不同的颜色，不用类选择器

<p id="red">天选之人-红果果</p>
<p id="green">天选之人-绿泡泡</p>
<div id="lowred">我也想变红</div>

作用：根据指定的id，来设置指定的标签的样式（专属装备）

结构：

<style>
    #id名(选择器) {
        属性名1: 属性值1;
        属性名2: 属性值2;
        ....
    }
</style>

步骤：

1. 声明id #自定义id名字 {属性1:值1;属性2:值2;}（做一件专属装备）
2. 给对应的元素添加属性 id=”自定义id” （调用id选择器，找到天选之人，给他穿上这件专属装备）

效果:

• 会将拥有这个id名的标签加上对应的属性

  特点 :一对一

  （一个标签只能用一个id选择器 ,一个页面上也只能用唯一的id）

注意点：

• id属性相当于标签的身份证号码
  • 一个页面中的标签不能有相同的id，每一个标签的id都是唯一的！
• 一个标签上只能有一个id属性，并且唯一
• 一个id选择器只能选中一个标签
• id的命名规则和类名一样（规范）

id 主要不是为了设置css样式，而且为了后面的js使用

特别注解：

id和class的区别

• id相当于身份证，不可重复，一个HTML标签只能绑定一个id属性

• class相当于姓名，可以重复，一个HTML标签可以绑定多个class属性

id选择器和class选择器的区别？

• id选择器以#开头
• class选择器以.开头

实际开发情况

• 使用最多的是class选择器
• id一般情况下是给js使用的，所以除非特殊情况，否则不要用id去设置样式。
• 实际公司开发要注意代码的冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中

ヾ(๑╹◡╹)ﾉ”课堂练习小练习:

ヾ(๑╹◡╹)ﾉ”课堂练习小练习:

  <p>我是p标签,我想变大，不想变红</p>
  <p>我是p标签，我想变红，不想变大！！</p>
  <div>我是div，我想变红，我想变大</div>

复杂（复合）选择器

通配符选择器（*）

需求 :把页面内所有的元素都设置一个颜色为red

<h1>标题</h1>
<div>小姐姐</div>
<p>小帅哥</p>
<h2>我是h2</h2>
<p>小可爱</p>
<span>大可爱</span>

作用： 会将页面上所有的标签都设置这个样式

代码：

<style>
    * {
        属性名: 属性值;
    }
</style>

注意:

• 通配符会去页面上一个个的遍历页面所有的标签，然后给他们进行设置样式（效率低，不要滥用）

并集选择器（，）

需求：把div和p的设置红色（节省代码的方式）

<!-- 给div 和p标签设置red色 节省代码的方式  -->
<div class="red">小帅哥</div>
<p>小姐姐</p>
<p>小可爱</p>
<span id="biglovely">大可爱</span>

作用 : 将满足多个选择器类型的标签全部选择出来

代码 :

<style>
    选择器,选择器 {
        属性名1: 属性值1;
    }
</style>

注意 :

• 并集选择器可以同时写很多的选择器 ，只要每个选择器之间以逗号隔开
• 并集选择器中的选择器，可以是标签选择器、类选择器、id选择器、等等……

交集选择器

需求：只让小可爱变红

<!-- 只让小可爱变红  其他的是默认的颜色  不能改变html中的代码 -->
<div class="red">小姐姐</div>
<p>小帅哥</p>
<p class ="red">小可爱</p>

作用： 从两个集合中选择他们相同的部分

既又原则 
例如：p.box {}  既是p标签 又有box类名

代码：

选择器1选择器2 {
    属性名1: 属性值1;
}

该标签既能被选择器1选中，又能被选择器2选中

注意：

• 两个选择器是紧密挨着的，中间不能有其他任何东西
• 如果交集选择器中标签选择器，标签选择器写在最开头
• 交集选择器可以同时写多个选择器

后代选择器（空格）

需求：完成下面的要求

<!-- 不准改下面的html结构 只让小姐姐变红-->
<div class="father"> 
    <p>小姐姐</p>
</div>
<p>小可爱</p>

这个选择器开发挺常用的

作用 : 选中满足条件的后代元素（后代 : 儿子、孙子、重孙子……）

代码 :

<style>
    .father p {
        color: red;
    }
</style>

选择器1 选择器2 {
    属性名1: 属性值1;
    ....
}

步骤：

1. 通过选择器1找到一堆标签
2. 找到这一对标签的所有的后代标签
3. 在这些后代标签中，找到满足选择器2的标签，给这些标签加上样式

子代选择器（>）

需求：完成下面的要求

<!-- 只让小可爱变红  其他的不变颜色  不准更改html的结构 -->
<div class="father">
    <p>小可爱</p>
    <div>
        <p>小姐姐</p>
    </div>
</div>
<p>大可爱</p>

作用 ：选中满足条件的直接子代元素 （子代 : 儿子）

代码 :

<style>
    .father > p {
        color: red;
    }
</style>

选择器1 > 选择器2 {
    属性名1: 属性值1;
    ....
}

注意：

• 只找的是自己的儿子辈

ヾ(๑╹◡╹)ﾉ”项目中的情况（时间不够留给作业）

<!-- 主导航栏 -->
<div class="nav">    
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li>
         <a href="#">联系我们</a>
         <ul>
            <li><a href="#">公司邮箱</a></li>
            <li><a href="#">公司电话</a></li>
         </ul>
    </li>
  </ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">    
  <div class="left">左侧侧导航栏</div>
  <div class="right"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下，完成以下任务：

1. 链接登录的颜色为红色，同时主导航栏里面的所有的链接改为粉色（简单）
2. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑（中等）
3. 主导航栏里面的一级菜单链接文字颜色为绿色（难）

答案：

.right a {
    color: red;
}
.nav a {
    color: pink;
}
.nav,.sitenav {
    font-size: 14px;
    font-family: '微软雅黑';
}
.nav>ul>li>a {
    color: green;
}

小注意：

• 基本选择器是必须熟练使用的
• 复合选择器需要配合项目多次使用才能熟练使用，第一次很难确定什么时候使用这是很正常的，之后的项目中跟着老师一起练即可

拓展的小细节

颜色的属性（知道即可）

颜色的取值可以是：

• 具体的颜色的英文单词：

  yellow，pink，red，purple（常用的颜色单词要记住，案例中会经常使用）

• rgb 表示法（三种颜色的比例）

  r：red g：green b：blue

  

  rgb（0,0,0）分别表示red、green、blue的比重，数值范围0~55

  白？黑？红？绿？蓝？

• rgba 表示法， 最后一个表示透明度 （0~1）

  省略写法：rgba( 0, 0, 0, 0.5 ) —》 rgba( 0, 0, 0, .5 )

• 十六进制表示法 #CFCFCF

  特点：

  1. 以#开头的十六进制
  2. 前两位代表红色，中间代表绿色，最后代表蓝色
  3. 不区分大小写
  4. 如果三组都是重复的，可以简写 #aabbcc=》#abc

• 之后会量颜色或者UI给你，不是自己肉眼看，所以直接拿来用就行。

注释

作用：可以让页面上的一段代码让他们失去作用，浏览器不解析他们（和html的注释差不多，就是格式不一样）

<!-- -->: html 中的注释, 不能嵌套
/*    */: css 中的注释, 不能嵌套

注释快捷键：Ctrl + /

CSS的三种书写位置

内嵌（嵌入）样式表、行内样式表、外联（外部）样式表

内嵌样式

将css语句都写在style标签里面（写了很久了）

位置：

• head标签里面，title标签下面，style标签里面

作用范围：

• 当前页面

<style>
    div {
        color: red；
        font-size：100px；
    }
</style>

作用：

• 一般用在小demo或者小案例的时候用到，用的稍多

行内样式

将CSS样式直接写在标签本身上，以属性的形式存在

位置：

• 标签里面（双标签——》开始标签）

作用范围：

• 当前标签

<div style="color: red; font-size: 100px;">小可爱</div>

作用：

• 之后的学习的js操作的都是行内样式，用的较少，基础班最好别用

外联样式

单独创建一个后缀名为.css的文件，在html文件里面通过link标签引入css文件

步骤：

• 新建一个文件, 后缀叫 .css
• 在这个文件中直接通过 link 引入

位置：

• 新建一个新的css文件
• 在title下面引用

作用范围：

• 哪个页面引入，那个页面有效果

<link rel="stylesheet" href="路径" >

作用：

• 用的最多的一种，一般在项目中会用到。推荐使用

三种样式表总结

样式表	作用范围	存放位置	应用
内嵌样式	当前页面	head里的title下面的style	存放当前页面的样式
行内样式	只作用于当前标签	通过标签的style属性设置	只给一个标签使用（js）
外联样式	所有页面都可以使用	在html文件中通过link引入	存放很多页面的公共样式

text- 文本相关属性

(*)text-indent：文本的缩进

设置文字的缩进,类似word中首行缩进

取值：

• px（像素）
• em（一个文字的大小）

注意：

• 单位是 em，1em代表一个文字的宽度 ，2em标签首行缩进两个字符。

text-align：文本的对齐方式

设置文字的对齐方式（水平居中）

取值：

• left：设置内容在盒子中 靠左

• center：设置内容在盒子中 水平居中

• right：设置内容在盒子中 靠右

注意：

• 能让哪些元素位置居中???

  【文本、图片（行内块），span（行内）】

text-decoration：文本的修饰

设置文字的修饰（下划线、删除线等）

取值：

• none：没有任何装饰（去掉多余的样式）
• underline：下划线
• line-through：删除线

注意：

• 一般用的最多的是用text-decoration：none，取消a标签的默认下划线。

总结：strong、ins、em、del已经全部都css替换掉了

• strong——–》font的bold：加粗
• ins———》underline：下划线
• em——–》font的italic：斜体
• del——–》line-through：删除线

(*)让盒子水平居中

项目中会经常用到让盒子（div、p、h）水平居中

margin: 0 auto;

作用： 可以让盒子水平居中

条件：

• 有宽度的盒子（div、p、h），独占一行是div的效果，但是总体上来说不算居中。

区别：

margin:0 auto; 和text-align 的区别

• 一个是盒子本身居中
• 一个是盒子里的内容居中

ヾ(๑╹◡╹)ﾉ”改写昨天的新闻案例

CSS的三大特性

解释css的一些效果~

继承性

后代元素会继承祖先元素的一些样式（子承父业）

<div class="father">父亲
    <div class="son">儿子</div>
</div>

开发者调试工具的使用！

有哪些样式属性可以继承（没说就是不能继承）：

• color：颜色
• font- 开头的：字体相关属性
• text- 开头的：文本相关属性
• line- 开头的：line-height
  • 开发者调试工具中的computed

应用：可以省略自己的代码。比如 list-style：none； 一般给ul设置，此时可以利用继承性

注意（继承的失效）：

• a链接颜色不能通过继承设置，需要单独设置（a标签有本身的样式）
  • a标签有默认的样式，要给a标签设置样式，需要单独选中后设置！
• h系列标签字体大小不能通过继承设置，需要单独设置（有本身的样式）
• div的高度不能继承，宽度默认有继承父元素的效果
• 元素如果自身有CSS样式，那么该样式不予继承（独立）

以后敲代码别想着用继承就少写代码，该设置的代码一个别省（不要用css的继承性偷懒）

层叠性

浏览器解决样式冲突的特性

特点：后渲染的css样式会覆盖掉先渲染的css样式 （优先级相同的情况下）

层叠的属性不一样------》叠加
层叠的属性一样-------》覆盖（下面的生效）

例子：

<style>
    .red {
        color: green;
        color: red;
    }
    /* 最终绿色起效果,因为.green后渲染 */
    .green {
        color:green;
    }
</style>

<div class="green red">小姐姐</div>

优先级（重要）

给页面中的一个标签设置样式，可以通过多种方法~

当设置的样式层叠的时候，需要考虑优先级（权重）

优先级

不同的基础选择器有不同的优先级

继承 < 通配符 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 <　!important

！important：无法提高继承的优先级（继承还是继承，优先级还是最低的），并且注意格式的问题

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            color: blue;
        }
        #box{
            /* color: blueviolet; */
        }
        .box{
            /* color: green; */
            /* color: yellow !important; */
        }
        div{
            /* color: antiquewhite; */
        }
    </style>
</head>
<body>
    <!-- <div class="box" id="box" style="color:red">优先级</div> -->
    <div class="box" id="box">优先级</div>
</body>
</html>

权重

当面对复合选择器的时候，需要考虑权重的计算

计算公式：

公式算法：（0,0,0,0）

• 第一个数字：行内样式的个数
• 第二个数字：ID选择器的个数
• 第三个数字：类选择器的个数
• 第四个数字：标签选择器的个数

注意：

• 从第一级开始比较，如果第一级大,，那么就大； 如果第一级一样， 那么就比第二级……

• !important如果能选中对应的标签，则权重最高，天下第一！！

• 权重其实就是计算优先级的算法！！

• 计算的步骤

  第一步 : 是不是能选择到该标签（继承------》pass掉）
  第二步 : 使用公式（0,0,0,0） 
  

补充一点：浏览器解析选择器的时候，实际是用右往左解析的，所以尽量少使用层级关系（涉及到算法的遍历）

例子：

不同的选择器选中同一个标签，选择器设置相同的样式，此时听谁的？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*根据权重公式-显示红色*/
        .father .son .grandson{
            color: red;
        }
        .son .grandson{
            color: green;
        }
        .grandson{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        父亲
        <div class="son">
            儿子
            <div class="grandson">
                孙子
            </div>
        </div>
    </div>
</body>
</html>

(*)背景相关的属性（background）

背景颜色

设置标签的背景颜色

代码：background-color: red;

取值：

• 可以是之前介绍的几种~（前端只需要会写就行了，具体的值是UI设计好的）

背景图片

设置标签的背景为图片

代码：background-image: url(图片路径);

注意：

• 背景图片默认平铺

背景平铺

设置标签的背景图片是否平铺

代码：background-repeat: no-repeat；

取值：

• repeat：平铺 （默认值）
• no-repeat：不平铺
• repeat-x：水平平铺
• repeat-y：垂直平铺

背景位置

设置背景图片的位置

代码：background-position: 水平方向的位置（x） 垂直方向的位置（y）；

取值：

• 关键字

  • 水平方向：left、center、right
  • 垂直方向：top、center、bottom

• 像素：当前盒子的左上角为（0,0）原点，构建一个坐标系。第一值是X轴的位置，第二个值是Y轴的位置 交互的点就是图片左上角顶点开始显示的起始位置。
  注意：
  1、浏览器里面的坐标系X轴水平向右 Y轴垂直向下
  2、注意顺序

背景的连写

背景属性相关的连写形式

代码：background: #fff url() no-repeat center center; （记住这个顺序）

注意：

• background：背景颜色 背景图片地址 背景平铺 背景位置;（推荐使用这个顺序！）

• 省略：

  background: color image repeat position;
  省略 :  color /  image repeat position;（相当于background-color）
  
  省略的特殊情况
      当div（盒子）的大小和背景图片的尺寸一样的时候
      当div（盒子）大小=背景图片的大小
      可以只写  background:url(200.jpg);  相当于只写background-image
  

• 注意写省略时候有覆盖的问题（省略写法，没写就是默认值，默认值也会覆盖！）

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid;
            margin: 0 auto;
            /* background-color: darkblue; */
            /* background-image: url(./img/head.jpg); */
            /* background-repeat: no-repeat; */
            /* background-position: 10px 10px; */
            /* background-position: center center; */
            /* 连写 */
            background: blueviolet url(./img/head.jpg) no-repeat center center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

*标签的三种显示方式（重要，必会！！）

看看div、p、span、a的效果~

div独占一行、宽度默认继承父盒子、高度由内容撑开

span一行显示多个、宽度和高度都是由内容撑开

块级元素

查看div的computed搜索：display

属性：display : block ;

特点：

• 独占一行一行、只能显示一个 （有时候就需要这种的，不算缺点）
• 默认宽度是父级标签的宽度
• 可设置宽和高（优点）

代表：

• div、p、h系列（记住）

  div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section
  

注意：p这种段落标签不要嵌套块级元素（惊天BUG）

行内元素

属性：display : inline；

特点：

• 一行可以显示多个 (优点)、不独占一行
• 宽度由内容决定，盒子大小完全是被内容撑开
• 无法设置宽高 (缺点)

代表：

• span、a

  a,span,b,u,s,i,strong,ins,del,em
  

行内块元素

行内元素演变成现在的行内块元素的

属性： display: inline-block ;

特点：

• 一行可以显示多个 (像是行内)
• 可以设置宽高 (像是块级)

代表： input、img、textarea、select、button

三种显示方式的转换

• display: block; 转成块级
• display: inline; 转成行内
• display: inline-block; 转成行内块

ヾ(๑╹◡╹)ﾉ”low导航（都是a标签 60*40）字体大小12px

链接伪类选择器(了解)

选择的元素的一种状态，并只是找到元素就没了

链接伪类选择器介绍

回顾a链接的特性

(1) a:link {
        color: red;
        font-size: 18px;
    }
    作用: 给a标签设置`没有被访问过`的样式

(2) a:visited {
        color: blue;
    }
    作用: 给a标签设置`访问过`的样式
    一般这个只设置 color, 其他属性会无效

(3) a:hover {
        color: pink;
        font-size: 20px;
    }
    作用: 给a标签设置 `鼠标悬停`的样式

(4) a:active {
        color: green;
        font-size: 30px;
      
     // 背景颜色不能设 
    }
    作用: 给a标签设置 ` 激活(点击中) `的状态

链接伪类选择器注意点

• 一般一起使用设置某个属性，都设置某一个属性

• 顺序固定

  link visited hover active
  lvha => 看见lv包就ha
  

• hover必须记住（可以加给其他元素），其他的几乎不用

居中方法小总结

让标签中的内容（文本、图片、span）水平居中

text-align:center
1.文本
2.行内块元素（input/img）
3.行内元素（span/a）

让标签中的内容（文本、图片、span）垂直居中

line-height：标签的高度；
1.文本
2.行内块元素（input/img）注意：`img需要加 vertical-align : middle（垂直对齐方式居中）`
3.行内元素（span/a）

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid;
            text-align: center;
            line-height: 300px;
            margin: 0 auto;
        }
        .box img{
            /*图片居中要加上这个*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- heh -->
        <!-- <input type="text"> -->
        <!-- <span>111</span> -->
        <img src="./img/head.jpg" alt="">
    </div>
</body>
</html>

让盒子自身水平居中

适用于有宽度的盒子

盒子自身设置 margin:0 auto;

让盒子自身垂直居中

之后学习的定位

盒子模型

一种思维方式（万物皆盒子）

盒子模型的组成

盒子模型的四个组成部分

• content（内容/电脑）+padding（内边距/海绵）+border（边框/白色纸壳）+margin（外边距/盒子与盒子间的距离）

边框（border-边框-盒子的外纸壳）

属性：

• border-width: 边框的宽度（10px）；
• border-style: 边框的样式；
  • solid : 实线 （用的最多）
  • dashed : 虚线
  • dotted : 点线
• border-color: 边框的颜色；
  • 有颜色：red、#fff、rgb()等等
  • 透明：transparent

连写：

border: 边框大小  边框样式 边框颜色;
border: 1px solid blue;  // 不要记上面那个，就记这个即可 （用的最多）
快捷方式：bd+ + tab  以后使用，都用连写，基本不会单独写

方向：

单独设置盒子的一条边框

border-方位名词:边框大小 边框样式 边框颜色;
比如：
    border-left 左边框
    border-right 右边框
    border-top 上边框
    border-bottom 下边框

补充：

• 细线表格 border-collapse:collapse；这样就不用写cellpadding和cellspacing了

  

• 使用开发者工具查看盒子模型（计算盒子的大小，初级计算公式）

  <!-- 需求 : 
      盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色 
  -->
  注意：
      1.css设置的height和width设置的是内容的宽高
      2.添加边框会让盒子变大
  
  解决：
      在设置边框之后根据初级公式，把height和width手动减去多出的部分
      （手动内减）
  
  解决方案：盒子内容 380*380 , 背景绿色, 边框：10px 实线 黑色
  

ヾ(๑╹◡╹)ﾉ”写一个小盒子（由内容和边框组成）

——————————-

ヾ(๑╹◡╹)ﾉ”不low导航~

内边距（padding-内边距-盒子的泡沫）

盒子边框与内容之间的距离

取值：

• 一个值：控制整个上下左右 padding : 40px；

  上、右、下、左 的内边距都设置了 40 px的距离;

• 两个值：第一个控制上下 第二个控制左右 padding : 40px 80px

  上下 => 40px , 左右 => 80px

• 三个值：第一个控制的上 第二个控制的左右 第三个控制的下 padding : 40px 60px 80px;

  上 => 40px , 左右 => 60px , 下 => 80px

• 四个值：分别控制：上右下左 padding : 40px 60px 80px 100px;

  上 => 40px , 右 => 60px , 下 => 80px , 左 => 100px

• 记忆：顺时针，上右下左，没有找对面

单独设置（方向）：

padding-top
padding-right
padding-bottom
padding-left

*计算盒子的大小

盒子大小与内容大小的区别

• 盒子大小公式 :

<!-- 需求 : 
    盒子尺寸 300*300 , 背景粉色, 上下左右20px的padding(此时盒子大小是多少？？) 边框: 10px 实线 黑色 
-->

// 左右相等 
盒子宽度 =  内容宽度 + 2*padding + 2*border  
// 左右不等
盒子宽度 =  内容宽度 + padding-left+padding-right + border-left
            + border-right ;

那盒子高度是多少？

• 盒子大小：边框、内边距、内容决定的
• 我们之前设置的width 和 height 都只是设置内容的大小

注意（不会撑大盒子的特殊情况）：

• 当一个大盒子包含一个小盒子，并且两个盒子都是块级元素，小盒子宽度继承父盒子，这时候给小盒子加padding-left，是不会改变小盒子大小的 （下面的都可以）
  • padding-left（用的最多）
  • padding-right
  • border-left
  • border-right

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background: deeppink;
        }
        .box2{
            height: 200px;
            background: deepskyblue;
            /*此时小盒子不会被撑大,会自动内减*/
            padding-left: 20px;
            border-left: 10px solid;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

ヾ(๑╹◡╹)ﾉ”新浪导航（不low导航升级版）~

用之前的方法，当a标签的文字数量不确定时，页面会有问题。

普遍的方法应该使用padding

——————————

让浏览器自动内减（拓展css3）~

<!-- 需求 : 
    盒子尺寸 400*400 , 背景绿色, 边框: 10px 实线 黑色  padding:20px
-->
box-sizing：border-box；（自动内减，此时width和height就是当前盒子的实际大小）

ヾ(๑╹◡╹)ﾉ”新闻列表案例~

外边距（margin-外边距-盒子与盒子之间的距离）

盒子与盒子之间的距离（控制盒子的位置）

取值：

• 一个值：控制整个上下左右 margin : 40px；

  上、右、下、左 的内边距都设置了 40 px的距离;

• 两个值：第一个控制上下 第二个控制左右 margin : 40px 80px

  上下 => 40px , 左右 => 80px

• 三个值：第一个控制的上 第二个控制的左右 第三个控制的下 margin : 40px 60px 80px;

  上 => 40px , 左右 => 60px , 下 => 80px

• 四个值：分别控制：上右下左 margin : 40px 60px 80px 100px;

  上 => 40px , 右 => 60px , 下 => 80px , 左 => 100px

单独设置（方向）：

margin-top
margin-right
margin-bottom
margin-left

针对margin单方向的应用：

• 上下应用

  • margin-top：能让盒子下移
  • margin-bottom：能让下面的盒子往下移

• 左右应用（先转换成行内块）

  • margin-left：能让盒子右移
  • margin-right：能让右边的盒子往右移动

清除默认内外边距

很多标签默认带有margin和padding，在布局之前需要清除这些标签默认的margin和padding，留给自己设置。

比如：

(1) body 标签: 自带 margin: 8px; 的属性
(2) p 标签: 默认带有 margin: font-size 的值
(3) h 标签: 也默认带有 margin-top 和 margin-bottom
(4) ul标签: ul 标签默认带有上下的 margin, 和 padding-left
...

方法（清除页面中标签的默认padding和margin）：

* { 
    padding: 0;
    margin: 0; 
}

——————————

ヾ(๑╹◡╹)ﾉ”爱宠知识案例~

拓展

• 之后工作中，用什么软件测量都可以，顺手就行
• box-sizing：border-box；（自动内减，此时width和height就是当前盒子的实际大小）

*行高（line-height）

定义： 两行文本基线的距离，默认值为normal，可以撑起高度

应用：将行高设置等于容器的高度，可以让文本垂直居中

line-height:20px; /*控制的是文字与文字之间的上下距离*/

注意：

• 小技巧：如果将标签的高度和行高设置成一样，那么这个标签里面的文字可以在这个标签里面垂直居中
• 与text-align结合使用可以让单行文字在标签内部水平垂直居中
• 行高是可以继承的

行高的单位

取值：

• 具体的像素

• em

  根据当前标签的字体大小（font-size）为基数计算（没有手动设置，浏览器默认设置16px）

  如果当前字体大小为16px，那么 2em=32px

• 百分号（%）

  根据当前标签的字体大小（font-size）为基数计算

  如果当前字体大小为16px，那么 200% = 32px

• 不带单位的数字（倍数）

  根据当前标签的字体大小（font-size）为基数计算

  如果当前字体大小为16px，那么 2 = 32px

补充： 谷歌浏览器默认字体大小 16px;

*行高与font的连写

字体连写里面还有行高（默认值：normal）

默认值为：normal，不同的文字效果不同，

完整版的font连写形式：

font: font-style font-weight font-size/line-height font-family

line-height 如果写在 font 连写前面，会被层叠掉 （连写的层叠现象）

/*line-height书写位置：*/
/*1. 写在font里 没毛病 */
font: italic bold 20px/200px '微软雅黑';

/*2. 写在font后面  没毛病*/
font: italic bold 20px '微软雅黑';
line-height: 200px;

/* 3. 写在font前面 会覆盖  */

line-height: 200px;
font: italic bold 20px '微软雅黑';
/*此时line-height为normal值*/

注意（项目中用到了line-height和font的连写）：

• 把line-height写在font连写的下面
• 把line-height写进font的连写里面！

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
            height: 32px;
            background: cornsilk;
            border: 1px solid;
            /* line-height: 200%; */
            /* line-height: 32px; */
            /* line-height: 2; */
            /* line-height: 32px; */
            
            
            /* font: italic bold 16px/32px '微软雅黑'; */
            
            /* font: italic bold 16px '微软雅黑';
            line-height: 32px; */

            /* 这种情况会失效 */
            /* line-height: 32px;
            font: italic bold 16px '微软雅黑'; */
            
        }
    </style>
</head>
<body> 
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

margin的两种特殊现象

*marign的合并现象

当两个盒子水平布局时，左右的margin会叠加；

当两个盒子垂直布局时，上下的marign会合并-》合并之后取两者的最大值为两个盒子之间的距离

// 盒子左右排序  没毛病
 margin-left 和 margin-right 叠加

// 【盒子上下排序  有问题】
margin-top 和 margin-bottom 合并

// 总结 : 
两个div上下排序, 在进行设置 margin-top 和 margin-bottom 的时候,两个margin会产生一个合并的现象, 合并的值以大的为准

解决方案： 避免就好了

记忆：margin 水平—>叠加 上下—>取大

*margin的塌陷现象（面试常考！）

嵌套 块元素垂直外边距的塌陷（父元素一起往下移动）

两个盒子为父子关系时候，父元素的marign和子元素的margin会合并，并且父元素会往下移动

如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移

解决方案：

• 给父盒子加一个边框
• 给父盒子加 padding-top
• 给父盒子设置属性 overflow: hidden => BFC;
• 给父盒子设置浮动
• 给父盒子设置为行内块

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: deeppink;
            display: inline-block;
            margin-right: 10px;
        }
        .box2{
            background: deepskyblue;
            display: inline-block;
            margin-left: 10px;
        }
        .box3{
            background: green;
            margin-bottom: 20px;
        }
        .box4{
            background: yellow;
            margin-top: 10px;
        }
        .box5{
            background: blueviolet;
            /* 塌陷的解决方案，下面选一种就行 */
            /* border: 1px solid; */
            /* padding-top: 1px; */
            /* display: inline-block; */
            /* overflow: hidden; */
            /* float: left; */
        }
        .box6{
            width: 100px;
            height: 100px;
            background: yellowgreen;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 合并1.水平maring会叠加 -->
    <div class="box1 box"></div><div class="box2 box"></div>
    <hr>
    <!-- 合并2.上下maring会取最大的 -->
    <div class="box3 box"></div>
    <div class="box4 box"></div>
    <hr>
    <!-- 塌陷现象 -->
    <div class="box5 box">
        <div class="box6"></div>
    </div>
</body>
</html>

浮动

浮动初体验

解决上下盒子 可以水平布局的问题

需求：在页面上有两个盒子，一个盒子靠着左边显示，一个盒子靠着右边显示

可以使用marign，但是浏览器宽度变化时，不能完成效果~

浮动的代码：

float: left;
float: right; 

浮动的特点（了解）

重点在于使用

标准流：就是浏览器默认摆放盒子的顺序（从上往下、从左往右）

注意：

• 浮动的元素会脱离标准流（脱标）

  • 飘起来了
  • 在标准流中不占位置

  如果一个元素按照正常的标准流来显示, 会在 html 中所属的位置占位, 后面的元素会紧跟着它, 但是浮动脱离了标准流, 将来在看到浮动的元素以后,就不能以正常的标准流来判断了 (浮动的元素在标准流中不占位置了)
  

• 浮动以后的元素，会覆盖在标准流的元素之上

  • 比标准流高出半个级别

• 浮动的规则：浮动找浮动，不浮动找不浮动

• 浮动的重点：浮动的元素只会影响下面的元素

  • 本质：浮动的元素受到盒子边界的限制（块级元素独占一行）

• 浮动的元素会改变显示方式效果

  浮动以后的元素当做是一种特殊的显示效果：
  1、一行可以显示多个
  2、并且可以设置宽高
  总结: 浮动以后的元素的显示方式与行内块级元素类似，但是不能使用text-align：center居中（浮动本身就是让盒子左右排布的）
  

记忆 :

1. 浮动的元素会脱标 ==> 飘起来了（不占位置） ==> 比标准流高半个级别  ==> 类似行内块的特点
2. 浮动的元素会被盒子的边界限制住

浮动的案例

• 使用浮动完成页面的布局

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head{
            height: 50px;
            background: pink;
        }
        .container{
            width: 500px;
            margin: 0 auto;
        }
        .container .top{
            height: 50px;
            background: yellow;
        }
        .container .aside{
            width: 20%;
            height: 200px;
            background: #000;
            float: left;
        }
        .container .section{
            width: 80%;
            height: 200px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="container">
        <div class="top"></div>
        <div class="aside"></div>
        <div class="section"></div>
    </div>
</body>
</html>

• 制作导航

  注意：之前直接使用 a 标签 display：inline-block 制作导航是有问题的

  • 导航与导航之间应该是列表关系，如果想要将这些关系通过 html 语义化表示出来，必须要用到 ul 标签
  • 如果这些 a 标签不用其他的标签包裹起来，那么将来浏览器会将这些 a 标签中的文字，当做普通文本一起显示，SEO 在查看页面时，认为该页面在作弊，就是在进行关键字堆砌

  所以, 导航必须要用 ul 和 li 将 a 标签包裹起来

*：项目开始前先初始化样式
ul:用于清除小圆点：list-style
li:用于浮动在水平方向布局：float：left
a：用于设置宽高（把li的大小撑起来）
    注意a标签是行内元素，需要通过
        1.转换显示方式（块级元素和行内块都行，但是不推荐使用行内块）；
        2.float：left 也能起效果（浮动之后的元素可以设置宽高）

清除浮动（清除浮动的影响）

浮动带来的问题：浮动元素撑不开父级容器

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0，由于父盒子的高度为 0，下面的元素会自动补位，所以这个时候要进行浮动的清除

浮动: float: left; float: right;
清除浮动: clear: both;

额外标签法

不推荐，会产生一个多余的盒子

在浮动的盒子内部最后，再放一个块级标签，在这个标签内使用 clear：both；来清除浮动对页面的影响

注意： 一般情况不使用这种方式清除浮动，因为这种方式会在页面中添加额外的标签

使用 overflow 清除浮动

在某些特定场景下使用不了

找到浮动盒子的父元素, 再在父元素中添加一个属性 overflow: hidden; 清除父元素中子元素浮动对页面的影响

注意： 一般情况也不用这种方式，因为 overflow: hidden; 有一个特点，离开了这个元素所在的区域以后会被隐藏 （后面讲这个方法就懂了）

使用伪元素清除浮动

通过css实现，推荐！

伪元素： 在页面上不存在的元素，但是可以通过 css 添加上去（默认是行内元素）

种类：常见的就2种

::after(在...之后)
::before(在...之前)

为了和伪类的一个冒号区别，css3的时候推荐使用两个冒号（兼容还是要使用一个冒号）

注意：

• 伪元素由css渲染，不会增加html结构
• 每个元素都可以添加自己的伪元素
• 默认伪元素是行内元素，可以通过 display 修改

伪元素清除浮动完整代码：

.clearfix::after {
    content: "";     //伪元素必须给这个content=''
    display: block;   // 必须块级才能清除 
    clear: both;      // 核心代码
    
    /*保证伪元素在页面中看不到*/
    height:0;
    line-height:0;
    visibility:hidden;
}

设置高度

简单粗暴，但是不推荐，不利于后期维护

注意：问题? 给谁设置，浮动的父盒子 (height=0 的)

—————————-

浮动的意义

• 浮动最开始是做图文环绕（报纸的效果）
• 浮动的布局应用场景：让元素直接排成一排，或者一个靠左一个靠右

ヾ(๑╹◡╹)ﾉ”网页头部案例~

拓展

*关于行内的padding和margin使用

什么时候设置margin? 什么时候设置padding?

需要在`边框内部`留有空隙 => padding
需要在`边框外部`留有空隙 => margin

ヾ(๑╹◡╹)ﾉ”上面两个div，下面有个p标签~

块级元素和行内块元素使用 margin 和 padding-》没毛病，但是：

• 行内元素使用margin的left 和 right可以，top和bottom无效
• 行内元素使用padding的left和right可以，top和bottom无效

总结：

• 块级元素和行内块元素的margin和padding随便使用！没问题
• 行内元素的上下margin和上下padding会失效！！开发中不要使用！！

*浮动元素显示效果的注意点

浮动元素的特点之一为：浮动之后的元素有类似行内块的显示效果

所以浮动元素不管前生是什么，浮动之后就变成了一个类似行内块的效果！不再有块级的特点：

以div为例：

• 块级元素特点1：水平居中使用margin:0 auto;
  • 前生：块级元素：margin：0 auto；
  • 浮动之后：margin：0 auto；不能居中（浮动本身就是到页面的一侧，并且浮动之后有行内块的效果）也不能使用text-align：center；居中
• 块级元素特点2：宽度继承
  • 前生：块级元素：有继承父元素宽度的效果
  • 浮动之后：不能继承父元素的宽度

记忆：浮动之后元素当做一个特殊的显示方式！

不能使用text-align；或者margin：0 auto；居中

宽度不能继承父元素

（一行显示多个，并且可以设置宽高）

不要乱用浮动，只有当遇到让盒子水平布局时才使用！！！

浮动的元素相当于父元素的内容，仍然在盒子的content部分中！

版心

宽度固定且水平居中的盒子

为什么要有版心?

因为电脑的屏幕不一样大，为了在不同的电脑上视觉效果一致，我们需要版心作为约束

版心的公共类的设定：

.w {
    width: 1200px；
    margin：0 auto；
}

<div class="w"></div>

特殊情况：

设计师会给你一张很大的图片 1920 * 1000  (是为了适应不同的屏幕) 
但是版心只有1280 

问：图片怎么处理

答：这个盒子不做约束 width:100%;  这个图片作为背景图片放到这个盒子里面 
同时background-position:center 0;

综合项目：尚合

项目初始化

整个项目应该就是一个文件夹，文件夹中放项目中的所有资源（图片、html、css）

css在开始的时候可以把项目中常见的样式先写好，这个叫做样式的初始化！！！

/*-----------------------------项目样式的初始化--------------------------------------------*/
/*清除默认的marign和padding*/
* {
  margin: 0;
  padding: 0;
}

/*消除页面中li的小点*/
ul {
  list-style: none;
}

/*消除a标签默认的下划线*/
a {
  text-decoration: none;
}

/*版心的样式*/
/*版心就是宽度固定水平居中的盒子*/
.w {
  width: 980px;
  margin: 0 auto;
}

/*左浮动的类*/
.fl {
  float: left;  
}

/*右浮动的类*/
.fr {
  float: right;
}

/*清除浮动的代码*/
.clearfix::after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
}

/*为了在上面看到下面的标签 最后删掉*/
/*body {
  height: 2000px;
}*/

尚合总结

• 给div设置宽高来简化间距的设置

定位

作用: 解决盒子与盒子之间的层叠问题

问题：现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半，怎么完成？？？

使用margin可以实现效果，但是并不好，定位可以专门解决这样的层叠问题

初体验：

position：absolute； 设置定位

div{
    width: 200px;
    height: 200px;  
}
.red{
    background-color: red;
}
.blue{
    background-color: blue;
    position: absolute;
    top: 100px;
    left:100px;
}

方位属性：

水平和垂直方向各选一个使用即可，一般选取的原则是离那边近用哪个

• 水平方向：
  • left：相对于左边框的距离
  • right：相对于右边框的距离
• 垂直方向：
  • top：相对于上边框的距离
  • bottom：相对于下边框的距离

static：静态定位（默认型）（有争议的）

标准流中的元素默认都是静态定位

代码： position: static; （默认值）静态定位

静态定位是有一定争议的（有些人认为静态定位不算定位）

面试时候回答：三种定位方式，优先回答其他三个（相对、绝对、固定），如果四种再写静态定位

relative：相对定位（自恋型）

盒子相对于自己之前的位置定位移动（红绿蓝）

代码：position: relative； 相对定位

div{
    width: 200px;
    height: 200px;
}
.red{
    background-color: red;
}
.blue{
    background-color: blue;
    position: relative;
    top:100px;
    left:100px;
}

特点：

• 要配合方位属性使用，不然无法移动

• 相对于自己原来的位置进行偏移

• 设置了相对定位的元素在页面上占据了位置-》没有脱标

应用场景：

• 配合绝对定位组CP（子绝父相），用的最多
• 用于小范围的移动（比如让某个标签稍微往下移动几个像素）

absolute：绝对定位（拼爹型）

绝对定位相对于非静态定位的父元素进行定位移动

代码：position: absolute; 绝对定位

特点：

—————————–

• 需要配合方位属性移动使用

• 绝对定位相对谁移动？？

  默认相对于浏览器进行移动，但是如果有父元素，则相对于有定位的父元素进行移动

  判断方法：

  • 没有父元素-》相对于浏览器进行移动
  • 有父元素（判断父元素有没有定位（三种，非static））
    • 父元素没有定位-》相对于浏览器进行移动
    • 父元素有定位-》相对于有定位的父元素进行移动

• 绝对定位的元素在页面中不占位置-》脱标

应用场景：

• 子绝父相（子元素绝对定位、父元素相对定位），把子元素定位到父元素中的某个位置，用的最多！！！

  子绝父相这个CP不会影响页面的布局-》举例说明

ヾ(๑╹◡╹)ﾉ”子绝父相定位居中案例

代码:

.father{
    width: 400px;
    height: 400px;
    background-color: red;
    margin-left: 100px;
    margin-top: 100px;
    position: relative;
}
.son{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left:50%;
    top:50%;
    /* transform: translateX(-50%); */
    transform:translate(-50%,-50%); 
}

如果小盒子在大盒子（1）水平居中（2）水平垂直都居中

.father:600*400

.son:200*100

• 先 left：50%， 将子盒子在父盒子向右平移父盒子的一半

• 再设置 margin-left：-（子盒子自身宽高的一半）

  注意：此时取值一定是负数-》 那么将来子盒子就可以水平居中了

• 优化：但是此时子盒子大小变化时就不再居中了，margin-left：-50%也是相对父元素的不行；

  此时可以使用css3的新属性：transform：translateX（-50%）沿着x轴的负方向移动自己的一半 也能居中！如果x周和y周都沿轴的负方向移动自己的一半要设置：transform:translate(-50%,-50%);

ヾ(๑╹◡╹)ﾉ”课堂练习：网站头部hot图标

ヾ(๑╹◡╹)ﾉ”课堂练习：小米商品页半透明效果

—————————–

fixed：固定定位 （死心眼型）

盒子相对于浏览器进行定位移动

代码：position: fixed; 固定定位

特点：

• 配合方位属性一起使用

• 永远相对于浏览器进行移动

• 固定定位的元素也不在页面中占据位置-》脱标

注意的是：脱标后的元素和浮动脱标了一样，有类似于行内块元素的显示方式（宽度默认由内容撑开）

ヾ(๑╹◡╹)ﾉ”课堂练习：新浪网页

四种定位总结

是否脱标占有位置	定位模式	是否移动	移动位置基准
不脱标，正常模式	静态static	不可以	正常模式
不脱标，占有位置	相对定位relative	可以	相对自身位置移动
完全脱标，不占有位置	绝对定位absolute	可以	相对于定位的父级移动位置
完全脱标，不占有位置	固定定位fixed	可以	相对于浏览器移动位置

元素的层级问题（z-index）

可以通过z-index设置页面中定位元素的层级关系，数值越大，层级越高

取值：整数

注意：

• 标准流、浮动、定位之间的层级关系

  两个盒子之间的比较

  三种层叠关系：
  标准流 < 浮动 < 定位（相对、绝对、固定）
  

• 定位之间的层叠问题：

  • 三者的层叠关系相同，写在下面元素的覆盖上面的

  • 可以手动设置定位元素的层级关系

    如果需要手动设置定位的层级关系，可以通过z-index属性设置层级
    z-index：数值;  数值越大  层级越高
    

vertical-align（垂直对齐方式）

让图片（行内块元素）和文字对齐，需要优先给行内块元素设置垂直对齐方式

问题： 图片和文字在一行中显示的问题（bottom）

如果文本与图片在同一行中显示，其实默认的效果是图片的底部和文字基线对齐的，此时就可能会影响页面的布局。
此时可以通过：
vertical-align: 可以设置文本与行内块（图片）的垂直对齐方式

取值：

• baseline：基线对齐(默认)
• top：顶部对齐
• middle：中线对齐
• bottom：底部对齐

使用行内块元素可能会出现的bug：

• 场景1 : 文本框（text）和表单按钮（button）无法对齐问题；（vertical-align: middle）
• 场景2 : input 和 img无法对齐的问题；(vertical-align: bottom)
• 场景3 : div里放一个文本框 ，此时文本框无法靠顶；(vertical-align: top)
• 场景4：div由img标签撑开，此时img标签下方有间隙（给img标签设置vertical-align即可）；
• 场景5 : 使用line-height让img标签垂直居中，需要给img标签单独设置vertical-align：middle

如果要让垂直布局的盒子变成水平布局，不推荐使用转换成行内块元素，推荐使用浮动完成效果。

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid #000; 
        }
        .box1 button{
            border: 1px solid #000;
            vertical-align: middle;
        } 
        .box2 img{
            vertical-align: bottom;
        }
        .box3{
            height: 30px;
        }
        .box3 input{
            vertical-align: top;
        }
        .box4 img{
            vertical-align: bottom;
        }
        .box5{
            padding: 20px;
            text-align: center;
        }
        .box5 img{
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box box1">
        石室诗士施氏，嗜狮<button>login</button>
    </div>
    <div class="box box2">
        <input type="text"> <img src="./img/head.jpg" alt="">
    </div>
    <div class="box box3">
        <input type="text">
    </div>
    <div class="box box4">
        <img src="./img/head.jpg" alt="">
    </div>
    <div class="box box5">
        <img src="./img/head.jpg" alt="">
    </div>
</body>
</html>

overflow：溢出

设置盒子内容超出盒子大小时的展示效果

取值：

visible  超出不裁剪（默认值）
hidden   如果盒子中的内容超出盒子范围，就隐藏
scroll   显示滚动条
auto     根据具体的情况，判断是否要添加滚动条（不超出没有，超出有）

*元素的隐藏区别

隐藏元素的几种方式的区别（大小盒子嵌套）

overflow:hidden；（超出隐藏）

隐藏超出部分

visibility：hidden；（元素看不见）

隐藏元素，将元素看不见，但是在页面中还是占位置！！

display：none；（元素不存在）

隐藏元素，将元素看不见，但是在页面中不占位置！！

<div class="one">测试隐藏</div>
<div class="two"></div>

html 标签的嵌套规范（了解）

块级元素一般用于布局：比如div在页面的布局用的最多；

行内元素一般用于放文字：比如span、a标签里面一般放文字

标签之间是不能随意嵌套的，书写的时候应该有对应的规范：

注意点：

• 行内元素一般放文字或者行内元素，但是a标签之间不能互相嵌套（会被浏览器解析成两个a标签）；
• 块级元素相当于一个容器，里面可以放文字、行内元素、块级元素，但是p标签不能包含div标签（p标签会被拆分成两个p标签）
• p标签作为一个段落标签，只有文字才会组成段落，所以p标签里面一般只放文字，不要放块级元素！！！

拓展

属性选择器

通过标签的属性，找到对应的标签

用的最多的情况是找到input标签的不同形态

/* 找到页面中的文本框 */
input[ type = 'text' ] {
    css样式;
}

/* 找到页面中的普通按钮 */
input[ type = 'button' ] {
    css样式;
}

结构伪类选择器( -child系列)

如果现在想找到ul标签下面的第几个li标签的时候，除了使用class大法之外，还可以使用结构伪类选择器完成效果

• E:first-child 匹配父元素的第一个子元素E

  比如：li：first-child {css样式}
  查找过程如下：
  1、首先找到li 
  2、找li标签的父元素
  3、找父元素第一个子元素
  4、看这个子元素是不是li
      1、是-》加样式
      2、不是-》不加样式
  

• E:last-child 匹配父元素的最后一个子元素E

• E:nth-child(n) 匹配父元素的第n个子元素E

  针对于nth-child括号中可以写一个带n的式子，n的取值范围是0~正无穷的整数
  所以：
  1、找到所有的偶数：2n
  2、找到所有的奇数：2n-1 / 2n+1
  3、找到前12个：-n+12(12-n却不行？？？)
  

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li:first-child{
            color: red;
        }
        ul li:nth-child(3){
            color: blue;
        }
        ul li:nth-child(2n){
            color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <!-- <div>奸细如果是第一个，不会变红</div> -->
        <li>我是第个1li</li>
        <li>我是第个2li</li>
        <li>我是第个3li</li>
        <li>我是第个4li</li>
        <li>我是第个5li</li>
    </ul>
</body>
</html>

分享到

微信 微博 Twitter 复制

扫码分享到微信

打开微信扫一扫

关闭

← 上一篇 H5C3笔记整理 下一篇 → MySQL数据库SQL语句练习

版权声明

本文为 程序员青阳 原创文章，遵循 CC BY-NC-SA 4.0 版权协议，转载请附上原文链接及本声明。

原文链接：https://heliufang.github.io/posts/ac1879a7/index.html