一、CSS 网页美容师
1、让网页更加丰富多彩，布局更加灵活自如
2、让HTML从样式中脱离，实现了HTML专注做结构呈现，样式交给css。实现了结构和样式相分离
css初识
概念：css通常称为css样式表或者层叠样式表、级联样式表
作用：
主要用于设置HTML页面中的文本内容 （字体、大小、对齐方式等）、图片的外形（宽高、边框、边距）以及版面布局和外观显示样式
注释
/**/
快捷键ctrl+/
二、引入css样式表
css书写位置
2.1行内式（内联样式）
对当前行标签起效
概念：
行内样式
<标签名 style=“属性1:属性值1；属性2：属性值2;”></标签名>
例子
<h1 style="color:pink;font-size:18px;"></h1>
2.2内部样式表（内嵌样式表）
对当前页面起效
<head>
<style type="text/css">
选择器{
属性1：属性值；
属性2：属性值；
}
</head>
例：
<head>
<style type="text/css">
h2{
color:green；
font-size:20px;
}
h4{
color:purple;
font-size:10px;
}
</head>
2.3外部样式表（外链式）
概念：称链入式
将所有样式放在一个或多个css外部样式表文件中
通过link标签将外部样式表链接到HTML文档中
基本语法如下
<head>
<link rel="stylesheet" type="text/css" href="css文件url"/>
</head>
注意：css文件可以被多个html文件共享 type可省略
2.4三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 一个标签 |
| 内部样式 | 部分结构和样式像分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点 |
2.5选择器
1、选择器作用
找到特定的HTML页面元素，其实就是选择标签的
2、css常见基础选择器
1、标签选择器
以标签名作为选择器选择对应标签
可以把一类标签全选中
2、类选择器
<p class=""></p>
.类名{
属性：属性值；
}
可以选择一个或多个class值相同的标签
类选择器的特殊用法
给标签多个类名，方便标签选择多个样式，同时避免了不同选择器中相同样式的重复
语法：
<span class="blue font100"></span>
用空格隔开两个类名
3、id选择器
id选择器使用#标识后面紧跟id名
其基本语法格式如下
id选择器
#id{属性：属性值;}
标签
<p id="id名"></p>
元素的id值是唯一的，只能对应域文档的某一个具体的元素
用法与类选择器基本相同
如同人可以重名也就是class，而id如同身份证对每个标签是唯一的
4、通配符选择器
*表示所有标签
*{
属性：属性值；
}
会降低页面响应速度 不建议随便使用
5、总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p{color:red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red;} |
| id选择器 | 一次只能选择一个标签 | 只能使用一次 | 不推荐使用 | #nav{color:red;} |
| 通配符选择器 | 选择所有标签 | 选择的太多，有部分不需要 | 不推荐使用 | *{color:red;} |
记忆：<标签 类 id>
三、font字体样式
1、font-size:大小
| 相对长度单位 | 说明 |
|---|---|
| em | 1em相当于当前对象的一个字体大小 |
| px | 像素 最常用推荐使用 |
不同浏览器默认的字体大小不一样我们可以指定body的font-size=16px;
2、font-family:字体
设置字体种类
微软雅黑、宋体、黑体等
p{
font-size:Arial ,"Microsoft YaHei","黑体";
}
以上同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体则会选择后面合适的字体，否则以电脑默认字体
中文字体需要加引号，英文字体一般不需要加。
3、font-weight:字体粗细
①在html中如何将字体加粗我们可以使用b和strong标签是文本加粗。
②可以使用css来实现，但css是没有语义的
| 属性值 | 描述 |
|---|---|
| normal | 默认值 |
| bold | 定义粗体 |
| 100~900 | 400等同于normal，而700等同于bold |
推荐使用数字
让粗体不加粗：font-weight：normal；
或者 font-weight:400;
4、font-style字体风格
| 属性 | 描述 |
|---|---|
| italic | 倾斜 |
| normal | 默认标准字体样式 |
设置normal使倾斜字体正过来
5、font字体综合写法
.title{
/*font:font-style font-weight font-size【/line-height】 font-family;*/
font:italic 700 20px "微软雅黑";
}
必须严格按照font综合写法的顺序不能颠倒
必须保留weight和family属性其余可以省略
6、字体总结
| 属性 | 属性值 | 描述 |
|---|---|---|
| font-style | italic|normal | 字体风格，倾斜或正常 |
| font-weight | normal|bold|100~900 | 字体粗细 |
| font-size | px或者em | 字体大小 |
| font-family | 字体名称 | 字体种类 |
综合写法font:font-style font-weight font-size【/line-height】 font-family;
记忆：SWSF 上午十分
四、unicode字体
GB2312 UTF-8
每种字体都对应着一个unicode编码，可以上网查询以获得其编码
为什么用unicode？
在css中设置字体可以直接写中文，但是文件编码不匹配时会产生乱码的错误，而且xp系统不支持类似微软雅黑的中文。但是unicode编码可以避免这些错误
五、css文本属性
| 属性 | 描述 | 值 |
|---|---|---|
| color | 颜色 | 1、常用十六进制比如#fff 2、rgb值如RGB（255，0，0） 3、颜色名称 如red |
| line-height | 控制行与行之间的距离 | 行间距包括上间距文本高度和下间距组成 |
| text-align | 文字水平对齐方式 | 1、justify每行被展开为宽度相等。左右外边距对齐 2、right右对齐 3、center居中4、left左对齐 |
| text-indent | 首行缩进 | 常用于段落首行缩进2个字的距离 值为2em |
| text-decoration | 文本修饰 | 1、none用来删除文本修饰 ，如删除下划线 2、underline下划线 3、overline上划线 |
六、chrome开发者工具
f12打开开发者工具
ctrl+0恢复浏览器大小
上箭头和下箭头改变px值
开发者工具中可以修改，但是不会改变原文件适合调试数值更加直观
七、emmet语法
前身为zen coding 使用缩写来提高html/css编写速度 VScode已经集成该语法
emmet语法生成html标签
1、生成标签 输入标签名加tab键可以一键生成标签
2、如果想生成多个相同标签可以标签名*4按tab生成4个
3、父子级关系可以用>比如ul>li 可以用ul>li*3生成三个li
4、并列关系可以用+ 比如div+p
5、.class名可以生成对应class名的div标签
#id名类似
当然可以用 标签名.class可以生成任意标签 #类似
6、.class名$*数量 可以生成自增符号的多个div标签 $为自增符号
7、标签名{文字内容}按tab可以生成div标签并包含文字内容
emmet语法生成css样式
1、tac生成text-align:center;
2、w2+tab生成width：2px;
等
快速格式化代码
shift+alt+f
八、复合选择器
复合选择器建立在基础选择器之上
复合选择器由多个基础选择器通过不同方式组合而成
1、后代选择器（重要）
又称为包含选择器 可以选择父元素里的子元素
例子：修改ol中li的样式
ol li{
color:pink;
}
语法：
元素1 元素2 { 属性：属性名}
元素2为元素1的后代
中间一定用空格隔开
元素3类似一层层下去
2、子选择器（重要）
只能选择最近的一级儿子元素
语法
元素1>元素2{
属性：属性值
}
元素1和2必然是父子关系
3、并集选择器（重要）
可以选择多组标签定义相同样式
语法：
元素1，元素2{
属性：属性值
}
用逗号分隔多个任何形式的选择器
4、交集选择器
选择对应类名的元素
语法：
元素.class名{属性：属性值}
5、伪类选择器
①链接伪类选择器
| 选择器 | 描述 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接（鼠标按下未弹起） |
顺序尽量不要颠倒 按照lvha顺序不然会出错
记忆：lv包包非常hao
九、标签显示模式（重点）
1、标签的三种显示模式
什么是标签的显示模式？
标签以什么方式进行显示，比如div独占一行 span则一行可放多个
分类：
HTML标签一般分为块标签和行内标签两种类型，也称为块元素和行内元素
①块级元素block
主要用于布局
例：h、p 、div、ul、ol、dl、li
1】独占一行
2】高度宽度、内外边距都可控制
3】宽度默认是容器的100%，可以用width设置
4】是一个容器及盒子、里面可以放行内或者块级元素
注意：p内不能放块级元素 特别是div
p h dt里面尽量不要放块元素
background-color可以设置其背景色
②行内元素inline
主要用于包裹文字
1】一行可以有多个元素
2】高宽直接设置是无效的
3】默认宽度就是它本身内容的宽度
4】行内元素只能容纳文本或其它行内元素
注意：
链接里不能再放链接a
特殊情况a里面也可以放块级元素,但a最好转为块级元素
③行内块元素inline-block
兼具块元素和行内元素的特点
img input td
1】和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙，一行可以显示多个
2】默认宽度就是本身内容宽度
3】高度、行高、外边距以及内边距都可以控制
显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
2、标签模式的转换
块转行内：display:inline；
行内转块：display:block;
块、行转为行内块：display:inline-block
十、单行文本位置
行高和高度的关系
1、如果行高等于高度 文字会垂直居中
2、如果行高大于高度，文字会偏下
3、如果行高小于高度，文字会偏上
十一、css背景background
1、背景颜色
语法：background-color:颜色
transparent透明色
2、背景图片
background-image：url(文件路径);
3、背景平铺
background-repeat:
值：
repeat：背景图像在纵向和横向平铺 默认选项
no-repeat：不平铺
repeat-x：横向平铺
repeat-y：纵向平铺
4、背景位置（重点）
background-position:length或position
值：
length ：百分数或由浮点数和单位标识符组成的值
position：top|center|bottom|left|right组成
例如右上角为right top；左下角为left bottom；
水平垂直居中： center center
网页中x轴往右 y轴往下
10px 50px 表示x=10px y=50px对背景图进行精确调整
网页超大背景图定位的css
body{
background-image:url(img.jpg);
background-repeat:no-repeat;
baacground-position:center top;
}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.icon {
width: 150px;
height: 35px;
background-repeat: no-repeat;
background-position: 10px center;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
5、背景附着
background-attachment:
值
scroll 背景随对象内容滚动
fixed 背景图像固定 有滚动条背景图也不随内容移动
6、背景简写
background属性的顺序比较随意
可以参照以下顺序写，也可以调换顺序
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；
7、背景透明
background:rgba(0,0,0,透明度)
透明度在0-1之间 越小越透明 可以省略小数点前的0
8、总结
| 属性 | 属性值 | 描述 |
|---|---|---|
| background-color | 十六进制，rgb，名称 | 背景色 |
| background-image | url(路径) | 背景图 |
| background-repeat | repeat ,no-repeat,repeat-x,repeat-y | 背景图平铺 |
| background-attachment | scroll|fixed | 背景附着 |
| background-position | top|bottom|center|right|left或者坐标值 第一参数为x第二参数为y | 背景图定位 |
十二、css三大特性
1、css层叠性
所谓层叠性指的是后面相同样式会覆盖前面样式。样式不冲突就不会层叠（覆盖）
冲突就近原则
2、css继承性
子标签会继承父标签的某些样式、如文本颜色和字号
想要设置一个可继承的属性，只需将它应用于父元素即可
子元素可以继承父元素的样式：
text-、font-、line-这些元素开头的可以继承、以及color属性
3、css优先级（重点）
1、权重计算公式
div{
color:red;
}
div{
color:pink;
}
div{
color:red;
}
.one{
color:pink;
}
one为div的class名
以上为层叠性，采取就近原则
选择器不同则会出现优先级
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ZmiYYVU-1670653461116)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129113408086.png)]
!important符>>>行内style>id>class>标签名>继承
div{
color:pink !important;
}
!important添加在样式后面；
2、权重叠加
交集选择器、后代选择器会出现权重叠加
.nav a 权重0,0,1,0+0,0,0,1=0,0,1,1
div ul li 权重0,0,0,1+0,0,0,1+0,0,0,1=0,0,0,3
谁大谁优先
0，0，0，5+0，0，0，5=0，0，0，10叠加不进位
相对子元素来说继承的权重是0，无论继承采取的是什么选择器
十三、盒子模型
网页布局本质
1、设置盒子
2、将元素放入盒子
1】盒子模型box model
盒子：装内容的容器
div为最常用的盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ata3x978-1670653461117)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129115903163.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ux0JV4oV-1670653461117)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129120130974.png)]
2】border边框
boder-color 定义颜色
boder-width 定义边框粗细，单位px
boder-style 定义边框样式 默认none没有边框，常用dotted点线|dashed虚线|solid实线
边框综合设置
boder:border-width||boder-style||boder-color
这是常见的综合写法，但是其实没有顺序
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HHjcgk08-1670653461117)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129120936123.png)]
input table等可以用border更好看
border-collapse:collapse;表示重叠边框，解决边框重叠变粗问题
table,td,th{
border-collapse:collapse;
boder:1px solid deeppink;
}
3】内边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r52D1tDn-1670653461118)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129151545611.png)]
注意：内边距会导致盒子对应尺度变大
padding简写
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gpbbKYxH-1670653461118)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129152012695.png)]
例：
padding:20px;/*内边距20px*/
padding:10px 20px;/*上下10px左右20px*/
padding:10px 20px 30px;/*上10左右20下30*/
padding:10px 20px 30px 40px;/*上右下左顺时针*/
4】内盒尺寸计算
盒子实际大小=内容的宽度和高度+内边距+边框
解决办法：
改变内容宽度
5】padding不影响盒子大小的特殊情况
1、盒子没有宽度则padding不会撑开盒子（height一样）
6】外边距margin
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDkZ5wq1-1670653461119)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129154515193.png)]
使用方法和padding类似
7】块级盒子水平居中
可以用于实现网页大小无论如何都能使网页主体居中
须满足两个条件
1、盒子必须指定宽度
2、左右外边距设置为auto
法一、
margin-left:auto;
margin-right:auto;
法二、
margin:auto;
法三、
margin:0 auto;
8】盒子内文字居中和盒子居中区别
1、盒子内文字水平居中为text-align:center;
行内元素和行内块元素也可以因此居中
9】插入图片img和背景图片background区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ruNTOMJS-1670653461119)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129155554653.png)]
img可以用padding调整位置
但是背景图只能用background-position
10】清除默认内外边距
浏览器会默认给元素一个内外边距
为了方便布局一般都先设置以下代码
*{
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}
行内元素最好只设置左右外边距，不设置上下内外边距
11】垂直外边距合并现象
1、相邻元素垂直外边距合并
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1HC3gGp-1670653461119)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129160749089.png)]
2.塌陷（嵌套关系的垂直外边距合并）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NibM7NN0-1670653461120)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129161511464.png)]
12】盒子模型布局稳定性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5o34PDRE-1670653461120)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129161818604.png)]
13】ps基本操作及常用快捷键
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DLcW1NkP-1670653461120)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129162143996.png)]
14】圆角边框
border-radius:像素值或百分比
圆：值为方框宽度一半或者直接设为50%
p{
width:100px;
height:20px;
background-color:red;
font-size:12px;
color:#fff;
text-align:center;
line-height:20px;
border-radius:10px;
}
矩形圆角边框：只需要高度的一半就行，而且不能用百分比，要精确值+单位
15】盒子阴影
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kqUKA7PC-1670653461121)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221129171321867.png)]
十四、浮动
1、css三种布局机制
1】普通流
块级元素独占一行，自上而下排列
行内元素从左到右顺序排列，遇到父元素边缘自动换行
2】浮动
让盒子在普通流中浮起来，主要作用让多个块级盒子一行显示
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定位置
3】定位
将盒子定在浏览器的某一位置
2、浮动的作用
让多个盒子（div）水平排列一行
行内块也能实现，但是中间会有空白缝隙难以去除
最早是用于控制图片，实现文字环绕图片效果
3、浮动语法
选择器{float:属性值;}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
4、浮动之浮
漂浮在普通流上面
5、浮动之漏
浮动的盒子会把自己原来的位置给下面普通标准的盒子，也就是漏给下面盒子
6、浮动之特
特性：float属性会改变display属性
变成行内块元素 且浮动元素中间没有缝隙，和真正的行内块有些区别
当父级盒子装不下一行内的盒子则右边的盒子会自动到下一行，所以要重视宽度
7、浮动的应用
浮动和标准流的父盒子搭配
浮动是会脱标的，会影响下面的标准流盒子，因此我们一般将浮动盒子放在父盒子中
8、浮动元素和父盒子的关系
子元素浮动是参照父盒子来对齐的
不会超过父元素边框也不会超过内边距
9、浮动元素和兄弟盒子的关系
在一个父级盒子中，如果前一个兄弟盒子是：
1、浮动的，那么当前盒子会与前一个盒子的顶部对齐
2、普通流的，那么当前浮动盒子会显示在前一个兄弟盒子的下侧；
浮动盒子只会影响当前盒子或后面的盒子，不会影响前面的标准流
10、清除浮动（造成的影响）
很多情况下，父盒子设置高度不方便，子盒子浮动就不占有位置，最后父级盒子的高度为0，就影响了下面的标准盒子流
很多情况下，子盒子有多少内容就显示多少自动撑开父盒子最合理
清除浮动不是真的把浮动效果清除了而是清除了浮动带来的以上影响
1、浮动会影响布局
即影响下方标准盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmmbE1bP-1670653461121)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130154256390.png)]
2、清除浮动的本质
清除浮动主要是为了解决父级元素因为浮动引起的内部高度为0的问题。清除浮动之后父级就会根据子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。
3、清除浮动的方法
1】clear语法：
clear:属性值；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S9ArxQgO-1670653461122)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130154856127.png)]
工作中几乎只用both
2】额外标签法
在最后一个浮动元素末尾添加空标签
<div class="clear" style="clear:both;"><div>
3】父级添加overflow属性方法
可以给父级元素添加overflow为hidden|auto|scroll都可以实现
代码简洁，但是容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素怒。要慎重使用
4】使用after伪元素清除浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VSdHnI2D-1670653461122)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130155947910.png)]
*zoom：1；ie6,7专门清除浮动的样式
父级元素调用图片中的样式即可解决
4】双伪元素清除浮动
.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
浮动元素的父级元素调用
清除浮动的情况
满足下面三种情况需要清除
1、父级元素没有高度
2、子盒子浮动
3、影响下面布局
十五、ps工具
1、ps切片工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I2Xoa3pT-1670653461123)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130194932892.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evXVrbL0-1670653461123)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221130195009983.png)]
2、切图插件cutterman
cutterman是运行在ps中的插件，能够自动将你需要的图层进行输出，以替代传统的手工导出web格式以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出。
官网：http://www.cutterman.cn
需要ps为完整版现在需要付费了
案例：学成在线案例
1】准备
psd源文件
ps切图+vscode+chrome
2、创建study文件夹
3、study内新建images、index.html首页,style.css样式文件
4、link链接样式表，用清除内外边距样式测试是否成功
2】css书写顺序
1、布局属性：display/position/float/clear/visibility/overflow
2、自身属性
width/height/margin/padding/border/background
3、文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
4、其它属性css3
content/cusor/boder-radius/box-shadow/text-shadow/background:linear-gradient等
3】布局流程
1、确定页面的可视区（版心）
2、先行后列
3、先结构后样式
4、运用盒子模型
4】头部制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QlXnEJTt-1670653461123)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221201103323584.png)]
5】banner制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTrGtfN2-1670653461124)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221201111855561.png)]
十六、定位
1、为什么要用定位
将盒子定在某一位置，自由的漂浮在其它盒子之上
2、定位
定位=定位模式+边偏移
3、边偏移
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PJbWC1vy-1670653461124)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202120839126.png)]
4、定位模式position
选择器{position:属性值;}
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
5、静态定位static-了解
-
元素默认定位方式，无定位的意思相当于none
-
按照标准流摆放位置，没有边偏移
-
布局基本不用
6、相对定位relative-重要
例：
div{
position:relative;
top:100px;
left:100px;
}
相对定位：相对于原来在标准流的位置（即去掉定位属性的位置）上进行偏移
特性：与浮动不同，它原先的位置继续占有，后面的盒子仍然以原来标准流的方式对待他原先位置
7、绝对定位absolute-重要
绝对定位是元素以带有定位的父级元素来移动位置
.father{
width:350px;
height:350px;
background-color:pink;
margin:100px;
position:relative;
}
.son{
width:200px;
height:200px;
background-color:purple;
margin-left:100px;
position:absolute;
top:50px;
left:50px;
}
特性：
1、完全脱标-完全不占位置
2、父级元素没有定位，则以浏览器为准定位
.father{
width:350px;
height:350px;
background-color:pink;
margin:100px;
}
.son{
width:200px;
height:200px;
background-color:purple;
margin-left:100px;
position:absolute;
top:50px;
left:50px;
}
注意：父级元素不一定是上一层的也可以是爷爷等祖先级
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apYySXII-1670653461125)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202122935585.png)]
.yeye{
width:500px;
height:500px;
background-color:skyblue;
position:relative;
}
.father{
width:350px;
height:350px;
background-color:pink;
margin:100px;
}
.son{
width:200px;
height:200px;
background-color:purple;
margin-left:100px;
position:absolute;
top:50px;
left:50px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tk3g4NhH-1670653461126)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202122919516.png)]
注意：绝对定位的盒子不占有位置
口诀：
子绝父相-子绝对定位，父相对定位
因为绝对定位不占有位置，父级用绝对定位就会引起页面布局混乱
8、固定定位fixed-重要
固定定位是绝对定位的一种特殊形式
1、完全脱标–完全不占位置
2、只认浏览器的可视窗口–浏览器可视窗口+边偏移 来设置元素的位置
- 跟父级元素没有任何关系
- 不随滚动条滚动
9、绝对定位的盒子居中
注意：绝对定位/固定定位的盒子不能通过设置margin设置水平居中
绝对定位时想要实现水平居中可以这样设置：
1、left:50% 让盒子的左侧移动到父级元素的水平居中距离
2、margin-left:-60px;让盒子向左移动自身宽度的一半
.son{
width:120px;
position:absolute;
left:50%;
margin-left:-60px;
}
垂直居中也同理
总结：相对靠自己，绝对靠父级，固定浏览器
10、堆叠顺序
在使用定位布局时可能会出现盒子重叠的情况
遵循后来者居上的规则
z-index
此属性可以改变盒子的堆叠顺序
- 属性值： 正整数、负整数或0，默认为0，数值越大，盒子越靠上
- 如果属性值相同则按后来居上规则
- 数字后面不能加单位
注意：z-index只能用于相对定位、绝对定位和固定定位元素，其它标准流和浮动、静态定位无效
11、定位改变display属性
绝对定位和固定定位和浮动一样改变为行内块元素
行内块不给宽度就是默认宽度，可以设置高宽
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yj3AD4aS-1670653461126)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202140249327.png)]
十七、css高级技巧
1、元素的显示与隐藏
目的：让一个元素在页面中消失但是不在文档源代码中删除
1.1display显示-重点
常用display，visibility使用较少
display:none 隐藏对象
特点：隐藏元素并不保留位置
block值除了转为块级对象外还有显示元素的意思
1.2visibility可见性
| 值 | 描述 |
|---|---|
| inherit | 继承上一个父对象的可见性 |
| visible | 对象可视 |
| hidden | 对象隐藏 |
特点：可以隐藏元素，但是保留位置
1.3overflow溢出-重点
对超出的部分内容进行怎样显示
| 属性值 | 描述 |
|---|---|
| visible | 超出部分正常显示，不剪切内容也不添加滚动条**（默认）** |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条，一般不用不好看 |
| auto | 超出自动显示滚动条，不超出不显示滚动条，不好看一般不用 |
2、css用户界面样式
更改一些用户操作样式，以便提高更好的用户体验
2.1鼠标样式cursor
| 属性值 | 描述 |
|---|---|
| defualt | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2.2轮廓线outline
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QBFK3HNn-1670653461126)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202151251041.png)]
用于绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline:outline-color||outline-style||outline-width
但是我们都不关心可以设置多少，我们平时都是去掉的
最直接的写法是outline：0；或者outline:none;
常在css开头初始化为outline：0；
因为轮廓线比较丑
2.3防止拖拽文本域resize
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVjmRuTy-1670653461127)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202151200219.png)]
在实际开发中我们的文本域右下角是不可以拖拽的
<tecxtarea style="resize:none;"></tecxtarea>
3、vertical-align垂直对齐
- 有宽度的块级元素居中对齐，是margin：0 auto;
- 让文字居中对齐，是text-align:center;
3.1vertical-align垂直对齐，只针对行内元素或者行内块元素
vertical-align:baseline|top|middle|bottom
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sgt5qKEx-1670653461127)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202152044415.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-idpk1rLj-1670653461128)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202152137178.png)]
3.2去除图片底侧空白缝隙
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FjzXbjj7-1670653461128)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202152338152.png)]
原因:默认基线对齐
解决办法：
img设置
vertical-align:bottom;或者middle、top等只要不基线对齐就行
或者给img添加display：block；转为块级元素就不会存在问题了
4、溢出文字省略号显示
三部曲
/*1、先强制一行内显示文本*/
white-space:nowrap;
/*2、超出部分隐藏*/
overflow:hidden;
/*3、文字用省略号替代超出部分*/
text-overflow:ellipsis;
- white-space：normal默认处理方式|nowrap强制一行显示直到文本结束或者遇到br才换行；
- text-overflow:clip不显示省略标记，简单裁剪|elipsis当对象内文本溢出时显示省略标记;
5、css精灵技术sprite-重点
5.1为什么需要精灵技术
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ke1lkhkw-1670653461129)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202153748345.png)]
为了有效的减少服务器接受和发送请求的次数，提高页面加载速度
5.2精灵技术讲解
实则将多长图片整合到一张大图
然而各个网页元素通常只需要精灵图中不同位置的某个小图，需要精确定位到精灵图中的某一小图。
这样只需要向服务器请求一次
background-position配合盒子尺寸来部分显示大图中的完整图标
也就是用background-position定位到小图的位置即可
5.3制作精灵图-了解
将背景图像整合到一张大图
一般都是小的背景图，不放插图，且竖着排列摆放图片，中间适当留有空隙
6、滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了css滑动门技术，它从新的角度构建了页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
<a ><span></span></a>
a设置左侧背景
span设置右侧背景
因为滑动块左右推拉，更文字内容宽度有关所以设置为行内块
a{
display:inline-block;
height:33px;
background:url() norepeat;
padding-left:15px;
color:#fff;
}
a span{
display:inline-block;
height:33px;
background:url() no-repeat right top;
}
总结
1、a设置背景左侧，padding撑开合适宽度
2、span色湖之背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度
3、之所以a包含span就是因为整个导航都是可以点击的
7、margin负值的运用
1】负边距+定位：水平垂直居中
即前面提到的，一个绝对定位的盒子利用50%的父级盒子，然后往左走自己宽度的一半就可以实现水平居中，垂直居中同理
2】压住盒子相邻边框
border:1px solid #ccc;
margin-left:-1px;
这样两个紧贴的相邻边框可以合并为一条也就不会显得粗
缺点：后面的盒子会压住前面的盒子边框会导致前面边框显示不出，这时用hover就会有问题
解决缺点：利用相对定位，在hover时用相对定位可以把边框到上层，若其它边框元素也为相对定位，则可以再利用z-index解决
8、css三角形
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JroF7zil-1670653461129)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202165436738.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqTcuAOs-1670653461129)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202165513240.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1kgLrDp4-1670653461130)(C:\Users\ZYJ\AppData\Roaming\Typora\typora-user-images\image-20221202165544322.png)]
9、网页灰白色
html{
filter:grayscale(1);
}
rflow:hidden;
/3、文字用省略号替代超出部分/
text-overflow:ellipsis;
+ white-space：normal默认处理方式|nowrap强制一行显示直到文本结束或者遇到br才换行；
+ text-overflow:clip不显示省略标记，简单裁剪|elipsis当对象内文本溢出时显示省略标记;
## 5、css精灵技术sprite-重点
### 5.1为什么需要精灵技术
[外链图片转存中...(img-Ke1lkhkw-1670653461129)]
为了有效的减少服务器接受和发送请求的次数，提高页面加载速度
### 5.2精灵技术讲解
实则将多长图片整合到一张大图
然而各个网页元素通常只需要精灵图中不同位置的某个小图，需要精确定位到精灵图中的某一小图。
这样只需要向服务器请求一次
background-position配合盒子尺寸来部分显示大图中的完整图标
也就是用background-position定位到小图的位置即可
### 5.3制作精灵图-了解
将背景图像整合到一张大图
一般都是小的背景图，不放插图，且竖着排列摆放图片，中间适当留有空隙
## 6、滑动门
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了css滑动门技术，它从新的角度构建了页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
```html
<a ><span></span></a>
a设置左侧背景
span设置右侧背景
因为滑动块左右推拉，更文字内容宽度有关所以设置为行内块
a{
display:inline-block;
height:33px;
background:url() norepeat;
padding-left:15px;
color:#fff;
}
a span{
display:inline-block;
height:33px;
background:url() no-repeat right top;
}
总结
1、a设置背景左侧，padding撑开合适宽度
2、span色湖之背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度
3、之所以a包含span就是因为整个导航都是可以点击的
7、margin负值的运用
1】负边距+定位：水平垂直居中
即前面提到的，一个绝对定位的盒子利用50%的父级盒子，然后往左走自己宽度的一半就可以实现水平居中，垂直居中同理
2】压住盒子相邻边框
border:1px solid #ccc;
margin-left:-1px;
这样两个紧贴的相邻边框可以合并为一条也就不会显得粗
缺点：后面的盒子会压住前面的盒子边框会导致前面边框显示不出，这时用hover就会有问题
解决缺点：利用相对定位，在hover时用相对定位可以把边框到上层，若其它边框元素也为相对定位，则可以再利用z-index解决
8、css三角形
[外链图片转存中…(img-JroF7zil-1670653461129)]
[外链图片转存中…(img-jqTcuAOs-1670653461129)]
[外链图片转存中…(img-1kgLrDp4-1670653461130)]
9、网页灰白色
html{
filter:grayscale(1);
}
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
