css布局
文章平均质量分 62
一月清辉
这个作者很懒,什么都没留下…
展开
-
css 常见的美观样式
【代码】css 常见的美观样式。原创 2023-02-21 11:10:49 · 1094 阅读 · 0 评论 -
元素的层叠顺序
元素的层叠顺序原创 2023-02-04 16:58:48 · 2160 阅读 · 0 评论 -
常见移动端兼容性问题
1.IOS移动端click事件300ms的延迟相应移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。这是由于区分单机事件和双击屏幕缩放的历史原因造成的。解决方式:fastclick可以解决在手机上点击事件的300ms延迟zepto的touch模块,tap事件也是为了解决在click的延迟问题触摸屏的相应顺序为touchstart–>touchmove–>touchend–>click,也可以通过绑定ontouchstart事件,加快事件的响应,转载 2021-11-29 22:14:30 · 1188 阅读 · 0 评论 -
移动端适配 1px 的问题
1、基本概念首先,我们要了解两个概念,一个是像素(pixel)可以简写为px,另外一个是设备像素比(DPR)设备像素比(DPR): 设备像素比 = 设备像素 / 设备独立像素。CSS 像素 (虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对单位以及相对单位。px 是一个相对单位,相对的是设备像素。设备像素 (物理像素):指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了,和屏幕尺转载 2021-11-29 21:48:07 · 366 阅读 · 0 评论 -
CSS绘制正方体
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>perspective</title> <style> .cube { /*通过fontSize设置字体大小,子元素使用em,从而通过fontSize来控制正方体的大小*/ font-size: 100px;原创 2021-11-27 11:18:20 · 872 阅读 · 0 评论 -
如何画一条0.5px的线
方法一、移动端,采用meta viewport的方式<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>这样子就能缩放到原来的0.5倍,如果是1px那么就会变成0.5px。方法二、采用 transform: scale()的方式transform: scale(0.5,0.5);方法三、使用转载 2021-11-26 21:36:40 · 7728 阅读 · 0 评论 -
HTML、CSS、JS开发规范
(一)、HTML规范1、img标签要写alt属性如果图片显示不出来,就直接alt提示的内容。<img src="company-logo.svg" /> // ✗ avoid<img src="company-logo.svg" alt="ABC CompanyLogo"/> // ✓ ok 2、自定义属性要以data-开头自己添加的非标准的属性要以data-开头,否则w3c会认为是不规范的<div count="5"></div>原创 2021-10-28 11:17:24 · 466 阅读 · 0 评论 -
css3的animation动画如何在动作结束时保持该状态不变
把物体动画地从一个地方移动到另一个地方,并让它停留在那里:animation-fill-mode:forwards;none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards 应用动画结束样式到目标元素上backwards 应用动画开始样式到目标元素上both 向前和向后填充模式都被应用注意如果forwards与backwards效果相反,则可能是动画animation-timing-function 使用的是ease-in 或ease-out,致使动画效果相原创 2021-09-14 17:47:33 · 4658 阅读 · 0 评论 -
display:inline-block间隙产生的原因以及解决方案
解决方案:1.将html标签要display:inline-block 的元素写在一行。缺点:代码可读性差。<body><div class="spa">wade</div><div class="spa">james</div><div class="spa">rose</div></body>2.给父元素设置font-size:0,给子元素设置需要的font-size值缺点:是子元素如果里面有文转载 2021-06-30 09:56:45 · 417 阅读 · 0 评论 -
css 设置 transform 无效
经过测试发现:display值为block/inline-block/grid/table/inline-table…都可以,总的来说,就是常用的几个display属性值中,除了inline/contents不行,其他都可以。参考链接:https://blog.csdn.net/yxyy3511/article/details/88015594...转载 2021-06-29 11:26:42 · 1516 阅读 · 0 评论 -
CSS 中的 table-layout 属性
用处table-layout用于表格布局常见属性auto------ 默认,列宽度由单元格内容设定,且如果表格宽度是百分比,则随着页面的缩放,表格自动进行缩放。fixed ----- 列宽由单元格宽度设定,是固定的值。inherit ----- 规定应该从父元素继承 table-layout 属性的值。参考链接:https://www.w3school.com.cn/cssref/pr_tab_table-layout.asp...转载 2021-06-01 18:46:45 · 324 阅读 · 0 评论 -
css 伪类和伪元素的用法和区别
一、什么是css伪类伪类侧重丰富选择器以及动态效果伪类的语法是单个冒号带一个伪类名称。:link 默认带href属性的a标签的样式:visited 被访问过的链接的样式:hover 鼠标悬浮上去的样式:active 鼠标按下去的时候的样式上面四种定义的时候需要保证这样的顺序:focus 当前元素为focus状态:lang lang(en) 对应html上的lang属性,符合的话执行样式:empty 选择没有子元素的元素执行样式:enab转载 2020-11-19 17:06:15 · 206 阅读 · 0 评论 -
Less,Sass,Styus三者的区别
Less,Sass,Styus三者的区别:1. 变量1). Sass声明变量必须是『$』开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开。2). Less 声明变量用『@』开头,其余等同 Sass。3). Stylus 中声明变量没有任何限定,结尾的分号可有可无,但变量名和变量值之间必须要有『等号』。2. 作用域1). Sass:三者最差,不存在全局变量的概念2). Less:最近的一次更新的变量有效,并且会作用于全部的引用!3). Stylus:Sass 的处理方式和转载 2020-10-24 14:28:59 · 396 阅读 · 0 评论 -
flex布局 三个div 两个左对齐 一个右对齐
一、问题有一个盒子flex布局,子元素有 三个div,在不改变dom结构的情况下,实现 前两个左对齐 第三个右对齐。二、实现方案在flex布局中如果某个元素的margin为auto,那么它的margin将会自动填充为 剩下的空间。三、代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex布局</title>转载 2020-10-23 14:45:12 · 6669 阅读 · 0 评论 -
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
1、是什么pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。简而言之,就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)2、具体属性分析用法分析:pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | allauto ---转载 2020-10-23 11:50:19 · 19289 阅读 · 0 评论 -
CSS常见问题汇总
1、CSS3有哪些新特性?RGBA和透明度background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap(对长的不可分割单词换行)word-wrap:break-word文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)font-face属性:定义自己的字体圆角(边原创 2020-10-15 18:12:04 · 749 阅读 · 1 评论 -
position的值, relative和absolute分别是相对于谁进行定位,你真的知道吗?
常见的position定位方式如下:static 默认值。元素出现在正常的普通流中relative 生成相对定位的元素,相对于其在普通流中的位置进行偏移。fixed (老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 iframe 进行定位。inherit 继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。absolute 生成绝对定位的元素, 相对于最近一级的 不是 static 的父元素来进行定位,如果没有找到的话,最原创 2020-09-19 12:19:31 · 9477 阅读 · 0 评论 -
CSS 发展史 与 CSS的模块化
CSS 发展史手写源生 CSS行内样式、内嵌样式、link引入外部样式、@import导入样式使用预处理器 Sass/Less由于源生的 css 不支持变量,不支持嵌套等,因此催生出了像 sass/less 这样的预处理器。使用后处理器 PostCSSPostCSS 接收一个 CSS 文件,通过使用postcss,可以校验 css 语法或自动添加浏览器前缀Vue、React出现后,使用 css 模块化随着 react、vue 等基于模块化的框架的普及使用,我翻译 2020-07-28 20:32:23 · 267 阅读 · 0 评论 -
css选择符类型
css选择符类型1、通用选择器:*2、类别选择器:.class3、id选择器:#id4、标签选择器:p5、后代选择器:div p6、子选择器:div > p7、群组选择器:div , p8、相邻同胞选择器:div +p9、伪类选择器::link :visited :active :hover :focus :first-child10、伪元素选择器::first-letter :first-line:before :after :lang(language)11、属性选择器:[a转载 2020-07-27 20:49:46 · 578 阅读 · 0 评论 -
css hack 是什么,有什么作用
什么是CSS hack针对不同的浏览器 或 浏览器不同版本写相应的CSS的过程,就是CSS hackCSS hack的原理由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。CSS hack分类hack写法可分为3种:条件hack<!--[if IE]><style> .test{color:red;}</style><![endif]转载 2020-07-27 20:31:17 · 9583 阅读 · 0 评论 -
CSS几种特殊布局
圣杯布局1、圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。2、.left, .right的margin-left是为了让.main .left .right在同一行。3、.container的padding-left,padding-right,.left的position和left, . right的position和left是为了防止文字被遮挡。<!DOCTYPE html><html> <head> <转载 2020-07-27 20:17:58 · 157 阅读 · 0 评论 -
css的常用的选择器,你需要知道的
常用伪类选择器: link,链接没有被访问时前景色.例如:demo a:link {color:gray;}: visited,链接被访问过后前景色例如:demo a:visited{color:yellow;}: hover,鼠标滑过链接上时前景色例如: .demo a:hover{color:green;}: active,用于用户点击元素那一瞬间的效果: focus,用于元素成为焦点时,这个经常用在表单元素、选择框上。: nth-of-type(n) 、: f原创 2020-07-24 22:09:22 · 189 阅读 · 0 评论 -
html你需要知道的问题
1、Doctype作用?严格模式与混杂模式如何区分?Doctype作用声明文件类型,让浏览器解析器知道应该用哪个规范来解析文档。严格模式又称标准模式,是指浏览器按照 W3C 标准解析代码。混杂模式又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码加粗样式。如何区分如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。html5没有DOCTYPE,HTML5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容,因此也就没有严格模式与混杂模式的区别。2、行内元素有哪些?块原创 2020-07-16 20:04:30 · 372 阅读 · 0 评论 -
css三栏布局
总结:1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局3、table布局使用起来方便,兼容性也不存在问题,不利于搜索引擎抓取信息4、flex布局比较强大,但是还是存在IE上兼容性问题,只能支持到IE9以上5、grid布局很强大,但是兼容性很差。1、绝对定位法<div id="left"></div><div id=转载 2020-07-15 21:06:15 · 150 阅读 · 0 评论 -
css两栏布局
情况一 左定宽度右自适应宽度左浮动 + 右margin-left左右都浮动 + 左侧margin-right:-100%;margin:负值详解:当一个元素margin-top,margin-left使用负边距时,它把元素向这个特定的方向拉。但是当你将margin-bottom,margin-right使用负边距时,它并不会把元素向下或右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。<!DOCTYPE html><html> <head>转载 2020-07-15 20:29:11 · 223 阅读 · 0 评论 -
CSS创建三角形的几种方法
结论:svg方法(polygon)canvas方法(moveTo 、lineTo、fill)border方法html字符正方形旋转方法代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> /*svg方法*/ .svg-triangle { width: 100px;转载 2020-07-15 20:03:25 · 294 阅读 · 0 评论 -
grid布局学习案例
参考链接http://www.voidcn.com/article/p-yemyzqru-byz.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper { width:100%; background: #f3f3f3; text-align: c.转载 2020-07-14 20:56:57 · 485 阅读 · 0 评论 -
px、em、rem、vw、vh、vmax、vmin的区别
各距离单位的区别px:相对长度单位,是相对于显示器的屏幕分辨率而言的。优点:比较稳定和精确;缺点:如果用户对浏览器进行缩放,这时会使用我们的Web页面布局被打破;em:相对单位,基准点为父节点字体的大小.rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算.CSS3新加属性,chrome/firefox/IE9+支持)另外需注意chrome强制最小字体为12号,即使设置成 10px, 最终都会显示成 12px,当把html的font-size设置原创 2020-07-13 20:28:03 · 749 阅读 · 0 评论 -
css 元素水平垂直居中
方法一 元素已知宽高 position+margin,移动50%父元素设置为:position: relative;子元素设置为:position: absolute; 距上50%,据左50%,然后减去元素自身宽高距离的一半就可。<div class="box"> <div class="content"></div></div>.box { background-color: #FF8C00; width: 300转载 2020-07-13 19:48:34 · 148 阅读 · 0 评论 -
css清除浮动,以及BFC的学习
1、浮动的定义浮动元素停止的标准:浮动的元素可以向左或向右移动,直到它的外边框碰到父元素的边框或者其他浮动框的边框为止!(注意是其他浮动框的边框!敲黑板!)浮动的元素不在普通文档流中2、不清除浮动的影响导致页面布局混乱无法撑开父元素的高度清除浮动是指清除浮动所造成的影响。3、清除浮动的方法3.1 加高法给浮动的元素的祖先元素添加高度只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的元素,也就清除浮动带来的影响了工作上,我们不会给所有的盒子加高度,因为麻烦,并转载 2020-07-12 17:42:45 · 209 阅读 · 0 评论 -
CSS 盒子模型(Box Model)-----js获取容器的宽高位置尺寸
盒模型的组成:由content(内容区域),padding(内边距),border(边框),margin(外边距)组成。盒模型有两种标准:一种是标准盒子模型(W3C盒子模型),另一种是IE盒子模型(怪异盒子模型)。两种标准的区别:这两种标准对容器的 height 和 width 的计算方式不同,标准盒子模型只包括 content,IE盒子模型为 content + padding + border 。可以通过CSS属性 box-sizing 来对这两种标准进行切换,当值为 content-bo.转载 2020-07-12 16:09:41 · 2178 阅读 · 0 评论 -
CSS 外边距(margin)重叠及防止方法
外边距重叠1、外边距重叠时边距计算规则在规范文档中,2个或2个以上的块级盒模型,垂直相邻的margin会重叠。最终的margin值计算方法如下margin同正,则取最大值;margin同负,则取最小值;margin一正一负,则取二者之和。2、外边距重叠解决方案:外层元素margin边距用padding代替外层元素 overflow:hidden;内层元素透明边框 border:1px solid transparent;内层元素绝对定位 postion:absolut转载 2020-07-11 17:24:20 · 1275 阅读 · 0 评论 -
display、opacity、visibility的区别?
共同点都让元素不可见二者区别隐藏后是否占据原有空间display:none 从渲染树中消失,不占据空间,不能点击visibility:hidden 从渲染树消失,占据空间,不能点击opacity:0 从渲染树消失,占据空间,可以点击性能display:none 引起页面回流与重绘,性能消耗大visibility:hidden 只造成本元素的重绘,性能消耗较少opacity:0 只造成本元素重绘,性能消耗较少这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的继承转载 2020-07-10 10:21:14 · 1031 阅读 · 0 评论 -
css样式z-index最大值和z-index最小值
z-index最大值:IE FireFox Safari的z-index最大值是2147483647 。Opera的最大值是2147483584.。IE Safari Opera在超过其最大值时按最大值处理。FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层最小值IE FireFox Safari的z-index最小值是-214...转载 2020-05-07 11:51:21 · 6018 阅读 · 0 评论 -
两个行内元素不对齐的问题解决
实例: <p> <img src="" /> <span></span></p>显示原因分析 : 基线不对齐解决方法两个行内元素都设置 vertical-align:middle;两元素设置浮动...翻译 2019-01-17 14:33:56 · 778 阅读 · 1 评论 -
css中vertical-align属性的初步了解
vertical-align起作用的情况vertical-align影响inline元素、inline-block元素以及table-cell元素垂直方向上的布局。//适用于inline: <img>,<span>,<strong>,<em>.......inline-block: <input>(IE8+),<b...原创 2019-01-17 23:04:30 · 363 阅读 · 1 评论 -
移动端适配方案
1,Flex弹性布局以天猫的为例1,viewport是固定的:&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no&quot;&amp;gt; 2,高度定死,宽度自适应,元素都采用px做单位。3,在哪个宽度需要调整转载 2019-01-23 18:31:31 · 121 阅读 · 0 评论 -
meta name="viewport" content="width=device-width,initial-scale=1.0"理解
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域content属性值 width:设备可视区域的宽度,值可为数字或关键词device-width intial-scale:页面首次被显示时可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放 maximum-scale=1.0, minimum-scale=1.0;可视区域...原创 2019-01-23 13:41:15 · 33333 阅读 · 3 评论 -
Data Url简介(base64图片编码)
Data Url简介(base64图片编码)Data Url简介Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。Dat...转载 2019-02-15 15:18:39 · 2238 阅读 · 0 评论 -
移动端、pc端,遮罩层滚动穿透问题
常见的解决方式有一下三种:1. css 之 overflow: hidden; .model-open { overflow: hidden; height: 100%; }遮罩层显示时将 .modal-open 添加到 html上,删除多余一页的部分,禁止页面滚动。遮罩层隐藏时,移除.modal-open,恢复页面滚动即可;缺点:pc端有效,移动端无效2. js 之...翻译 2019-02-22 15:51:13 · 3306 阅读 · 0 评论