CSS
文章平均质量分 61
。
九阈
进厂了
展开
-
bootstrap4 调整元素之间距离(名称分别以m-开头和p-开头的类)
值得一提的是B3中使用hidden-sm只会在sm尺寸下隐藏,而其他尺寸会正常显示,在B4中如果你单纯的指定d-sm-none 则该元素会在sm尺寸隐藏,但sm以上的尺寸也会隐藏,在sm之下的尺寸正常显示,这里就涉及到向上兼容的问题,所以你在设置sm元素隐藏时还得设置md尺寸显示,如上表,其他以此类推。margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距;有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom。转载 2022-12-02 00:34:45 · 941 阅读 · 0 评论 -
移动端基础知识
默认1em =16px 受上级父元素的相对大小,找不到父元素默认16px,首行缩进2个字: text-indent: 2em。默认1rem =16px 只受html根元素的大小设置,默认html根元素大小16px。设备的大小/设计稿的大小 = 设备的根元素html大小/设计稿根元素大小。px 和rem切换插件:px to rem。750*1334或1080 *1920。市面上移动端设计稿大小。原创 2022-12-01 22:58:54 · 159 阅读 · 0 评论 -
CSS权重计算
答案肯定是红色,li没有设置颜色,先去父元素ul上找,发现也没有设置颜色,最后在父父元素nav应用了颜色,这里是继承过来的颜色,上面我们说了,继承的权重为0。他的权重最高,但你忘了,继承的权重为0,这里是继承p是继承div的颜色,上面代码肯定有比0高的。这就验证了“继承的权重为0”这句话,当li继承nav发生了颜色改变,此时的。黑色的权重为0,0,0,1+0,0,0,1,0=0,0,1,1。3.p.c2的权重为 0,0,0,1+0,0,1,0。0,0,0,1>0,0,0,0所以结果显示蓝色。转载 2022-12-01 16:14:10 · 535 阅读 · 0 评论 -
登录注册页面(html+css+js)
【代码】登录注册页面(html+css+js)原创 2022-11-21 17:07:52 · 2249 阅读 · 0 评论 -
margin负值以及其他补充
margin负值以及其他补充原创 2022-11-03 17:10:13 · 103 阅读 · 0 评论 -
font-face字体图标和inconfont矢量图标库
font-face是css3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中。好处:1.可以非常方便的改变大小和颜色2.放大后不会失真3.减少请求次数和提高加载速度4.简化网页布局5.减少设计师和前端I程师的工作量6.可使用计算机没有提供的字体inconfont矢量图标库 https://www.iconfont.cn下载到本地解压这个告诉如何使用可以拖到浏览器中打开或者双击点开将上面解压到的拷贝到自己需要的位置运行结果彩色图标引入跟上面一样打开选择原创 2022-06-05 14:32:36 · 905 阅读 · 0 评论 -
怪异盒模型和弹性盒
怪异盒模型含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改属性: box-sizingbox-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。属性值: content-box这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。■标准盒子模型属性值: border-box为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过原创 2022-04-30 12:58:18 · 222 阅读 · 0 评论 -
CSS3选择器进阶
层级选择器+当前元素的后面第一个兄弟~当前元素的后面所有的兄弟<!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原创 2022-04-24 20:27:16 · 189 阅读 · 0 评论 -
calc和两栏布局以及三栏布局
<!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>Do.原创 2022-04-13 20:11:23 · 151 阅读 · 0 评论 -
锚点与精灵图
锚点<!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&g原创 2022-04-12 21:38:32 · 180 阅读 · 0 评论 -
宽高自适应和窗口自适应
宽高自适应自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适宽度自适应高度自适应(1)宽度自适应元素宽度的默认值为auto(2)高度自适应元素高度的默认值{height:auto;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati原创 2022-04-12 21:38:10 · 761 阅读 · 0 评论 -
元素显示类型
块元素(block element)A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,B)默认情况下,块状元素都会占据一行; 默认情况下,块状元素会按顺序自上而下排列。C)块状元素都可以定义自己的宽度和高度。D)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子例如: div p ulli ol lidl dt dd h1-h6等举个列子<!DOCTYPE html><html lang="en"原创 2022-04-09 22:10:40 · 363 阅读 · 0 评论 -
CSS溢出属性
溢出属性(容器的)说明:overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;visible:默认值,溢出内容会显示在元素之外;hidden:溢出内容隐藏;scroll:滚动,溢出内容以滚动方式显示;auto:如果有溢出会添加滚动条,没有溢出正常显示;inherit:规定应该遵从父元素继承overflow属性的值。overflow-x:X轴溢出;overflow-y:Y轴溢出实例overflow:visible;<!DOCTYPE原创 2022-04-07 23:01:10 · 1770 阅读 · 0 评论 -
CSS盒子模型详解
在使用CSS进行网页布局时,我们一定离不开的一个东西————盒子模型。盒子模型,顾名思义,盒子就是用来装东西的,它装的东西就是HTML元素的内容。或者说,每一个可见的 HTML 元素都是一个盒子,下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同,这里的盒子是二维的。盒子的组成一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)。会发现margin、border、padding是CSS属性,因此可以通过这三转载 2022-04-05 20:05:56 · 39897 阅读 · 5 评论 -
盒子模型—外边距特性
原创 2022-03-30 22:02:41 · 84 阅读 · 0 评论 -
CSS背景属性
CSS background-position 属性背景图片大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<div>, initial.原创 2022-03-28 22:18:11 · 84 阅读 · 0 评论 -
CSS文本属性
text-alian文本水平对齐text-align: left; 水平靠左text-align: right; 水平靠右text-align: center; 水平居中text-align:justify:水平2端对齐,但是只对多行起作用text-transform 属性控制文本的大小写大小和字体文字颜色加粗与倾斜文本水平对齐和单行文本垂直居中<!DOCTYPE html><html lang="en"><head> &l.原创 2022-03-26 23:01:40 · 445 阅读 · 0 评论 -
CSS选择器
类选择器就近原则.qing在.yan后面,所以属性冲突时,采取就近原则,采用.qing演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic原创 2022-03-25 22:38:04 · 210 阅读 · 0 评论 -
CSS样式表
外部样式表(1)外部样式的创建比如扩展知识点: link和import之 间的区别?①差别1:本质的差别: link属于XHTML标签,而@import完全是CSS提供的一种方式。②差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import弓 |用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁), 网速慢的时候还挺明显。③差别3:兼容性的差别: @impo原创 2022-03-24 22:18:29 · 126 阅读 · 0 评论 -
rem布局和响应式布局
rem布局单位:em是一个相对单位,1em等于当前元素或父元素的font-size值rem是一个相对单位,1rem等于根元素的font-size值vw/vh把屏幕分为100份,1vw等于屏幕宽的1%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-08-29 14:42:29 · 938 阅读 · 0 评论 -
CSS移动端之viewport视口
示例代码:<meta name="viewport" content="width=device-width, initial-scale=1">@media screen and (max-width:480px) { // some style}桌面上视口宽度等于浏览器宽度,但在手机上有所不同。布局视口。layout viewport手机上为了容纳为桌面浏览器设计的网站,默认布局视口宽度远大于屏幕宽度,为了让用户看到网站全貌,它会缩小网站。默认大小为980像素,可通过do原创 2021-08-28 15:30:20 · 244 阅读 · 0 评论 -
grid网格布局基本知识
我们使用display属性来定义一个网格容器,它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器,它的所有子元素都进入grid文档流,称为网格子项。display: grid | inline-grid | subgridgrid:定义一个块级的网格容器inline-grid:定义一个内联的网格容器subgrid:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子项。注意:column, float, clear和vertical-align对网格容器原创 2021-08-26 14:23:55 · 1998 阅读 · 0 评论 -
flex弹性布局
一:display:flex 布局display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。没加display: flex;加了之后<!DOCTYPE html>原创 2021-08-25 16:21:43 · 1401 阅读 · 0 评论 -
column分栏布局和等高布局和双飞翼布局和圣杯布局
column分栏布局column-count:分栏的个数column-width:分栏的宽度column-gap:分栏的间距column-rule:分栏的边线column-span:合并分栏注意:column-width和column-count不要一起去设置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2021-08-23 20:51:09 · 157 阅读 · 0 评论 -
text-shadow和box-shadow和blur模糊和calc计算和CSS hack
font-face字体图标font-face是css3中的一个模块,他主要是把自己定义的web字体嵌入到你的网页中。inconfont矢量图标库 https://www.iconfont.cn添加链接描述自定义字体图标https://icomoon.io/apptext-shadow文字阴影注:阴影的默认颜色是跟文字样色相同,通过逗号的方式进项行分割,可以设置阴影。默认值: nonetext-shadow: h-shadow v-shadow blur color;例子<!DOC原创 2021-08-23 16:23:47 · 263 阅读 · 0 评论 -
CSS 伪元素和伪类
CSS 伪元素用于设置元素指定部分的样式。::first-line伪元素用于向文本的首行添加特殊样式。注意:::first-line 伪元素只能应用于块级元素。以下属性适用于 ::first-line 伪元素:字体属性颜色属性背景属性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear请注意双冒号表示法 - ::first-line 对比 :first-line原创 2021-08-23 16:08:26 · 253 阅读 · 0 评论 -
背景尺寸 位置 裁切和CSS渐变
背景尺寸 位置 裁切**background-size:**规定背景图像的尺寸。background-size: 200px 200px;background-size: cover;background-size: contain;background-origin:背景图的填充位置。默认值: padding-box值 描述padding-box 背景图像填充框的相对位置border-box 背景图像边界框的相对位置content-box原创 2021-08-20 21:30:15 · 160 阅读 · 0 评论 -
transform3D相关知识
rotateX()正值向上翻转rotateY()正值向右翻转translateZ()正值向前,负值向后scaleZ()立体元素的厚度perspective属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。注释:perspective 属性只影响 3D 转换元素。也可以理解为离屏幕多远的距离去观察元素,值越大幅度越小<!DOCTYPE html>&l原创 2021-08-19 23:50:16 · 95 阅读 · 0 评论 -
animation动画
animation-name 规定需要绑定到选择器的 keyframe 名称。。animation-duration 规定完成动画所花费的时间,以秒或毫秒计。默认值:0animation-delay 规定在动画开始之前的延迟。值单位可以是秒(s)或毫秒(ms)。默认值: 0,提示: 允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。animation-iteration-count 规定动画应该播放的次数。默认值:1animation-timing-function 规定动画的速度曲线。默原创 2021-08-19 16:07:29 · 1611 阅读 · 0 评论 -
transition和transform
transition-property属性指定CSS属性的nametransition效果(transition效果时将会启动指定的CSS属性的变化),默认是all,width和height也可以。提示:一个转场效果,通常会出现在当用户将鼠标悬停在一个元素上时。transition-duration 属性规定完成过渡效果需要花费的时间(以秒或毫秒计),默认是0.transition-delay 属性规定过渡效果何时开始(延迟过渡),值以秒或毫秒计,默认为0ransition-timing-func.原创 2021-08-18 23:26:14 · 372 阅读 · 0 评论 -
BFC规范
触发BFC浮动元素:float除none以外的值绝对定位元素:position(absolute\fixed)display为inline-block、table-cells、flexoverflow除了visible以外的值(hidden、auto、scroll)解决margin叠加问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h原创 2021-08-17 14:55:32 · 97 阅读 · 0 评论 -
表格和表单扩展
表格扩展学习border-collapse:collapse添加单线empty-cells:hide隐藏空单元border/rotate斜线分类colgroup/col列分组表单扩展之美化控件原创 2021-08-17 14:26:07 · 110 阅读 · 0 评论 -
html5新语义化标签
link标签最常见的用途是链接样式表。<html><head><link rel="stylesheet" type="text/css" href="/html/csstest1.css" ></head><body><h1>我通过外部样式表进行格式化。</h1><p>我也一样!</p></body></html>header页眉footer页脚ma原创 2021-08-16 16:40:52 · 1278 阅读 · 0 评论 -
css添加省略号、圆角、 字体引入、引用标签以及其他常用标签
css添加省略号首先必须有一个固定的宽width其次不让内容折行white-space:nowrap然后隐藏溢出的内容overflow:hidden最后添加省略号text-overflow:ellipsis列子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg原创 2021-08-16 14:56:58 · 301 阅读 · 0 评论 -
position
position元素的位置也由顶部,底部,左侧和右侧属性控制。relative - 相对于其正常位置定位。不影响其他元素布局,不使元素脱离文档流,因此,样式 “left:-20px” 从元素的原始左侧位置减去 20 像素。样式 “left:20px” 向元素的原始左侧位置增加 20 像素。left,top,right,bottom是相对于元素自身进行偏移<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-08-13 21:51:57 · 58 阅读 · 0 评论 -
清除float浮动
清除float浮动clear:指定不允许元素周围有浮动元素。leftrightbothnoneinherit<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w原创 2021-08-13 16:22:26 · 59 阅读 · 0 评论 -
float
float浮动float 属性定义元素在哪个方向浮动,浮动元素会生成一个块级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止。Float(浮动),往往是用于图像,但它在布局时一样非常有用leftrightnoneinherit特性:加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。<!DOCTYPE html><html lang="en"><head> <meta cha原创 2021-08-13 15:50:39 · 9296 阅读 · 1 评论 -
最大最小宽高,css默认样式,css重置样式
最大最小宽高min-width、min-heightmax-width、max-height%单位:换算->已父容器的大小进行换算<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-08-12 21:58:10 · 182 阅读 · 0 评论 -
透明度与手势
透明度opacity:0(透明)~1(不透明)0.5(半透明)注:占空间、所有的子内容也会透明rgba():0~1注:可以让指定的样式透明,而不影响其他样式,影响的是背景,内容不影响。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-08-11 17:46:08 · 64 阅读 · 0 评论