CSS部分
选择器
属性选择器
属性选择器
[attr]:指定属性的元素;
[attr=val]:属性等于指定值的元素;
[attr*=val]:属性包含指定值的元素;
[attr^=val]:属性以指定值开头的元素;
[attr$=val]:属性以指定值结尾的元素;
[attr~=val]:属性包含指定值(完整单词)的元素(不推荐使用);
[attr|=val]:属性以指定值(完整单词)开头的元素(不推荐使用);
组合选择器
相邻兄弟选择器:A + B
普通兄弟选择器:A ~ B
子选择器:A > B
后代选择器:A B
伪类
条件伪类
:lang():基于元素语言来匹配页面元素;
:dir():匹配特定文字书写方向的元素;
:has():匹配包含指定元素的元素;
:is():匹配指定选择器列表里的元素;
:not():用来匹配不符合一组选择器的元素;
行为伪类
:active:鼠标激活的元素;
:hover:鼠标悬浮的元素;
::selection:鼠标选中的元素;
状态伪类
:target:当前锚点的元素;
:link:未访问的链接元素;
:visited:已访问的链接元素;
:focus:输入聚焦的表单元素;
:required:输入必填的表单元素;
:valid:输入合法的表单元素;
:invalid:输入非法的表单元素;
:in-range:输入范围以内的表单元素;
:out-of-range:输入范围以外的表单元素;
:checked:选项选中的表单元素;
:optional:选项可选的表单元素;
:enabled:事件启用的表单元素;
:disabled:事件禁用的表单元素;
:read-only:只读的表单元素;
:read-write:可读可写的表单元素;
:blank:输入为空的表单元素;
:current():浏览中的元素;
:past():已浏览的元素;
:future():未浏览的元素;
结构伪类
:root:文档的根元素;
:empty:无子元素的元素;
:first-letter:元素的首字母;
:first-line:元素的首行;
:nth-child(n):元素中指定顺序索引的元素;
:nth-last-child(n):元素中指定逆序索引的元素;;
:first-child :元素中为首的元素;
:last-child:元素中为尾的元素;
:only-child:父元素仅有该元素的元素;
:nth-of-type(n) :标签中指定顺序索引的标签;
:nth-last-of-type(n):标签中指定逆序索引的标签;
:first-of-type:标签中为首的标签;
:last-of-type:标签中为尾标签;
:only-of-type:父元素仅有该标签的标签;
伪元素
::before:在元素前插入内容;
::after:在元素后插入内容;
优先级
10000:!important;
01000:内联样式;
00100:ID 选择器;
00010:类选择器、伪类选择器、属性选择器;
00001:元素选择器、伪元素选择器;
00000:通配选择器、后代选择器、兄弟选择器;
背景图片尺寸
body {
background: url(images/bg3.png) no-repeat;
/* background-size: contain; */
background-size: cover;
}
渐变(Gradients)
径向渐变
线性渐变 - 从上到下(默认情况下)
background-image: linear-gradient(direction[angle], color-stop1, color-stop2, ...);
线性渐变 - 从左到右
background-image: linear-gradient(to right, red , yellow);
线性渐变 - 对角
background-image: linear-gradient(to bottom right, red, yellow);
重复的线性渐变
repeating-linear-gradient() 函数
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
径向渐变
语法–颜色节点均匀分布(默认情况下)
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
background-image: radial-gradient(circle, red, yellow, green);
size 参数定义了渐变的大小。它可以是以下四个值:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
利用CSS怎么创建渐变色边框
-
使用
border-image
-
使用
background-image
使用
background-image
绘制渐变色背景,并且把中间用纯色遮住应该是最容易想到的一种方法,思路是:使用两个盒子叠加,给下层的盒子设置渐变色背景和 padding,给上层盒子设置纯色背景。 -
两层元素、
background-image
、background-clip
为了解决方法 2 中
border-radius
不准确的问题,可以使用一个单独的元素作为渐变色背景放在最下层,上层设置一个透明的 border 和纯色的背景(需要设置 background-clip: padding-box 以避免盖住下层元素的 border), 上下两层设置相同的border-radius
。<div class="box1"> <div class="box2"></div> <div class="box3">内容</div> </div> .box1 { border: 4px solid transparent; border-radius: 16px; position: relative; background-color: #222; background-clip: padding-box; /* important */ .box2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; margin: -4px; border-radius: inherit; /* important 继承父元素的圆角边框 */ background-image: linear-gradient(to right, red , yellow); } }
-
伪元素、方法3的简化
我们可以使用伪元素替换
box2
以简化HTML结构。 -
单层元素、
background-clip
、background-origin
、background-image
最后是我觉得最优雅的一种方法,只需要用到单层元素,为其分别设置
background-clip
、background-origin
、background-image
这三个属性,每个属性设置两组值,第一组用于设置border内的单色背景,第二组用于设置border上的渐变色。<div class="box1"> <div class="box2">内容</div> </div> .box1 { border: 4px solid transparent; border-radius: 16px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, red , yellow), linear-gradient(to right, red , yellow); .box2 { width: 100%; height: 100%; border-radius: inherit; background-color: #fff; } }
padding-box(默认):指定背景图片由padding开始展示
content-box:指定背景图片在内容区域开始展示
border-box:指定背景图片在边框区域开始展示
内减模式
/* css3盒子,不需要手动计算盒子尺寸||内减模式 */
box-sizing: border-box;
解决盒子塌陷问题
.father {
width: 100px;
height: 100px;
background-color: pink;
/* 方法1,给父集加border或者padding */
/* border: 1px solid #000; */
/* 方法2,加overflow: hidden; */
overflow: hidden;
}
.son {
width: 50px;
height: 50px;
background-color: skyblue;
margin-top: 10px;/* 塌陷源头 */
/* 方法3,传化行内块元素 */
/* display: inline-block; */
/* 方法4,加浮动 */
}
伪元素的使用
/* li:first-child {
color: aqua;
}
li:last-child {
color: red;
}
li:nth-child(3) {
color: blue;
}
li:nth-last-child(2){
color: blueviolet;
}
li:nth-child(-n+5) {
前五个
background-color: #3f906a;
}
li:nth-child(n+3) {
从第三个往后
background-color: #073d3d;
} */
图片垂直居中
行内块元素同样可以使用vertical-aglin来解决浏览器基线对齐产生的问题(浏览器默认把行内元素和行内块元素当做文字处理,也可以用
display:block;
解决)
/* 调节图片垂直方向对齐方式 */
/* 给父级添加行高 */
father {
line-height:100px;
text-align:center;/* 水平居中 */
}
img {
vertical-align: middle;//重点
}
居中方式
/* 居中方式 */
.aaaaa {
/* 直接定位 */
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle; // 图片
display: flex;
justify-content: center;
align-items: center;
}
flex布局
.grid-item {
width: 33.3%;
height: 200rpx;
display: flex;
flex-direction: column; /* 竖向排列 */
align-items: center; /*水平居中 */
justify-content: center; /* 垂直居中 */
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box; /* 内减模式 */
}
/*
flex-wrap: nowrap;
flex-flow: column wrap;
align-content: center; // 有第二行
flex:1;
align-self: flex-end; // 控制单个子元素的排序方式
order //定义项目的排列顺序,和z-index不一样
*/
.img-box {
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around; /* 四周平均留空 */
}
grid 布局
网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
.grid-container {
display: grid; /* inline-grid */
grid-template-columns: auto auto auto auto; /* 使用grid-template-columns 属性定义网格布局中的列数量。 */
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
grid-template-rows: 100px 300px; /* 使用grid-template-rows 属性定义第一行高度为 100px,第二行高度为 300px。 */
/*
grid-column-gap: 10px;
grid-row-gap: 10px;
*/
/* grid-gap: 10px 10px; */
grid-gap: 10px; /* 行列间距简写 */
}
/* 改变某个元素的大小,即边框开始结束位置 */
/* span 表示要跨越的行数 */
/* 负数表示倒数的位置 */
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3; /* 简写 */
grid-column: 1 / span 2; /* 简写 */
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
grid-row: 1 / 3; /* 简写 */
grid-row: 1 / span 2; /* 简写 */
}
/* 也可以简写为 */
.item {
grid-area: 1 / 1 / 3 / 3;
}
/* 或者 */
.item {
grid-area: 1 / 1 / span 2 / span 2;
}
属性 | 描述 |
---|---|
column-gap | 指定列之间的间隙 |
gap | row-gap 和 column-gap 的简写属性 |
grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性 |
grid-area | 指定网格元素的名称,或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性 |
grid-auto-columns | 指的默认的列尺寸 |
grid-auto-flow | 指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。 |
grid-auto-rows | 指的默认的行尺寸 |
grid-column | grid-column-start 和 grid-column-end 的简写属性 |
grid-column-end | 指定网格元素列的结束位置 |
grid-column-gap | 指定网格元素的间距大小 |
grid-column-start | 指定网格元素列的开始位置 |
grid-gap | grid-row-gap 和 grid-column-gap 的简写属性 |
grid-row | grid-row-start 和 grid-row-end 的简写属性 |
grid-row-end | 指定网格元素行的结束位置 |
grid-row-gap | 指定网格元素的行间距 |
grid-row-start | 指定网格元素行的开始位置 |
grid-template | grid-template-rows, grid-template-columns 和 grid-areas 的简写属性 |
grid-template-areas | 指定如何显示行和列,使用命名的网格元素 |
grid-template-columns | 指定列的大小,以及网格布局中设置列的数量 |
grid-template-rows | 指定网格布局中行的大小 |
row-gap | 指定两个行之间的间距 |
也可使用 justify、align、wrap 等等
/* 对齐方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 从行首开始排列 */
justify-content: end; /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* 一个挨一个在对齐容器得左边缘 */
justify-content: right; /* 元素以容器右边缘为基准,一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
清除float影响
/* 清除float影响
1.尾部额外标签,添加块元素的css样式clear:both
2.单伪元素清除法
.clearfix::after{
content:'';
display:blok;
clear:both;
//低版本浏览器添加
height:0;
visibility:hidden;
}
3.双伪元素解决塌陷法
.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
//真正清除浮动部分
.clearfix::after{
clear:both;
}
4.父元素添加overflow:hidden;
*/
定位
.box1 {
/* 相对定位,参考之前位置
(具备之前块特点)
*/
/* 固定定位,永远参考浏览器进行定位
1.脱标-不占位置
2.参考浏览器窗口改变位置
3.具备行内块元素特点
*/
/* 绝对定位(1.脱标,不占位置 2.改变之前标签显示模式,具备行内块的特点):
先找到已定位(有position)的父级(广义父级,就近原则),如果有就以这个父级为参考移动
如果没有,就以浏览器窗口为参考移动
*/
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: #450d9f;
}
.box2 {
/* 绝对定位的盒子不能使用margin:0 auto;居中 */
position: absolute;
/* margin: 0 auto; */
/* 居中方法1 */
/* left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -150px;
*/
/* 居中方法2 */
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color: #450d9f;
}
默认情况,定位的盒子,后来者居上
z-index:整数;取值越大,显示顺序越在上;默认为0,必须配合定位。
鼠标样式
.box {
width: 500px;
height: 500px;
background-color: #705c91;
/* 鼠标小手,默认箭头default */
/* cursor: pointer; */
/* 鼠标I形状 */
/* cursor: text; */
/* 鼠标十字形,可移动 */
cursor: move;
}
正圆
.box {
/* 圆形 */
border-radius: 50%;
width: 500px;
height: 500px;
}
三角形
<style>
.box1 {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid blue;
border-right: 100px solid green;
border-bottom: 100px solid yellow;
}
.box2 {
width: 0;
height: 0;
/* transparent 透明色 */
border-top: 200px solid transparent;
border-left: 0px solid blue;
border-right: 100px solid green;
border-bottom: 0 solid yellow;
}
.box3 {
width: 0;
height: 0;
border-color: transparent green transparent transparent;
border-style: solid;
border-width: 200px 100px 0 0;
}
span {
text-decoration: line-through;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>删除线</span>
</body>
overflow溢出
.box6 {
width: 200px;
height: 200px;
background-color: #71c4a7;
/* 溢出部分隐藏 */
/* overflow: hidden; */
/* 是否溢出都显示滚动条 */
/* overflow: scroll; */
/* 溢出部分可见 */
/* overflow: visible; */
/* 根据溢出判断是否显示滚动条 */
overflow: auto;
}
元素隐藏
1、visibility:hidden;占位隐藏
2、display:none;不占位隐藏,常用
精灵图
<!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>精灵图</title>
<style>
span {
display: inline-block;
/* 精灵图中具体小图片大小 */
width: 18px;
height: 24px;
/* 精灵图 */
background-image: url(images/bg3.png);
/* 背景图位置属性
水平,垂直方向;向左向下取负数
*/
background-position: -3px 0;
}
b {
display: inline-block;
/* 精灵图中具体小图片大小 */
width: 25px;
height: 21px;
/* 精灵图 */
background-image: url(images/bg3.png);
/* 背景图位置属性
水平,垂直方向;向左向下取负数
*/
background-position: 0 -90px;
}
</style>
</head>
<body>
<!-- 精灵图不能用img标签 -->
<!-- 精灵图的标签只能用行内标签 span b i... -->
<span></span>
<b></b>
</body>
</html>
过渡
/* 过渡配合hover属性,谁变化谁加transition */
.box {
width: 200px;
height: 400px;
background-color: #de1f1f;
/* 宽度200px,鼠标悬停时候变成400px,花费1秒 */
/* transition: width 1s,background-color 1s; */
/* all表示所有 */
transition: all 1s;
}
.box:hover {
width: 400px;
background-color: #12cb34;
}
盒子阴影
box-shadow属性是一个组合属性,语法为: box-shadow: h-shadow v-shadow blur spread color inset。
其中,
h-shadow表示水平方向上的阴影偏移量,
v-shadow表示垂直方向上的阴影偏移量,
blur表示阴影的模糊程度,
spread表示阴影的扩张程度,
color表示阴影的颜色,
inset表示是否要将阴影设置为内阴影。
特殊字符
css3超出部分省略
适用于input标签和普通标签文本内容超出部分省略号显示。
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow属性的使用:
特点:必须给块级容器指定高度,或者使用不换行属性让内容变宽
属性值:
- visible:默认值。
- hidden:内容会被修剪,浏览器会显示滚动条。
- scroll:由浏览器定夺,如果内容被修剪,会显示滚动条。
- auto:规定从父元素集成overflow属性的值。
white-space属性的使用 :处理元素中的空白
属性值:常用
- normal:文字换行。
- nowrap:文字不换行。
text-overflow属性的使用:
特点:该属性不会强制发生溢出,要是文本溢出其容器,必须设置overflow和white-space
属性值:
- clip:默认值,换行。
- ellipsis:显示一个‘…’来表示剪切文本
多行截断
.text {
/*
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
*/
/* 用行高设置也可以 */
line-height: 1.5;
max-height: 4.5rem;
overflow: hidden;
}
/* 通常用属性选择器来设置 */
/* 3行文字 */
<div class="text" line-clamp="3">
...
</div>
[line-clamp="3"] {
max-height: 4.5rem;
}
两端对齐、首行缩进2字符、多行超出部分隐藏并显示省略号
div {
line-height: 1.5;
text-indent: 2em;
text-align: justify;
/* 超出部分隐藏并显示... */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
var() 函数
插入自定义属性
/* :root是一个伪类选择器,用于选择文档的根元素。在HTML文档中,根元素通常是标签。*/
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
calc()
计算
div {
width: calc(100% - 100px);
}
filter()
滤镜(曝光度)
用法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
多属性组合使用
// 用空格分隔每个属性
filter: blur(5px) opacity(0.8) brightness(0.8);
CSS3 Filter 如此简单! - 知乎 (zhihu.com)
3D透视 perspective
div
{
perspective: 500px;
-webkit-perspective: 500px; /* Safari and Chrome */
}
zoom属性
CSS的zoom属性用于缩放元素的内容。该属性可以应用于块级元素和替换元素。
-
当应用于块级元素时,zoom属性会缩放元素的内容和内边距,但不会影响元素的边框大小或外边距。该属性的取值可以是一个百分比(例如zoom: 200%),表示按照指定的百分比缩放元素的内容。
-
当应用于替换元素(例如img、canvas、video)时,zoom属性会缩放元素的替换内容(例如图片、视频等),但不会影响元素的布局尺寸。
-
需要注意的是,zoom属性是非标准的CSS属性,只在部分浏览器中得到支持(主要是旧版的IE浏览器)。在现代的Web开发中,推荐使用transform属性来实现元素的缩放效果。
取消a标签在移动端点击高亮
a {
/* 取消a标签在移动端点击时的蓝色 */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
SEO搜索引擎优化
1、竞价排名
2、将网页制作成html后缀
3、标签语义化(在合适的地方使用合适的标签)
<!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">
<meta name="description" content="SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO">
<meta name="keywords" content="SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO">
<title>SEO</title>
<* 浏览器标题栏图片 *>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
SEO
</body>
</html>
4、…
项目目录准备
面试问题
1、搭建网页都需要用到哪些布局方式
①标准流(标签自带布局)
②浮动(float)
③定位(position)
层级关系
标准流<浮动<定位(默认情况,定位的盒子,后来者居上;z-index:整数;取值越大,显示顺序越在上;默认为0,必须配合定位。)