css
文章平均质量分 63
灵灵7
这个作者很懒,什么都没留下…
展开
-
offsetLeft与style.left的区别
http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距如果父div的position定义为relative,子div的position定义为absolute,那么子div的styl...转载 2018-08-10 14:31:26 · 256 阅读 · 0 评论 -
CSS 定位 position
static 定位HTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动注意:Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed定位使元素的位置与文档流无关,因此不...原创 2019-04-17 22:36:42 · 190 阅读 · 0 评论 -
CSS水平居中+垂直居中+水平/垂直居中的方法总结
文章链接:CSS水平居中+垂直居中+水平/垂直居中的方法总结https://blog.csdn.net/weixin_37580235/article/details/82317240问题延伸:CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)?搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者rel...转载 2019-04-27 17:38:50 · 160 阅读 · 0 评论 -
CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)?
问题:CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)?搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative),那么子元素的position都是以父级元素来定位的。回答:其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”,这句话里有两个关键,一个是“离它最近的祖先元素”,...转载 2019-04-27 17:49:58 · 10124 阅读 · 7 评论 -
css3硬件加速
原文章:https://www.jianshu.com/p/f8b1d6e598db动画卡顿是在移动web开发时经常遇到的问题,解决这个问题一般会用到css3硬件加速。css3硬件加速这个名字感觉上很高大上,其实它做的事情可以简单概括为:通过GPU进行渲染,解放cpu。现象通过对比不使用css3加速和使用css3加速两个例子,我们可以看到两者渲染的差异:不使用css3加速.p...转载 2019-04-27 18:21:59 · 276 阅读 · 0 评论 -
如何实现小于12px的字体效果(transform: scale( )缩小元素)
transform:scale()这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个display:inline-block;transform: scale(0.7);css的属性,可以缩放大小...转载 2019-04-27 18:23:08 · 8471 阅读 · 0 评论 -
布局 圣杯布局和双飞翼布局的理解和区别
原文章:https://www.cnblogs.com/imwtr/p/4441741.html【圣杯布局】在这里,实现了左(200px) 右(220px) 宽度固定,中间自适应,container部分高度保持一致。DEMO稍微说明一下:html代码中 middle部分首先要放在container的最前部分。然后是left,right1.将三者都 float:left...转载 2019-04-23 12:02:17 · 403 阅读 · 0 评论 -
CSS display:inline-block,block,inline的区别与用法
文章来源:https://www.cnblogs.com/hy-sunny/p/5602236.html一、首先要了解什么是块级元素与行级元素块级元素会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置 margin与padding属性。ps:常见的块级元素:div,img,ul,form,p等...转载 2019-04-20 13:58:06 · 715 阅读 · 0 评论 -
CSS BFC(块级格式化上下文) 块级区域布局
level box: display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context; run-in box: css3 中才有, 这儿先不讲了。2. Formatting contextFormatting context 是 W3C CSS2...转载 2019-04-20 14:50:36 · 179 阅读 · 0 评论 -
CSS rem 以根元素基准长度单位(结合 @media 适应不同移动端)
rem 是CSS3新增的相对长度单位,是指相对于根元素html的长度计算值的大小。rem是一个相对单位,1rem 等于 html 根元素字体设置的大小。我们只要设置 html 根元素的font-size 的大小,所有的子元素就可以使用 rem 作为单位。例子:子元素的 1rem=根元素设置的 font-size 的大小结合媒体查询 Media Query,根据不同设备尺寸,用...原创 2019-04-25 11:37:03 · 1189 阅读 · 0 评论 -
HTML5 移动页面自适应手机屏幕四种方法
原文章:https://blog.csdn.net/huang100qi/article/details/818424081、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。...转载 2019-04-25 11:44:38 · 555 阅读 · 0 评论 -
CSS 选择器权重(优先级)
计算指定选择器的优先级: 重新认识CSS的权重 CSS 选择器类型 权重(每个加) important 加1,0,0,0 ID 选择器 (如 #id) 加0,1,0,0 Class 类选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :h...转载 2019-04-25 16:02:25 · 1371 阅读 · 0 评论 -
圣杯布局详解(中间盒子宽度自适应,两边盒子固定宽度)
总结:主要通过设置 margin: -100%,使本来浮动在第二行的盒子,回到第一行,使这个元素可以和 width: 100% 的浮动盒子并列;浮动 float 的原理:(float,浮动,使元素的边界和相邻的同一个方向浮动的元素边界紧贴,如果没有相邻浮动元素,就和父元素边界紧贴。也就是说,设置了 float:left 的元素,会向左浮动,直到左边缘和同样设置了 float:left...转载 2019-04-22 19:07:51 · 2675 阅读 · 0 评论 -
子元素可以以百分比继承父元素的高度
原文章:https://www.jianshu.com/p/f654bcbc8cbd要做个组件,不给它设置固定宽高,别人用的时候,设置宽高,然后内部以百分比的形式渲染;之前一直使用的是宽度百分比继承,对于高度继承没怎么使用,本来自己写了个固定高度,但考虑后期修改高度的话,这样太麻烦了,还要把组件里面的高度全都改了;今天测试了一下,高度也是可以以百分比继承的,测试如下:1. html...转载 2019-04-22 17:46:44 · 3379 阅读 · 0 评论 -
CSS 垂直居中的几种方案
参考链接:https://www.cnblogs.com/hutuzhu/p/4450850.html垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。方法1:table-cellhtml结构: 1 2 3 ...转载 2019-04-15 11:06:12 · 181 阅读 · 0 评论 -
前端页面的适配使用rem换算
文章来源:https://www.cnblogs.com/annie211/p/8118857.html为什么要使用rem之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale)。例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴,会导致页面图片文字失真模糊。Px是相对固...转载 2019-04-10 17:08:46 · 481 阅读 · 0 评论 -
flex 弹性布局:CSS display:flex 属性
原文章:https://www.jianshu.com/p/d9373a86b7481. 弹性布局简介弹性布局,又称“Flex布局”,是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持,我们可以放心大胆的使用。>>>了解两个基本概念,接下来会频繁提到:①容器:需要添加弹性布局...转载 2019-04-10 17:36:42 · 273 阅读 · 0 评论 -
css中单位em和rem的区别
文章 来源:https://www.cnblogs.com/koubazhuanshu/p/6985331.html在css中单位长度用的最多的是px、em、rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变。 em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。对于em和rem的区别一句话概括:e...转载 2019-04-10 18:01:26 · 150 阅读 · 0 评论 -
CSS3 媒体查询 使用方法 @media
文章来源:https://www.cnblogs.com/zyl-Tara/p/5519144.htmlCSS 语法@media mediatype and|not|only (media feature) { CSS-Code;}Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries...转载 2019-04-10 18:05:05 · 477 阅读 · 0 评论 -
引入 CSS 两种方式:link 标签 和 @import
引入CSS的方法有两种,一种是@import,一种是link@import url('地址');<link href="地址" rel="stylesheet" type="text/css" /><link> 和 @import 两种方式的区别:link属于XHTML标签,而@import是CSS提供的一种方式。 link标签除了可以加载CSS外,还可...转载 2019-04-15 17:52:48 · 4621 阅读 · 3 评论 -
CSS 清除浮动的几种方式
原文章:https://www.cnblogs.com/nxl0908/p/7245460.html1、父级div定义伪类:after和zoom (推荐)1)用 :after 伪类,在父元素最后插入一个空字符串(content:"")、元素设为块级元素(display:block)、清除浮动(clear:both)、可见设为隐藏、高度为 0 {display:block;clear:bo...转载 2019-04-20 21:15:49 · 176 阅读 · 0 评论 -
CSS clear 清除浮动的原理
在理解这个之前,请先记住一句话:“float是魔鬼,会影响其他相邻元素;但是clear是小白,其只会影响自身,不会对其他相邻元素造成影响!”---来自张鑫旭clear 用法:w3.org官方的解释是:「元素盒子的边不能和前面的浮动元素相邻」。总结:设置了 clear 的元素只能通过调整自身来使自己不要和浮动元素排列在一起。比如说,如果一个元素同时设置了 flo...原创 2019-04-21 22:03:31 · 3519 阅读 · 1 评论 -
transition、transform、animation三个属性的使用与区别
原文章:http://www.pianshen.com/article/6672108066/一、transform:改变元素形状4个属性1. rotate:围绕中心点旋转 deg 单位2. translate(x,y):向 x y 轴移动位置 px3. scale:整体缩放 倍数、scaleX scaleY 沿 轴方向缩放4. skew(x,y) 切变、scaleX sc...转载 2019-04-22 15:42:34 · 3037 阅读 · 0 评论 -
CSS dispaly、position、float之间的关系与相互作用
一、首先看一下这三个属性display属性规定元素生成框的类型。较为常见的有none-缺省值(用于隐藏元素,元素会消失于视界和文档流中),block-块级元素,inline-block-行内块级元素,list-item列表样式块级元素……….(display种类很多,可查阅资料http://www.w3school.com.cn/cssref/pr_class_display.asp)po...转载 2019-04-22 15:46:19 · 218 阅读 · 0 评论 -
CSS 行内元素float:left后是否变为块级元素?
行内元素设置成浮动之后变得更加像是 inline-block行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是100%,行内元素默认100%宽度占据一行 这时候给行内元素设置 padding-top 和 padding-bottom 或者 width、height 都是有效果的...转载 2019-04-22 15:56:26 · 3183 阅读 · 1 评论 -
纯CSS(CSS3) 美化 checkbox 复选框
原文章:通过css3实现checkbox选择样式https://www.imooc.com/article/15815<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=...转载 2019-04-26 17:22:13 · 1621 阅读 · 0 评论 -
flexible.js 移动端自适应方案
文章链接:https://www.jianshu.com/p/04efb4a1d2f8转载 2019-05-06 00:35:41 · 516 阅读 · 0 评论