css
&XYZ&
越努力,越幸运!
展开
-
样式补充
文章目录样式补充display:list-item图片失效时的宽高问题行盒中包含行块盒或可替换元素text-align:justify制作一个三角形direction 和 writing-modeutf-8字符样式补充display:list-item设置为该属性值的盒子,本质上仍然是一个块盒,但同时该盒子会附带另一个盒子元素本身生成的盒子叫做主盒子,附带的盒子称为次盒子,次盒子和主盒子水平排列涉及的css:list-style-type设置次盒子中内容的类型list-style-po原创 2020-08-23 10:44:38 · 362 阅读 · 0 评论 -
居中小总结
文章目录居中小总结行盒(行块盒)水平居中常规流块盒水平居中绝对定位元素的水平居中单行文本的垂直居中行块盒或块盒内多行文本的垂直居中居中小总结居中:盒子在其包含块中居中行盒(行块盒)水平居中直接设置行盒(行块盒)父元素text-align:center常规流块盒水平居中定宽,设置左右margin为auto绝对定位元素的水平居中定宽,设置左右的坐标为0(left:0, right:0), 将左右margin设置为auto实际上,固定定位(fixed)是绝对定位(absolute)的特殊情况原创 2020-08-22 12:09:34 · 228 阅读 · 0 评论 -
浏览器兼容性
文章目录浏览器兼容性问题产生原因厂商前缀css hack渐近增强 和 优雅降级caniuse浏览器兼容性问题产生原因市场竞争标准版本的变化厂商前缀比如:box-sizing,谷歌旧版本浏览器中使用-webkit-box-sizing:border-box市场竞争,标准没有发布;标准仍在讨论中(草案),浏览器厂商希望先支持;IE: -ms-Chrome, safari: -webkit-opera: -o-firefox: -moz- <style>原创 2020-08-20 08:50:34 · 445 阅读 · 0 评论 -
扩展-数据链接
文章目录数据链接如何书写意义base64数据链接data url如何书写数据链接:将目标文件的数据直接书写到路径位置语法:data:MIME,数据<link rel="stylesheet" href="data:text/css,h1{color:blue}"><body> <h1>标题</h1></body>意义优点:减少浏览器的请求请求响应减少了请求中浪费的时间有利于动态生成数据缺点:增加了原创 2020-08-16 10:34:24 · 363 阅读 · 0 评论 -
扩展-svg
文章目录扩展-svg怎么使用书写svg代码rect :矩形circle :圆形ellipse : 椭圆line :线条polyline :折线polygon : 多边行path : 路径扩展-svgsvg: scalable vector grapics , 可缩放的矢量图该图片使用代码书写而成缩放不会失真内容轻量怎么使用svg可以嵌入浏览器,也可以单独成为一个文件xml语言,svg使用该语言定义书写svg代码rect :矩形<svg style="background-co原创 2020-08-09 19:33:36 · 467 阅读 · 0 评论 -
扩展-堆叠上下文
文章目录堆叠上下文创建堆叠上下文的元素同一个堆叠上下文中元素在Z轴上排列堆叠上下文堆叠上下文(stack context),它是一块区域,这块区域由某个元素创建,它规定了该区域中的内容在Z轴上排列的先后顺序。创建堆叠上下文的元素html元素(根元素)设置了z-index(非auto)数值的定位元素同一个堆叠上下文中元素在Z轴上排列创建堆叠上下文的元素的背景和边框堆叠级别为负值的堆叠上下文常规流非定位的块盒非定位的浮动盒子常规流非定位的行盒任何z-index 是 auto 的定位原创 2020-08-09 12:10:45 · 233 阅读 · 0 评论 -
扩展参考线-深入理解字体
文章目录参考线-深入理解字体文字font-size行高vertical-align可替换元素和行块盒的基线参考线-深入理解字体font-size、line-height、vertical-align、font-family文字文字是通过一些文字制作软件制作的,比如fontforge制作文字时,会有几根参考线,不同的文字类型,参考线不一样。同一种文字类型,参考线一致。font-size字体大小,设置的是文字的相对大小文字的相对大小:1000、2048、1024文字顶线到底线的距离,是文字的实原创 2020-08-08 17:23:16 · 492 阅读 · 0 评论 -
行盒的垂直对齐
文章目录行盒的垂直对齐多个行盒垂直方向上的对齐图片的底部白边行盒的垂直对齐多个行盒垂直方向上的对齐给没有对齐元素设置vertical-align,可以是预设值也可以是数值 <input type="checkbox"> <span>垂直居中XXXXX</span> input[type="checkbox"] { width: 50px; height: 50px;原创 2020-08-02 10:12:13 · 210 阅读 · 0 评论 -
扩展(浮动的细节规则、行高的取值、body的背景)
浮动的细节规则左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的定边不得高于上一个盒子的定边若剩余空间无法放下浮动的盒子,则改盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动。行高的取值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2020-08-01 10:35:20 · 202 阅读 · 0 评论 -
块级格式化上下文
文章目录块级格式化上下文块级格式化上下文全称Block Formatting Context, 简称BFC它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局不同的BFC区域,它们进行渲染时互不干扰创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部具体规则:创建BFC的元素,它的自动高度需要计算浮动元素<!DOCTYPE html><html lang="en"><head> <meta charset="U原创 2020-08-01 09:50:55 · 188 阅读 · 0 评论 -
布局
文章目录布局多栏布局两栏布局三栏布局布局多栏布局两栏布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty原创 2020-08-01 09:49:32 · 282 阅读 · 0 评论 -
web字体和图标
web字体和图标web字体用户电脑上没有安装相应字体,强制让用户下载该字体(浏览器自动去下载,用户是看不到的),在浏览器下载过程中,这会导致用户的体验感不好,所以不推荐使用。使用@font-face指令制作一个新字体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2020-07-19 11:50:56 · 215 阅读 · 0 评论 -
@规则
@规则at-rule: @规则、@语句、CSS语句、CSS指令import@import “路径”导入另外一个css文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel原创 2020-07-19 10:47:02 · 272 阅读 · 0 评论 -
定位
文章目录定位position属性相对定位绝对定位固定定位定位下的居中多个定位元素重叠时补充定位常规流浮动:float定位:position定位:手动控制元素在包含块中的精准位置涉及的css属性:positionposition属性默认值:static,静态定位(不定位)relative:相对定位absolute:绝对定位fixed:固定定位一个元素,只要position的取值不是static,认为该元素是一个定位元素。定位元素会脱离文档流(相对定位除外)一个脱离了文档流的原创 2020-06-26 18:45:22 · 315 阅读 · 0 评论 -
浮动
文章目录浮动应用场景浮动的基本特点盒子尺寸盒子排列高度坍塌浮动视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位应用场景文字环绕横向排列浮动的基本特点修改float属性值为:left:左浮动,元素靠上靠左right:右浮动,元素靠上靠右默认值为none当一个元素浮动后,元素必定为块盒(更改display属性为block)浮动元素的包含块,和常规流一样,为父元素的内容盒盒子尺寸宽度为auto时,适应内容宽度高度为auto时,与常规流一致,原创 2020-06-21 10:29:16 · 184 阅读 · 0 评论 -
常规流
文章目录常规流常规流布局常规流盒模型:规定单个盒子的规则视觉格式化模型(布局规则):页面中的多个盒子排列规则视觉格式化模型,大体上将页面中盒子的排列分为三种方式:常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流所有元素,默认情况下,都属于常规流布局总体规则:块盒独占一行,行盒水平依次排列包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域绝大部分情况下:盒子的包含块,为其父元素的内容盒块盒每个块盒的总宽度,必须刚好等原创 2020-06-20 23:03:28 · 267 阅读 · 0 评论 -
行盒的盒模型
文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素 和 非可替换元素行盒的盒模型常见的行盒:包含具体内容的元素span、strong、em、i、img、video、audio显著特点盒子沿着内容延伸行盒不能设置宽高调整行盒的宽高,应该使用字体大小、行高、字体类型、间接调整。内边距(填充区)水平方向有效,垂直方向不会实际占据空间。边框水平方向有效,垂直方向不会实际占据空间。外边框水平方向有效,垂直方向不会实际占据空间。行块盒display: inline-blo原创 2020-06-20 19:38:34 · 174 阅读 · 0 评论 -
盒模型及盒模型应用
文章目录盒模型盒子的组成部分盒模型应用改变宽高范围改变背景覆盖范围溢出处理断词规则空白处理盒模型box: 盒子,在每个元素在页面中都会生成一个矩形区域(盒子)盒子类型:行盒,display等于inline的元素块盒,display等于block的元素行盒在页面中不换行、块盒独占一行display默认值为inline浏览器默认样式表设置的块盒:容器元素、h1~h6、p常见的行盒:span、a、img、video、audio盒子的组成部分内容 contentwidth、heigh原创 2020-06-20 13:03:51 · 301 阅读 · 0 评论 -
CSS之层叠
文章目录层叠1. 比较重要性2. 比较特殊性3. 比较源次序应用层叠声明冲突:同一个样式,多次应用到同一个元素层叠:解决声明冲突的过程,浏览器自动处理(权重计算)1. 比较重要性重要性从高到底:作者样式表: 开发者书写的样式1) 作者样式表中的!important样式2) 作者样式表中的普通样式3) 浏览器默认样式表中的样式2. 比较特殊性看选择器总体规则:选择器选中的范围越窄,越特殊具体规则:通过选择器,计算出一个4位数(xxxx)千位:如果是内联样式,记1, 否则记原创 2020-06-06 23:19:49 · 199 阅读 · 0 评论 -
CSS之常见样式声明
文章目录常见样式声明常见样式声明color元素内部的文字颜色预设值: 定义好的单词三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255之间的数字来表达,色值。rgb表示法:rgb(0,255,0)hex(16进制)表示法:#红绿蓝淘宝红:#ff4400, 缩写#f40黑色: #000000,缩写#000红色: #ff0000, 缩写#f00灰色:#ffffff, 缩写#fffbackground-color元素背景颜色font-size元素内部文原创 2020-05-31 11:42:55 · 340 阅读 · 0 评论 -
CSS之为网页添加样式
文章目录为网页添加样式术语解释选择器声明块CSS代码书写位置为网页添加样式术语解释 h1{ color: #ff0000; background-color: black; text-align: center; }CSS规则 = 选择器 + 生命块选择器选择器: 选中元素ID选择器:选中的是对应id值的元素元素选择器类选择器声明块出现在大括号中声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。C原创 2020-05-31 10:29:37 · 465 阅读 · 0 评论 -
关系选择符\属性选择符\伪对象选择符\伪类选择符
文章目录E + F:下一个满足条件的兄弟元素节点E + F:下一个满足条件的兄弟元素节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2020-04-26 08:56:29 · 1079 阅读 · 0 评论 -
animation:动画
<!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-Com...原创 2020-03-04 21:40:48 · 2294 阅读 · 0 评论 -
transition:过渡
<!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-Com...原创 2020-03-01 17:46:55 · 197 阅读 · 0 评论 -
DIV+CSS文字与图片上下垂直居中
<view class="orientation"> <image src="../../static/images/index/orientation.png" mode=""></image> 未知 </view>.orientation{ position: absolute; font-size:30rpx;//看这里 ...原创 2020-02-10 08:57:00 · 394 阅读 · 0 评论 -
Label 标签
Label标签:有的时候你是否发现点击一些表单的旁边的姓名...并没有点击到输入框也可以对输入框进行聚焦,其实运用到的就是label标签就可以达到这个效果。<body> <div> <label for="demo">姓名:</label> <input type="text" id="demo"> ...原创 2020-01-02 17:44:25 · 224 阅读 · 0 评论 -
手机端底部固定
源码:.fixation{ position: fixed; width:100%; bottom: 0; background-color:white;}效果图:原创 2019-03-15 16:16:13 · 1050 阅读 · 0 评论 -
程序员在线工具(px转换rem)
http://www.ofmonkey.com/front/rem原创 2019-03-10 20:45:25 · 5831 阅读 · 0 评论 -
RGB颜色值与十六进制颜色码转换工具
链接:https://www.sioe.cn/yingyong/yanse-rgb-16/原创 2019-03-14 14:08:08 · 1496 阅读 · 0 评论 -
头部搜索栏
效果:源码:<template> <div> <headers title="学生管理"></headers> <div class="search-box"> <div> <img src="../assets/images/magnifyingGlass....原创 2019-03-21 16:08:37 · 462 阅读 · 0 评论 -
transform:旋转,缩放,倾斜或平移 transform:translate(-50%,-50%)、transition
transform属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。transform: rotate(180deg);//以中心点旋转180度transition: all .6s;//过渡全部属性设置为0.6秒推荐地...原创 2019-09-10 14:26:30 · 2476 阅读 · 0 评论 -
text-shadow、box-shadow阴影效果
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}...原创 2019-05-17 09:06:12 · 260 阅读 · 0 评论 -
理解 !important
!important与css优先级算法计算有关!important > id > class > tag注意:!important 比内联优先级高列子:<style>p{color:red !important;color:yellow;}</style><body><p style="colo...原创 2018-11-08 20:14:50 · 194 阅读 · 0 评论