web前端-3. CSS的基础知识

最新推荐文章于 2023-09-11 12:14:48 发布

weixin_51077152

最新推荐文章于 2023-09-11 12:14:48 发布

阅读量469

点赞数

分类专栏： web前端文章标签：前端 web

本文链接：https://blog.csdn.net/weixin_51077152/article/details/119749186

版权

web前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

3.1.css的介绍

1、css定义

CSS:Cascading Style Sheets 层叠样式表级联样式表简称样式表

2、css的作用

1）实现了内容与表现的分离
内容：HTML
表现：css
2）提高了代码的可重用性和可维护性

3、css文件后缀

.css

4、css语法

属性:属性值;
属性:属性值;
属性:属性值;
html的属性：属性 = "属性值"

5、css的特点

1）继承性后代元素可以继承父元素的样式
2）层叠性一个元素可以设置多个样式当样式冲突时，看优先级
3）优先级当样式冲突时优先级到的样式生效优先级相同时，后写的样式生效

6、css由浏览器解析执行，由上往下，由左往右
7、css的注释

/* 注释的内容 */

8、快速换行

快速换行 ctrl + enter

3.2.HTML中引入css

1）内联方式行内样式 ——只对当前元素生效

利用HTML的style属性引入css style="css的样式"
除了br，其他标签都有的属性
css的语法：属性:属性值;
css的属性：
width:; 设置元素的宽度
height:; 设置元素的高度
background-color:; 设置元素的背景颜色

2）内部方式——只对当前页面生效

利用style标签在head中加style标签
语法：

<head>
     <style>
         选择器{
             属性:属性值;
             属性:属性值;
             属性:属性值;
         }
     </style> 
</head>

选择器的作用：选中写样式的元素 class:类 class除了br，其他元素都有的属性 box：盒子

3）外部方式——实现了内容与表现的完全分离，提高了代码的可重用性和可维护性

步骤：
①新建.css文件
②在HTML的head中用link标签引用
html <link rel="stylesheet" href="css文件"/>

css文件中的语法：
选择器{
    属性:属性值;
    属性:属性值;
    属性:属性值;
}

同一个css文件可以被多个HTML文件引入一个HTML文件可以引入多个css文件

4)导入式

语法：
<head>
    <style>
        @import "css路径"|url("css路径");
    </style>
</head>

@import和link的区别：
1）加载顺序不同，@import先加载HTML文件，再加载css文件，link是同时加载HTML和css文件
2）加载内容不同，@import只能引入css文件，link还可以引入其他内容
<link rel="icon" href="图标的路径"/>
3）兼容性不同，@import有兼容性（IE5以上支持），link没有兼容性
4）@import会增加页面的http请求
5）JavaScript操作DOM时，只能操作link引入的css

3.3.引入方式的优先级

行内样式>内部样式(外部样式) 内部样式和外部样式优先级相同，后写的生效

3.4.基础选择器

选择器的作用：选中页面需要写样式的元素
1）全局选择器通用选择器*{} 选中页面所有元素
2）元素选择器 div{} p{} img{} a{} input{}选中所有指定的元素
3）类选择器:利用的HTML的class属性 .className{} ；className可以重复，一个class可以起多个名字，用空格隔开
a{} 元素选择器合法 .a{} 类选择器合法
b{} 元素选择器合法 .b{} 类选择器合法
c{} 元素选择器不合法 .c{} 类选择器合法
img{} 元素选择器合法 .img{} 类选择器合法
4）ID选择器：利用HTML的id属性
#idName{} ID名字不能重复

3.5.选择器优先级

行内样式>ID选择器>类选择器>元素选择器>全局选择器
权重：1000 100 10 1

3.6.HTML的四大通用属性

除了br，其他所有标签都有的属性
1）title 鼠标悬停给予提示
2）style 引入css的行内样式
3）class 类选择器
4）id ID选择器

3.7.CSS的属性

3.7.1.字体的属性

1、颜色的取值：

1）关键字 red blue
2）十六进制包含0-9 a-f（不区分大小写）
#000000 黑色简写 #000
#ffffff 白色简写 #fff
3）rgb(0,0,0) 黑色取值0-255 rgb(255,255,255) 白色 rgb(255,0,0) 红色
4）rgba() a:表示透明度取值0-1 0：表示完全透明 1：不透明
0.55 等同于 .55 rgba(0,0,0,.5)

2、字体的属性——继承性

1）字体的颜色 color:;

2）字体的大小 font-size:16px;
浏览器默认字体大小为16px 浏览器支持的最小字体为12px

3）字体是否加粗 font-weight:;
取值： normal 默认值，不加粗 bold 加粗 100-900
400 =normal 700 = bold

4）字体样式 font-style:normal|italic;
取值： normal 默认值，不倾斜 italic 倾斜

5）字体 font-family:字体1,字体2,…;
注意：当字体包含空格时，必须加引号，比如"Microsoft YaHei"

3.7.2.文本属性——继承性

1）元素内容的水平对齐方式

text-align:left|right|center;

2)文本装饰

text-decoration:underline|none;
underline:下划线
none：不显示

3）英文字母大小写转换

text-transform:;
capitalize 每个单词首字母大写
uppercase 全部大写
lowercase 全部小写

4）首行缩进

text-indent:;
单位：
px 像素绝对单位
em 相对单位
默认情况下1em = 16px

3.7.3.背景属性

1）背景颜色

background-color:transparent(透明的);
颜色的取值：
①关键字 red
②十六进制
③rgb(0,0,0)
④rgba(0,0,0,.5)

2）背景图片

background-image:url("");
注意：
当背景图片小于容器时，水平垂直平铺
当背景图片大于容器时，显示不完全
注意背景图片和图片元素的区别

3）背景图片是否平铺

background-repeat:;
取值：
repeat 默认值，平铺
no-repeat 不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺

4）背景图片大小

background-size:水平方向大小垂直方向大小;
取值：
px 当只取一个值，等比例缩放
% 当只取一个值，等比例缩放
cover 背景图片会覆盖整个背景区域，但是背景图片可能显示不完全，图片是等比例缩放
contain 背景图片显示完全，扩展至最大，但是背景区域可能覆盖不完全，图片是等比例缩放

5）背景图片定位

background-position:水平方向的位置垂直方向的位置;
默认在左上角当只取一个值时，第二个值默认居中取值：px %
left right center top bottom

6）背景图片固定

background-attachment:scroll（默认值）|fixed(固定);

7）简写

background:背景颜色背景图片背景图片是否平铺背景图片大小背景图片定位背景图片固定;

没有取值的属性取默认值
例如：background:red;
background:url() no-repeat;
当简写属性和单个属性同时存在，简写属性要写在单个属性的上面

3.7.4.列表的属性

1)设置项目符号 list-style-type:none;
2)设置项目符号为图片 list-style-image:url("");
3)设置项目符号的位置 list-style-position:outside|inside;
4)简写 list-style:none;

3.7.5.表格的属性

1）设置元素的宽高 width:; height:;
2）元素内容的水平对齐方式 text-align:left|center|right;
3）表格内容的垂直对齐方式 vertical-align:middle|top|bottom;
4）边框折叠相当于cellspacing=“0” border-collapse:collapse(折叠);
5）表格背景颜色background-color:;
6）表格背景图片 background-image:url();

3.7.6.内容溢出overflow

取值：
hidden 溢出部分隐藏
auto 自动，有溢出内容，显示滚动条，没有溢出内容，不显示滚动条
scroll 滚动，不管内容是否溢出，都显示滚动条

3.7.7.一行文字溢出省略号显示

1）内容在同一行显示 white-space: nowrap;
2）溢出部分隐藏 overflow: hidden;
3）文本溢出省略号显示 text-overflow: ellipsis;

3.8.关系选择器

1）后代选择器空格
选择器1 选择器2{

}
选中所有的后代（包含儿子）

2）子代选择器 >
选择器1>选择器2{

}
选中所有直接子代（只有儿子）

3）相邻兄弟选择器 +
选择器1+选择器2{

}
平级挨着后面的一个兄弟

4）通用兄弟选择器 ~
选择器1~选择器2{

}
平级后面的所有兄弟
5) 合并选择器：
选择器1,选择器2,…{ 公共样式 }

3.9.标准盒模型 W3C盒模型

1）组成部分

content+padding+border+margin
内容内边距边框外边距
玻璃杯泡沫快递盒快递盒之间的距离

2）实际宽度

width+padding+border+margin

3）content 内容区域

width:; 元素的宽度 px %（相对于父元素）
height:; 元素的高度 px %（相对于父元素）

min-width:; 最小宽度
max-width:; 最大宽度
min-height:; 最小高度
max-height:;最大高度

默认情况下，块级元素宽度为100%，行内元素宽度由内容撑开默认高度都由内容撑开
块级元素可以设置宽高，行内元素设置宽高不生效

4）border 边框

border-style:
solid（实线）|dashed（虚线）|dotted（点线）|double（双实线,要求边框至少为3px）|none（不显示）;必须属性默认边框为黑色 3px
border-color:; 边框的颜色
border-width:; 边框的宽度

简写：border:边框的宽度边框的样式边框的颜色; 设置四周的边框
例子：border:1px solid red;

单边的边框：
border-top:1px solid red;
border-top-width:;
border-top-style:;
border-top-color:;
border-bottom:1px solid red;
border-bottom-width:;
border-bottom-style:;
border-bottom-color:;
border-left:1px solid red;
border-left-width:;
border-left-style:;
border-left-color:;
border-right:1px solid red;
border-right-width:;
border-right-style:;
border-right-color:;

5)padding 内边距不可以取负值和auto 设置内容距边框的距离

语法：
padding:value; 四周
padding:value value; 上下左右
padding:value value value; 上左右下
padding:value value value value; 上右下左（顺时针）

单边的内边距：
padding-left:; 左内边距
padding-right:; 右内边距
padding-top:; 上内边距
padding-bottom:; 下内边距

注意：padding会撑大容器

6)margin 外边距可以取正负、auto

设置元素之间的距离 margin是透明的

语法：
margin:value; 四周
margin:value value; 上下左右
margin:value value value; 上左右下
margin:value value value value; 上右下左（顺时针）

单边的内边距：
margin-left:; 左外边距
margin-right:; 右外边距
margin-top:; 上外边距
margin-bottom:; 下外边距

注意：
1）块级元素水平居中 margin:0 auto;
2）外边距合并问题当垂直方向上外边距相撞时，取较大值浮动元素不合并
3）margin-top问题设置margin-top时父元素跟着一起下来，解决办法：
①父元素加overflow:hidden;(自动找到自己的位置)
②父元素或者子元素加浮动
③父元素加border:1px solid transparent;
④父元素加padding-top:1px;

3.10.怪异盒模型 IE盒模型

1、组成部分 content+padding+border+margin
2、实际宽度 width+margin
width 包含了padding和border
3、盒模型之间相互转换
box-sizing:content-box; 默认值标准盒模型
box-sizing:border-box; 怪异盒模型

3.11.居中问题：

1、元素内容水平居中 text-align:center;
2、块级元素水平居中 margin:0 auto;
3、一行文字垂直居中
行高等于高 line-height:; 取值px 数字当前字体大小乘以数字为行高的值
4、多行内容垂直居中
父元素设置padding:20px 0;
5、块级子元素在父元素中垂直居中
父元素设置padding:20px 0;
子元素设置margin：20px 0;

3.12.伪类选择器冒号链接

表示元素的一个状态，比如鼠标悬停、鼠标按下等

:link 点击之前（只适用于a）
:visited 点击之后（只适用于a）
:hover 鼠标悬停（适用于所有元素）*
:active 鼠标按下（适用于所有元素）

先爱（LV）后恨（HA）

css3新增伪类选择器：

:first-child 第一个子元素是…
:last-child 最后一个子元素是…
:nth-child(number|odd(奇数)|even（偶数）|倍数n) 第几个子元素是…
:only-child 唯一一个子元素是…
:empty 空的子元素是…
:not(选择器) 否定

配合表单使用
:focus 获取焦点时的样式
:checked 被选中时的样式

3.13.元素的透明度：opacity:;

取值0-1
0：完全透明
1：不透明

注意opacity和rgba的区别：
opacity设置整个元素的透明度
rgba写在谁上，设置的就是谁的透明的，
比如background-color:rgba() 设置背景颜色透明，
color:rgba()设置字体颜色透明

3.14.浮动

1）原理
浮动后排除到普通流之外
浮动后元素在页面中不占据位置
浮动是碰到父元素的边框或者浮动元素的边框就会停止
浮动不会重叠
浮动只有左右浮动浮动后所有元素转换为块级元素
2）语法 float:left|right|none(默认值);
3)清除浮动的影响
子元素浮动后排除到普通文档流之外，在页面中不占据位置，如果父元素没有设置高度，父元素的高度会坍塌，会对后面的元素产生影响

方法：
①浮动元素的父元素加高（高度已知）
②浮动元素的父元素加overflow:hidden|auto;(自动找高)
③受影响的元素加clear:left|right|both;(浮动元素的父元素高度没有找到)
④空div法(父元素的高度可以找到，但是页面会增加好多空div元素) 浮动元素后面加一个空div
空div{ clear:both; }
⑤伪对象法

3.15.伪对象选择器伪元素选择器

1）在…之前插入

::before|:before{
content:"";
}
div:::before{}  div内部的最上面

2）在…之后插入

::after|:after{
content:"";
}
div:::after{}  div内部的最下面

3）例子

①插入文字
::before{
content:"文字";
}
::after{
content:"文字";
}
②插入图片
::before{
content:url("");
}
::after{
content:url("");
}
③自定义插入的内容
::before{
content:"";
}
::after{
content:"";
}

4)伪对象法清除浮动的影响

浮动元素的父元素:::after{
content:"";
display:block;//把元素转换为块级元素
clear:both;//清除浮动
}

3.16.属性选择器

利用HTML的属性
[属性] [属性=属性值]
元素[属性=属性值]
元素[属性^=值] 以…开头
元素[属性$=值] 以…结尾
元素[属性*=值] 包含

/*  [class]{
color: red;
} */
/* [class=box]{
color: red;
} */
/*  div[class=box]{
color: red;
} */
div[class^=f]{
color: red;
}
div[class$=e]{
color: green;
}
div[class*=o]{
color: pink;
}

3.17.元素定位position

1、属性
position:;
2、属性值

1）static 默认值没有定位静态定位
2）relative 相对定位
相对于自己原位置定位
定位后原位置保留
配合left、right、top、bottom移动

应用场景：
①自己小范围移动
②配合绝对定位使用
3）absolute 绝对定位
相对于已经定位（relative、absolute、fixed）的父元素定位
如果父元素没有定位，逐级往上找，最后相对于body定位
定位后原位置不保留配合left、right、top、bottom移动

推荐：一般给绝对定位的父元素加一个相对定位

应用场景：形成独立的一层
4）fixed 固定定位
相对于浏览器窗口定位
定位后原位置不保留
配合left、right、top、bottom移动（当四个属性同时存在，left和top的优先级高于right和bottom）

应用场景：固定在页面某个位置
5)堆叠顺序 z-index:number;
取值越大层级越往上
同时定位后，后面的元素在上面
必须配合定位使用（relative、absolute、fixed）可以去负值

3.18.C3新特性

1、display

取值：
1）block 块级元素
2）inline 行内元素
3）inline-block 行内块，即在同一行显示，又可以设置宽高（img、input、button、video等）行内块会识别代码之间的空白
4）none 不显示，隐藏自己，隐藏后原位置不保留
5）flex 弹性盒模型
6）table 表格
7）table-cell 单元格

2、display:none;和visibility:hidden;和opacity:0;和overflow:hidden;的区别

display:none; 隐藏自己，隐藏后原位置不保留
visibility:hidden; 隐藏自己，隐藏后原位置保留
opacity:0; 透明度为0，隐藏自己，隐藏后原位置保留
overflow:hidden; 溢出部分隐藏

3、在页面中不占据位置

1）float:left|right;
2）position:fixed;
3）position:absolute;
4）display:none;

设置上面四个属性后，元素的宽度由内容撑开

4、居中问题
1）元素内容水平居中
text-align:center;
2）一行文字垂直居中
行高等于高，一行文字垂直居中
line-height:;
3）块级元素水平居中
margin:0 auto;
4）多行内容垂直居中
父元素加 padding:20px 0;
子元素加 margin:20px 0;
5）子元素在父元素中水平垂直居中

<div class="box">
<div class="box1"></div>
</div>
①margin
.box{
width: 300px;
height: 300px;
background-color: pink;
overflow: hidden;
}
.box1{
width: 100px;
height: 100px;
background-color: plum;
margin: 100px;
}
②padding
.box{
width: 300px;
height: 300px;
background-color: pink;
padding: 100px;
box-sizing: border-box;
}
.box1{
width: 100px;
height: 100px;
background-color: plum;
}
③绝对定位
.box{
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: plum;
position: absolute;
top: 100px;
left: 100px;
}
④绝对定位(重点)
.box{
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: plum;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
⑤表格法
.box{
width: 300px;
height: 300px;
background-color: pink;
display: table-cell;
vertical-align: middle;
}
.box1{
width: 100px;
height: 100px;
background-color: plum;
margin: 0 auto;
}
⑥位移法
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

5、css3新特性

1) 圆角border-radius

border-radius:value; 四个角
border-radius:value value; 左上角右下角、右上角左下角
border-radius:value value value; 左上角、右上角左下角、右下角
border-radius:value value value value; 左上角、右上角、右下角、左下角

取值px %

画圆： border-radius:50%;

2)盒阴影box-shadow

box-shadow:
水平方向偏移位置垂直方向偏移位置模糊度阴影的尺寸颜色位置;
必选必须可选可选可选
可选正负正负正值正负 outset|inset

3)字阴影text-shadow

text-shadow:
水平方向偏移的位置垂直方向偏移的位置模糊度颜色;
必选必选可选可选
正负正负正值

4)背景渐变background:

①线性渐变
linear background: linear-gradient(方向,颜色1,样色2,…)
方向：to left right top bottom reg(弧度)
②径向渐变
radial background:-webkit-radial-gradient(渐变的中心点,形状（默认椭圆，circle：正圆）,颜色1,样色2,…)

5)转换变型transform

1.作用使元素在位置或者形状上发生一定的改变
2.属性 transform:translate() rotate() scale() skew();
3.属性值
①位移 单位px % transform:translate(x,y);
当只取一个值，表示水平方向当取两个值，表示水平和垂直方向
transform:translateX();
transform:translateY();
取正值，右下走取负值，左上走
②旋转 单位deg（弧度）transform:rotate();
取正值，顺时针旋转取负值，逆时针旋转
注意：
a、默认旋转的中心点为宽高的一般 transform-origin:; 修改元素的中心点
b、旋转会旋转整个坐标轴，当位移和旋转同时存在，推荐位移写在旋转的前面
③缩放 取值为number transform:scale(x,y);
取值为number 0-1缩小， >1 放大，默认为1
当只取一个值，等比例缩放
当取两个值，表示水平方向和垂直方向
transform:scaleX();
transform:scaleY();
④倾斜 单位deg transform:skew(xdeg,ydeg);
当只取一个值，表示水平方向
当取两个值，表示水平和垂直方向
注意：倾斜的弧度不要是直角
transform:skewX();
transform:skewY();

6）过渡 transition-property:属性1,属性2,…;

1.作用使元素从一个样式逐渐变到另外一个样式
2.过渡必须有触发事件 :hover
3.属性
①过渡的css属性 必选 transition-property:属性1,属性2,…;
以下属性可以过渡：
1、取值为颜色
2、取值为数值
3、阴影
4、背景渐变
5、转换 transform

简写 all

②过渡的持续时间 必选
transition-duration:;
单位s ms 1s = 1000ms

③过渡的速度变化类型 可选
transition-timing-function: ;
ease 默认值先加速后减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
linear 匀速

④过渡的延迟时间 s|ms 可选
transition-delay:;
可以取负值，把负值这段时间的效果跳过

⑤简写
transition:all 持续时间速度变化类型延迟时间;

7）多列把一个元素内的文本分成多列

column-count:number;
设置列的数量 column-gap:;
设置列之间的距离 column-rule:;
设置列之间的边框

6、浏览器兼容性问题

1）解决浏览器对c3新特性的支持

浏览器内核厂商前缀
谷歌 blink内核 -webkit-
火狐 gecko内核 -moz-
苹果 webkit内核 -webkit-
IE trident内核 -ms-
欧朋 blink内核 -o-

2)解决IE 6 7 8

①条件hack 条件注释法和HTML写在同一个位置

html 

②属性hack 属性前缀和后缀前缀 + - _ * # -color:red; 后缀 \0 \9 \9\0
!important(优先级最高)

8、iconfont 字体图标

步骤：
1）打开阿里巴巴矢量图标库（iconfont.cn）
2）找到图表库
3）搜索需要的图标
4）全部一次性添加到购物车
5）下载代码
6）全部解压到css文件夹中
7）在HTML中引入iconfont.css
8）元素class=“iconfont”
9）复制Unicode编码到双标签之间
10）iconfont为字体，修改样式用字体的属性

9、动画

1）动画和过渡的区别

①过渡只能制作简单的动画，动画可以制作复杂的动画（过渡是从一个样式变化到另外一个样式，动画可以控制过程）
②过渡必须有触发事件，动画可以没有
③动画可以控制播放次数

2）定义动画

@keyframes name{
0%|from{
css样式
}
任意百分比{
css样式 }
100%|to{
css样式
}
}

@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
@-ms-keyframes

3)调用动画 animation:name

animation:name 持续时间速度变化类型延迟时间播放次数（number|infinite）播放方向（alternate）动画停在最后一帧（forwards）;
animation: name duration timing-function delay iteration-count direction fill-mode;

4）动画的属性（了解）

animation-name: ; 动画的名称必选
animation-duration: 0s|0ms; 必选
animation-timing-function:ease|ease-in|ease-out|ease-in-out|linear ; 可选
animation-delay:0s|0ms ; 可选可以取负值
animation-iteration-count:number|infinite(无限播放) ; 可选
animation-direction: alternate(偶数次倒着播放); 可选
animation-fill-mode:forwards(动画停在最后一帧); 可选

animation-play-state: running（默认值）|paused（暂停）; 动画的播放状态

10、媒体查询

1）作用实现响应式布局
响应式布局：写一次样式适用所有的终端
2）viewport 视口 为了确保适当的绘制和触屏缩放，需要在
<head> 之中添加 viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1"/>
禁用其缩放（zooming）功能：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
3)语法
宽度>=992 pc端
宽度<992并且宽度>=768 ipad端
宽度<768 移动端

内联：（写在统一css文件内）
@media screen and (max-width:768px){
移动端的样式
} @media screen and (min-width:768px) and (max-width:992px){
iPad端的样式
} @media screen and (min-width:992px){
pc端的样式
}

外部：（写在不同的css文件内）
<link rel="stylesheet" href="" media="only screen and (max-width:768px)">

3.19.弹性盒模型

多用于移动端布局弹性盒中float、clear不生效
1）父元素上的属性
①开启弹性盒模型 display:flex;
子元素默认水平排列

②设置弹性盒的方向 flex-direction:;
row:默认值子元素水平排列
column：子元素垂直排列
row-reverse:子元素水平方向倒序排列
column-reverse：子元素垂直方向上倒序排列

③设置子元素在主轴的对齐方式
默认，x轴为主轴，y轴为侧轴
当flex-direction:column;，y轴为主轴，x轴为侧周

justify-content:;
flex-start:默认值弹性盒的开始
flex-end：弹性盒的结束
center：居中
space-between：子元素之间平均分配父元素剩余的距离
space-around:子元素分配父元素剩余的距离，两端是中间的一半

④设置子元素在侧轴的对齐方式 align-items:;
flex-start:默认值弹性盒的开始
flex-end：弹性盒的结束
center：居中
2）子元素上的属性 flex-grow:number;
设置子元素宽度之间的比例（分配父元素剩下的距离）

3.20.雪碧图 css精灵 css sprite

1）雪碧图是什么雪碧图是一项图片整合技术把许多小图整合到一张大图上面
2）优点
①减少图片的字节数
②减少页面的http请求
③减少图片命名的困扰
3）原理
background-image:url();
background-position:;
默认背景图片在左上角 0 0
雪碧图背景图片定位取负值，往左上走

阶段总结（一）

一、盒模型

1）标准盒模型 W3C盒模型
①组成部分 content+padding+border+margin
②实际宽度
width+padding+border+margin

2）怪异盒模型 IE盒模型
①组成部分 content+padding+border+margin
②实际宽度 width+margin
width包含了border和padding
③盒模型相互转换
box-sizing:content-box; 默认值，标准盒模型
box-sizing:border-box; 怪异盒模型
3）弹性盒模型
写在父元素上的属性
①开启弹性盒模型
display:flex; 子元素默认水平排列
②设置弹性盒的方向 flex-direction: ;
row 默认值子元素水平排列
column 子元素垂直排列
row-reverse 水平方向上倒序排列
column-reverse 垂直方向上倒序
③设置子元素在主轴的对齐方式
默认x轴为主轴 y轴为侧周
当flex-direction:column ; y轴为主轴 x轴为侧轴
justify-content:;
flex-start 默认值弹性盒的开始
flex-end 弹性盒的结束
center 居中
space-around 四周分配父元素剩下的距离，两侧是中间的一半
space-between 在子元素之间平均分配父元素剩余的距离
④设置子元素在侧轴的对齐方式 align-items:;
flex-start 默认值弹性盒的开始
flex-end 弹性盒的结束
center 居中
写在子元素上的属性 flex-grow:number;

二、选择器

1、基础选择器(四个）
全局选择器
元素选择器
类选择器
Id选择器
2、关系选择器（四个）
后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器
3、伪类选择器（四个）
:link 点击之前（只适用a）
:visited 点击之后（只适用a）
:hover 鼠标悬停（适用于所有元素）
:active 鼠标按下（适用于所有元素）

css3新增伪类选择器
:first-child 第一个子元素是…
:last-child 最后一个子元素是…
:nth-child(number|odd|even|倍数) 第几个子元素是…
:only-child 唯一一个子元素是…
:empty 空的子元素是…
:not(选择器) 否定

:focus 获取焦点
:checked 被选中时的样式
4、伪对象选择器
1）在…之前插入
::before|:before{
content:"";
}
div:::before{} div内部的最上面
2）在…之后插入
::after|:after{
content:"";
}
div:::after{} div内部的最下面
5、属性选择器
利用HTML的属性
[属性] [属性=属性值]
元素[属性=属性值]
元素[属性^=值]
以…开头元素[属性$=值]
以…结尾元素[属性*=值]
包含

三、绝对定位

position:absolute;
相对于已经定位的父元素定位
如果父元素没有定位，逐级往上找
最后相对于body定位

.box{
width: 500px;
height: 500px;
background-color: red;
position:relative;
}
.box1{
width: 200px;
height: 200px;
background-color:green;
position: absolute;
left: 50%;
margin-left: -100px;//水平居中
top:50%;
margin-top: -100px;//垂直居中
}

四、清除浮动的影响：

1、浮动元素的父元素加高（高度已知）
2、浮动元素的父元素加overflow:hidden;(自动找高)
3、受影响的元素加clear:left|right|both;(父元素的高度没有找到)
4、空div法浮动元素后加空的div 空div加clear:both;
5、伪对象法
浮动元素的父元素::after{
content:"";
display:block;
clear:both;
}

五、动画

1、定义动画

@keyframes name{
0%{
css样式
}
20%,70%{
css样式
}
50%{
css样式
}
100%{
css样式
}
}

2、调用动画

animation: name duration timing-function delay iteration-count direction fill-mode;

animation-play-state:running|paused;//动画执行或暂停

weixin_51077152

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端-3. CSS的基础知识

3.1.css的介绍1、css定义CSS:Cascading Style Sheets 层叠样式表级联样式表简称样式表2、css的作用1）实现了内容与表现的分离内容：HTML表现：css2）提高了代码的可重用性和可维护性3、css文件后缀.css4、css语法属性:属性值;属性:属性值;属性:属性值;html的属性：属性 = "属性值"5、css的特点1）继承性后代元素可以继承父元素的样式2）层叠性一个元素可以设置多个样式当样式冲突时，看优
复制链接

扫一扫