CSS学习笔记

元素显示模式转换

一个模式的元素需要另一个元素

display:block 转换为块级元素

display:inline 转换为行内元素

display:inline-block 转换为行内块

行内块元素

具有块元素和行元素的特点

特点：

1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

2.默认宽度就是它本身内容的宽度（行内元素特点）

3.高度，行高，外边距以及内边距都可以控制（块级元素特点）

CSS背景

background-color 背景颜色 预定义的颜色值/十六进制/RGB代码

background-image 背景图片 url（图片路径）

background-repeat 是否平铺 repeat /no-repeat/repeat-x/repeat-y

background-position 背景位置 length/position 分别是X和Y坐标 可以是方位名词 不分先后。

background-attachment 背景附着 scroll 滚动 fixed固定

背景简写 书写简单

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

背景色半透明

background:rgba(0,0,0,0.3);后面必须是4个值

装饰性的小图片 或者超大的背景图片都是用CSS背景来做的，有点是非常容易控制（另外还有精灵图的使用）

    

    

    

    

    







    

        五彩导航

        五彩导航

        五彩导航

        五彩导航

        五彩导航

    

CSS的三大特性

层叠性，继承性，优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（叠层）另一个冲突的样式，层叠性现主要解决样式冲突的问题。

原则：样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。

口诀：长江后浪推前浪，前浪死在沙滩上。

继承性：

现实中的继承：我们继承了父亲的姓氏。CSS中继承：子标签会继承父标签的某些样式。如文本的颜色和字号，简单就是：子承父业。

继承性可以降低代码复杂性，简化代码，降低CSS样式复杂性。子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性，和文字相关的样式都可以继承）

口诀：龙生龙，凤生凤，老鼠的孩子会打洞。

行高的继承：可以直接写在font里面。行高可以有单位也可以没有单位。如果子元素没有设置行高，则会继承父元素的行高为1.5.此时子元素的行高是当前子元素的文字大小*1.5

body行高1.5 这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高。

 font: 12px/1.5 'Microsoft YaHei';

优先级：

当同一个元素指定多个选择器，就会有优先级的产生。选择器相同，则执行层叠性，选择器不同则根据选择器权重执行。

优先级规则

继承或者*的权重最低了。元素选择器是1，类选择器和伪类选择器是10，ID选择器是100，行内样式是1000，！important无穷大。

看标签到底执行哪一个样式，就先看这个标签有米有直接被选出来。

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

复合权重叠加

把选择器权重直接相加。最后哪个大就显示哪个的。

div ul li 0.0.0.3

.nav ul li 0.0.1.2

a:hover 0.0.1.1

权重越高优先执行。

盒子模型

• 布局网页过程：1.准本好网页相关元素，也就是盒子。2.利用CSS设置好盒子样式，位置。3.往盒子里面放内容。

布局盒子的核心本质就是利用CSS摆盒子。

CSS模型盒子：

• 1.边框，2.外边框，3.内边框，4.实际内容。

border边框：构成一个盒子粗，实，颜色等等

content内容：盒子内容默认与边框左上角靠近。

padding内边距：控制内容与边框距离。

margin外边框：盒子与盒子的距离。

边框border

border-width边框宽粗细，单位PX； border-style边框风格，实线虚线点线等， border-color边框颜色。

• 边框样式：solid 实线；

dashed虚线

dotted点状

• 边框复合写法：

border:1px solid red;(没有顺序)；

border-top:5px solid pink;

bord-left:6px dashed purple;

border-bottom:2px dotted red;

注意边框样式的层叠性。（比较注意就近原则）

• 表格的细线边框：

border-collpase控制相邻单元格的边框（collpase合并的意思）

注意：盒子边框会影响盒子实际大小。

内边距padding

padding-left左内边距;-right右内边距;-top上内边距;-bottom下内边距。

• padding简写：

padding：5px; 一个值代表上下左右都是5像素内边距。

padding：5px 10px; 两个值代表上下内边距是5px，左右是10px。

padding：5px 10px 20px; 3个值上是5px内边距，左右是10px内边距，下是20px内边距。

padding：5px 10px 20px 30px; 4个值就是顺时针上右下左分别是5px 10px 20px 30px.

注意：内边距会影响盒子大小，会撑大盒子。

解决方案：如果保证盒子跟效果大小保持一致，则让width和height减去多出来的内边距大小即可。

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小，会继承父级的。



外边距margin

数值和padding一样的写法

margin-left;margin-right;margin-top;margin-battom;

外边距可以让块级盒子水平居中，但是必须满足两个条件

1. 盒子必须指定宽度（width）；
2. 盒子左右的外边距都设置为auto；

常见写法：

1. margin-left:auto;
2. margin-right:auto;
3. margin:auto;
4. margin:0 auto;

行内元素和行内块元素水平居中，给其父元素添加text-align:center；

    
    
    
    
    



    

        1
    
    

        
2
    

效果如下图 

外边距合并--嵌套块元素塌陷

使用margin定义块元素的垂直外边距时，可能出现外边距塌陷问题。

嵌套块元素垂直外边距塌陷，对两个嵌套块元素（父子关系），父元素有上外边距同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案

1.可以为父级元素定义上边框border，并设置它的边框颜色透明。会变大盒子

border:1px solid transparent;

2.可以为父元素定义上内边距padding:1px  会撑大盒子

3.可以为父元素添加overflow:hidden;不会撑大盒子

清除内外边距

网页元素很多都带有默认的内外边距。布局前要清除网页元素的内外边距。

  * {

           margin: 0;

            padding: 0;

        }

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但转换为块元素或者行内块元素就可以了。

----------------

圆角边框

在CSS3种，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

语法 border-radius:length;

参数单位可以是精确的单位px也可以是百分比。

当是具体数值的时候，一个值就是四个角都是一样的， 如果是多个值的时候记住要顺时针。

    
    
    
    
    



    
一个50%
    
具体数值
    
三个值
    
2个值
    
4个值

效果如下 

------------------------------------------------------------------------------------------------------------------------

盒子阴影

CSS3新增盒子阴影，box-shadow属性为盒子加阴影，默认是外阴影；

box-shadow属性值（盒子阴影）

1. h-shadow 必需。水平阴影的位置，允许负值。
2. v-shadow 必需。垂直阴影的位置，允许负值。
3. blur 可选。模糊距离；
4. spread 可选，阴影的尺寸。
5. color 可选。阴影的颜色，请参阅CSS的颜色值。
6. inset 可选，将外部阴影改为内阴影。

注意：默认的是外阴影（outset),但是不可以写这个单词，否则导致阴影无效。盒子阴影不占用空间，不会影响其他盒子排列。

box-shadow：10px 6px 17px 14px black inset;

数值解释：10px的水平阴影； 6px的垂直阴影 ；17px的模糊距离（虚的还是实的）； 14px的尺寸大小； 黑色的；内阴影。

text-shadow文字阴影

1. h-shadow 必需，水平阴影的位置。允许负值。
2. v-shadow 必需，垂直阴影的位置，允许负值。
3. blur 可选。模糊的距离。
4. color 可选。阴影的颜色。

text-shadow:5px 5px 6px rgba(0,0,0,.3)

最后的数字0.3是透明度的意思。

------------------------------------------------------------------------------------------------------------------------

CSS浮动

CSS浮动（float）

传统网页布局本质：用CSS来摆放盒子。把还盒子放到合适的位置。

标准流（普通流/文档流）

所谓标准六，就是标签按照规定好默认方式排列。

1.块级元素会独占一行，从上往下顺序排列。

常用元素：div,hr,p,h1-h6,ul,ol,dl,form,table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常见元素：span,a,i,em等

标准流，浮动，定位三种布局方式都是用来摆放盒子的，盒子摆放到合适的位置，布局自然就完成了。实际开发种一个页面基本都包含这三种布局方式。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框边缘。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

没有给div盒子加浮动的时候，三个div盒子是竖着排的。

给div加float:left如下图。

盒子就横着一排了，没有缝隙。

语法：

选择器{float：属性值；}

属性值有

none元素不浮动（默认）；

left元素向左浮动；

right元素向右浮动；

特点：

1. 脱标 脱离普通标准流的控制移动到指定位置
2. 浮动的盒子不再保留原来的位置
3. 如果多个盒子都设了浮动，则它们会按照属性值-行内显示并且顶端对齐排列。
4. 如果父级元素装不下这么多的盒子，就会另起一行显示。
5. 具有行内块的特点，给行内元素添加就有行内块。（不管行块都一样）

浮动元素经常搭配标准流的父元素。

先用标准流的父级元素排列上下位置，内部子元素采取浮动排列左右位置。

----------------------------------------------------------------------------------------------------------------------

浮动布局注意

1. 浮动和标准流的父盒子搭配。

父元素-------排上下位置

内部子元素 ------排左右

2.一个元素浮动理论基础上其他元素也要浮动。-------达到一排的效果

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。标准流独占一行。

----------------------------------------------------------------------------------------------------------------------

清除浮动--clear

很多父盒子不适合给高度，因为不知道要装多少个子盒子。就用到清除浮动了。

如上如，父级本身没有给高度，但是理想状态应该是子级的高度会撑开父级，是的父级和子级高度一致，但是事实上并没有。这样会造成什么影响呢？就是会影响下面的其他盒子。假如这个时候下面还有一个已经有了高度的footer盒子。那么这个盒子就会跑到大毛二毛地下，大毛二毛就会飘在footer盒子上面。如下图: 

浮动的元素是飘着的，不占有原文档位置的，浮动元素会飘着标准流上面。会对后面元素排版有影响。

1.清除浮动的本质是清除浮动元素造成的影响。

2.如果父盒子本身有高度，则不需要清除浮动

3.清除浮动之后，父级就会根据浮动的盒子自动检测高度，父级有了高度就不会影响下面的标准。

语法：

选择器{clear:属性值}；

在实际工作中几乎只用clear:both;

清除浮动的策略是闭合浮动。

属性值

reft 不允许左侧有浮动元素

right 不允许右侧有浮动元素

both 同时清除两侧浮动影响

清除浮动的四个方法

1.额外标签法----不推荐

也叫隔墙法，在浮动元素末尾添加一个空的标签，也就是盒子。

例如：

注意：添加的这个盒子必须是块级元素，不能是行内元素，不然没有效果。

2.父级添加overflow

overflow:hidden;

overflow:auto;

overflow:scroll;

两个盒子嵌套指定子盒子位置会造成塌陷时用的代码。

无法显示溢出的部分。

3.:after伪类元素

添加在父元素额外标签法的升级版。不同是它不用再写一个标签。在样式上就可以了。

  /*清除浮动*/

        .clearfix:after {

            content: "";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

        .clearfix {

            *zoom: 1;

        }

    
    
    
    
    



    

        
大毛
        
二毛
        

        
    
    

 4.清除浮动---双伪元素清除浮动

这次方法是前后都是生成了一个盒子隔断了。优点：更加简洁。缺点：照顾低版本浏览器。代表网站：小米腾讯等。

代码如下：

      .clearfix:before,

      .clearfix:after {

            content: "";

            display: table;

        }

        .clearfix:after {

            clear: both;

        }

        .clearfix {

            *zoom: 1;

        }

常见网页布局：主要分模块。如：top  banner  main footer left right...

案例

浮动--小米布局案例1https://blog.csdn.net/YuKing_HONG/article/details/127384916?spm=1001.2014.3001.5501

pink老师:浮动--小米布局案例2https://blog.csdn.net/YuKing_HONG/article/details/127404831?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127404831%22%2C%22source%22%3A%22YuKing_HONG%22%7D

常见网页布局https://blog.csdn.net/YuKing_HONG/article/details/127413261?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127413261%22%2C%22source%22%3A%22YuKing_HONG%22%7D

关于权重

使用布局时候注意权重问题，如果权重低了样式不显示，就提权，在前面加一个父级类名如：

.box li{ } 权重11

.box last{ } 权重20

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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...

学成在线案例代码和资料见下面链接

pink老师课程-学成在线案例资料https://blog.csdn.net/YuKing_HONG/article/details/127529250?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127529250%22%2C%22source%22%3A%22YuKing_HONG%22%7D

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

定位

将盒子定在某一个位置或者固定屏幕中某个位置并且可以压住其他盒子。

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定该元素的最终位置。

1.1 定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为4个：

   position: static;静态定位

  position: relative;相对定位

   position: absolute;绝对定位

   position: fixed;固定定位

1.2 边偏移

边偏移是定位的盒子移动到最终位置有top\bottom\left\right四个属性

以上四个属性只存在定位中，浮动是不能用的。

1.3 static;静态定位

无定位的意思，很少用到，它没有边偏移。

语法：选择器{ position: static; }

注意：

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

1.4 relative;相对定位

相对定位是元素在移动位置的时候，是相对它原来的位置来说的。和父级没关系。（自恋型）

语法：选择器{ position: relative;}

注意：相对定位的盒子，移动之后原来的标准流的位置继续占有，后面的盒子也仍然以标准流的方式对待它。（不脱标继续保留原来位置）

 如下，根据上面的代码还没有给边偏移的时候，也就是没定位呢，这个时候盒子是标准流的形式上下排列的。

当我们给第一个DIV紫色盒子加      top: 300px;  left: 300px; 之后。出现下面图片的效果。能看出来，第一个DIV的紫色盒子它发生了偏移了，位置移动了但是它原来的位置还占有着，下面第二个DIV蓝色盒子并没有顶上去。 

1.5 absolute;绝对定位

元素移动位置的时候，它是相对它祖先元素来说的（拼爹型）

语法：选择器{ position: absolute;}

注意

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document）。
• 如果祖先元素有定位（相对绝对固定），则以最近一级的有定位祖先元素为参考点移动位置。
• 绝对定位不占有位置，不占有原先位置（脱标）。
• 如果盒子即有left属性又有right属性则默认会执行left属性。

在没有写绝对定位的时候，蓝色盒子和紫色盒子是标准流上下排的。

当给紫色盒子添加相对定位的时候，可以发现，蓝色盒子上上升占有了紫色盒子的原来位置。 

当给父级div也设置绝对定位后，紫色盒子发生下面的效果 

1.6 子绝父相的由来

子级是绝对定位的话，父级要用相对定位。

• 子绝是子级是绝对定位，不占有位置。可以放在父盒子里面任何一个位置不会影响其他兄弟盒子。
• 父盒子需要加定位限制盒子在父盒子内显示，父盒子是相对定位。

总结;因为父级盒子需要占有位置，因此相对定位，子盒子不需要占有位置则绝对定位。例如轮播图和左右播放切换按钮。

1.7固定定位fixed（重要）

固定定位是元素固定于浏览器的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：选择器{ position: fixed;}

• 以浏览器可视窗口作为参考移动元素
• 跟父级元素没有任何关系，不随滚动条滚动
• 固定定位不占原先位置（脱标）

固定定位小技巧：固定在版心右侧位置。

（1）.让固定的盒子left:50%;走到浏览器可视区域（也可以看作是版心位置）的一半位置。

（2）.让固定定位的盒子margin-left:版心宽度的一半距离；多走版心宽度的一半位置就可以了。这样固定定位的盒子贴着版心右侧对齐了。

left:50%;

margin-left:版心一般距离；

.duding{

    position: fixed;

    left: 50%;

    bottom: 280px ;

    margin-left: 612.5px;

}

 

1.8粘性定位sticky(了解)

粘性定位可以被认为是相对定位和固定定位的混合。sticky粘性的。

语法：选择器{ position: sticky;}

粘性定位的特点

• 以浏览器的可视窗口为参照点移动元素。（固定定位的特点）
• 粘性定位占有原先的位置（相对定位的特点）
• 必须添加top\left\right\bottom其中一个才有效

可以使用在导航上，使导航一直在顶处，但是兼容不强。浏览器可能存在不支持的情况

1.9定位的总结

一定记住相对定位、固定定位、绝对定位两个大特点：1.是否占有位置（脱标否）2.以谁为基点移动位置。3.子绝父相，这一定要记住。

定位特性

• 行内元素添加绝对/固定定位可以直接设置高度和宽度
• 块级元素添加绝对定位/固定定位如果不给宽高度默认大小是内容大小
• 脱标的盒子不会触发外边距塌陷，浮动元素、绝对/固定定位都不会。

1.10 定位叠放次序z-index;

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）

语法 选择器{z-index:1;}

• 数值可以是正数也可以是负数和0，默认值是auto，数值越大盒子越靠上。
• 如果数值相同，则按书写顺序叠加，后来居上。
• 注意数字不加单位。
• 只有定位的盒子才有z-index属性。

1.11定位的拓展

（1.）绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实线水平居中和垂直居中。

水平居中

left:50%;/*父容器的一半宽度*/

margin-left:-自己宽度的一半宽度；/*负值往左边走自己盒子宽度的一半*/

垂直居中

top:50%;

margin-top:-自己的一半高度；

最大的有点就是活的，会根据父级浏览器的大小改变。

（2.）定位特殊性

绝对定位和固定定位也和浮动类似

• 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度；
• 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小的内容的大小。

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

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

（4.）绝对定位或固定定位会完全压着盒子。

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

 

（5.）淘宝焦点图---pink老师案例 

淘宝焦点图---pink老师案例 https://blog.csdn.net/YuKing_HONG/article/details/127732499?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127732499%22%2C%22source%22%3A%22YuKing_HONG%22%7D

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

网页布局总结

通过盒子模型，清楚知道html标签是一个盒子。

通过CSS浮动，定位可以让每一个盒子排列成网页。

一个完成的网页是标准流，浮动，定位一起完成布局的，每一个都有自己的专门用法。

1.）标准流

可以让盒子上下排列或者左右排列，垂直的块盒子显示用标准流布局。

2.）浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

3.）定位

定位最大的特点就是有要给层叠的概念。就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

1.12元素显示与隐藏

（1）常用的方法

本质：让一个元素在页面种隐藏或者显示出来。

<1.> display:none;隐藏元素,而且不占有原来位置。

display:block;除了转换成块级元素外还有显示元素。

重点，后面应用及其广泛。

<2.>visibility:inherit ；继承上一个对象的可见性

visibility:visible;对象可视

visibility:hidden；对象隐藏

visibility:collapse;主要用来隐藏表格行和列

visibility：hidden;隐藏元素后，占有原来的位置。

<3.>overflow 指定了如果或内容溢出一个元素的框是会发生什么。

• overflow：visible;不剪切内容也不添加滚动条。
• overflow:hidden;超出部分隐藏掉。如果有定位到盒子慎用。
• overflow:scroll;不管超出与否总是显示滚动条。
• overflow:auto;超出是添加滚动条，不超时不加。

一般情况下外面都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果定位的盒子请慎用overflow:hidden 因为它会隐藏多余部分，会影响一些布局。你定位的盒子可能会被隐藏掉。

    
    
    
    
    



    
佩奇
    
乔克
    

        麦当娜曾经是很多人心中的女神，她那充满力量的舞台表现力以及坚持自我的行事风格，为她赢得了无数的赞美。但人到暮年的她，似乎有意抛弃曾经的光环，向不太入流的“网红”行列靠拢了，总会做出一些难登大雅之堂的举动。作为可以载入美国流行音乐史册的歌手，麦当娜曾演唱过很多经典曲目，而今年恰逢她入行40周年，于是就要大张旗鼓地纪念一下。
    

（2）土豆网鼠标经过显示遮罩---pink老师课程案例

土豆网鼠标经过显示遮罩---pink老师课程案例https://blog.csdn.net/YuKing_HONG/article/details/127736171?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127736171%22%2C%22source%22%3A%22YuKing_HONG%22%7D

（3）文本文字太多时候的处理方法

单行文字溢出省略号显示

overflow:hidden;超出的隐藏。

text-overflow:ellipsis;溢出的用省略号显示。

white-space:nowrap;溢出不换行。

    
    
    
    
    



    

        虽然，我们的现代技术允许我们去打开秦始皇陵墓，但是并不能保证我们也能给他们很好的后续保护。秦兵马俑就是很好的一个例子，现在我们看到的兵马俑，已经不是它们原本的样子了。
    

 效果如下

文字多行省略

多行文字溢出显示省略号，于较大的兼容性问题，适合webkit浏览器或者移动端（移动端大部分是wekbit内核）

            overflow:hidden;

            white-space:nowrap;

            text-overflow:ellipsis;

          /*弹性伸缩盒子模型显示*/

            display: -webkit-box;

            /*限制在一个块级元素显示文本的行数*/

            -webkit-line-clamp: 5;

            /*设置检索伸缩盒子对象的子元素的排列方式*/

            -webkit-box-orient: vertical;

    
    
    
    
    




    

        虽然，我们的现代技术允许我们去打开秦始皇陵墓，但是并不能保证我们也能给他们很好的后续保护。秦兵马俑就是很好的一个例子，现在我们看到的兵马俑，已经不是它们原本的样子了。
    

建议

实际工作中更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

CSS高级技巧

1.精灵图片的使用--sprites

精灵图又叫雪碧图。精灵图技术主要是针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。

• 精灵技术主要针对于背景图片使用；
• 这个大图片也称作sprites精灵图；
• 移动背景图片位置，使用background-position;
• 移动的距离就是这个目标图片的x轴和y轴坐标。注意网页的坐标有所不同。向左是负值，向上是负值，其他是正值；
• 一般情况下向左向上移动都是负值；
• 需要精确测量每一个小背景图片的大小和位置。

当我们给元素添加背景图片时候，图片默认是贴着左上角对齐的，所以用到位置来设置。

.box{ background:url(images/sprites.png);

background-position:-182px  0;
}

上面代码可以简写合并

background:url(images/sprites.png) no-repeat -182px 0;

background: url(images/sprites.png) no-repeat -182px 0;

精灵图片练习，注意向上移送是负值，向左移动是负值。

最终效果如下

display:inline-block引发的间隙问题解决办法

display:inline-block引发的间隙问题解决办法https://blog.csdn.net/YuKing_HONG/article/details/127750635?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127750635%22%2C%22source%22%3A%22YuKing_HONG%22%7D

精灵图练习---pink老师课程

精灵图练习---pink老师课程https://blog.csdn.net/YuKing_HONG/article/details/127751199

字体图标

字体图标

字体图标iconfont主要用于网络中常用的一些小图标。展示的是图标本质是字体的。

推荐字体图标的下载

• 阿里图标
• icomoon 这个已经不免费了。

介绍一下阿里图标

 这里有介绍，一些我作为新手遇到问题

阿里图库字体使用方法---新手适合看https://blog.csdn.net/YuKing_HONG/article/details/127755771?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127755771%22%2C%22source%22%3A%22YuKing_HONG%22%7D

CSS三角

如果一个盒子没有大小高度 ，给边框不同的颜色会生成以下样子。

 如果其他的边框设为透明，只留一个边框就可以做三角形了。这个三角形的大小由边框粗细决定。

 line-height: 0;

   font-size: 0;

 这两行代码是用来兼容低版本的浏览器的。

 

 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS用户界面的样式

什么是用户界面样式

所谓的界面样式就是更改一些用户操作样式，一边提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表达域拖拽

4.1鼠标样式cursor---光标

cursor:pointer;光标是小手

cursor:default;小白（默认）

cursor:move;移动

cursor:text;文本光标

cursor：not-allowed;禁止图标

 练习代码

    
    
    
    



    

        
默认就是一个舱室
        
小手尝试就是新进
        
移动不过就是这样说
        
 文本不知道怎么搞就是想舱室
        
禁止啊就是这么没有感情的
    

4.2轮廓线outline

表单文本域默认有光标点击后会有蓝色的边框需要去掉。

给表单加outline:0;或者outline:none;之后就可以去掉表单默认的蓝色边框了。

    

4.3防止拖拽文本域resize:none;

文本域再留言框的时候并不需要右下角的拖拽文本功能，可以这样写样式去掉它。

textarea {resize:none;}

注意，文本域textarea 如果是分行写结束符会在实际页面中文本 不会定在左上角开始，而是空白区域。所以主要写在一行代码上。

vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

vertical-align:

解决图片底部默认空白缝隙的问题

bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法：

• 给图片添加vertical-align:middle|top|bottom等。（提倡使用的）；
• 把图片转换为块级元素，display-block;

----------------------------------------------------------------------------------

常见的布局技巧

做五个紧挨着一排的框，并且边框颜色为灰色，大小为1px。当鼠标放到其中一个框的时候边框颜色变成红色。

margin负值运用紧挨着的框线处理.

1.margin-left:-1;边框重叠的时候使用，这样紧挨着的边框就不会变粗了。让每个盒子向左移动-1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

    
    
    
    
    



    

        

            
1
            
2
            
3
            
4
            
5
        
    

------------------------------------------------------------------------------------------------------------------------------2022.11.16

文字围绕浮动元素巧妙运用

巧妙运用浮动元素不会压住文字的特性

核心原理就是让文字直接占满父盒子，然后让图片的盒子添加浮动后，文字就会围绕图片的盒子了。然后可以设置父盒子的内边距，图片盒子外边距美化。

    
    
    
    
    




    

        

            
        
        

            根据我市地铁远景规划设想，深圳地铁8号线、19号线未来也拟延伸至惠州
        
    

行内块巧妙运用

 页码的布局就运用到了。

为啥用行内块做呢？观察可以看到页面之间有大小，而且每个页码之间还有距离，又是居中的。如果用li就比较麻烦。用行内块就比较方便。因为行内块本身就有大小，本身默认就有小距离，还能通过 text-align: center;设置居中对齐。

    
    
    
    
    



    

        <<上一页
        28
        38
        48
        58
        68
        ...
        >>下一页
        到第
        页
        确定
    

CSS三角巧妙运用———三角强化

如下

 用定位把三角形移动到矩形那里再改变颜色

    
    
    
    
    





    

    
    

        ¥1652
            
        
        ¥5023
    

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：cSS初始化就是指重新设置浏览器的样式（CSS reset）

 每一个网页都必须首先进行CSS初始化。

京东的CSS初始化解读

CSS提高

HTML5新特性

HTML5的新增特性主要针对于以前的不足，增加了一些新的标签，新的表单和新的表单属性等。

这些新特性都有兼容性的问题，基本是IE9+以上版本的浏览器才支持，如果不考虑兼容性的问题，可以大量使用这些特性。

声明：

1.新特性增加了很多，但是我们专注于开发常用的新特性。

2.基础班我们讲解部分新特性，到了就业班继续讲解其他新特性。

1.1 HTML5新增的语义化标签

：头部标签

    

：导航标签

    

：内容标签

    

：定义文档某个区域

    

：侧边栏标签

    

：尾部标签

    
    
    
    
    



    
头部标签
    
导航标签

    

        
内容标签
        
侧边烂标签
    

    
底部标签

注意：

• 这种语义 标签主要是针对搜索引擎的
• 这些标签页面中可以使用多次
• 在IE9中需要把这些元素转换为块级元素
• 其实我们移动端更喜欢使用这些标签
• HTML5还增加了很多其他标签，我们后面再慢慢学

1.2HTML5新增的多媒体标签

新增的多媒体标签主要包含两个：

1.音频：

2.视频：

(1)视频

当前

可以看到MP4几乎支持所有的浏览器，所以推荐使用。

语法

 

如果你的浏览器不支持mp4，就用上面这样这种代码写法。

video标签常见属性

除了宽高，其他属性写在标签里面，写再CSS里面不生效。

• autoplay="autoplay" 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
• controls="controls" 向用户显示播放控件
• loop="loop" 播放完是否继续播放，循环播放
• muted="muted" 静音播放
•  poster=“图片地址” 加载等待的画面图片
• src="视频地址" 视频url地址
• preload="auto/none" 规定是否预加载视频（如有了autopaly就忽略该属性）
• width="" 设置视频播放器的宽度
• height=“” 设置视频播放器的高度

2.音频：

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。

当前

 

• src=“音频链接”   需要的音频URL
• autoplay="autoplay"  音频再就绪后马上播放
• controls="contrlos"  向用户展示控件，比如播放按钮
• loop="loop"   当音频结束时候重新播放，循环播放

注意

谷歌浏览器把音频和视频自动播放禁止了

3.多媒体标签总结

• 音频标签和视频 标签使用方法基本一致
• 浏览器支持情况不同
• 谷歌浏览器把视频音频的自动播放禁止了，视频可以添加muted属性来静音播放，音频不可以（可以通过js解决）
• 视频标签是重点，我们经常设置自动播放，不使用controls控件、循环和设置大小属性。

1.3HTML5新增的input属性

• required="required"  表单拥有该属性表示其内容不能为空，必填。
• placeholder=" 提示文字"  表单提示信息，存在默认值将不显示。改变提示文字颜色可以在样式表里面添加 input::placeholder {  color: cornflowerblue; }
• autofocus="autofocuss"  自动聚焦属性，页面加载完成自动聚焦到指定表单
• autocomplete="on"/"off"  当用户在字段开始键入的时候浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete="on"  关闭是autocomplete="off"，需要在表单内加上属性name值同时成功提交
• multiple="multiple"  可以多选文件提交，比如用在多选文件的时候。

 CSS3的新特性

2.1现状

• 新的CSS3特性IE9以上支持
• 移动端支持优于PC端
• 现阶段主要学习：新增选择器和盒子模型以及其他特性
• 不断改进中
• 应用相对广泛

css3新增选择器

1. 属性选择器
2. 结构伪类选择器
3. 伪类元素选择器

2.2属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器

属性选择器用中括号[]写属性

注意：

类选择器、属性选择器，伪类选择器，权重为10.

2.3结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级元素选择器里面的子元素。书写时候用冒号:

nth-child(n)选择某个父级的一个或多个特定的子元素

    
    
    
    
    



    
    
    
    
    
    
小图标
    
小图标
    
小图标
    
小图标
    
小图标
    
    
我是夏侯惇
    
我是夏侯惇
    
我是夏侯惇
    
    
包含h元素的
    
包含h元素的
    
包含h元素的
    
    

        
第一行
        
第二行
        
第三行
        
第四行
    

 实例如下（个人感觉放到代码里面 运行比较直观）

    
    
    
    
    





    

        
1行看看颜色背景变化
        
2行看看颜色背景变化
        
3行看看颜色背景变化
        
4行看看颜色背景变化
        
5行看看颜色背景变化
        
6行看看颜色背景变化
        
7行看看颜色背景变化
        
8行看看颜色背景变化
    
    

        
1行看看颜色背景变化
        
2行看看颜色背景变化
        
3行看看颜色背景变化
        
4行看看颜色背景变化
        
5行看看颜色背景变化
        
6行看看颜色背景变化
        
7行看看颜色背景变化
        
8行看看颜色背景变化
    

nth-child(n)选择某个父级的一个或多个特定的子元素

• n可以是数字，关键字和公式
• n如果是数字，就是 选择第n个子元素，里面数字从1开始
• n可以是关键词：even偶数，odd奇书
• n可以是是公式：常用公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式如下：

• 2n 偶数
• 2n+1 奇数
• 5n 5 10 15 .五的倍数
• n+5 从第五个开始（包含第五个），到最后
• -n+5 前5个（包含第五个...）

--------------------------------------------------------------------------------------------------------------------------------

nth-of-type()指定类型E的第n个

区别

nth-of-type()会把指定的元素的盒子排上序列号 。先去找匹配E然后再根据E找到第n个孩子

nth-child()会把所有的元素的盒子排上序列号选择先找到第n个孩子然后看看是否和E匹配 

------------------------------------------------------------------------------------------------------------------------------

2.4伪元素选择器（重点）

伪元素选择器可以帮助我们利用css创新标签元素，而不需要HTML标签，从而简化HTML结构。是行内元素

::before    在元素内部的前面插入内容

::after      在元素的后面插入内容

注意

• before和after创建一个元素，但是属于行内元素，可以转化为行内块等来做宽高
• 新创建的这个元素在文档树中找不到的，所以我们称之为伪元素
• 语法：element::before{}
• before和after必须有content属性，你可以空着也要有
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1

伪元素选择器使用场景——阿里图标字体

伪元素选择器使用场景——阿里图标字体https://blog.csdn.net/YuKing_HONG/article/details/127969260?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127969260%22%2C%22source%22%3A%22YuKing_HONG%22%7D

 

2.5CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box、这样我们计算盒子大小的方式就发生改变了。

可以分成两种情况：

（ 1.) box-sizing:content-box 盒子大小为width+padding+border（以前默认的）

（ 2.) box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）

得到的盒子宽度还是100px，padding和border并没有撑开盒子

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.6 CSS其他特性（了解）

图片变模糊

CSS3滤镜filter：

filter CSS3属性将模糊或颜色偏倚等图形效果应用于元素。 

filter:函数( )  例如：filter:blur(5px);blur模糊处理  数值越大越模糊 

CSS3 Calc函数

Calc()此CSS函数让你在声明CSS属性时执行一些计算。

括号里面可以使用+ - * / 来进行计算。

例如：

width:Calc(100%-80px);   永远比父级的宽度小80像素 

CSS3还增加了一些动画 2D  3D等新特性，可以自己了解

2.7CSS3过渡（重点）

过度（transition）是CSS3中具有颠覆性的特征之一，我们可以在不使用fash动画或者js的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

谁做过渡给谁加

过渡动画：是从一个状态渐渐的过度到另一个状态

注意：低版本不支持（ie9下版本）但是不会影响页面布局

我们现在经常和：hover 一起搭配使用。

transition:要过度的属性 花费时间 运动曲线 何时开始;

属性：想要变化的CSS属性，宽高，背景颜色 内外边框都可以。如果想要所有的属性都变化过度，写一个all就可以了。
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以僧林）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间  默认是0s（可以省略）
如果想要写多个属性，可以用逗号,隔开 

CSS3过渡练习——进度条

品优购项目

不写这里了。移步博客

 CSS 2D

4.2  2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法;

  transform: translate(x, y);

            /* 或者分开写 */

            transform: translateX(n);

            transform: translateY(n);

transform最大的有点是不会影响其他元素的位置， transform中的百分比单位是相对于自身元素的 translate:(50%,50%) ,对行内标签没有效果

如下面的两个DIV盒子

 第一个盒子移动了，但是不影响第二个盒子（如下）

 

应用案例

如京东的展示商品时候

当鼠标一进去图片就会向上动，这个效果就可以用transform：translate(x,y)。

利用transform最大的有点是不会影响其他元素的位置。可以方便定位。

例如：要求p盒子居中外面的div盒子。

transform属性居中元素

4.3  2D转换之旋转rotate

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。

语法：transform:rotate(度数)，

重点

1. rotate里面跟度数，单位是deg(注：度的意思)  比如rotate(45deg)
2. 角度为正时候顺数字，负数的时候逆时针
3. 默认旋转的中心点是元素的中心点

案例：

鼠标经过圆形的图片旋转。

body 

 

style 

 

 

 

6.3D转换

6.1立体空间油三个坐标共同组成

x轴:水平向右注意: x 右边是正值，左边是负值

y轴:垂直向下注意: y 下面是正值，上面是负值

z轴:垂直屏幕注意: 往外面是正值，往里面是负值

主要学习3D的 位移和旋转

6.2 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

translform:translateX(100px):仅仅是在x轴上移动

translform:translateY(100px):仅仅是在Y轴上移动

translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)

transform:translate3d(xyz):其中x、y分别指要移动的轴的方向的距离

perspective

perspective用法是用于CSS3中定义3D元素距视图的距离，以像素计。该属性允许改变3D元素查看3D元素的视图。当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身，在使用的时候注意。

另外perspective属性只影响3D转换元素。perspective的语句是perspective：number|none。语句中的number是元素距离视图的距离，以像素计。none是指默认值，与0相同，也就是不设置透视。

perspective指定了观察者与 z=0 平面的距离,就相当于是到你眼睛观察的（屏幕）的距离。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

立方体的收缩由perspective属性定义。它的值越小，视角越深。

 transform-style 

 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面，元素的子元素将不会有 3D 的遮挡关系。这个属性不会被继承。

如果想要元素是3D空间关系，那么记得给他们的父元素添加 transform-style :preserve-3d;

语法:

transform-style :preserve-3d/flat;

flat-----设置元素的子元素位于该元素的平面中。

preserve-3d-----指示元素的子元素应位于 3D 空间中。

animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

animation动画: 通过改变元素的属性值来实现动画效果(直接进行动画，不需要触发）

animation:动画名称 动画持续时间 动画运动方式 动画开始延迟时间 动画应用次数 动画结束后是否按原路返回 动画前后的状态;同时设置多个属性

例: animation:moving 1s ease 1s 6 alternate forwards;

@keyframes ： 定义关键帧动画
例: @keyframes 动画名{
          from{属性: 属性值}
          to{属性:属性值}
          或者是0%~100%   }

animation-duration属性指定一个动画周期的时长，默认值为 0s，表示无动画。一个动画周期的时长，单位为秒 (s) 或者毫秒 (ms)，无单位值无效。

你可以为animation-duration提供多个值，各个值之间使用逗号来分隔。如果你设置了多个值，这些值通常和animation属性相关的其它属性的值一一对应，例如animation-name属性、animation-delay属性和animation-timing-function属性等。 例如，如果你提供了2个animation-duration的值，那么第一个值将决定animation-name中第一个动画的持续时间，第二个值将决定animation-name中第二个动画的持续时间。

例如 animation-duration: 1s, 15s;

旋转木马案例

结果如下