![](https://img-blog.csdnimg.cn/20210810223559125.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 66
Css
安澜仙王
希望生活会越来越好
展开
-
浏览器私有前缀
私有前缀-moz-:代表Firefox浏览器私有属性-ms-:代表ie浏览器私有属性-webkit-:代表safari,chrome私有属性-o-:代表Opera私有属性提倡的写法-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;border-radius:10px;...原创 2021-11-28 19:07:00 · 224 阅读 · 0 评论 -
CSS 3D转换
3D移动在2D移动的基础上多加了一个可以移动的方向,就是Z轴方向。translform:translateX(100px):仅仅是在X轴上移动translform:translateY(100px):仅仅是在Y轴上移动translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)translform:translate3d(x,y,z):其中x,y,z分别指要移动的轴的方向的距离代码示例:<!DOCTYPE html>.原创 2021-11-28 18:55:17 · 422 阅读 · 0 评论 -
CSS 动画
目录动画的基本使用1.用keyframes定义动画(类似定义类选择器)2.元素使用动画常用的动画属性动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。动画的基本使用制作动画分为两步:1.先定义动画2.再使用(调用)动画1.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称 { 0%{ width:100px; } 100%{原创 2021-11-24 20:59:43 · 182 阅读 · 0 评论 -
CSS 2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果,转换你可以简单理解为变形移动:translate旋转:rotate缩放:scale二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系2D转换之移动translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位1,语法transform: translate(x,y);或者分开写transform: translateX(n);原创 2021-11-13 22:42:00 · 679 阅读 · 0 评论 -
CSS 过渡(重点)
过渡动画:是从一个状态渐渐地过渡到另外一个状态可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(IE9以下版本)但是不会影响页面布局。我们现在经常和:hover一起搭配使用过渡的口诀:谁做过渡给谁加transition:要过渡的属性 花费时间 运动曲线 何时开始;1.属性:想要变化的CSS属性,宽度高度 背景颜色 内外边距都可以。如果想要所有属性都变化过渡,写一个all就可以。2.花费时间:单位是秒(必须写单位)比如0.5s3.运动曲线:默认是ease(可以省略)4.何时开始.原创 2021-10-12 22:38:30 · 169 阅读 · 0 评论 -
CSS3其他特性
目录图片变模糊计算盒子宽度width:calc函数图片变模糊CSS3滤镜filter:filter CSS属性将模糊或颜色偏移等图形效果应用于元素。filter:函数(); 例如:filter:blur(5px); blur模糊处理 数值越大越模糊网址说明:developer.mozilla.org/zh-CN/docs/Web/CSS/filter代码示例:<!DOCTYPE html><html lang="en"><head> <原创 2021-10-12 21:57:46 · 55 阅读 · 0 评论 -
CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型,有两个值:即可指定为content-box,boeder-box,这样我们计算盒子大小的方式就发生了改变。可以分为两种情况:1.box-sizing:content-box 盒子大小为width+padding+boeder(以前默认的)2.box-sizing:border-box 盒子大小为width如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(前提padding和bord原创 2021-10-10 22:34:12 · 69 阅读 · 0 评论 -
H5新特性
HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。声明:新特性增加了很多,但是我们专注于开发常用的新特性。1.1H5新增的语义化标签以前布局,我们基本用div来做。div对于搜索引擎来说,是没有语义的。<div class="header"></div><div class="nav"></div>原创 2021-09-08 22:49:40 · 181 阅读 · 0 评论 -
CSS3新增选择器
目录属性选择器结构伪类选择器属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者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元素示例原创 2021-10-10 16:10:34 · 48 阅读 · 0 评论 -
CSS初始化
/* 把我们所有标签的内外边距清零 */* { margin: 0; padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i { font-style: normal}/* 去掉li 的小圆点 */li { list-style: none}img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ v原创 2021-09-06 22:47:27 · 114 阅读 · 0 评论 -
布局技巧-CSS三角巧妙应用
原理代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1 { width: 0; height: 0; /* 把上边框宽度调大 */ border-top: 100px solid transparent; bord.原创 2021-09-06 21:51:19 · 272 阅读 · 0 评论 -
布局技巧-行内块的巧妙运用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .box { text-align: center; } .box a { display: inline-block;原创 2021-09-02 22:54:33 · 98 阅读 · 0 评论 -
布局技巧-文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-09-02 21:49:18 · 142 阅读 · 0 评论 -
布局技巧-margin负值运用
1,让每个盒子margin往左侧移动 -1px 正好压住相邻盒子边框2,鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)加相对定位<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul l.原创 2021-09-02 21:32:43 · 116 阅读 · 0 评论 -
CSS溢出的文字省略号显示
目录1.单行文本溢出显示省略号--必须满足三个条件2.多行文本溢出显示省略号1.单行文本溢出显示省略号–必须满足三个条件/* 1.先强制一行内显示文本 */ white-space: nowrap;(默认normal自动换行)/* 2.超出的部分隐藏 */ overflow: hidden;/* 3.文字用省略号替代超出的部分 */ text-overflow: ellipsis;代码:<!DOCTYPE html><html> <原创 2021-08-30 22:20:38 · 727 阅读 · 0 评论 -
vertical-align 属性应用
说明CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。语法:vertical-align:baseline | top | middle | bottom值描述baseline默认。元素放置在父元素的基线上。top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部。bottom把元原创 2021-08-29 18:20:41 · 350 阅读 · 0 评论 -
CSS用户界面样式
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验更改用户的鼠标样式表单轮廓防止表单域拖拽鼠标样式cursorli {cursor: pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状属性值描述default小白 默认pointer小手move移动text文本not-allowed禁止代码:<!DOCTYPE html><html> <head&原创 2021-08-29 15:51:29 · 110 阅读 · 0 评论 -
CSS三角
网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。示例代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 0; .原创 2021-08-28 21:40:48 · 51 阅读 · 0 评论 -
CSS字体图标
字体图标的产生字体图标使用场景:主要用于显示网页中通用、常用的一些小图标精灵图是有诸多优点的,但是缺点很明显1.图片文件还是比较大的。2.图片本身放大和缩小会失真3.一旦图片制作完毕想要更换非常复杂此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体字体图标的优点轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文字,可原创 2021-08-28 16:56:04 · 391 阅读 · 0 评论 -
CSS精灵图
目录精灵图(spites)的使用使用精灵图核心:使用精灵图核心总结:精灵图神器步骤精灵图(spites)的使用使用精灵图核心:1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。2.这个大图片也称为sprites精灵图或者雪碧图3.移动背景图片位置,此时可以使用background-position。4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同5.因为一般情况下就是往上往左移动,所以数值是负值6.使用精灵图的时候需要精确测量,每个小背景图片的大原创 2021-08-16 23:12:11 · 147 阅读 · 0 评论 -
CSS元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!本质:让一个元素在页面中隐藏或者显示出来。1.display显示隐藏2.visibility显示隐藏3.overflow 溢出显示隐藏display属性display属性用于设置一个元素应如何显示display:none;隐藏对象display:block;除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置后面应用及其广泛,搭配JS可以做很多的网页特效。<!DOCT原创 2021-08-15 16:14:17 · 443 阅读 · 0 评论 -
CSS 网页布局总结
通过盒子模型,清除知道大部分html标签是一个盒子。通过CSS浮动,定位可以让每个盒子排列成为网页。一个完整的网页,是标准流,浮动,定位一起完成布局的,每个都有自己的专门用法。1.标准流可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局2.浮动可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局3.定位定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。...原创 2021-08-14 22:41:17 · 129 阅读 · 0 评论 -
CSS 定位
目录1.1为什么需要定位1.2定位组成1.3静态定位static(了解)1.4相对定位relative(重要)1.5绝对定位absolute(重要)1.6子绝父相的由来1.7固定定位fixed(重要)固定定位小技巧:固定在版心右侧位置1.8粘性定位sticky(了解)1.9定位的总结1.10定位叠放次序 z-index1.11 定位的拓展1.1为什么需要定位1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且原创 2021-08-12 20:54:51 · 57 阅读 · 0 评论 -
CSS 页面布局整体思路
为了提高网页制作的效率,布局时通常有以下的整体思路:1,必须确定页面的核心(可视区),我们测量可得知。2,分析页面中的行模块,以及每个行模块中的列模块。其实页面布局第一准则。3,一行中列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则4,制作HTML结构,我们还是遵循,现有结构,后有样式的原则。结构永远最重要5,所以,先理清楚布局结构,再写代码尤为重要,这需要我们多谢多积累。...原创 2021-08-12 20:54:06 · 372 阅读 · 0 评论 -
CSS 属性书写顺序(代码规范)
建议遵循一下顺序:1,布局定位属性:display/position/float/clear/visibility/overflow(建议display第一个写,毕竟关系到模式)2,自身属性:width/height/margin/padding/border/background3,文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word4,其他属性(CSS3):content/cursor/b原创 2021-08-12 20:53:28 · 200 阅读 · 0 评论 -
CSS浮动
目录传统网页布局的三种方式标准流(普通流/文档流)为什么需要浮动什么是浮动浮动特性浮动元素经常和标准流父级搭配使用浮动布局的注意点浮动和标准流的父盒子搭配一个元素浮动了,理论上其余的兄弟元素也要浮动为什么清除浮动清除浮动本质清除浮动清除浮动方法额外标签法父级添加overflow:after伪元素法双伪元素清除浮动传统网页布局的三种方式网页布局的本质—用css来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式(简单来说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位标准流(普原创 2021-08-11 22:47:30 · 68 阅读 · 0 评论 -
CSS 盒子阴影和文字阴影
盒子阴影CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影语法:box-shadow:h-shadow v-shadow blur spread color inset;h-shadow:必需。水平阴影的位置。允许负值。v-shadow:必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread 可选。阴影的尺寸。color 可选。阴影的颜色inset 可选。将外部阴影改为内部阴影<!DOCTYPE html><html&g原创 2021-08-11 22:46:28 · 215 阅读 · 0 评论 -
CSS圆角边框
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角语法:border-radius:length;radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%如果是个矩形,设置为高度的一半就可以做类似下图该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角分开写:b.原创 2021-08-11 22:45:17 · 1298 阅读 · 0 评论 -
CSS 盒子模型
盒子模型页面布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页面看透网页布局的本质网页布局过程:1.先准备好相关的网页元素,网页元素基本都是盒子box2.利用CSS设置好盒子样式,然后摆放到相应位置3.往盒子里面装内容网页布局的核心本质:就是利用CSS摆盒子盒子模型组成所谓盒子模型:就是把HTML页面中的布局元素看做是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距,和实际内容原创 2021-08-11 22:44:38 · 295 阅读 · 0 评论 -
CSS 三大特性
层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type原创 2021-08-11 22:44:05 · 56 阅读 · 0 评论 -
CSS 背景
通过CSS背景属性,可以通过给页面元素 添加背景样式背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等背景颜色background-color 属性定义了元素的背景颜色。background-color: 颜色值;一般情况下元素背景颜色默认值是transparent(透明)background-color: transparent;背景图片background-image属性描述了元素的背景图像,实际开发常见于logo或者一些装饰性的小图片或者是超大的背景.原创 2021-08-11 22:43:22 · 87 阅读 · 0 评论 -
CSS 单行文字垂直居中
单行文字垂直居中的代码CSS没有给我们提供文字垂直居中的代码,这里我们可以使用一个小技巧来实现解决方案:让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中单行文字垂直居中的原理简单理解:行高的上空隙和下空隙把文字挤到中间了,但是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下如下图所示:...原创 2021-08-11 22:42:31 · 372 阅读 · 0 评论 -
CSS 的元素显示模式
块元素常见的块元素有,div,hr,p,h1-h6,ul,ol,dl,form,table,li等,其中div标签是最典型的块元素块级元素的特点:1,比较霸道,自己独占一行2,高度,宽度 ,外边距以及内边距都可以控制3,宽度默认是容器(父级宽度)的100%。4,是一个容器及盒子,里面可以放行内或者块级元素注意:文字类的元素内不能使用块级元素p标签主要用于存放文字,因此p里面不能放块级元素,特别是不能放div同理,h1-h6等都是文字类块级标签,里面也不能放其他块级元素行内元素原创 2021-08-11 22:40:52 · 60 阅读 · 0 评论 -
CSS 复合选择器
常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代语法:元素1 元素2 {样式声明}上述语法表示选择元素1里面的所有的元素2(后代元素)。元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可元素1和元素2可以是任意基础选择器<!DOCTYPE html><html原创 2021-08-11 22:39:20 · 55 阅读 · 0 评论 -
CSS 的引入方式
内部样式表<head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p { text-indent: 2em; line-height: 26px; } </style></head>行内样式表 <div s原创 2021-08-11 22:35:03 · 69 阅读 · 0 评论 -
CSS 文本属性
目录文本颜色对齐文本装饰文本文本缩进行间距量行高工具:FSCapturecss Text(文本)属性可以定义文本的外观,比如文本的颜色,对齐文本,装饰文本,文本缩进,行间距等文本颜色color属性用于定义文本的颜色div { color:red;}预定义的颜色值:red,green等十六进制:#FF0000(常用)RGB代码:rgb(255,0,0)或rgb(100%,0%,0%)对齐文本text-align属性用于设置元素内文本内容的水平对齐方式div { text-ali原创 2021-08-10 22:55:23 · 67 阅读 · 0 评论 -
CSS 字体属性
目录字体系列字体大小字体粗细文字样式字体复合属性css fonts(字体)属性用于定义字体系列,大小,粗细,和文字样式(如斜体)字体系列css 使用font-family属性定义文本的字体系列p { font-family:"微软雅黑"; }div { font-family:Arial,"Microsoft Yahei","微软雅黑"; }各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号尽量使用系统默认自带字体,保证在任何用户的浏览器中都能原创 2021-08-10 22:54:38 · 85 阅读 · 0 评论 -
CSS 基础选择器
目录标签选择器类选择器多类名开发中使用场景id选择器通配符选择器标签选择器div { color: red;}优点:能快速为页面中同类型的标签统一设置样式缺点:不能设计差异化样式,只能选择全部的当前标签类选择器.hobby { color: red;}多类名开发中使用场景可以把一些标签元素相同的样式放到一个类里面这些标签都可以调用这个公共的类,然后再调用自己独有的类各个类名中间用空格隔开多类名选择器在后期布局比较复杂的情况下,还是比较多使用的id选原创 2021-08-10 22:53:56 · 53 阅读 · 0 评论