我的前端学习之路之CSS3

小白min
360 阅读14分钟

一、 前端三层

结构层：html 搭建结构、放置部件、描述语义

样式层：css 美化页面、实现布局

行为层：js 实现交互效果、数据收发、表单验证等

二、css3基础

1.css的基本语句构成

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

2.css引入的方式

1.内嵌式

2.外链式

<link rel="stylesheet" href="css/css.css">

3.导入式

<style>@import url(css/css.css);</style> 使用导入式引入的样式表，不会等待css文件加载完毕，而会立即渲染HTML结构

4.外链式与导入式的区别

1.link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用，没有兼容性，支持js改变样式；而@import是CSS提供的，只能用于加载CSS。不支持js改变样式

2、页面被加载的时，link会被同时加载，而@import引用的CSS会等到页面加载完再加载;

三、CSS选择器

1.CSS2.1选择器

1.标签选择器

标签选择器将选择页面上的所有该种标签,无论这个标签所处位置的深浅

标签选择器通常用于标签的初始化

2.id选择器

标签可以有id属性，是这个标签的唯一标识 <p id="para1">我是一个段落</p> id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母. 同一个页面上不能有相同id的标签

3.class选择器

1.多个标签可以为相同类名

2.同一个标签可以用多个类名，中间用空格隔开 <div class="aaa bbb"></div>

4.复合选择器

image.png 5.伪类选择器

image.png a标签的伪类顺序的编写，要遵循爱恨原则 LOVE HATE

2.CSS3新增选择器

元素关系选择器

image.png

序号选择器

image.png

css3新增伪类

image.png 伪元素

1.::before,::after

a::before{content:"★";}

::before 创建—个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容

2.::selection CSS伪元素应用于文档中被用户高亮的部分(使用鼠标圈选的部分)

3.::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母

::first-line会选中某元素中（必须是块级元素）第一行全部文字

伪类和伪元素的区别

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

CSS3中伪类和伪元素的语法不同；

可以同时使用多个伪类，而只能同时使用一个伪元素；

四、层叠性和选择器权重计算

层叠性 多个选择器可以同时作用于同一个标签，效果叠加

层叠性的冲突处理 id权重>class权重>标签权重

权重计算 复杂选择器可以通过( id的个数,class的个数，标签的个数）的形式，计算权重

image.png

！important 如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important .spec {color: blue ! important;}

很多公司不允许使用!important，因为这会带来不经意的样式冲突

五、段落和行相关属性

text-indent属性

该属性定义首行文本内容之前的缩进量，缩进两个字符应该写作text-indent:2em;(em表示字符宽度）

line-height

该属性用于定义行高

可以是px,可以是%，也可以是表示字号的倍数line-height:1.5

单行文本垂直水平居中

垂直居中：设置行高等于盒子的高度

水平居中：text-align:center

font合写属性

font属性可以用来作为font-style,font-weight,font-size,line-height和font-family属性的合写

text-decoration

image.png

六、继承性

文本相关的属性具有继承性

  • color
  • font开头的
  • text开头的
  • list开头的
  • line开头的

所以通常会设置body标签的字号，颜色，行高等，这样就能当做整个页面的默认样式了

就近原则

在继承的情况下，选择器权重计算失效，而是就近原则

image.png

七、盒模型

width和height属性

当块级元素（div、h系列、li等）没有设置width属性时，他将自动撑满，但这并不意味之width可以继承。

盒子的height属性如果不设置，它将自动把内容撑开，如果没有内容，则height默认为0

padding属性

padding:10px 20px 10px;上 左右 下

pading:10px 10px 10px 10px上 右 下 左

padding:10px 10px上下 左右

margain属性

margin塌陷与合并问题

首先，margin塌陷是相对于父子级关系的两个元素，而margin合并是相对两个兄弟级关系的两个元素

两个兄弟级关系的元素﹐垂直方向上的margin ,其外边距会发生重叠现象﹐两者两个的外边距取的是两个所设置margin的最大值﹐就是所说的margin合并问题

两个父子级关系的元素﹐垂直方向上的margin会粘合在一起﹐外层和模型的margin-top取两个元素中margin-top的最大值﹐发生margin塌陷的内层元素相对于整个文档移动

解决方案︰两者都可以通过触发BFC来解决

QQ截图20210506102101.png

竖直方向上的margin不叠加，以大数为主

一些元素有默认的margin

一些元素（margin，ul、p等）都有默认的margin属性值，在开始页面操作的时候，要将他们清除（ * 通配符选择器）

*{
margin:0;
padding:0;
}

盒子的水平居中

margin:0 auto

（注：文本的水平居中：text-align:center;

盒子的垂直居中：需要用定位来进行实现 ）

盒模型计算

标准盒模型和怪异盒模型

标准盒模型：盒子总宽度/高度=width/height+padding+border+margin

怪异盒模型：盒子总宽度/高度=width/height+margin 怪异盒模型盒子的总宽度和高度是包含padding和border在内的

display属性

行内元素和块级元素

display属性类型是否能并排显示是否能设置宽高当不设置width属性时举例
块级元素否是width自动撑满div、section、header h系列、li,ul等
行内元素是否width自动收缩a,span,em,b,u,i等

行内块元素

img和表单元素是特殊的行内块，他们既能设置宽度和高度，也能并排显示

行内元素和块级元素的相互转换

使用display:block即可将元素转换为块级元素

使用display:inline即可将元素转换为行内元素，这种情况不常见

使用display:inline-block即可将元素转换为行内块

元素的隐藏

使用display:none可以将元素隐藏，元素将彻底放弃位置，如同没有写他的标签一样

使用visibility:hidden也可以将元素隐藏，但是元素不放弃自己的位置

八、浮动

作用 主要是为了实现并排

使用

1.要浮动，所有浮动的盒子都要进行浮动

2.父盒子要有足够的宽度，否自子盒子会掉下去

浮动的顺序贴靠

子盒子会按顺序进行贴靠，如果没有足够空间，则会在前找一个兄弟元素进行贴靠

image.png

设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度

BFC规范和浏览器差异

BFC（Box Formatting Context）块级格式化上下文，是页面上的一个隔离的独立容器，容器里面的元素不会影响到外面的元素，反之亦然

如何创建BFC

1.float的值不是none

2.position的值不是static或relative

3.overflow设置为hidden（最为好用的一种办法）

4.display的值设为inline-block,flex,或flex-inline

BFC的作用

BFC可以取消盒子margin塌陷

BFC可以阻止元素被浮动元素覆盖

浏览器差异

IE6、7浏览器使用layout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性，让盒子拥有layout

如果要制作到IE6、7的网页时，尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程

清除浮动

浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

方法

1.让内部有浮动的父盒子形成BFC它就能关闭内部的浮动，此时最好的方法是overflow:hidden属性

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

<style>
  *{
    margin:0;
    padding:0;
  }
  div{
     overflow:hidden
   }
   p{
     float:left;
     width:50px;
     height:50px;
     background-color:orange;
     margin-right:20px;
    }
</style>

2.给后面的父盒子设置clear:both属性，clear表示清除浮动对自己的影响，both表示左右都清除 （不太推荐，用这种方法会使父盒子的失效）

<style>
  .box2{
     clear:both
   }
</style>
此处省略部分代码

3.使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both

<style>
  div::after{
    content:'';
    clear:both;
    **转为块级元素**
    display:block;
   }
 </style>

4.在两个父盒子之间设置一个围墙，给其添加clear:both属性

<div>
  <p></P>
  <p></p>
</div>
**给中间这个div添加clear:both 属性**
<div></div>
<div>
  <p></p>
  <p></p>
</div>

九、定位

相对定位

相对定位的元素，会在原来的位置留下印记，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成影子，不会对页面其他元素产生任何影响

相对定位的用途

相对定位可以用来微调元素位置

相对定位的元素，可以当做绝对定位的参考盒子

绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置

绝对定位脱离文档标准流

绝对定位的元素脱离文档标准流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖

脱离文档标准流的方法

浮动、绝对定位、固定定位

绝对定位的参考盒子

绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子桐城市相对定位的，所以这个性质也叫作“子绝父相”

堆叠顺序z-index属性

没有单位的正整数，数值大的可以压住数值小的

绝对定位的用途

绝对定位用来制作“压盖”、“遮罩”效果

绝对定位用来结合CSS精灵使用

绝对定位可以结合JS实现动画

固定定位

不管页面如何滚动，它的位置都固定不变；只能以页面作为参照点；会脱离标准文档流

用途 返回顶部、楼层导航

拓：垂直水平居中的多种解决方案

已知宽高元素的垂直水平居中

1.绝对定位+margin:auto

实现子元素在父元素内的垂直水平居中
   .father{
            width: 600px;
            height: 600px;
            position: relative;
            border: 1px solid black;
        }
        .son{
            position: absolute;
            margin: auto;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: blue;
            width: 100px;
            height: 100px;
        }

2.绝对定位+负边距

 .father{
            width: 600px;
            height: 600px;
            position: relative;
            border: 1px solid black;
        }
        .son{
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
            background-color: blue;
            width: 100px;
            height: 100px;
        }

未知宽高元素的垂直水平居中

1.flex实现垂直水平居中

2.利用transform中的translate偏移的百分比值是相对于自身大小的特性

（这两点在后面的学习中加以补充）

十、边框与圆角

边框

border:1px solid/dash/dotted red

巧用边框制作三角形

首先，需要把元素的宽度、高度设置为0，然后设置边框样式
width:0;
height:0;
**transparent表示透明的意思**
border-top:40px solid transparent;
border-left:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid red;

圆角

border-radius:10px（左上）20px（右上） 30px（右下） 40px（左下）;

border-radius属性的值也可以用百分比做单位，表示圆角起始于每条边的哪里

如果border-radius:50%;表示的是一个圆形

盒子阴影

box-shadow:inset（内阴影） 10px（x偏移） 20px（y偏移） 30px（模糊量） 40px（阴影扩展） rgba(0,0,0,.4);

box-shadow属性值可以用逗号隔开，表示多个阴影

背景与渐变

背景

background-image属性用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http:// 开头的绝对路径,
background-image: url( images/bg1.jpg);
如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发

background-repeat属性

设置图片的重复模式

值含义
repeatx,y均平铺
repeat-xx轴平铺
repeat-yy轴平铺
no-repeat不平铺

background-size属性

用来设置背景图片的尺寸，兼容到IE9 background-size: 100px（宽度） 200px（高度）;
值也可以用百分数来设置，表示为盒子宽、高的百分之多少
需要等比例设置的值，写auto
contain表示将背景图片智能改变尺寸以容纳到盒子里
cover表示将背景盒子智能改变尺寸以撑满盒子

background-clip 属性 背景裁切

用来设置元素的背景裁切到哪个盒子。兼容到IE9。

值意义
border-box背景延伸至边框（默认值）
padding-box背景延伸至内边(padding)，不会绘制到边框处(仅在dotted、dashed边框可察觉)
content-box背景被裁剪至内容区

background-attachment 背景固定

background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

值意义
fixed自己滚动条不动，外部滚动条不动
local自己滚动条动，外部滚动条动
scroll自己滚动条不动，外部滚动条动（默认值)

css精灵

将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个,这样的技术叫做CSS精灵技术，也叫作CSS雪碧图

css精灵可以减少HTTP请求数，加快网页显示速度。缺点 不方便测量，后期改动麻烦

background综合属性 background:white url() no-repeat center center;

背景渐变

线性渐变

盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景
background-image: linear-gradient(to right/45deg, blue, red);
渐变方向（deg表示度数） 开始颜色 结束颜色

浏览器私有前缀

不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识

品牌前缀
Chrome-webkit-
Firefox-moz
IE、Edge-ms-
欧朋-o-

径向渐变 background-image :radial-gradient(50% 50%（圆心坐标）,red, blue);

过渡与动画

过渡

一个元素在不同样式之间变化自动添加“补间动画”

兼容性

  • 过渡从IE10开始兼容，移动端兼容良好
  • 以前是由js定时器实现的，现在逐步改为CSS3过渡
  • 动画更细腻，内存开销小

四个要素

transition:width 1s linear 0s（什么属性要过渡 动画时长 变化速度曲线 延迟时间）

  • 过渡要定义在元素的开始状态上，而不是结束状态上

哪些属性可以参与过渡

  • 所有数值类型的属性，都可以参与过渡，比如width，height，top,border-radius,opacity
  • 背景颜色和文字颜色都可以被过渡
  • 所有变形（包括2D和3D都能被过渡）
.box5{
  width:200px;
  height:200px;
  background-color:orange;
  margin-bottom:10px;
  transition:transform 1s linear 0s;
}
//2D 变形
.box5:hover{
  transform:scale(1.2) rotate(360deg)
}

//3D 变形
.box6 p{
  width:200px;
  height:200px;
  background-color:orange;
  transition: transform 1s linear 0s;
}
.box6:hover p{
  transform:rotateX(360deg) rotateY(360deg);
}

all
如果所有属性都参与过渡，可以写all
transition:all 1s linear 0s;
不要滥用，会引发效率问题

属性意义
transition-property哪些属性要过渡
transition-duration动画时间
transition-timing-function动画变化曲线
transition-delay延迟时间

过渡的缓动效果

image.png

求扇形

.outer{
   width:0;
   height:0;
   border-width:100px;
   border-style:solid;
   border-color: red transparent transparent transparent;
   border-radius:50%;
}

动画的定义与调用

动画的定义

可以使用 @keyframes来定义动画 keyframes表示关键帧，在项目上线前，要补上@-webkit-这样的私有前缀

@keyframes r{
  from{
    transform:rotate(0);
  }
  to{
    transform:rotate(360deg);
  }

动画的调用

定义动画之后，就可以使用animition属性调用动画
animation:r 1s linear 0s;
后面还可以加第五个参数，表示动画的执行次数

alternate和forwards 如果想让动画的第2,4,6...（偶数次）自动逆向执行，那么加上alternate参数即可
animation:r 2s linear 0s infinite alternate
如果想让动画停止在最后结束状态，那么要加上forwards
animation:r 1s linear 0s forwards

avatar
文章
阅读
粉丝