CSS
关注
分享
扫一扫
前端三剑客之CSS，网页的皮肤外貌！
玉安_ZhangDe
web前端后进之学。
咬定青山不放松，自缘身在破岩中。
千磨万击还坚劲，任尔东西南北风。
展开
-
CSS学习39：位移
语法：transform: translate(水平移动距离, 垂直移动距离);transform: translateX(水平移动距离)transform: translateY(垂直移动距离)取值（正负均可） 像素单位数值 百分比（参照物为盒子自身尺寸） 注意：X轴正向为右，Y轴正向为下案例：位移绝对居中<!DOCTYPE html><html lang="en"><...原创 2022-04-18 18:43:57 · 2337 阅读 · 0 评论 -
CSS学习38：背景渐变
语法：background-image: linear-gradient( 颜色1, 颜色2 );该属性最多的应该是用于给图片、背景做渐变遮罩，具体更多细致的用法请大家移步到css 背景渐变_老leng不会飞的博客-优快云博客_css背景渐变案例效果：代码：<head> <style> .pic { po...原创 2022-04-17 21:26:50 · 875 阅读 · 0 评论 -
CSS学习37：图片缩放
语法：1、x y 单独设置transform: scale(x轴缩放倍数, y轴缩放倍数);2、统一设置transform: scale(缩放倍数);一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放transform: scale(缩放倍数);scale值大于1表示放大, scale值小于1表示缩小案例效果：代码：<head> <style> div { margin:原创 2022-04-17 20:55:30 · 3374 阅读 · 3 评论 -
CSS学习36：文本溢出显示省略号（单行&多行）
单行文本溢出显示省略号效果： /*1. 先强制一行内显示文本，默认 normal 自动换行*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis;多行文本溢出显示省略号注意：多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核） /*...原创 2022-04-12 20:33:50 · 568 阅读 · 0 评论 -
CSS学习35：CSS3过渡
语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始;具体属性介绍： 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以 花费时间： 单位是 秒（必须写单位） 比如 0.5s 运动曲线： 默认是 ease （可以省略） 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略） 记住过渡的使用口诀： 谁做过渡给谁加 案例...原创 2022-04-10 23:44:21 · 301 阅读 · 0 评论 -
CSS学习34：盒子模型
属性介绍CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变可以分成两种情况： box-sizing: content-box 盒子大小为 width + padding + border （以前默认的） box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了box-sizing: border-box ， 那padding和bor原创 2022-04-10 23:35:49 · 156 阅读 · 0 评论 -
CSS学习33：CSS3伪元素选择器（ ::before & ::after )
<!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>...原创 2022-04-10 22:54:21 · 208 阅读 · 0 评论 -
CSS学习32：CSS3结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素-child类ul li:nth-child(n)选择li的父元素(ul)中的第n个标签，并且是li<!DOCTYPE html><html lang="en"><head> <style> /* 结构伪类选择器 */ /* 适用场景，一个标签下的儿子层级，都是同样的标签(亲兄弟才可以适用) */原创 2022-04-10 22:44:43 · 313 阅读 · 0 评论 -
CSS学习31：CSS3属性选择器
根据标签中的属性来选择属性举个例子 /* 只选择 type =text 文本框的input 选取出来 */input[type=text] { color: pink;}/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */div[class^=icon] { color: red;}/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */section[class$=d原创 2022-04-10 22:26:52 · 392 阅读 · 0 评论 -
CSS学习30：多媒体标签（视频&音频）
视频标签- video使用语法： <!-- 第一种写法 目前用的越来越多 --> <video src="./media/mi.mp4" autoplay="autoplay" muted controls width="100%" loop poster="./images/pink.jpg"></video>注意，该标签不兼容ie9以下的浏览器 ，且在谷歌浏览器里自动播放视频，视频得默认静音(muted)常用属性：兼容写法&l.原创 2022-04-10 21:50:00 · 3550 阅读 · 0 评论 -
CSS学习29：字体图标（iconfont）包含下载及使用方法
阿里 iconfont 字库访问链接：iconfont-阿里巴巴矢量图标库下载：1、在页面里随便选择一个图标库2、把鼠标移动到图标上点击购物车按钮3、在页面顶部找到购物车4、不需要的可以在购物车里面点击图片删除，选择完毕以后点击下载代码插入项目使用1、把压缩包解压到项目根目录，文件夹名字可以改一下，例如iconfont2、点击文件夹，访问demo_index.html这个文件3、字体图标类型有三种 我们这里单选unico...原创 2022-04-10 19:18:21 · 2374 阅读 · 0 评论 -
CSS学习28：鼠标样式 cursor
<!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>...原创 2022-04-10 18:27:55 · 279 阅读 · 0 评论 -
CSS学习27：防止拖拽文本域&轮廓线
防止拖拽文本：语法：textarea { resize: none; }<head> <style> textarea { resize: none; } </style></head><body> <textarea name="" id="" cols="30" rows="10"><...原创 2022-04-09 18:00:06 · 344 阅读 · 0 评论 -
CSS学习26：border边框三角形
<!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"> <titl...原创 2022-04-09 17:51:11 · 189 阅读 · 0 评论 -
CSS学习25：精灵图:
所用到的精灵图：<!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"> ..原创 2022-04-09 17:41:29 · 139 阅读 · 0 评论 -
CSS学习24：元素的显示与隐藏
display 显示（重点） display 设置或检索对象是否及如何显示。 display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。 特点： display 隐藏元素后，不再占有原来的位置。 后面应用及其广泛，搭配 JS 可以做很多的网页特效。实际开发场景： 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 可见性 （了解.原创 2022-04-09 17:13:37 · 112 阅读 · 0 评论 -
CSS学习23：绝对定位的盒子居中
绝对定位的盒子居中注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法： left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； margin-left: -100px;：让盒子向左移动自身宽度的一半。 各个方向的盒子居中定位示意图 代码案例：<head> <style> .box ...原创 2022-04-09 17:07:52 · 708 阅读 · 0 评论 -
CSS学习22：定位的堆叠顺序（z-index）
堆叠顺序（z-index）简介 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴) 语法： 选择器 { z-index: 1;} z-index 的特性如下： 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上； 如果属性值相同，则按照书写顺序，后来居上； 数字后面不能加单位。 注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，...原创 2022-04-09 17:02:28 · 1062 阅读 · 0 评论 -
CSS学习21：fixed（固定定位）
固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。 语法： 选择器 { position: fixed; } 固定定位的特点：（务必记住）： 1.以浏览器的可视窗口为参照点移动元素。 跟父元素没有任何关系 不随滚动条滚动。 2.固定定位不在占有原先的位置。 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型） 完全脱标—..原创 2022-04-09 16:56:57 · 39747 阅读 · 0 评论 -
CSS学习20：absolute（绝对定位）
绝对定位的介绍： 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。 语法： 选择器 { position: absolute;}1、完全脱标 —— 完全不占位置；2、父元素没有定位，则以浏览器为准定位（Document 文档）。 3、父元素要有定位 i.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 ii.绝对定位的特点总结：（务必记住）...原创 2022-04-09 16:51:19 · 6905 阅读 · 2 评论 -
CSS学习19：relative（相对定位）
语法：选择器 { position: relative;}相对定位的特点： （务必记住） 1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。 2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。 因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。 <!DOCTYPE html><html lang="en"><head> <meta chars...原创 2022-04-09 16:33:06 · 442 阅读 · 0 评论 -
CSS学习18：清除浮动
为何要取消浮动？1、父元素没有高度2、子元素浮动3、父元素的大小撑不起来，影响接下来的布局。清除浮动的多种方式1、给父级添加 overflow 属性overflow:hidden | auto | scroll;优点：代码简洁缺点：无法显示溢出的部分注意：是给父元素添加代码2、父级添加after伪元素给父元素直接添加：.clearfix:after { content: ""; display: block; height:原创 2022-03-30 21:47:14 · 91 阅读 · 0 评论 -
CSS学习17：浮动
浮动语法：选择器 { float: 属性值; }浮动特性1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)2、浮动的元素会一行内显示并且元素顶部对齐，且之间没有空隙，如果父元素一行装不下，会另起一行。3、浮动的元素会具有行内块元素的特性，浮动元素的大小根据内容来决定。浮动元素经常和标准流父级搭配使用为了约束浮动元素位置, 我们网页布局一般采取的策略是: 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.原创 2022-03-30 21:39:30 · 187 阅读 · 0 评论 -
CSS学习16：阴影
1、盒子阴影2、文字阴影原创 2022-03-30 21:29:48 · 348 阅读 · 0 评论 -
CSS学习15：圆角边框
border-radius 属性用于设置元素的外边框圆角。语法：border-radius:length; 参数可百分比，也可是具体px值。圆角边框也可分开写：border-top-left-radius 左上角border-top-right-radius 右上角border-bottom-right-radius 右下角border-bottom-left-radius 左下角...原创 2022-03-30 21:07:49 · 208 阅读 · 0 评论 -
CSS学习14：垂直外边距高度塌陷的问题
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。1、相邻块元素垂直外边距的合并描述：当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。解决方法：尽量只给一个盒子添加 margin 值。2、嵌套块元素垂直外边距..原创 2022-03-30 20:47:10 · 182 阅读 · 0 评论 -
CSS学习13：外边距（margin）
语法：合写属性：值的个数 表达意思 margin:5px; 1个值，代表上右下左都有5个像素的外边距 margin:5px 10px; 2个值，代表上下外边距5个像素，左右外边距像素是10个像素 margin:5px 10px 20px; 3个值，代表上外边距5像素，左右外边距10像素，下外边距20像素 margin:5px 10px 20px 30px; 4个值，代表上外边距5像素，右外边距10像素，下外边距20像素，左外边距是30像素 分写属性：原创 2022-03-25 20:51:01 · 1160 阅读 · 0 评论 -
CSS学习12：内边距（padding）
什么是内边距？内边距就是，盒子模型内的内容到边框的距离。语法：合写属性：值的个数 表达意思 padding:5px; 1个值，代表上右下左都有5个像素的内边距 padding:5px 10px; 2个值，代表上下内边距5个像素，左右内边距像素是10个像素 padding:5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 padding:5px 10px 20px 30px; 4个值，代..原创 2022-03-25 20:05:43 · 1560 阅读 · 0 评论 -
CSS学习11：边框（border）
目录border语法：border-style的属性值如下：border可以单独设置四周的边框边框会影响实际盒子的大小border语法：border : border-width || border-style || border-color; 例如：border: 1px solid red;属性 作用 border-width 自定义边框的粗细，单位是px border-style 边框的样式 border-color...原创 2022-03-25 19:31:23 · 5150 阅读 · 2 评论 -
CSS学习10：背景样式合写
背景合写样式： background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2022-03-23 22:55:19 · 251 阅读 · 0 评论 -
CSS学习09：背景图片固定
使用方法：background-attachment: scroll | fixed参数 作用 scroll 背景图像是随对象内容滚动 fixed 背景图像固定 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-03-23 22:52:10 · 1067 阅读 · 0 评论 -
CSS学习08：背景图片的位置
使用方法：background-position: x y;原点是左上角x是横坐标（从左到右）y是纵坐标（从上到下）参数值 说明 length 百分数 | 由像素等长度单位表示的长度值 position top | center | bottom | right 两种参数可以混着写例如：<!DOCTYPE html><html lang="en"><head> <meta charse.原创 2022-03-23 22:39:27 · 1244 阅读 · 0 评论 -
CSS学习07：背景平铺
目录使用方法：repeatno-repeatrepeat-xrepeat-y使用方法：background-repeat: repeat | no-repeat | repeat-x | repeat-y参数值 作用 repeat 背景图片在纵向和横向上平铺（默认） no-repeat 背景图片不平铺 repeat-x 背景图片在横向上平铺 repeat-y 背景图片在纵向上平铺 repeat<...原创 2022-03-23 22:31:07 · 1167 阅读 · 0 评论 -
CSS学习06：背景颜色&背景色半透明度&插入背景图片
样式名称：background-color 定义元素的背景颜色使用方法：background-color:transparent;transparent(透明)是默认值。background-color:颜色值;给背景颜色设置透明度：背景半透明 css3新出的样式属性，用rbga设置透明度 取值范围0~1标红的就是设置透明度的background-color: rgba(0,0,0, .1);<!DOCTYPE html><...原创 2022-03-23 22:13:24 · 448 阅读 · 0 评论 -
CSS学习05：块元素、行内元素、行内块元素
目录1、块元素常见的块元素：块级元素的特点：注意：2、行内元素常见的行内元素：行内元素的特点：注意：3、行内块元素常见的行内块标签：行内块元素的特点：三种元素的总结1、块元素常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li><div>是最常见的块元素块级元素的特点： 自身独占一行 高...原创 2022-03-23 21:49:14 · 9579 阅读 · 1 评论 -
CSS学习04：CSS的复合选择器
1、什么是复合选择器？2、后代选择器★3、子选择器★4、并集选择器5、交集选择器6、伪类选择器原创 2022-03-23 21:17:41 · 2018 阅读 · 0 评论 -
CSS学习03：CSS文本属性
文本颜色color用来自定义文本的颜色属性<!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..原创 2022-03-20 20:42:08 · 494 阅读 · 0 评论 -
CSS学习02：css字体属性
字体总结属性 表示 注意点 font-size 字号 通常用的单位是px像素，记得加单位 font-weight 字体粗细 加粗是bold或者700，不加粗是400或者normal font-style 字体样式 倾斜是italic 不倾斜是normal font-family 字体 实际工作中按照团队要求来 font 字体连写 1.字体连写的顺序不能改，改了无效 2.其中必须有字号和字体原创 2022-03-19 21:14:36 · 288 阅读 · 0 评论 -
CSS学习01：css基础选择器
css基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器目录选择器大纲总结：1.标签选择器2.类选择器多类名选择器3.id选择器4.通配符选择器选择器大纲总结：基础选择器 作用 特点 使用情况 用法 标签选择器 可以选出所有相同标签的选择器，例如div 不能差异化选择设置 较多 div { color:pink; } 类选择器 可以选择1个或者多个标签原创 2022-03-19 20:31:15 · 395 阅读 · 0 评论