CSS（五）

已于 2023-07-10 14:42:51 修改
阅读量205 收藏
点赞数
分类专栏： css 文章标签： css 前端
于 2022-12-21 22:55:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DeDeDeFeng/article/details/128402847
版权

CSS初始化

不同的浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CDD初始化。

CSS初始化是指重设浏览器的样式，（也成为CSS reset）

每个网页都必须首先进行CSS初始化。

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码的时候出现乱码的问题。

比如：

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\9ED1

下列以京东为例：

/* 所有的标签内外边距变为0 清零 */
* {
	margin: 0;
	padding: 0
}
/* em 和 i 的斜体文字不倾斜 */
em,
i {
	font-style: normal
}
/* 去掉li标签的小圆点 */
li {
	list-style: none
}

img {
	/* 边框为0,照顾低版本的浏览器 如果图片包含了链接会有边框的问题bug */
	border: 0;
	/* 取消图片底侧有空白缝隙的问题 */
	vertical-align: middle
}

button {
	/* 当鼠标经过button按钮的时候,鼠标变成小手 */
	cursor: pointer
}

a {
	color: #666;
	/* 去除a链接的下划线 */
	text-decoration: none
}

a:hover {
	/* 当鼠标经过的时候a链接变成京东红颜色 */
	color: #c81623
}

button,
input {
	/* "\5B8B\4F53"为宋体 */
	font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
	/*  CSS3抗锯齿形,让文字显示的更加清晰 */
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
	color: #666
}
/* hide,none 元素隐藏,看不见 */
.hide,
.none {
	display: none
}
/* 清除浮动 */
.clearfix:after {
	visibility: hidden;
	clear: both;
	display: block;
	content: ".";
	height: 0
}

.clearfix {
	*zoom: 1
}

重点：

font-style: normal ；  斜体文字不倾斜

li {    list-style: none；}  去掉li标签的小圆点

img {    border: 0;  边框为0,照顾低版本的浏览器 如果图片包含了链接会有边框的问题bug
    vertical-align: middle； 取消图片底侧有空白缝隙的问题  }

button {    cursor: pointer；}  当鼠标经过button按钮的时候,鼠标变成小手

a {      text-decoration: none； }  去除a链接的下划线

display: none   元素隐藏,看不见

HTML5和CSS3提高

HTML5的新特性 

这些新特性都有兼容性问题，基本都是IE9+以上版本的浏览器才支持

HTML5新增的语义化标签 

<header> : 头部标签

<nav> : 导航标签

<article> : 内容标签

<section> : 定义文档某个区域

<aside> : 侧边栏标签

<footer> : 尾部标签

 

 注意点：

1.这些语义化标准主要针对搜索引擎的

2.新标签页面中可以多次使用

3.在IE9中，需要把这些元素转换为块级元素

4.移动端更喜欢使用这些标签

HTML新增的多媒体标签

1.视频：<video>

语法：

<video src="文件地址" controls="controls"></video>

controls播放

浏览器MP4WebMOgg
Interent Exploreryesnono
Chromeyesyesyes
Firefox

yes

从Firefox 21版本开始

Linex 系统从Firefox 30 开始

yesyes
Safariyesnono
Opera

yes

从Opara 24 版本开始

yesyes

2.视频： <video>

视频video常见属性

实例

播放录像：

<video width="320" height="240" controls>

        <source src="movie.mp4" type="video/mp4">

        <source src="movie.ogg" type="video/ogg">

        您的浏览器不支持 video 标签。

</video>

属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controlscontrols向用户显示播放控件
widthpixels（像素）设置播放器宽度
heightpixels（像素）设置播放器高度
looploop播放完是否继续播放该视频，循环播放
preload

auto（预先加载视频）

none（不应加载视频）

规定是否预加载视频（如果有了antoplay，就忽略该属性）
srcurl视频url地址
posterlmgurl加载等待的画面图片
mutedmuted静音播放

2.音频：<audio>

语法：

<audio src="文件地址" controls=“controls”></ audio>

当前<audio>元素支持三种音频格式

目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器MP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

实例

播放声音：

<audio controls>

        <source src="horse.ogg" type="audio/ogg">

         <source src="horse.mp3" type="audio/mpeg">

         您的浏览器不支持 audio 元素。

</audio>

 属性：

属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
looploop如果出现该属性，则每当音频结束时重新开始播放。
mutedmuted如果出现该属性，则音频输出为静音。
preloadauto
metadata
none		规定当网页加载时，音频是否默认被加载以及如何被加载。
srcURL规定音频文件的 URL。

多媒体标签总结：

1.音频标签和视频标签使用方式基本一致

2.浏览器支持情况不同

3.谷歌浏览器把音频和视频自动播放禁止了

4.我们可以给视频标签添加muted属性来静音播放，音频不可以（可以通过JavaScript解决）

5.视频标签是重点，我们经常设置自动播放，不实用controls空间，循环和设置大小属性

HTML新增的input表单标签

属性值说明

type="email"

限制用户输入必须为Email类型
type="url"限制用户输入必须为URL类型
type="date"限制用户输入必须为日期类型
type="time"限制用户输入必须为时间类型
type="month"限制用户输入必须为月类型
type="week"限制用户输入必须为周类型
type="number"限制用户输入必须为数字类型
type="tel"手机号码
type="search"搜索框
type="color"生成一个颜色选择表单

13 

type="file" 选择文件

<body>
    <!-- 我们验证的时候必须添加from表单域 -->
    <form action="">
        <ul>
            <li>邮箱：<inout type="email"/></li>
            <li>网址：<inout type="url"/></li>
            <li>日期<inout type="date"/></li>
            <li>日期<inout type="time"/></li>
            <li>数量<inout type="number"/></li>
            <li>手机号码<inout type="tel"/></li>
            <li>搜索<inout type="search"/></li>
            <li>颜色<inout type="color"/></li>
            <!-- 当我们点击提交按钮就可以验证表单 -->
            <li><inout type="submit" value="提交"></li>
        </ul>
    </form>
</body>

新增表单属性重点注释：

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff/on

当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

默认已经打开，如autocompelete=“on”，关闭autocompete=“off”需要放在表单内，同时加上name属性，同时成功提交

mumltiplemultiple可以多选文件提交

 CSS3新增选择器

1.属性选择器

属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助于类或者id选择器

选择符简介
E[att]选择具有att属性的E元素
E[att="val"]选择具有att属性且属性值等于val开头的E元素 重点
E[att^="val"]匹配具有att属性且值以val开头的E元素
E[att$="val"]匹配具有att属性且值以val结尾的E元素
E[att*="val"]匹配具有att属性且值中含有val的E元素

注意：类选择器、属性选择器、伪类选择器，权重为10。 

<style>
        /* 1.必须是input，但是同时具有value这个属性 选择这个元素 */
        input[value] {
            color: pink;
        }
        
        /* 2.选择属性=值的某些元素,来选择这个元素，只选择type=text 文本框的input 选取出来 */
        input[type=text] {
            color: aqua;
        }

        /* 3.选择首先是div 然后 具有class属性 并且属性值必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: blue;
        }

        /* 4.跟第三条相反，选择首先是div 然后具有class 属性 并且属性值是data结尾的这些元素 */
        div[class$=data] {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名">
    <input type="text" >

    <!-- 2.属性选择器还可以选择属性=值的某些元素 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">

    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>

    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">我是谁</section>
</body>

 

2.结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child（n）匹配父元素中的n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type（n）指定类型E的第n个

 nth-child(n)选择某个父元素的一个或者多个特定的子元素

· n 可以是数字，关键字和公式

· n 如果是数字，就是选择第n个子元素，里面数字从1开始...

· n 可以是关键字 ： even 偶数 ，odd 奇数

· n 可以是公式 ： 常见的公式如下 （如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

公式取值
2n偶数
2n+1奇数
5n5    10   15  ...
n+5从第5个开始（包含第五个）到最后
-n+5前5个（包含第5个）...

区别：

nth-child(n) 会把所有的盒子都排列序号

执行的时候首先看 nth-child(n)，之后在回去看 前面的标签

/**  nth-child对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 **/

nth-of-type(n) 会把指定元素的盒子排列序号

执行的时候首先看 前面的标签 之后在看 nth-of-type(n) 选择第n个盒子

/**  nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E，然后在根据E 找第n个孩子  **/

3.伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意： 

· before 和 after 创建一个元素，但是属于行内元素

· 新创建的这个元素在文档树中是找不到的，所以我们成为伪元素

· 语法： element::before {}

· before 和after 必须有 content 属性

· before 在父元素内容的前面创建元素，after在父元素内容的后面插入元素

· 伪元素选择器和标签选择器一样，权重为1

事例： 

结果：

（注*  在浏览器中不显示标签元素‘<>开头的盒子’） 

伪元素选择器使用场景1-字体图标

语法：

p::before {

                position:absolute;

                right: 20px;

                top: 10px;

                content: '\e91e' ;

                font-size: 20px ;

}

事例： 

<style>
			/* 字体声明 */
			        @font-face {
			            font-family: 'icomoon';
			            src: url('fonts/icomoon.eot?qtkmnl');
			            src: url('fonts/icomoon.eot?qtkmnl#iefix') format('embedded-opentype'),
			                url('fonts/icomoon.ttf?qtkmnl') format('truetype'),
			                url('fonts/icomoon.woff?qtkmnl') format('woff'),
			                url('fonts/icomoon.svg?qtkmnl#icomoon') format('svg');
			            font-weight: normal;
			            font-style: normal;
			            font-display: block;
			        }
			div {
				position: relative;
				width: 200px;
				height: 35px;
				border: 1px solid red;
			}
			div::after {
				position: absolute;
				top: 10px;
				right: 10px;
				font-family: 'icomoon';
				/* 可以直接复制字体符号,也可以使用字体编码 但是必须要加 \ 反斜杠 */
				/* content: ''; */
				content: '\e91e';
				color: red;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

 伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例

<style>
			.liuneng {
				position: relative;
				width: 1000px;
				height: 600px;
				top: 100px;
				left: 100px;
				background-color: blue;
			}

			/* 图片尺寸是958*542，比父盒子小 */
			.liuneng img {
				width: 100%;
				height: 100%;
			}

			.liuneng::before {
				content: '';
				/* 隐藏遮罩层 */
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5) url(lianxi/bofang.png) no-repeat center;
			}

			/* 当我们鼠标经过liuneng这个盒子，就让里面的遮罩层  伪元素 ::before 显示出来 */
			.liuneng:hover::before {
				/* 这个地方不是转换为块级元素，而是显示元素 */
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="liuneng">
			<img src="lianxi/liuneng.png" alt="">
		</div>
	</body>

 伪元素选择器使用场景3-伪元素清除浮动

第一种：(在内容后面::after插入一个清除浮动的盒子，后面闭合)

.clearfix::after {

        content:"";                        /**  为元素必须写的属性  **/

        display:block;                /**  插入的元素必须是块级，转换为块级元素  **/

        height:0;                        /**  高度为0，不要看见这个元素  **/

        clear:both;                        /**  核心代码清除浮动  **/   

        visibility:hidden;                /** 设置隐藏，不要看见这个元素  **/

}

 第二种：(在内容后面::after和前面::before分别插入一个清除浮动的盒子，双伪元素，两边闭合)

 .clearfix::before , .clearfix::after {

        content:"";                             /**  为元素必须写的属性  **/

        display:table;                        /**  插入的元素必须是块级，如果用display:block; 两个盒

}                                                清除浮动的盒子会上下顺序排列，display:table;可以把两个

                                                  盒子都写在一行上   **/

...

.clearfix::after {

        clear:both;

}

CSS3盒子模型 

CSS3 中可以通过box-sizing 来指定盒模型，有2个值：即指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

分为两种情况：

1.box-sizing：content-box 盒子大小为width+padding+border （以前默认的）

2.box-sizing：border-box 盒子大小为width 

 注意：如果盒子模型我们改为了box-sizing：boder-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width）

代码属性新加一句

.{

        margin：0；

        padding：0；

        box-sizing：border-box；

}

 CSS3其他特性

图片模糊

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法：

filter：函数（）；    

例如：filter：blur（5px）；        blur模糊处理  数值越大越模糊

filter - CSS（层叠样式表） | MDN (https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)

CSS3 calc函数：

calc（）此CSS函数让你在声明CSS属性值时执行一些计算。

width：calc（100%-80px） 

括号里面可以使用  +（加）  -（减）  *（乘）  /（除）来进行计算 

CSS3新特性

过渡（transition） 

过渡写到本身上，谁做动画给谁加

transition: all 0.3s;

all代表全部

0.3s代表时间

转换(transfrom)（2D转换）

二位坐标系转换，改变标签在二维平面上的位置和形状的一种技术

1.移动：translate

可以改变元素在页面中的位置，类似定位

语法：

transfrom ： translate(X,Y);

或者分开写

transfrom ： translateX(n);

transfrom ： translateY(n);

特点：

1.沿着XY轴移动元素

2.translate不会影响到其他元素的位置

3.translate中的百分比单位是相对于自身元素的translate:(50%,50%);

4.对行内标签没有效果

2.旋转：rotate

让元素在二维平面内顺时针或者逆时针旋转

语法：

transfrom: rotate(度数)；

重点：

1.rotate里面跟度数，单位是deg 比如rotate(45deg)

2.角度为正数时，顺时针旋转；为负数时，逆时针旋转

3.旋转的中心默认是元素的中心点

设置旋转中心点transfrom-origin

语法

transfrom-origin:  x  y;

------

重点：

1.注意后面的参数x和y用空格隔开

2.x y默认旋转的中心点是元素的中心点（50%  50%）

3.还可以给x  y设置像素、方位名词（top  bottom  left  right  center）

3.缩放：scale

给元素添加上这个属性就能控制大放大还是缩小

语法:

transfrom: scale(x,y);

注意：

1.注意其中的xy用逗号分隔

2.transfrom: scale(1,1)  宽和搞都放大了一倍

3.transfrom: scale(2,2)  宽和高都放大了二倍

4.transfrom: scale(2)   宽和高都放大了二倍

5.transfrom: scale(0.5，0.5)   缩小

6.sacle最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子，或者说不会影响、盖住下面的盒子

比如：

以前的方法 （影响其他盒子）：width: 300px ;    hight:  300px;

现在的方法（不会影响其他盒子）：transfrom: scale(300px，300px)

4.   2D转换综合写法

注意：

1.同时使用多个转换，其格式为：transfrom:  translate()  rotate()  scale()  ...等等等

2.其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

3.当我们同时有位移和其他属性时，记得要将位移放到最前面

5.转换总结

 CSS3  动画

1.基本使用

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

方法一：

用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {

        0% {

                width:100px ;

        }

        100% {

                width:200px;

        }

}

解释：

0%是动画的开始，100%是动画的完成

在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数

请用百分比来规定发生的时间，或用关键词“from”和“to”，等同于0%和100%

------

元素使用动画（谁要使用给谁加）

div {

        width：200px；

        height：200px；

        background-color：aqua;

        margin:100px auto;

        调用动画

        animation-name：动画名称；

        持续时间

        animatain-duration：持续时间；

}

案例：我们一打开页面，一个盒子就从左边走到右边


    1.定义动画
    @keyframes move {
        开始状态
        0% {
            transform：translateX（0px）；
        }
        结束状态
        100% {
            transform：translateX（1000px）；
        }
    }
    div {
        width：200px；
        height：200px；
        background-color:pink;
        2.调用动画
            动画名称
            animation-name：move；
            持续时间
            animation-duration：2s；
    }

缩放：scale

DeDeDeFeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端知识之CSS】CSS提高性能的方法有哪些
weixin_44337386的博客
05-17 399
本系列主要整理前端面试中需要掌握的知识点。本节介绍如果要进行优化，CSS提高性能的方法有哪些。
20个CSS快速提升技巧
sodakii的博客
09-29 222
这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少。在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础。）可以作为给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观。
【译】整理->20个让你效率更高的CSS代码技巧
weixin_34004576的博客
06-20 387
译者：果冻cc原文链接：tutorialzine.com/2016/08/20-…在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。好了，我们开始。1.注意外边距折叠与其他大多数属性不同，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素...
CSS高级技巧（提高现有基础水平）
weixin_51415327的博客
08-21 134
1. 精灵图
20个 CSS 快速提升技巧
yb305
07-24 233
本文涵盖了20个css技巧，可以解决许多工作中常见的问题。 1、使用CSS重置（reset） css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。 大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。 *{ box-sizing:border-box; margin:0; padding:0.
详解CSS五种方式实现Footer置底
12-30
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部...
CSS五日教程
01-17
CSS五日教程-为什么使用串接样式表？因为它能对网页的设计施以绝对的控制。它还是维护和更新一个网站最有效的途径。它能使网页的体积更小下载速度更快。
CSS绘制五角星
10-26
纯CSS绘制五角星、六角形、五边形、六边形、心形
CSS3 倒计时
03-21
纯 CSS3 实现 圆形时间进度条-倒计时 有需要的可以下载看看
排除某个css的干扰_20个 CSS 快速提升技巧
weixin_34245159的博客
01-19 1172
作者：web秀如何提升你的CSS技能，掌握这20个css技巧即可[完整版] _ Web秀​www.javanx.cn本文涵盖了20个css技巧，可以解决许多工作中常见的问题。1、使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规...
提高 CSS 的 5 个技巧
努力是为了站在万人之中，成为别人的光
03-15 4765
SPSS的全称是Statistical Product and Service Solutions，即“统计产品与服务解决方案”软件，该软件是公认的最优秀 的统计分析软件包之一。SPSS软件面向行业应用人员，软件设计突出统计方法的成熟、实用、易用、界面易操作及与文 字处理软件等的高交互性上。
如果要做优化，CSS提高性能的方法有哪些？
weixin_48967543的博客
04-19 213
一、前言拼多多优惠券 www.fenfaw.net 每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验 因此，在整个产品研发过程中，css性能优化同样需要贯穿全程 二、实现方式 实现方式有很多种，主要有如下： 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 内联首屏关键CSS 在打开一个页..
CSS实现鼠标经过某个盒子的时候，提高当前盒子的层级
ChuanyangChen的博客
10-28 483
诀窍： 如果盒子没有定位，则为盒子的:hover{}添加相对定位（保留原来的位置） 如果盒子有定位，则使用z-index提高盒子层级
【干货分享】前端面试知识点锦集02（CSS篇）——附答案
weixin_30709635的博客
12-22 2237
二、CSS部分 1、解释一下CSS的盒子模型？ 回答一：a、标准的css盒子模型：宽度=内容的宽度+边框的宽度+加上内边具的宽度b、网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。c、这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也...
CSS 如何提高权重？
weixin_46422035的博客
06-22 5490
如何计算CSS权重？覆盖CSS样式时的最优解？一起来看看吧
如何提升你的CSS技能，掌握这20个css技巧即可[完整版]
嘿嘿
04-10 305
前言 随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。 如果您对CSS比较陌生，看看这篇文章《CSS选择器如此之多，你了解多少？》 1...
CSS 高频面试题
MissXu666的博客
01-23 390
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题”，可以在CSS中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。赋予绝对定位的元素会从文档流中拖出，使用left、right、top、bottom等属性相对于相对于最近的已定位的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则根据 body 元素左上角作为参考进行定位。每个项目两侧的间隔相等。
使用CSS提高网站性能的30种方法
艾编程带你学前端博客
12-30 1848
根据httparchive.org的页面重量报告，CSS在平均70个请求和2MB的网页上占7个HTTP请求和70Kb的代码。下面的30个技巧将帮助您优化CSS，以改善实际和感知的响应时间。
css距离顶部高度_提升布局能力！理解 CSS 的多种背景及使用场景和技巧
weixin_39806808的博客
11-21 426
CSS background是最常用的CSS属性之一。然而，并不是所有开发人员都知道使用多种背景。这段时间都在关注使用多种背景场景。在本文中，会详细介绍background-image`属性，并结合图形来解释多个背景使用方式以及其实际好处。如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。介绍CSS background属性是以下属性的简写:background-...
css五张平行图片滚动
最新发布
12-23
以下是一个使用CSS实现五张平行图片滚动的示例： ```html <!DOCTYPE html> .container { width: 100%; overflow: hidden; } .slider { display: flex; animation: slide 10s infinite; } .slide { flex: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值