css百分比参照大总结

最近做PC端项目,由于要自适应到800*600,所以免不了要使用百分比的布局方式,但是一开始有点搞不清楚百分比的参照,于是页面的布局怎么调也调不好. 事后我进行了一下总结,希望能够帮到大家: 参照父元素宽度的元素:padding margin width text-indent 参照父元素高度的元素:height 参照父元素属性:font-size line-height 特殊:相对定位的时候,top(bottom) left(right)参照的是父元素的内容区域的高度与宽度,而绝对定位…

CSS 百分比 margin & padding

前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度 . 引用标准(2.1)原来的表达: The percentage is calculated with respect to th…

CSS百分比padding实现比例固定图片自适应布局

一.CSS百分比padding都是相对宽度计算的在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di…

简单实用的纯CSS百分比圆形进度条插件

percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入:使用该幻灯片插件需要在页面中引入jQuery和percircle.css以及percircle.js文件. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g…

CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景

在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px white inset; } 原理:CSS用足够大的纯色内阴影去覆盖原来的背景.…

[文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-js-or-css-file-too-large-cause-slower-access =======================分割线=========================== Azure .net WebAPP的js/css文件过大,导致网站访问变慢当js/css文件过大时,网…

浏览器对DIV+CSS兼容性问题大总结

浏览器对DIV+CSS兼容性问题大总结接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问题——浏览器的兼容性.下面整理了一下相关的兼容问题,希望大家再在其基础上补充!所有浏览器通用 (市面上主要用到的IE6 IE7 IE8 FF chrome)height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7+ 专用*+hei…

11种常用css样式学习大结局滚动条与显示隐藏

滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/*左右滚动*/overflow: hidden;/*截取*/overflow: auto;/*自动*/显示与隐藏可以用display/* display: none; *//* display: block; *//* display: inline-block; */visibility显示与隐藏v…

css中的宽高以及百分比参照

百分比数参照物父元素宽度:padding,margin,width,text-indent 父元素高度:height 自身:transform中的translate() 其他单位 vh:窗体高度 vw:窗体宽度…

css百分比问题——`top`、`left`、'translate'的百分比参照谁？

比如 top.left.transform属性的translate方法,他们的百分比都是相较谁而言的? top.left是基于父元素的: .parent { position: relative; background-color: rgb(243, 225, 225); height: 100px; width: 240px; } .child { text-align: center; width: 100px; background-color: cornflowerblue; posit…

CSS百分比定义高度的冷知识

当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果. 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的. 需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比,例如我们可以利用这个特性给未知宽度的块级元素设置水平居中效果: 父元素css: position: relative/absolute; left: 50%; 子元素css: position:…

CSS顶级技巧大放送，div+css布局必知

字体大小使用px 在一行内声明CSS 对比下面两个: h2 {font-size:18px; border:1px solid blue; color:#000; } h2 { font-size:18px; border:1px solid blue; color:#000; } 第二种看起来的确格式化,但是不会在阅读上有任何帮助.写在一行内可以让你更快的找到需要的部分. 以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用.一行看起来又爽快又省…

css 百分比继承关系的探讨

引入:近日在回顾css基础的时候发现了一个有趣的问题,就是css在继承百分比类属性的时候是继承百分比后再根据父级宽高计算,还是继承父级根据百分比计算过后的绝对值.下面举一个简单的例子来描述这一个问题,如下代码,两个段落最后会缩进多少距离呢? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor…

css sprite 调整大张图片中小图标的大小

直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url('imgs/woqu_localjoin_all.png') no-repeat -21px -80px; width: 190px; height: 154px; } 现在取正常图标大小的一半: <pre name="code" class="html">…

CSS常用十大技巧

技巧1 去掉网页超链接的下划线去掉网页超链接的下划线,在<head>与</head>之间相应的位置输入以下代码. <style type="text/css">  </style> 技巧2 设置浮动背景设置浮动背景,在<head>与</he…

CSS font-family字体大合集

在写文字内容占大篇幅的页面是,总是会面临着改变字体的需求,以下为font-family常用合集以及一部分文字效果: windows常见内置中文字体字体中文名字体英文名效果实例宋体 SimSun(浏览器默认) 夏目友人帐/ABCDEFG 黑体 SimHei …

css百分比单位

1 :字体大小父级字体的百分比 2:margin-left margin-top 父级容器的宽度 3:宽高 width: 50%; 父级宽的一半height: 50%; 父级高的一半…

css 百分比减去像素

1)第一种实现方式 @body_center_width: ~`$(document).width()-400+'px'`; #helloworld { width: @body_center_width; height: 200px; background: #000; } @height: ~`document.body.clientWidth-400+'px'`; #box { height:200px; width:@height; background:#080; opacity:@h…

常用的CSS命名规范大总结

转载: http://www.php.cn/toutiao-417563.html 文本命名规范 index.css: 一般用于首页建立样式 head.css: 头部样式,当多个页面头部设计风格相同时使用. base.css: 共用样式. style.css:独立页面所使用的样式文件. global.css:页面样式基础,全局公用样式,页面中必须包含. layout.css:布局.版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中 module.css:模块,用于产品类页,也可与其它…

CSS的两大重点

一.属性:通过属性的复杂叠加才能做出漂亮的网页二.选择器:通过选择器找到对应的标签设置样式,选择器的作用是:选择对应的标签,为之添加样式 1>标签选择器:根据标签签名找到标签 div{ color: red; } 2>类选择器: .one{ color: yellow; } 3>id选择器: #main{ font-size: 40px; } 4>并列选择器: div,.one{ color: yellow; } 5>复合选择器: div.o…

CSS的单位及css3的calc()及line-height百分比

锚点:css中百分比减去固定元素单位介绍说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-si…

css padding和margin的百分比

前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是 margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度 . 引用标准(2.1)原来的表达: The percentage is calculated with respect to t…

css利用padding百分比实现图片自适应高度

应用场景宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题重点:CSS百分比padding都是相对宽度计算的 <div class="works-item-t"> <img src="./150x200.png"> </div> .works-item-t { padding-bottom: %; position: relative; } .works-item-t >…

css 两大特性:继承性和层叠性

css 有两大特性: 继承性和层叠性, 继承性面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属性. 继承:给父级设置一些属性,子级会继承父类的该属性 ps:并不是所有属性都能继承,可以继承的比如:color,font,text,line 不能继承的比如:盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能被继承. 层叠性谁的权重大就会显示谁的属性, 计算权重: 顺序:id的数量,cla…

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &…

浅谈CSS中的百分比

结论: 标准流中的元素,看其属性有没有继承性.对于width和margin-left,它是可以继承的,它会参照父元素或者祖先元素(其实是包含块):对于height,它没有继承性,父元素或者祖先元素会自适应其所有子元素的高度和(这点是需要注意的). 绝对定位参照的是离它最近的父元素或祖先元素,如果没有父元素或祖先元素,那么参照的是初始包含块(不同的浏览器可能不一样,因为W3C没有规定浏览器具体如何去实现).但实际上,大部分浏览器将可视区当作绝对定位的包含块. 固定定位参照可视区 width设置成百…