CSS基础-体验CSS

CSS起源

web的衰落：
在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能
迫于压力，html开始出现<font>，<i> , <s>等标签。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难
大救星Css
当html中存斥着的表现标记问题，W3c并没有忽视。在1995年，w3c开始发布一种正在进行的计划（work-in-prrgress）称之为css
与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。

体验CSS

用HTML完成
哪个标签有哪个属性难以记忆
需求变更影响较大(例如像修改成功法则以下的文字颜色需要修改4个地方)

<h1 align="center">
    <font face="微软雅黑" color="red">成功法则</font>
</h1>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">迟到毁一生</font>
</p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">早退穷三代</font>
</p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">按时上下班</font>
</p>
<p align="center">
    <font face="微软雅黑" color="blue" size="5">必成高富帅</font>
</p>

用HTML+CSS完成
不用记忆哪些属性属于哪个标签
当需求变更时我们不需要修改大量的代码就可以满足需求
在前端开发中CSS只有一个作用, 就是用来修改样式

<style type="text/css">
        h1{
            text-align: center;
            color: red;
            font-family: "微软雅黑";
        }
        p{
            text-align: center;
            color: blue;
            font-size: 20px;
        }
</style>

<h1>成功法则</h1>
<p>迟到毁一生</p>
<p>早退穷三代</p>
<p>按时上下班</p>
<p>必成高富帅</p>

CSS格式

格式:

<style type="text/css">
        标签名称{
            属性名称: 属性对应的值;
            ...
        }
</style>

注意点:
style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
style标签中的type属性其实可以不用写, 默认就是type=”text/css”
设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)
CSS怎么学?
CSS的学习一共分为两大部分, 一个是CSS的属性, 另一个是CSS选择器. 也就是说着两部分学完CSS就没有别的东西了

CSS基础-CSS常见属性

CSS常见属性

文字属性

font-style

作用: 规定文字样式
格式: font-style: italic;
取值:
normal ：正常的，默认就是正常的
italic : 倾斜的
快捷键:
fs font-style: italic;
fsn font-style: normal;

font-weight

作用: 规定文字粗细
格式: font-weight: bold;
取值:
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线，默认就是细线
数字取值：
100-900之间整百的数字
快捷键
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

font-size

作用: 规定文字大小
格式: font-size: 30px;
取值: px(像素 pixel)
快捷键
fz font-size:;
fz30 font-size: 30px;

font-family

作用: 规定文字字体
格式: font-family:”楷体”;
取值: 各种字体名称
快捷键:
ff font-family:;
注意点:
如果取值是中文，需要用双引号或者单引号括起来
设置的字体必须是用户电脑里面已经安装的字体

字体属性补充

如果设置的字体不存在, 那么系统会使用默认的字体来显示
默认一般使用宋体
如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案
格式:font-family:”字体1”, “备选方案1”, …;
如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文
注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
补充在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: “Times New Roman”/Arial
还需要知道一点, 就是并不是名称是英文就一定是英文字体,因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei

文字属性缩写

缩写格式:

1 2	font: style weight size family;

例如:

1 2	font:italic bold 10px "楷体";

注意点:
在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
在这种缩写格式中style和weight的位置可以交换
在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
size和family的位置是不能顺便乱放的, size一定要写在family的前面, 而且size和family必须写在所有属性的最后

文本属性

text-decoration

作用: 给文本添加装饰
格式: text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
快捷键:
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

text-align

作用: 设置文本水平对齐方式
格式: text-align: center;
取值:
left 左
right 右
center 中
快捷键:
ta text-align: left;
tar text-align: right;
tac text-align: center;

text-indent

作用: 设置文本缩进
格式: text-indent: 2em;
取值: 2em, 其中em是单位, 一个em代表缩进一个文字的宽度
快捷键:
ti text-indent:;
ti2e text-indent: 2em;

颜色属性

在CSS中如何通过color属性来修改文字颜色
格式: color: 值;
取值:
英文单词
一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达
rgb
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮

红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
灰色: rgb(200,200,200);
只要让红色/绿色/蓝色的值都一样就是灰色

rgba
rgba中的rgb和前面讲解的一样, 只不过多了一个a.
a代表透明度, 取值是0-1, 取值越小就越透明
例如:

1 2	color: rgba(255,0,0,0.2);

十六进制
通过十六进制来表示颜色其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如: #FFEE00 FF表示R EE表示G 00表示B
什么是十六进制?
十六进制和十进制一样都是一种计数的方式
在十进制中取值范围0-9, 逢十进一
在十六进制中取值范围0-F, 逢十六进一

1
2
3

十进制   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
十六进制 0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f

十六进制和十进制转换的公式
用十六进制的第一位*16 + 十六进制的第二位 = 十进制

15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0

1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如: #FFEE00 == #FE0
注意点:
1.如果当前颜色对应的两位数字不一样, 那么就不能简写
#123456;
2.如果两位相同的数字不是属于同一个颜色的, 也不能简写
#122334

CSS基础-CSS选择器

CSS选择器

标签选择器

什么是标签选择器?
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式:

标签名称{
    属性:值;
}

注意点:
标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
标签选择器无论标签藏得多深都能选中

id选择器

什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性
格式:

#id名称{
    属性:值;
}

注意点:
每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
在同一个界面中id的名称是不可以重复的
在编写id选择器时一定要在id名称前面加上#
id的名称是有一定的规范的
id的名称只能由字母/数字/下划线(a-z 0-9 _)
id名称不能以数字开头
id名称不能是HTML标签的名称()不能是a h1 img input …)
在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的

类选择器

什么是类选择器?
作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式:

.类名{
    属性:值;
}

注意点:
每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
在同一个界面中class的名称是可以重复的
在编写class选择器时一定要在class名称前面加上点
类名的命名规范和id名称的命名规范一样
类名就是专门用来给CSS设置样式的
在HTML中每个标签可以同时绑定多个类名

格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">

id选择器和类选择器

id和class的区别?
1.1
id相当于人的身份证不可以重复
class相当于人的名称可以重复
1.2
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称
id选择器和class选择器区别?
id选择器是以#开头
class选择器是以.开头
在企业开发中到底用id选择器还是用class选择器?
id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式:

标签名称1 标签名称2{
    属性:值;
}

先找到所有名称叫做”标签名称1”的标签, 然后再在这个标签下面去查找所有名称叫做”标签名称2”的标签, 然后在设置属性
注意点:
后代选择器必须用空格隔开
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
后代选择器可以通过空格一直延续下去

子元素选择器

什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:

标签名称1>标签名称2{
    属性:值;
}

先找到所有名称叫做”标签名称1”的标签, 然后在这个标签中查找所有直接子元素名称叫做”标签名称2”的元素
注意点:
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格
子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
子元素选择器可以通过>符号一直延续下去

后代选择器和子元素选择器

后代选择器和子元素选择器之间的区别?
1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
后代选择器和子元素选择器之间的共同点
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}
在企业开发中如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

交集选择器

什么是交集选择器?
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:

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

注意点:
选择器和选择器之间没有任何的连接符号
选择器可以使用标签名称/id名称/class名称
交集选择器仅仅作为了解, 企业开发中用的并不多

并集选择器

什么是并集选择器?
作用: 给所有选择器选中的标签设置属性
格式:

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

注意点:
并集选择器必须使用,来连接
选择器可以使用标签名称/id名称/class名称

兄弟选择器

相邻兄弟选择器

什么是相邻兄弟选择器 CSS2
作用: 给指定标签后面紧跟的那个标签设置属性
格式:

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

注意点:
相邻兄弟选择器必须通过+连接
相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

通用兄弟

什么是通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:

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

注意点:
通用兄弟选择器必须用~连接
通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

序选择器是CSS3中新增的选择器最具代表性的就是序选择器
什么是序选择器?
作用: 选中指定的任意标签然后设置属性
格式:
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
2.同级同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
3.其它用法
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增
:nth-of-type(odd) 选中同级别中同类型的所有奇数
:nth-of-type(even) 选中同级别中同类型的所有偶数
:nth-of-type(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增

属性选择器

什么是属性选择器?
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
-作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
-作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
-最常见的应用场景, 就是用于区分input属性

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
属性的取值是以什么结尾的
[attribute$=value] CSS3
属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到, 无论有没有被隔开

通配符选择器

什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性
格式:

*{
    属性:值;
}

注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

CSS基础-CSS三大特性

CSS三大特性

继承性

什么是继承性?
作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
示例代码:

 <style>
        div{
            color: red;
        }
</style>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

<!--p会变成红色-->

注意点:
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
- a标签的文字颜色和下划线是不能继承的
- h标签的文字大小是不能继承的

<style>
        div{
            color: red;
            text-decoration: none;
            font-size: 30px;
        }
</style>
<div>
    <a href="#">我是超链接</a>
</div>

<div>
    <h1>我是大标题</h1>
</div>

<!--a的颜色和下划线不会发生变化, H的字体大小不对  -->

应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

body{
   font-size: 30px;
      font-family: "微软雅黑"
      color: #666;
}

层叠性

CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性
什么是层叠性?
作用: 层叠性就是CSS处理冲突的一种能力
示例代码

<style>
        p{
            color: red;
        }
        .para{
            color: blue;
        }
</style>
<p id="identity" class="para">我是段落</p>

<!-- 最终显示蓝色, 因为红色被覆盖掉了 -->

注意点:
层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性

优先级

什么是优先级?
作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式
间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的

<style>
 li{
            color: blue;
      }
     ul{
            color: red;
      }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示蓝色 -->

相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

<style>
 p{
            color: blue;
      }
    p{
            color: red;
      }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示红色 -->

不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认

<style>
  #identity{
            color: purple;
        }
        .para{
            color: pink;
        }
        p{
            color: green;
        }
        *{
            color: blue;
        }
        li{
            color: red;
        }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示紫色 -->

注意点:
通配符选择器也是直接选中

优先级权重

什么是优先级的权重?
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
权重的计算规则
首先先计算选择器中有多少个id, id多的选择器优先级最高
如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
示例代码

<style>
   #identity1 .box2{
            color: red;
        }
        .box1 .box2{
            color: green;
        }
        div ul li p{
            color: blue;
        }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id多最终显示红色 -->

<style>
  .box1 .box2{
            color: blue;
        }
        div .box2{
            color: green;
        }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 比类多, 最终显示蓝色 -->

<style>
  #identity1 ul li p{
            color: red;
        }
        #identity1 ul p{
            color: green;
        }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 类一样, 比标签多最终显示红色 -->

<style>
  .box1 li #identity2{
            color: blue;
        }

        #identity1 ul .box2{
            color: red;
        }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id一样, 类一样, 标签一样, 最终显示红色 -->

注意点:
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的

!important

什么是!important
作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
示例代码

<style>
        #identity{
            color: purple;
            font-size: 50px;
        }
        .para{
            color: pink ;
        }
        p{
            color: green !important;
        }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最终显示绿色 -->

注意点:
!important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值得分号前面
!important前面的感叹号不能省略

CSS基础-CSS显示模式

Div和Span标签

什么是div?
作用: 一般用于配合css完成网页的基本布局

<style>
        .header{
            width: 980px;
            height: 100px;
            background: red;
            margin: auto;
            margin-bottom: 10px;
        }
        .content{
            width: 980px;
            height: 500px;
            background: green;
            margin: auto;
            margin-bottom: 10px;
        }
        .footer{
            width: 980px;
            height: 100px;
            background: blue;
            margin: auto;
        }
        .logo{
            width: 200px;
            height: 50px;
            background: pink;
            float: left;
            margin: 20px;
        }
        .nav{
            width: 600px;
            height: 50px;
            background: yellow;
            float: right;
            margin: 20px;
        }
        .aside{
            width: 250px;
            height: 460px;
            background: purple;
            float: left;
            margin: 20px;
        }
        .article{
            width: 650px;
            height: 460px;
            background: deepskyblue;
            float: right;
            margin: 20px;
        }
</style>
<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="aside"></div>
    <div class="article"></div>
</div>
<div class="footer"></div>

什么是span?
作用: 一般用于配合css修改网页中的一些局部信息

<style>
        span{
            color: red;
        }
</style>
<p>努力到<span>无能为力</span>, 拼搏到<span>感动自己</span></p>

div和span有什么区别?
1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签
容器级的标签和文本级的标签的区别?
容器级的标签中可以嵌套其它所有的标签
常见容器级的标签: div h ul ol dl li dt dd …
文本级的标签中只能嵌套文字/图片/超链接
常见文本级的标签:span p buis strong em ins del …
注意点:
不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素显示模式

在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)
什么是块级元素, 什么是行内元素?
块级元素会独占一行
行内元素不会独占一行
常见容器级的标签: div h ul ol dl li dt dd …
常见文本级的标签:span p buis stong em ins del …
常见块级元素: p div h ul ol dl li dt dd
常见行内元素: span buis strong em ins del
块级元素和行内元素的区别?
块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示
行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的
行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
不独占一行, 并且可以设置宽高

CSS元素显示模式转换

如何转换CSS元素的显示模式?
设置元素的display属性
display取值
block 块级
inline 行内
inline-block 行内块级
快捷键
di display: inline;
db display: block;
dib display: inline-block;

CSS基础-背景和精灵图

背景相关属性

背景颜色

如何设置标签的背景颜色?
在CSS中可以通过background-color:属性设置标签的背景颜色
取值:
具体单词
rgb
rgba
十六进制
格式:

<style>
  div{
            width: 100px;
            height: 50px;
        }
  .box1{
            background-color: red;
        }
        .box2{
            background-color: rgb(0,255,0);
        }
        .box3{
            background-color: rgba(0,0,255,0.7);
        }
        .box4{
            background-color: #0ff;
        }
</style>

快捷键:
bc background-color: #fff;

背景图片

如何设置背景图片?
在CSS可以通过background-image: url();设置背景图片
格式:

<style>
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
            background-image: url(images/girl.jpg);
            /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
        }
</style>
<div class="box1"></div>

注意点:
图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
快捷键:
bi background-image: url();

背景平铺

如何控制背景图片的平铺方式?
在CSS中可以通过background-repeat属性控制背景图片的平铺方式的
取值:
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
格式:

<style>
        /*
        div{
            width: 500px;
            height: 500px;
        }
        .box1{
         background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: repeat-y;
        }
</style>
<div class="box1"></div>

应用场景:
可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
可以将多张图片拼接成一张图片
注意点:
背景颜色和背景图片可以共存, 图片会覆盖颜色
快捷键
bgr background-repeat:

背景定位

如何控制背景图片的位置?
在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
格式:
background-position: 水平方向垂直方向;
取值:
具体的方位名词
水平方向: left center right
垂直方向: top center bottom

<style>
        div{
            /*width: 500px;*/
            height: 500px;
        }
        .box1{
            background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            /*background-position: left top;*/
            /*background-position: right top;*/
            /*background-position: right bottom;*/
            /*background-position: left bottom;*/
            /*background-position: center center;*/
            /*background-position: left center;*/
            background-position: center top;
        }
</style>

<div class="box1"></div>

具体的像素
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的

<style>
        div{
            /*width: 500px;*/
            height: 500px;
        }
        .box1{
            background-color: red;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            /*background-position: 100px 0;*/
            /*background-position: 100px 200px;*/
            background-position: -100px -100px;
        }
</style>

应用场景:
当图片比较大的时候, 可以通过定位属性保证图片永远居中显示
快捷键:
bp background-position: 0 0;

背景属性连写

和font属性一样, background属性也可以连写
背景属性缩写的格式
background: 背景颜色背景图片平铺方式关联方式定位方式;
注意点：
background属性中，任何一个属性都可以被省略
快捷键:
bg+ background: #fff url() 0 0 no-repeat;

背景关联

什么是背景关联方式？
默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式
如何修改背景关联方式？
在CSS中有一个叫做background-attachment的属性，这个属性就是专门用于修改关联方式的
格式
background-attachment：scroll;
取值：
scroll 默认值，会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动
快捷键:
ba background-attachment:;

插入图片和背景图片的区别

1
背景图片仅仅是一个装饰, 不会占用位置
插入图片会占用位置
2
背景图片有定位属性, 所以可以很方便的控制图片的位置
插入图片没有定位属性, 所有控制图片的位置不太方便
3
插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

css精灵

什么是CSS精灵图
CSS精灵图是一种图像合成技术, 全称CSS Sprite
CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
示例

<style>
    .box{
        width: 86px;
        height: 28px;
        background-image: url(images/weibo.png);
        background-position: -425px -200px;
    }
</style>
<div class="box"></div>

完整图片
显示的图片

CSS基础-盒模型

盒模型

边框属性

什么边框?
边框就是环绕在标签宽度和高度周围的线条
边框属性的格式
连写(同时设置四条边)
border: 边框的宽度边框的样式边框的颜色;
示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>

快捷键:
bd+ border: 1px solid #000;
注意点:
连写格式中颜色属性可以省略, 省略之后默认就是黑色
连写格式中样式不能省略, 省略之后就看不到边框了
连写格式中宽度可以省略, 省略之后还是可以看到边框
按方向连写(分别设置四条边)
border-top: 边框的宽度边框的样式边框的颜色;
border-right: 边框的宽度边框的样式边框的颜色;
border-bottom: 边框的宽度边框的样式边框的颜色;
border-left: 边框的宽度边框的样式边框的颜色;
示例代码

<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border-top:5px solid blue;
            border-right:10px dashed green;
            border-bottom:15px dotted purple;
            border-left:20px double pink;
        }
</style>

快捷键:
bt+ border-top: 1px solid #000;
br+ border-right: 1px solid #000;
bb+ border-bottom: 1px solid #000;
bl+ border-left: 1px solid #000;
按要素连写(分别设置四条边)
border-width: 上右下左;
border-style: 上右下左;
border-color: 上右下左;
示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            border-width: 5px 10px 15px 20px;
            border-style: solid dashed dotted double;
            border-color: blue green purple pink;
            /*border-color: blue green purple;*/
            /*border-color: blue green;*/
            /*border-color: blue;*/
        }
</style>

注意点:
这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右
这三个属性的取值省略时的规律
上右下左 > 上右下 > 左边的取值和右边的一样
上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
上右下左 > 上 > 右下左边取值和上边一样
非连写(方向+要素)
border-top-width: ;
border-top-style:;
border-top-color:;
border-right-width:;
border-right-style:;
border-right-color:;
border-bottom-width:;
border-bottom-style: ;
border-bottom-color:;
border-left-width:;
border-left-style:;
border-left-color:;
示例代码

<style>
        .box{
            width: 500px;
            height: 500px;
            background-color: red;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 10px;
            border-right-style: dashed;
            border-right-color: green;

            border-bottom-width: 15px;
            border-bottom-style: dotted;
            border-bottom-color: purple;

            border-left-width: 20px;
            border-left-style: double;
            border-left-color: pink;
        }
</style>

注意点:
- 同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}

内边距属性

什么是内边距?
边框和内容之间的距离就是内边距
格式
单独设置四条边
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            padding-top: 20px;
            padding-right:40px;
            padding-bottom:80px;
            padding-left:160px;
       }
</style>

同时设置四条边
padding: 上右下左;
示例代码

<style>
        div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1{
            /*padding:20px 40px 80px 160px;*/
            /*padding:20px 40px 80px;*/
            /*padding:20px 40px;*/
            padding:20px;
        }
</style>

注意点:
这三个属性的取值省略时的规律
上右下左 > 上右下 > 左边的取值和右边的一样
上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
上右下左 > 上 > 右下左边取值和上边一样
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色

外边距属性

什么是外边距?
标签和标签之间的距离就是外边距
格式
单独设置四条边
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
示例代码

<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>

同时设置四条边
margin: 上右下左;
示例代码

<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
</style>

注意点:
- 这三个属性的取值省略时的规律
- 上右下左 > 上右下 > 左边的取值和右边的一样
- 上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
- 上右下左 > 上 > 右下左边取值和上边一样
外边距的那一部分是没有背景颜色的
外边距合并现象
默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象</title>
    <style>
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
        div{
            height: 100px;
            border: 1px solid #000;
        }
        .hezi1{
            margin-right:50px;
        }
        .hezi2{
            margin-left:100px;
        }
        .box1{
            margin-bottom:50px;
        }
        .box2{
            margin-top:100px;
        }
    </style>
</head>
<body>
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>

margin-top问题
如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来
如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性
在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)
示例代码

<style>
        .big{
            width: 500px;
            height: 500px;
            background-color: red;
            /*不设置边框, big也会被small的顶部外边距顶下去*/
            border: 5px solid #000;
        }
        .small{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top:150px;
            margin-left:150px;
        }
    </style>

text-align:center;和margin:0 auto;区别
text-align: center; 是设置盒子中存储的文字/图片水平居中
margin:0 auto;是让盒子自己水平居中
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-盒子居中和内容居中</title>
    <style>
        .father{
            width: 800px;
            height: 500px;
            background-color: red;
            /*文字图片会居中*/
            /*text-align: center;*/
            /*盒子自身会居中*/
            margin:0 auto;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="father">
    我是文字<br/>
    ![](images/girl.jpg)
    <div class="son"></div>
</div>
</body>
</html>

盒模型

什么是CSS盒模型?
CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48-CSS盒子模型</title>
    <style>
        span,a,b,strong{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 6px solid #000;
            padding: 20px;
            margin: 20px;
        }

    </style>
</head>
<body>

<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>

</body>
</html>

盒模型宽度和高度
内容的宽度和高度
就是通过width/height属性设置的宽度和高度
元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度同理可证
规律
增加了padding/border之后元素的宽高也会发生变化
- 如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高
元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度同理可证

box-sizing属性

CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
box-sizing取值
content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
border-box
元素的宽高 = width/height的宽高
增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度
示例代码

<!--增加padding/border之后元素宽高会变大-->
<style>
.box1{
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

<!--增加padding/border之后元素宽不会变大-->
<style>
.box1{
 box-sizing: border-box;
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
    border: 20px solid #000;
    padding: 20px;
}
</style>

CSS基础-浮动流

浮动

网页的布局方式

什么是网页的布局方式?
- 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)排版方式
- 其实浏览器默认的排版方式就是标准流的排版方式
- 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
- 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
  - 垂直排版, 如果元素是块级元素, 那么就会垂直排版
  - 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
浮动流排版方式
- 浮动流是一种”半脱离标准流”的排版方式
- 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:
- 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中是不可以使用margin: 0 auto;
特点:
- 在浮动流中是不区分块级元素/行内元素/行内块级元素的
- 无论是块级元素/行内元素/行内块级元素都可以水平排版
- 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
- 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
定位流排版方式

浮动元素的脱标

什么是浮动元素的脱标?
- 脱标: 脱离标准流
- 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
浮动元素脱标之后会有什么影响?
- 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

浮动元素排序规则

浮动元素排序规则
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

<style>
         .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
</style>

不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: right;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
</style>

浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

<style>
        .box1{
            float: left;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .box3{
            float: left;
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        .box4{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
</style>

浮动元素贴靠现象

什么是浮动元素贴靠现象?
- 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
- 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

浮动元素字围现象

什么是浮动元素字围现象?
- 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

div{
    float: left;
    width: 100px;
    height: 100px;
    /*background-color: red;*/
    border: 1px solid #000;
}
p{
    width: 500px;
    height: 500px;
    background-color: yellow;
}

应用场景
- 图文混排

CSS基础-清除浮动

清除浮动

盒子高度问题

在标准流中内容的高度可以撑起盒子的高度

<style>

        div{
            background-color: red;
        }

        p{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>

在浮动流中浮动元素内容的高不可以撑起盒子的高

<style>

        div{
            background-color: red;
        }

        p{
            float: left;
            width: 200px;
            height: 100px;
            background-color: blue;
        }

</style>

<div>
    <p></p>
</div>

清除浮动方式一

给前面的父盒子添加高度
示例代码:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加高度前:
添加高度后
注意点:
- 在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

利用clear:both;属性清除前面浮动元素对我的影响
示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*这里*/
            clear: both;
            /*margin无效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加clear: both;前:
添加clear: both;后
注意点:
- 使用clear:both之后margin属性会失效, 所以不常用

清除浮动方式三

在两个有浮动子元素的盒子之间添加一个额外的块级元素
示例代码:


<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用额外块级元素实现margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>

<!--这里-->
<div class="wall h20"></div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加额外块级元素前
添加额外块级元素后
注意点
- 在外墙法中可以通过设置额外标签的高度来实现margin效果
- 搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

在前面一个盒子的最后添加一个额外的块级元素
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
    <!--这里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加额外块级元素前
添加额外块级元素后
注意点:
- 内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
- 和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

什么是overflow:hidden?
- overflow:hidden的作用是清除溢出盒子边框外的内容
示例代码

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

<div class="test">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

添加overflow:hidden前
添加overflow:hidden后

如何利用overflow:hidden;清除浮动
- 给前面一个盒子添加overflow:hidden属性
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加overflow:hidden;前
添加overflow:hidden;后
注意点:
- 由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
- IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个*zoom:1;
  - 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
- 优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
*zoom:1;和_zoom:1的区别
- 这个是hack写法，用来识别不同版本的IE浏览器
- _后面的属性只有IE6能识别
- *后面的属性 IE6 IE7能识别

清除浮动方式六

给前面的盒子添加伪元素来清除浮动
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加伪元素前
添加伪元素后
注意点:
- 本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

给前面的盒子添加双伪元素来清除浮动
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }

        /*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加双伪元素前
添加双伪元素后
注意点:
- 添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
- 先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
- 支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
- 不支持 BFC的浏览器（IE5-7），通过触发 hasLayout 闭合浮动。

CSS基础-定位

定位

相对定位

什么是相对定位?
- 对定位就是相对于自己以前在标准流中的位置来移动
格式:
- position: relative;
示例程序

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .box3{
            background-color: blue;
        }
<style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

相对定位注意点:
- 在相对定位中同一个方向上的定位属性只能使用一个
  - top/bottom 只能用一个
  - left/right 只能用一个
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

相对定位应用场景:

用于对元素进行微调

input{
width: 200px;
height: 50px;
}
img{
width: 100px;
height: 50px;
1
2
position: relative;
top: 20px;

}

1
2

- ![](http://upload-images.jianshu.io/upload_images/647982-faf2a4c295488ed9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ![](http://upload-images.jianshu.io/upload_images/647982-f9fc00e083f01cb8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

配合后面学习的绝对定位来使用

绝对定位

什么是绝对定位?
- 绝对定位就是相对于body或者某个定位流中的祖先元素来定位
格式:
- position: absolute;
示例代码


<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box3{
            background-color: blue;
        }
</style>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

绝对定位注意点:
- 绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
- 如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
  - 相对于body定位会随着页面的滚动而滚动
- 一个绝对定位的元素会忽略祖先元素的padding

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            border: 10px solid #000;
            padding: 30px;
            position: relative;
            box-sizing: border-box;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }
</style>

<div class="box1">
    <div class="box2"></div>
</div>

绝对定位参考点:
- 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
- 如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;
            bottom: 0;
          }
</style>

<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 0;
            bottom: 0;
          }
</style>

<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

绝对定位水平居中
- 1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
- 2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>74-绝对定位水平居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 50px;
            background-color: red;
            position: absolute;
            /*无效*/
            /*margin: 0 auto;*/
            /*有效*/
            left: 50%;
            margin-left:-200px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

绝对定位应用场景:
- 用于对元素进行微调
- 配合后面学习的绝对定位来使用

子绝父相

企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用
为什么要子绝父相?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>71-子绝父相</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 800px;
            height: 50px;
            background-color: red;
            list-style: none;
            margin: 0px auto;
            margin-top: 100px;
        }
        li{
            width: 100px;
            /*height: 50px;*/
            line-height: 50px;
            float: left;
            background-color: gray;
            text-align: center;
        }
        .li03{
            background-color: darkgray;
            position: relative;
        }
        ul li img{
            /*
            缺点以前的位置仍然被占用, 不能让文字居中对齐
            */

            /*position: relative;
            left: -35px;
            top: -15px;*/

            /* 浏览器调整之后位置会发生变化*/

           /* position: absolute;
            top: 95px;
            left: 535px;*/

            position: absolute;
            left: 37px;
            top: -5px;

        }
    </style>
</head>
<body>
<ul>
    <li>服装城</li>
    <li>美妆馆</li>
    <li>京东超市</li>
    <li class="li03">全球购![](hot.png)</li>
    <li>闪购</li>
    <li>团购</li>
    <li>拍卖</li>
    <li>江哥</li>
</ul>
</body>
</html>

相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流

固定定位

什么是固定定位?
- 固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
格式:
- position: fixed;
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>74-固定定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 100px;
        }
        a{

            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 25px;
            text-decoration: none;
            text-align: center;
            color: #000;

            position: fixed;
            right: 10px;
            bottom: 10px;
        }

    </style>
</head>
<body>
<p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>

<a href="#">^<br>顶部</a>

</body>
</html>

固定定位注意点:
- 固定定位的元素是脱离标准流的, 不会占用标准流中的位置
- 由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
- IE6不支持固定定位
固定定位应用场景:
- 网页对联广告
- 网页头部通栏(穿透效果)

静态定位

什么是静态定位?
- 默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流
静态定位应用场景:
- 一般用于配合JS清除定位属性

z-index属性

什么是z-index值?
- 用于指定定位的元素的覆盖关系
定位元素的覆盖关系:
- 默认情况下定位的元素一定会盖住没有定位的元素
- 默认情况下写在后面的定位元素会盖住前面的定位元素
- 默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
- 定位元素的从父现象
  - 父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
  - 父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

z-index应用场景
- 控制界面上的定位元素的覆盖关系, 例如网页中后面的定位元素不能覆盖前面的导航条通栏

李南江3：CSS学习

CSS基础-体验CSS

CSS起源

体验CSS

CSS格式

CSS基础-CSS常见属性

CSS常见属性

文字属性

font-style

font-weight

font-size

font-family

字体属性补充

文字属性缩写

文本属性

text-decoration

text-align

text-indent

颜色属性

CSS基础-CSS选择器

CSS选择器

标签选择器

id选择器

类选择器

id选择器和类选择器

后代选择器

子元素选择器

后代选择器和子元素选择器

交集选择器

并集选择器

兄弟选择器

相邻兄弟选择器

通用兄弟

序选择器

属性选择器

通配符选择器

CSS基础-CSS三大特性

CSS三大特性

继承性

层叠性

优先级

优先级权重

!important

CSS基础-CSS显示模式

Div和Span标签

CSS元素显示模式

CSS元素显示模式转换

CSS基础-背景和精灵图

背景相关属性

背景颜色

背景图片

背景平铺

背景定位

背景属性连写

背景关联

插入图片和背景图片的区别

css精灵

CSS基础-盒模型

盒模型

边框属性

内边距属性

外边距属性

盒模型

box-sizing属性

CSS基础-浮动流

浮动

网页的布局方式

浮动元素的脱标

浮动元素排序规则

浮动元素贴靠现象

浮动元素字围现象

CSS基础-清除浮动

清除浮动

盒子高度问题

清除浮动方式一

清除浮动方式二

清除浮动方式三

清除浮动方式四

清除浮动方式五

清除浮动方式六