HTML学习笔记（五）

第十二章 CSS三大属性

1.什么是继承性？

作用：给父元素设置一些属性，子元素也可以使用，这个我们称之为继承性

注意点：1.并不是所有的属性都可以继承

              只有以color/font-/text-/line-开头的属性才可以继承

               2.在CSS的继承性中不仅仅是儿子可以继承，只要是后代都可以继承

2.什么是层叠性

作用：层叠性就是CSS处理冲突的一种能力

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

3.什么是优先级？

作用：当多个选择器选中同一标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级确定

优先级判断的三种方式：

1.间接选中就是指继承

如果是间接选中，那么就是谁离目标标签比较近就听谁的

2.相同选择器（直接选中）

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

3.不同选择器（直接选中）

如果都是直接选中并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠

id>类>标签>通配符>继承>浏览器默认

div作用：一般用于配合CSS完成网页基本布局

span作用：用于配合CSS修改网页中的局部信息

div会单独占领一行，span不会单独占领一行

容器级的标签中可以嵌套其他所有的标签，文本级的标签只能放文字，图片，超链接

块级元素：独占一行，如果没有设置宽高那么就默认和父元素一样宽 block

行内元素：不会独占一行，如果没有设置宽高就默认和内容一样宽 inline

行内块级元素:为了能让元素既能不独占一行，又可以设置宽高引进的一种新结构

如何转换CSS元素的显示方式

设置display属性

display属性取值：block块级元素

                              inline行内元素

                              inline-block行内块级元素

什么是CSS精灵图？

CSS精灵图是一种图像合成技术，可以减少请求的次数，降低服务器的压力。

注意：CSS精灵图需要配合背景图片和背景定位来作用

什么是边框

边框就是在标签宽度和高度周围的线条

边框属性的格式

1.连写（同时设置四条边的边框）

border：边框的宽度 边框样式 边框颜色

快捷方式：bd+

注意点：1.连写方式中颜色属性可以省略，省略以后默认为黑色

             2.连写格式中样式不能省略，省略以后就看不到边框了

            3.连写格式中宽度可以省略，省略之后还是可以看到边框

2.连写（分别设置）

border-top:边框的宽度 样式 颜色

boder-right:边框的宽度 样式 颜色

border-bottom:边框的宽度 样式 颜色

border-left:边框的宽度 样式 颜色

2.3 连写

border-width:上右下左

border-style:上右下左

border-color:上右下左

3.这三个属性省略的规律

3.1 上右下左>上右下>左边的取值和右边一样

3.2上右下左>上右>左边的取值和右边一样，下边的取值和上边一样

3.3上右吓左>上>右下左取值和上边一样

4.什么是内边框

边框与内容之间的距离

格式

4.1非连写

padding-top:；

padding-right:；

padding-bottom:；

padding-left:；

4.2连写

padding: 上右下左

5.外边距

标签和标签之间的距离

5.1 非连写

margin-top：；

margin-right：；

margin-bottom：；

margin-left：；

5.2.连写

margin: 上有下左；

注意：在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的

6.CSS盒子模型

CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子

1.内容的宽度和高度：就是通过标签的width和height属性设置的宽度和高度

2.元素的宽度和高度：宽度=边框+左内边距+width+右内边距

                                   高度=边框+上内边距+height+下内边距

3.元素空间的宽度和高度：宽度=左外边距+边框+左内边距+width+右内边距+右外边距

                                         高度=上外边距+边框+上内边距+height+下内边距+下外边距

7.box-sizing属性

1.CSS新增了一个box-sizing属性，这个属性可以保证我们的盒子在新增padding和border之后，盒子元素的宽度和高度不变

2 box-sizing属性时如何保证增加padding和border之后盒子元素的高度和宽度不变的和前面学习的原理一样，增加padding和border之后要保证盒子元素宽高不变，那么必须减去一部分内容的宽度和高度

3.box-sizing：取值有content-box 元素宽度/高度=边框+内边距+内容宽度/高度

                                   border-box  元素宽度/高度=width/height

注意：如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边框外边面的盒子也会被顶下来

        如果外面的盒子不想被一起顶下来那么可以给外面的盒子添加一个边框属性

     在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次在考虑margin,margin本质用于控制兄弟之间的间隙的

margin：0 auto;只对水平有效，对垂直无效

8.什么是行高？

在CSS中所有的行都有自己的行高。

注意点：行高和盒子高不是一个概念

规律：1.文字在行高中默认是垂直居中的

          2.在企业开发中我们经常将盒子的高度和行高设置为一样，那么这样就可以保证一行文字在盒子的高度中时垂直居中的

简而言之，就是要想一行在盒子的高度是垂直居中的，那么就只需要设置这行文字的行高=盒子高即可

         3.在企业开发中如果一个盒子中存储的是文字，那么一般情况下我们会以盒子左边的内边距为基准，不会以右边的内边距为基准

9.什么是网页布局方式

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

1.标准流（文档流/普通流）排版方式

1.1其实浏览器默认的排版方式就是标准流的排版方式

1.2在CSS中将元素分为3类，分别是块级元素、行内元素、行内块级元素

1.3在标准流中的两种排版方式一种是垂直排版，一种是水平排版

如果元素是块级元素，那么就会垂直排版，如果元素是行内元素，那么就会水平排版

2.浮动流排版方式

2.1浮动流是一种“半脱离标准流”的排版方式

2.2 浮动流只有一种排版方式就是水平排版

它只能设置某个元素左对齐/右对齐

注意：1.浮动流没有居中对齐，也就是说没有center这个取值

          2.在浮动流中是不可以使用margin：0 auto的

特点：

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的，无论是块级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述，浮动流中的元素和标准流中的行内块级元素很像

 

10.什么是浮动元素的脱标

1.脱标：脱离标准流

当某个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响

如果前面一个元素浮动了，而后面一个元素没有浮动，那么这个时候前面的一个元素就会盖住后面的一个元素

浮动元素的排序规则

2.1相同方向上的浮动元素，先浮动的元素会显示在前面

后浮动的会显示在后面

2.2.不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动

2.3.浮动元素浮动之后的位置，有浮动之前在标准流中的位置来确定

浮动元素的贴靠现象

1、如果父元素的宽度能够显示所有的浮动元素，那么浮动的元素会并排显示

2、如果父元素的宽度不能显示所有浮动元素，那么会从最后一个元素开始向前贴靠

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

清除浮动方式一

给前面的一个父元素设置高度

注意点：在企业开发中，我们能不写高度就不写高度

所以这种方式用的很少

清除浮动方式二

属性clear ，取值left：不要找左浮动

                    取值right：不要找右浮动

                   取值none：默认左浮动找左浮动，右浮动找右浮动

                   取值both：不要找左边和右边的浮动

清除浮动方式三

隔墙法

1.外墙法

1.1在两个盒子中间添加一个额外的块级元素

1.2给这个额外的块级元素设置clear：both；属性

注意：外墙法让第二个盒子能使用margin-top属性，但是不可以让第一个盒子使用margin-top属性

2.内墙法

2.1在第一个盒子中所有子元素后面添加一个额外的块级元素

2.2给这个额外添加的块级元素设置clear：both；属性

注意：内墙法可以让第二个盒子使用margin-top属性

可以让第一个盒子使用margin-bottom属性

11.什么是伪元素选择器

作用：就是给指定标签的内容前面 添加一个子元素，或者给指定的标签后面添加字一个子元素，可以作为清除浮动的一种方式

格式如：

div（此处还可以是其他任何 标签）：：after（before）{

     /*指定添加的内容*/

     content：“爱你”；

     /*指定添加的内容宽高*/

     width：；

     height：；

     /*指定添加内容的显示方式*/

     display：；

     /*隐藏添加的子元素*/

     visibility：hidden；

}

清除标签方式6

1.overflow：hidden；

作用1）可以将超出标签范围的内容裁剪掉

       2）清除浮动

      3）可以通过overflow：hidden；让里面的盒子设置margin-top之后，外面的盒子不被顶下来。

过渡模块基本使用

过渡三要素

1.必须要有属性发生变化

2.必须要告诉系统是哪个属性需要执行过渡效果

3.必须告诉系统过渡效果持续时长。

注意：多个属性需要执行过渡效果时只要用逗号隔开便好

如下形式：

transition-property: width,background-color;

transition-duration: 5s,5s;

过渡连写格式：

transition：过度属性 过渡时长 过渡速度 过渡延迟

过渡属性即告诉系统是哪个属性需要执行过渡效果 transition-property

过渡时长：即告诉系统执行过渡效果所要花费的时间 transition-duration

过渡速度：transition-timing-function他有四个取值linear，ease,

ease-in,ease-out,ease-in-out

过渡延迟：transition-delay即捕捉到鼠标动作后多长时间开始执行过渡效果

注意点：1）和分开写一样，如果想给多个属性添加过渡效果，也是用逗号隔开即可

格式如下：transition：过度属性1 过渡时长 过渡速度 过渡延迟， 过度属性1 过渡时长 过渡速度 过渡延迟，...;

2）连写的时候，过渡速度和过度延迟可以省略

3）如果多个属性过渡时长，过渡延迟都一样那么可以简写为

transition：all 过渡时长

2D转换模块：

注意点transform：rotate（xxdeg）；

deg表示单位，角度

transform：translate（xx,xx）；

第一个参数表示水平方向

第二个参数表示垂直方向

transform:scale(xx,xx)；

第一个参数表示宽度

第二个参数表示高度

并且参数大于1表示放大，参数小于1表示缩小，参数等于1表示不变

如果高度和宽度缩放比例相同则可以简写成一个参数

transform：rotate（xxdeg）  translate（xx,xx） scale(xx,xx)；

注意点：如果要进行多个转换，用 空格隔开 

2D转换模块会修改元素坐标系，旋转之后再平移则不是在水平方向上平移了

2D转换模型——形变中心点

transform-origin：参数1 参数2；

参数1表示水平方向

参数2表示垂直方向

中间用空格隔开

有三种表示方式

形式一：采用具体像素值来改变2D转换模块的形变中心点

transform-origin: 0px 200px;

形式二：采用百分比来改变2D转换模块的形变中心点

transform-origin: 50% 50%;

形式三：采用表示方位的单词来改变2D转换模块的形变中心点，如水平方向上是

left,center,right;垂直方向上是top,center,bottom

transform-origin: center center;

2D转换模块——旋转轴向

默认情况下，2D转换模块的旋转轴向是Z轴，即正对的自己的那个方向

总结：想要图片围绕那个轴旋转只要在rotate后面加上该轴的大写字母即可

如：rotateX(xxdeg),ratateY(xxdeg),rotateZ(xxdeg),对于围绕Z轴旋转可以省略Z直接写rotate(xxdeg)

X轴是水平方向，即数学中空间坐标系的Y方向

Y轴是垂直方向，即数学中空间坐标系的Z方向

2D转换模块——透视效果

什么事透视：近大远小

perspective:距离参数;距离参数的单位是px

距离越小，围绕X轴和Y轴的效果越明显

注意：透视属性必须添加到需要呈现透视效果的元素的父元素上或者是祖先元素，总之是上级元素，不能是下级元素

如何给盒子添加阴影

box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影

默认情况下是外阴影

快速添加阴影只需要编写三个参数即可：

1.box-shadow:水平偏移 垂直偏移 模糊度;

默认情况下阴影的颜色和盒子内容的颜色一致

如何给文字添加阴影

2.text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；

阴影颜色默认和文字颜色一致

opacity:透明度参数；

参数为0时，完全透明

参数为1时，完全不透明

CSS动画模块

CSS动画模块有三要素

1.告诉系统需要执行哪个动画

animation-name:动画名称；此处的名称可以由编写网页的人员自己随意创建

2.告诉系统我们需要自己创建一个名称为xx的动画

格式如下

@keyframe 动画名称{

     from{

          位置1；

     }

     to{

          位置2；

     }

}

3.告诉系统动画持续的时长

animation-duration：时长参数;

除此之外，动画还有以下几个属性

4.告诉系统多长时间以后再开始执行动画

animation-delay: 2s;默认情况下是0s

5.告诉系统动画需要执行几次，默认是1次

animation-iteration-count: 4;

6.告诉系统动画执行的速度

animation-timing-function: linear;

取值有linear，ease，ease-in,ease-out,ease-in-out

7.告诉系统动画执行是否需要往返运行有两个取值normal 和alternate

normal表示不往返，alternate表示往返

animation-direction: alternate;

8.告诉系统动画当前状态是运行还是暂停

有两个取值running 和paused，通过这个属性可以设置当鼠标悬停/长按..等状态下时动画不同效果之间的切换。

animation-play-state: paused;

通过我们的观察，动画是有一定状态的：

1.等待状态

2.执行状态

3.结束状态

指定动画等待状态和结束状态的样式

共有四个取值：none:不做任何改变

         forwards：让动画结束状态显示动画最后一帧的样式

         backwards：让元素等待状态显示动画第一帧样式

         both：就是结合forwards和backwardsde，让元素等待状态显              示动画第一帧的样子，让动画结束状态显示动画最后一              帧的样式

格式如下：animation-fill-mode:none/forwards/backwords/both ;

定位流分类

1.绝对定位：绝对定位就是相对于body来定位

注意点：1.1.绝对定位的元素是脱离标准流的

              1.2.绝对定位元素是不区分 块级元素/行内元素/行内块级元素的

绝对定位参考点

规律

1.默认情况下，所有绝对定位元素，无论有没有祖先元素，都以body作为参考点

2.如果绝对定位元素有祖先元素，并且祖先元素是定位流，那么绝对定位元素就会以那个祖先元素作为定位参考点（这一条中又包括两个注意点：1.只要是绝对定位元素的祖先元素即可。2.定位指的是绝对定位，相对定位，还有固定定位，静态定位是不可以的）

3.如果绝对定位元素有祖先元素，且有多个祖先元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素作为定位参考点

绝对定位注意点：1.如果一个绝对定位元素是以body作为参考点，并且此时整个网页存在滚动条时，绝对元素会以首屏即首次看到的屏幕大小作为参考点，而不是整个屏幕的大小。

2.一个绝对定位元素会自动忽略祖先元素的padding属性

 

2.相对定位：相对于自己之前在标准流中的位置进行移动

注意点：2.1.相对定位是不会脱离标准流的，会继续在标准流中占用一份空间

             2.2.相对定位中同一个方向（水平/垂直）的定位属性只能用一个

              2.3.由于相对定位是不脱离标准流的，所以在相对定位中是区分                       块级元素/行内元素/行内块级元素的

               2.4.由于相对定位是不脱离标准流的，会继续在标准流中占用一                     份空间，当给相对定位的元素设置margin/padding等属                       性的时候会影响到标准流的布局。

相对定位在企业开发中的应用场景：1.用于对元素进行微调

2.配合后面学到的绝对定位来使用

3.固定定位

4.静态定位