CSS
思维小刀
这个作者很懒,什么都没留下…
展开
-
CSS的px、em、rem、%、vw、vh、vm 单位区别
https://blog.csdn.net/weixin_34255793/article/details/91473281?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.baidujs&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlo原创 2021-04-30 17:20:12 · 1981 阅读 · 1 评论 -
CSS引入CSS文件不生效 搞得很恼火
错误示范:<link href="/ajax/libs/blog/assets/styles/site.css">正确示范:<link rel="stylesheet" href="/ajax/libs/blog/assets/styles/site.css">要指定rel为stylesheet原创 2021-04-17 14:16:54 · 796 阅读 · 0 评论 -
CSS3的background-size:可以设置高宽 百分比 最大大小 最小大小
background-size:length|percentage|cover|contain;值 描述 length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为auto(自动) percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。长边为..原创 2021-02-02 16:00:18 · 1738 阅读 · 0 评论 -
CSS的clear去除清除浮动元素
clear 属性规定元素的哪一侧不允许其他浮动元素left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 ...原创 2021-02-01 17:01:12 · 145 阅读 · 0 评论 -
CSS的display:none与visible:hidden区别
1display:none和visible:hidden都能把网页上某个元素隐藏起来。2区别display:none 不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。visible:hidden使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。...原创 2021-02-01 15:02:35 · 446 阅读 · 0 评论 -
CSS解决display:inline-block产生的缝隙间隙-代码写在一行 设置字体大小为0 设置负margin
问题:行内存在空隙<style type="text/css"> ul li{ display: inline-block; border: 1px solid #000000; }</style><body> <ul> <li>1111</li> <li>2222</li> <li>3333</li>原创 2021-01-25 10:35:20 · 310 阅读 · 0 评论 -
CSS的display:table-cell:多行文字的垂直居中水平居中
CSS的display:table-cell原创 2021-01-05 11:02:18 · 1038 阅读 · 0 评论 -
CSS中display:block、inline、inline-block
CSS的display: block原创 2021-01-05 11:00:00 · 228 阅读 · 0 评论 -
CSS的overflow属性:显示 隐藏 滚动显示 自动显示 继承
overflow 属性规定当内容溢出元素框时发生的事情原创 2021-01-04 17:25:17 · 705 阅读 · 0 评论 -
CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]
1基础Fixed:固定定位 是相对于浏览器窗口来定位的Absolution:绝对定位:当没有父元素或者父元素没有进行定位的时候,就是固定定位,以浏览器为标的物元素会脱离文档流,若该元素没有设置宽度,则宽度由元素里面的内容决定,Relative:不脱离文档流 定位是相对于原本自身的位置,若没有设置宽度,则宽度为父元素的宽度2例子3绝对定位 给第二个div设置absolute 没有父元素的.div2{height:100px;...原创 2021-01-29 14:02:03 · 2225 阅读 · 2 评论 -
CSS3中的群组选择器,后代选择器[空格]子元素选择器 >相邻兄弟选择器+兄弟选择器~
群组选择器(',')/* 表示既h1,又h2 */h1, h2 { color: red;}后代选择器[空格]/* 表示 h1 下面的所有 span 元素,不管是否以 h1 为直接父元素 */h1 span {}子代选择器><style> .abc>:nth-child(2){ background-color:yellow; }</style>/* 表示 h1 下面的所有以 h1 为直接父元素的原创 2020-11-06 13:17:51 · 464 阅读 · 0 评论 -
CSS的outline轮廓属性:轮廓属性
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。注释:轮廓线不会占据空间,也不一定是矩形。outline 简写属性在一个声明中设置所有的轮廓属性。可以按顺序设置如下属性:outline-color outline-style outline-width...原创 2020-11-06 13:04:54 · 285 阅读 · 0 评论 -
CSS中提升优先级属性!important的用法总结
一、语法选择器{样式:值!import;}二、说明提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,让浏览器首选执行这个语句。例如下面这个样式:div{margin-left:20px!important;margin-left:40px;}如果是在除了IE6的浏览器中,这些浏览器支持!important属性,也就是说他们会默认让margin-left:20px!important; 这条语句生效,下面的不带!important声明的样式将不会覆原创 2020-11-02 17:07:29 · 1000 阅读 · 0 评论 -
CSS的overflow:规定当内容溢出元素框时发生的事情
overflow 属性规定当内容溢出元素框时发生的事情。原创 2020-10-10 10:46:42 · 306 阅读 · 0 评论 -
CSS选取第n个元素 :nth-child()
1、first-childfirst-child表示选择列表中的第一个标签。例如:li:first-child{background:#fff}2、last-childlast-child表示选择列表中的最后一个标签,例如:li:last-child{background:#fff}3、nth-child(3)表示选择列表中的第3个标签,例如:li:nth-child(3){background:#fff},代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。4、nt.原创 2020-09-28 13:37:07 · 1273 阅读 · 0 评论 -
CSS使用display:incline与float:left的区别:脱离文档流 参差不齐
https://www.cnblogs.com/Ry-yuan/p/6848197.html原创 2020-09-24 15:57:59 · 200 阅读 · 0 评论 -
CSS3的box-sizing:向外撑content-box向内挤border-box 外撑的padding算自己的盒子会变大 内挤的padding会缩小自己
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。...原创 2020-09-16 17:57:02 · 1570 阅读 · 1 评论 -
CSS3的flex布局:方向 换行 对齐 顺序
CSS的flex布局原创 2020-06-21 21:15:15 · 1753 阅读 · 0 评论 -
CSS3的transform:将元素旋转,缩放,移动,倾斜
transform: translate(-50%,-50%);原创 2020-06-20 19:59:43 · 1154 阅读 · 0 评论 -
CSS四种中央居中
方法一文字居中text-align:center;line-height设置为父元素的height<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...原创 2020-04-21 17:03:34 · 641 阅读 · 0 评论 -
CSS五种水平居中:text-align margin incline-block flex relative
方法一text-align<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2021-01-25 10:19:17 · 258 阅读 · 0 评论 -
CSS一个冒号是伪类:用于监控动作、两个冒号是伪元素::用于定位元素
备用1备用1备用1备用1膳食纤维原创 2021-02-01 16:58:05 · 341 阅读 · 0 评论 -
CSS3的box-shadow属性:给指定的区域加阴影
https://www.runoob.com/cssref/css3-pr-box-shadow.html原创 2020-04-15 22:26:22 · 516 阅读 · 0 评论 -
CSS3的transition :设置元素的过渡效果
https://www.w3school.com.cn/cssref/pr_transition.asp原创 2020-04-15 22:00:22 · 1148 阅读 · 0 评论 -
CSS3的background-size:设置背景图片大小
说明background-size:length|percentage|cover|contain;此属性是用来设置 :背景图片的大小length|percentage|:是用来设定背景图片的大小 相对于背景区域来说的cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。意思是背景图片保持纵横比 的最小的contain:此时会保持图像的纵横比并将...原创 2020-04-15 21:15:34 · 3412 阅读 · 0 评论 -
CSS使用display:incline:元素放置在一行之内
https://www.cnblogs.com/Ry-yuan/p/6848197.html原创 2020-04-15 16:11:22 · 615 阅读 · 0 评论 -
CSS的alt:图片无法显示时候显示alt内容
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />如果无法显示图像,浏览器将显示替代文本,就像这样:原创 2020-04-15 16:02:03 · 1321 阅读 · 0 评论 -
CSS的六种垂直居中
水平垂直1、单独文字垂直居中我们只需要设置CSS样式line-height属性即可。2、文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性,如.yangshi img{vertical-align:middle;}...原创 2020-04-15 15:31:02 · 114 阅读 · 0 评论 -
CSS使用Chrome进行取色
红色框框的两个都可以 上下按钮进行切换https://jingyan.baidu.com/article/a3a3f8111d23fb8da3eb8a43.htm原创 2020-04-15 14:55:13 · 1384 阅读 · 0 评论