基础认知

网页组成

文字 图片 音频 视频 超链接等元素组成

web标准

html:结构
css:表现
javaScript:行为

html骨架

网页的主体,以后所有的标签 内容都放到body标签里面.

html:网页的主体
head:网页的头部
title:网页的标题
body:网页的主体

vscode基本使用

vscode-icons:文件主题
Beautify:格式化HTML css js文件
Chinese:汉化包
open in browser:浏览器的打开方式
vscode快速生成结构骨架
1.1 新建一个以.html结尾的文件
1.2 !+tab键就可以生成(!号必须是英文状态才可以 )(!+enter)(html:5)

html语法规范

html注释
解释说明的作用,给程序员或者其它同事看.
快捷键:ctrl+/
标签分类双边标签
内容
单边标签

标签关系父子关系(嵌套关系)兄弟关系(并列关系)

排版标签

标题标签

    
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
特点
双边标签
独占一行
文字加粗变大
h1-h6依次递减

段落标签

一段文字
特点:
双边标签
独占一行
段落直接有间隙 
会根据浏览器窗口大小自动换行显示

换行标签

单边标签
强制换行

水平线标签

单边标签
显示一条分割线

文本格式化标签

加粗:
加粗
加粗
下划线:
下划线
下划线
倾斜:
倾斜
倾斜
删除线:
删除线
删除线
重点掌握  strong em
推荐大家在实际开发中使用单词较长的标签,语义更加强烈.

媒体标签

图像标签

属性:
src:图片的路径(必写属性)
alt:替换文本
title:提示文本
width:设置图片宽度
height:设置图片高度
boder:设置边框

文件路径

文件路径
绝对路径:以计算机盘符开始.
相对路径:从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.
同级目录方法一:目标文件名称方法二:./目标文件名称(推荐使用vscode提示)

下级目录方法一: 目标文件夹/目标文件名称方法二:  ./目标文件夹/目标文件名称(vscode提示)

上级目录 ../

音频标签

常见属性:src:音频路径controls:显示播放控件autoplay:自动播放loop:循环播放音频标签支持3种格式,推荐使用mp3

视频标签

 常见属性:src:视频的路径controls:显示播放控件autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放loop:循环播放width:设置宽度height:设置高度
视频标签支持3种格式,推荐使用mp4

超链接标签

跳转的文本
属性:
href:链接跳转地址,必写属性.
target:设置窗口打开方式取值:_self:默认值,当前窗口打开页面_blank:新的窗口打开,保留原始窗口.
示例代码
外部链接
内部链接
网页元素链接
下载链接 文件的后缀名必须以.exe .zip .rar等后缀名结尾
下载链接
空链接

列表应用场景

在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航

三种,无序列表,有序列表,自定义列表

无序列表

应用场景: 新闻列表 网页的导航 网页的侧边栏

列表的每一项内容
列表的每一项内容
列表的每一项内容
.....

无序列表有默认的小圆点后期css处理
ul里面只能包含li标签
li标签里面可以包含任意内容(元素)

有序列表

列表的每一项内容
列表的每一项内容
列表的每一项内容
.....

有序列表有默认的序号,后期css处理
ol里面只能包含li标签
li标签里面可以包含任意内容(元素)

自定义列表

应用场景:网页的底部导航(网页尾部)

列表主题
列表主题的每一项内容
 
列表主题的每一项内容
....
dd前面会有默认的缩进效果 后续css处理dl标签里面只允许包含dt/dd标签dt/dd标签里面可以嵌套任意内容(标签)dt/dd是兄弟关系(千万不要写错了哟)

表格标签

表格基本标签

........

示例代码:
姓名
性别
年龄
孙以龙
人妖
18
金波
女
19
德华
男
16
嵌套关系:table>tr>td

表格属性

表格属性(table 属性):border:设置边框width:设置宽度height:设置高度align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))rules:细线表格 属性是all(后续使用css修饰)
tr属性:align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))bgcolor:背景颜色
示例代码:
姓名
性别
年龄
孙以龙
人妖
18
金波
女
19
德华
男
16

表格标题+表头单元格标签

表格标题
默认居中加粗显示,位于表格的第一行,td替换th即可.
表头单元格标签
示例代码:
学生信息表
姓名
性别
年龄
孙以龙
人妖
18
金波
女
19
德华
男
16

表格结构标签

表格头部:

表格主体:

表格尾部:

示例代码:

​
学生信息表
姓名
性别
年龄
孙以龙
人妖
18
金波
女
19
德华
男
16
总结
龙哥真浪
龙哥真浪

表格合并

跨行合并(垂直合并)rowspan
跨列合并(水平合并)colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁• 上下合并→只保留最上的，删除其他单元格• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）• `rowspan`：跨行合并→垂直方向合并• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码

表单标签

input系列

文本框

密码框

单选框
男
女
多选框

文件上传
multiple:多文件上传

提交按钮

重置按钮

普通按钮

搜索框

图像提交按钮

placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中

button系列

提交按钮

重置按钮

普通按钮

select下拉系列

select:下拉菜单整体
option:下拉菜单的每一项
selected:默认选中下拉菜单的某一项
示例代码:所在城市:请选择城市上海北京深圳广州武汉

文本域

label标签

提高用户体验

使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值男女
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可文本框:

语义化标签

无语义化标签

独占一行
一行显示多个

有语义化标签

html5新增标签,IE9以上浏览器支持,后续移动端布局经常使用.

    
网页头部
网页区块
网页文章

小结

实际项目用地比较多多的标签
标题标签
标题标签
标题标签
标题标签
段落标签
倾斜
加粗

超级链接
超级链接

列表项1
列表项2
列表项3
....


自定义列表主题
自定义列表每一项
自定义列表每一项
自定义列表每一项
....


............


文本框

密码框

单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)

多选框

搜索框

普通按钮
普通按钮
无语义化标签
独占一行
一行显示多个,装不下会自动折行

css体验

css作用:
美化网页,布局页面
选择器{css属性}
选择器 {属性: 值;属性: 值;...
}
注意事项:
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，使用;进行结束
属性名和属性值之间使用:分隔.

 抽烟只抽炫赫门,一生只爱一个人

div{color:red;font-size:30px;
}

css引入方式

内嵌式作用于当前页面,后续小项目可以使用.  
外链式作用于多个页面,后续大项目使用
需要使用link标签引入外部的css文件
行内式作用于当前标签,不建议使用.后续配合js.

基础选择器

标签选择器 类选择器 id选择器 通配符选择器

标签选择器
标签名{属性:属性值;属性:属性值;...
}
例如 div{color:red;}
​
类选择器
.类名{属性:属性值;属性:属性值;.../*一个标签可以有多个类名 但是多个类名之间用空格隔开一个类名可以多次调用(一个类名可以作用在多个标签身上)*/
}
例如 .box{color:pink;}
​
id选择器
#id名{属性:属性值;属性:属性值;...  
}
例如 #box{color:green;}
​
通配符选择器
*{属性:属性值;属性:属性值;.../*后续使用通配符清除内外边距*/
}
​

字体属性

字体大小font-size:20px;
字体粗细font-weight:400(normal)|700(bold)
字体样式font-style:normal|italic 
字体系列font-family:字体系列1,字体系列2..;
字体连写
font:style weight size family
font:italic 700 60px 宋体;
字体连写不能随意颠倒顺序,必须遵循;
字体连写必须保留size和family 这2个属性.

文本缩进

段落文本首行缩进
text-indent:2em;
​

文本对齐方式

text-align:left|center|right;
文本水平居中总结
如果想要 文本 span标签 a标签  img标签 input标签水平居中 对齐,给以上元素的父元素设置text-align即可.

文本装饰属性

下划线 
text-decoration: underline;
无装饰线text-decoration: none;
实际开发应用
取消a标签默认的下划线
a{text-decoration: none;
}

行高

行高:设置行间距
line-height:50px;
单行文本垂直居中
行高等于当前盒子的高度
font:style weight size/line-height family
font:italic  700 30px/40px 微软雅黑
行高与字体连写注意覆盖问题.
/* 当前font-size的倍数  */line-height: 2;

扩展颜色取值(了解)

关键词:
background-color: pink;
rgb:
background-color:rgb(255, 255, 255)
rgba:background-color: rgba(0, 0, 0, .5);
十六进制background-color: #ff6700

选择器进阶

后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器

后代选择器

选择器1 选择器2{属性:属性值;...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}

子代选择器

选择器1> 选择器2{属性:属性值;...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}

并集选择器

选择器1, 选择器2{属性:属性值;...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{color:pink;}

交集选择器

选择器1选择器2{属性:属性值;...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{color:green;
}

伪类选择器

选择器:hover{属性:属性值;...
}
鼠标经过时候的样式
a:hover{}
div:hover{}
.box:hover{}
:的前面和后面不能有空格

背景属性

背景颜色 背景图片 背景是否平铺 背景位置
背景颜色 
background-color: pink;
背景图片
background-image: url(./img/icon.png);
背景是否平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
背景位置
background-position: x y;背景位置取值:方位名词:水平位置:left|center|right垂直位置:top|center|bottombackground-position:center center；数字+px:background-position:10px 20px；方位名词+数字(px):background-position:left 30px；

示例代码:

成长守护平台

.title {width: 118px;height: 41px;/* 背景颜色 *//* background-color: pink; *//* 背景图片 *//* background-image: url(./img/icon.png); *//* 背景是否平铺 *//* background-repeat: no-repeat; *//* 背景位置 *//* background-position: left center; *//* 背景简写 */background: pink url(./img/icon.png) no-repeat left center;text-indent: 1.5em;font-size: 14px;font-weight: 400;/* 单行文本垂直居中 */line-height: 41px;/* 盒子水平居中 */margin: auto;}

元素显示模式

根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素

块级元素

块元素特点:
1 独占一行 
2 宽度默认是父元素的宽度,高度由内容撑开.
3 可以设置宽高
代表性的标签 div h系列 p li 

行内元素

行内元素特点1 一行可以显示多个,如果一行装不下自动折行(换行显示)2 宽度和高度默认由内容撑开3 设置宽高无效代表性的标签 a span em strong

行内块元素

行内块元素特点1 一行显示多个2 可以设置宽高代表性标签 input button

元素显示模式转换

转换为块级元素
display: block;
转换为行内块元素
display: inline-block;
转换为行内元素
display: inline

小米侧边栏案例

 手机 电话卡手机 电话卡手机 电话卡手机 电话卡手机 电话卡手机 电话卡手机 电话卡手机 电话卡手机 电话卡手机 电话卡

/* 1.1 设置大盒子样式 */.box {width: 234px;height: 460px;background-color: #8c8d91;}/* 1.2 转换a标签的显示模式 */.box a {/* a标签转换为块级元素 独占一行 */display: block;height: 42px;line-height: 42px;font-size: 14px;color: #fff;/* 取消下划线 */text-decoration: none;/* 首行缩进 */text-indent: 2em;}/* 1.3 鼠标经过改变背景颜色 */.box a:hover {background-color: #ff6700;}

(盒子模型)

css三大特性

继承性

特性:子元素可以继承父元素的某些特性(某些样式 子承父业)

控制文字的属性都可以被继承,不是控制文字的属性不能被继承

常见继承的属性如下显示:

color: red;
font-style: italic;
font-weight: 700;
font-size: 30px;
font-family: 宋体;
text-indent: 2em;
text-align: center;
line-height: 300px;

继承的特殊情况:

如果浏览器有默认的样式,此时继承依然存在,但是会优先执行浏览器的默认样式

a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.

h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖

高度不能被继承,但是宽度有类似继承的效果

层叠性

相同选择器才会有层叠性

层叠性遵循原则:就近原则.

样式冲突---则层叠(覆盖)

样式不冲突--则叠加(共同作用在一个标签上)

当样式冲突. 只有选择器优先级相同,才会通过层叠性判断.

优先级

不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.

判断公式:

继承<通配符选择器<标签选择器<类选择器

下面方便大家理解,但是不是很规则.

0 < 0 < 1 < 10 < 100 < 1000 < 无穷大

!important不能提高继承的优先级 只要是继承 优先级最低.

各个选择器的权重:

标签选择器 0 0 0 1 简单记忆 1

类选择器 0 0 1 0 简单记忆10

id选择器 0 1 0 0 简单记忆100

行内样式 1 0 0 0 简单记忆1000

!important如果不是继承,权重最高 天下第一

复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002

不会有进位的情况，比如 0,0,0, 10

优先级相同,会执行层叠性,写在最后面的会生效.

去除列表标签样式

list-style:none;

盒子模型

盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)

边框(border)

边框属性

边框粗细 边框样式 边框颜色

border-width:5px;
border-style:solid|dotted|dashed
border-color:red

边框简写

boder:solid 1px red;
无顺序要求

边框单方向设置

上边框
border-top:solid 1px red;
下边框
border-bottom:solid 1px red;
左边框
border-left:solid 1px red;
右边框
border-right:solid 1px red;

盒子实际大小初级计算公式

盒子宽度=左边框+内容的宽度+右边框

盒子高度=上边框+内容的高度+下边框

border可以撑大盒子

如何解决:

1 手动内减

2 测量盒子的时候可以从边框的里面进行量取(不测量边框)

3 自动内减(box-sizing: border-box;)

	 .box {width: 400px;height: 400px;/* width: 380px;height: 380px; */background-color: green;border: 10px solid #000;/* css3盒子模型可以解决边框撑大盒子问题(自动内减) */box-sizing: border-box;}

内边距(padding)

内容区域到边框的距离

上 右 下 左
padding:10px;
上下  左右
padding:20px 30px;
上  左右  下
padding:20px 30px 40px;
上 右 下 左
padding:20px 30px 40px 50px;
单方向设置
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;

盒子终极计算公式

盒子的宽度=左右边框+左右内边距+左右内容

盒子的高度=上下边框+上下内边距+上下内容

边框与padding不会撑大盒子特殊情况

当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)

此时给左右的边框和左右的内边距不会撑大盒子.

css3盒子模型

边框和内边距都会撑大盒子

解决办法

1 .手动内减

2.自动内减(box-sizing: border-box;)

外边距(margin)

盒子到盒子之间的距离

上 右 下 左
margin:10px;
上下  左右
margin:20px 30px;
上  左右  下
margin:20px 30px 40px;
上 右 下 左
margin:20px 30px 40px 50px;
单方向设置
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;

margin正常现象

水平布局的盒子,左右的 margin值互不影响

最终的距离为margin左右的和

	* {margin: 0;padding: 0;} 	div {display: inline-block;width: 200px;height: 200px;}.box1 {background-color: pink;margin-right: 20px;}.box2 {background-color: green;margin-left: 30px;}

margin合并现象

垂直布局的块级元素 上下 margin会合并.

最终的距离为margin的最大值

解决办法:

开发避免就可以,只设置一个盒子的上下外边距即可.

	* {margin: 0;padding: 0;}div {width: 200px;height: 200px;}.box1 {background-color: green;/* margin-bottom: 30px; */}.box2 {background-color: pink;margin-top: 40px;}

margin塌陷现象

互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷

解决办法:

1 给父元素设置 padding-top或 border-top

2 给父元素设置 overflow: hidden;

3 把子元素转换为行内块 display: inline-block;

4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象

 	* {margin: 0;padding: 0;}.father {width: 300px;height: 300px;background-color: pink;/* padding-top: 1px; *//* border-top: 1px solid transparent; *//* overflow: hidden; */}.son {display: inline-block;/* float: left; */margin-top: 20px;width: 200px;height: 200px;background-color: purple;}

行内元素设置内外边距 无效

水平布局设置 padding和margin 有效

垂直布局设置 padding和margin 无效

如果要垂直布局padding和margin生效解决办法

转换为块或行内块

padding和margin 以后如何选择

父子关系 :padding

兄弟关系: margin

(浮动)

结构伪类选择器nth-child || nth-of-type

根据HTML结构选择标签,减少对类名的依赖.

结构伪类选择器的权重是0010.

我是li里的第1个孩子
我是li里的第2个孩子
我是li里的第3个孩子
我是li里的第4个孩子
我是li里的第5个孩子
我是li里的第6个孩子
我是li里的第7个孩子
我是li里的第8个孩子
我是li里的第9个孩子
我是li里的第10个孩子

/* 匹配父元素里面的第一个孩子 */ul li:first-child {background-color: red;}/* 匹配父元素里面的最后一个孩子 */ul li:last-child {background-color: skyblue;}/* 匹配父元素里面的某一个孩子 */ul li:nth-child(6){background-color: purple;}/* 匹配父元素里面倒数第几个孩子 */ul li:nth-last-child(3){background-color: pink;}

nth-child(n)

1.n 可以是数字， 数字是几，就选择第几个孩子。

ul li:nth-child(6) { }  选择第6个孩子

1. n 还可以是 关键字 比如 odd even

     /* 选中偶数的孩子 */ul li:nth-child(even) {background-color: pink;}/* 选中奇数的孩子 */ul li:nth-child(odd) {background-color: skyblue;}

2. n 还可以是 公式。

   • n 是从 0开始 012345...

   • 2n 是 偶数

   • 2n + 1 是 奇数

   • 5n 5的倍数

   • n+5 从第五个开始 包含第五个 一直到最后.

   • -n+5 选中前5个 包含第五个

   /*2n */
   ol li:nth-child(2n) {background-color: tomato;}
   /*2n+1 */
   ol li:nth-child(2n+1){background-color: violet;
   }
   /*5n  */
   ol li:nth-child(5n){background-color: yellowgreen;}
   /* n+5    从第五个开始 包含第五个 一直到最后.*/
   ol li:nth-child(n+5) {background-color: yellowgreen;}
   /*-n+5   选中前5个 包含第五个*/
   ol li:nth-child(-n+5) {background-color: yellowgreen;}
   

伪元素

伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.

在父元素内容的最前面添加一个伪元素
E:::before{content: '';
}
在父元素内容的最后面添加一个伪元素
E::::after{content: '';
}
使用委员插入必须要指定content属性

标准流

一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.

网页布局: 标准流 + 浮动+ 定位

标准流布局规则

块级元素:

从上往下 垂直布局 独占一行

行内 /行内块元素:

从左往右 水平布局 一行转不下自动换行

浮动

浮动的作用

早期的作用:图文环绕

现在的作用:布局页面,让垂直布局的盒子变成水平布局

浮动的特点

1 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.

	* {margin: 0;padding: 0;}div {width: 200px;height: 200px;}.box1 {background-color: pink;}.box2 {/* 右浮动 */float: right;background-color: red;}.box3 {background-color: green;}

2 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.

	* {margin: 0;padding: 0;}div {width: 200px;height: 200px;}.box1 {background-color: pink;}.box2 {/* 左浮动 */float: left;background-color: red;}.box3 {padding: 40px;background-color: green;}

1. 浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动

   	* {margin: 0;padding: 0;}div {float: left;width: 200px;height: 200px;}.box1 {background-color: pink;}.box2 {background-color: red;}.box3 {background-color: green;}
   

   4 浮动的元素会受到上面元素边界的影响

   	* {margin: 0;padding: 0;}div {width: 200px;height: 200px;}.box1 {float: left;background-color: pink;}.box2 {/* 右浮动 */float: right;background-color: red;}.box3 {background-color: green;}
   

   5 5 浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)

   一行可以显示多个,可以设置宽高

   块级元素浮动之后不设置宽高,默认由内容撑开

   行内元素浮动之后设置宽高有效

    * {margin: 0;padding: 0;}div {float: left;width: 200px;height: 200px;}.box1 {background-color: pink;}.box2 {background-color: red;}.box3 {background-color: green;}span {float: left;width: 200px;height: 200px;background-color: purple;}p {width: 200px;height: 200px;float: left;background-color: yellow;}
   

    设置宽高有效
   块级元素浮动之后不设置宽高默认由内容撑开
   

   浮动注意事项:

   1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)

   2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.

   3 子浮父不浮 兄弟一起浮 一浮全浮

   CSS书写顺序

   不同的css书写顺序会影响浏览器的渲染性能,推荐大家遵循以下的书写方式.

 (定位)

定位的应用场景

为什么需要使用定位?

1 解决盒子之间的层叠(叠加)问题,可以层叠到其它盒子上面

2 页面滚动,盒子固定在页面某个位置不动.

定位的使用步骤:

1 设置定位的方式

2 设置偏移值

定位方式

偏移值

定位的语法

.blue {/* 定位的使用步骤 *//* 1 设置定位的方式  绝对定位*/position: absolute;/* 2 设置偏移值 */top: 150px;left: 150px;background-color: blue;}

静态定位

 position: static;
特点:
1 静态定位就是普通的标准流
2 静态定位设置偏移值无效.

相对定位

 position: relative;
特点:
1 需要配合方位属性来移动位置
2 想对于自身原来的位置进行移动
3 在页面中占位置-没有脱标

绝对定位

position: absolute;
特点
1 需要配合方位属性来移动位置
2 祖先元素如果没有定位,默认相对于浏览器进行移动;祖先元素有定位,相对于最近一级带有定位的祖先元素移动位置.
3 在页面中不占位置-已经脱标

子绝父相

子绝父相:

子元素用绝对定位,父元素使用相对定位,让子元素相对于父元素进行移动.那父元素是相对定位,对网页的布局影响比较小.

子绝父绝:

实际开发中在子绝父相的时候,发现父元素有绝对定位,此时父元素里面的孩子直接子绝即可.

绝对定位的盒子水平垂直居中

普通做法:

 /* 1 让子盒子移动父元素的一半(往右) */

left: 50%;

/*让子盒子移动父元素的一半(往下) */

top: 50%;

/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */

/* 普通做法 */

margin-left: -150px;

/* 在让子盒子往上移动自身高度的一半 使用margin负值 */

margin-top: -100px;

优化做法:

/* 1 让子盒子移动父元素的一半(往右) */

left: 50%;

/*让子盒子移动父元素的一半(往下) */

top: 50%;

/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */

/* 优化做法 就业班第一天课会讲 */

transform: translate(-50%, -50%);

固定定位

position: fixed;
特点1 需要配合方位属性来移动位置2 相对于浏览器的可视区域进行移动位置3 不占位置-脱标

定位的特殊性

行内元素加了绝对/固定定位可以设置宽高

块级元素加了绝对/固定定位,如果不给宽度,宽度由内容撑开

嵌套块级元素加了绝对/固定定位,不会有塌陷问题.

元素层级

不同布局方式元素的层级关系：

标准流 <浮动 <定位

定位元素之间的层级关系相同(相对定位 绝对定位 固定定位)

z-index属性可以修改定位元素之间的层级关系

z-index: 数字(默认值是auto );

z-index属性的属性值千万不要加单位

数字越大,层级越高.只有定位的盒子才有 z-index属性

示例代码:

* {margin: 0;padding: 0;box-sizing: border-box;}div {width: 300px;height: 300px;}.red {/* 相对定位 */position: relative;left: 0;top: 0;z-index: 2;background-color: red;}.blue {/* 绝对定位 */position: absolute;left: 100px;top: 100px;z-index: 1;background-color: blue;}.green {/* 固定定位 */position: fixed;left: 200px;top: 200px;z-index: 9999;background-color: green;}

垂直对齐方式

场景：解决行内/行内块元素垂直对齐问题 vertical-align属性只对行内或行内块元素有效.

/* 默认值 基线对齐 */

vertical-align: baseline;

/* 底部对齐 */

vertical-align: bottom;

/*中线对齐 */

vertical-align: middle;

/* 顶部对齐 */

vertical-align: top;

滤镜

blur()里面跟数值,数值越大图片越模糊 
filter: blur(5px);
国家发生重大事故 网站变灰
filter: grayscale(100%);

圆角边框

border-radius左上角开始赋值 顺时针
左上角 右上角 右下角 左下角.box {width: 300px;height: 300px;background-color: #ffa500;/* 圆形 边框圆角为宽高的一半  *//* border-radius: 150px; */border-radius: 50%}.box1 {width: 200px;height: 60px;background-color: purple;/* 胶囊按钮  盒子高度的一半*/border-radius: 30px;text-align: center;line-height: 60px;font-size: 20px;color: #fff;}.box2 {width: 200px;height: 200px;background-color: pink;border-radius: 0 50%;}

overflow

		.box {width: 200px;height: 300px;background-color: pink;/* 默认值 溢出部分可见 *//* overflow: visible; *//* 溢出部分隐藏 *//* overflow: hidden; *//* 无论是否溢出都会显示滚动条 *//* overflow: scroll; *//* 根据是否溢出 自动显示滚动条 */overflow: auto;/* 注意定位的盒子慎用overflow: hidden; */}

扩展:

单行文本溢出显示省略号:

/* 1 文字装不下 让文字强制在一行显示 */

white-space: nowrap;

/* 2 超出部分溢出隐藏 */

overflow: hidden;

/* 3 隐藏的部分显示省略号 */

/* ellipsis 省略号意思 */

text-overflow: ellipsis;

多行文本溢出显示省略号:

overflow: hidden; text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 / display: -webkit-box; / 限制在一个块元素显示的文本的行数 / -webkit-line-clamp: 2; / 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;

注意:

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

多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端

元素本身隐藏

 /* 元素本身隐藏 占位置 */visibility: hidden; /*元素本身隐藏 不占位置 */
display: none;

重要

元素隐藏

display: none;

元素显示

display: block;

字间距

letter-spacing: 5px; 
英文 字母之间的间距
中文 字之间的间距

单词间距

word-spacing: 10px;
英文单词之间的间距 中文无效 

元素整体透明度

opacity:0.5;
属性值：0~1之间的数字
1：表示完全不透明
0：表示完全透明
opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

细线边框

border-collapse: collapse;

css画三角形

1 画一个盒子
2 设置不同边框的颜色
3 宽高设置为0 仅保留边框
4 选择其中一个三角形设置颜色 ,其余的三角形设置为透明色.box{/*width: 400px;height: 400px; */		width: 0;height: 0;background-color: transparent;border-top: 50px solid pink;border-bottom: 50px solid transparent;border-left: 50px solid transparent;border-right: 50px solid transparent;
}

链接伪类选择器

/* 未访问时候的状态 */a:link {color: pink;}/* 鼠标点击后的状态 */a:visited {color: purple;}/* 鼠标悬停时的状态 */a:hover {color: green}/* 鼠标按下未弹起时的状态 */a:active {color: orange;}
链接伪类选择器权重是10
书写顺序LHHA

焦点伪类选择器

只对表单元素有效

input:focus {

background-color: orange;

}

属性选择器

通常借助html属性来选择元素,通常用于input标签

选择具有att属性的E元素。

E[att]{}

选择具有att属性且属性值等于val的E元素。

E[att="val"]{}

 input[type=text] {background-color: red;}
input[type=password] {background-color: green;
}

精灵图

精灵图:

项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点:

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

使用步骤:

1.创建一个盒子, 设置盒子的尺寸和小图尺寸相同

2.将精灵图设置为盒子的背景图片

3.修改背景图位置

通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

.s1 {display: block;width: 20px;height: 20px;/* background-color: pink; */background-image: url(./images/sprites.png);/* 水平位置 垂直位置 *//* 精灵图位置往左 往上都是负值 */background-position: -139px -7px;}

背景图大小

background-size:cover|contain|百分比|数字.box {width: 1000px;height: 300px;background-color: pink;background-image: url(./images/jd.jpg);background-repeat: no-repeat;/* 关键字  *//* contain 背景图片等比例缩放 显示宽度 有可能铺不满整个盒子 *//* background-size: contain; *//* cover 背景图片等比例缩放 背景图片铺满整个盒子 但是图片有显示不全*/background-size: cover;/* 数值 百分比 *//* 2个数值 第一个表示宽度 第二个表示高度 *//* background-size:400px 200px; *//* 1个数值 第一个表示宽度 第二个数值默认值 auto *//* background-size: 400px auto; *//* 百分比 参考的是当前盒子自身宽度的百分比 *//* background-size: 50% 50%;background-size: 100% 100%; */}
连写扩展:background: purple url(./images/dog.gif) 0 0/100px 100px no-repeat;

文字阴影

text-shadow: 水平阴影 垂直阴影 模糊距离  阴影颜色;
text-shadow: -8px 0px 9px red;

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内/外阴影 ;
box-shadow: 2px -10px 6px 5px rgba(0, 0, 0, .5) ;

默认是外阴影 但是outset不要书写 否则报错

过渡

transition:过渡属性 过渡时间;
过渡 就是让元素慢慢的发生变化,过渡通常搭配hover一起使用
transition属性给需要过渡的元素本身加
谁做过渡到给谁加.box {width: 400px;height: 200px;background-color: red;/* transition: 过渡属性  过渡时间 *//* 让多个属性发生过渡 中间用逗号隔开 *//* transition: width 2s, height 2s; *//* all 所有的属性都发生过渡 */transition: all 3s;}/* 过渡 就是让元素慢慢的发生变化  */.box:hover {/* 鼠标移入有效果 移除没有效果 *//* transition: all 3s; */width: 600px;height: 300px;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！