百分比和像素共用

在用百分比布局时经常要用到像素,好像一个border:1px solid red,你不可能写成border:0.1% solid red

所以修正他的方法是在这个div上加下面的样式,他会帮你处理像素,你只需要布好你的百分比就可以

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
时间: 2024-08-08 12:26:19

百分比和像素共用的相关文章

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

流媒体 3——彩色数字图像基础

1. 视觉系统的颜色感知 颜色是视觉系统对可见光的感知结果.可见光是波长在380 nm-780 nm之间的电磁波,我们看到的大多数光不是一种波长的光,而是由许多不同波长的光组合成的.(1).眼睛本质上是一个照相机.人的视网膜(human retina)通过神经元来感知外部世界的颜色,每个神经元或者是一个对颜色敏感的锥体(cone),或者是一个对颜色不敏感的杆状体(rod).(2).红.绿和蓝三种锥体细胞对不同频率的光的感知程度不同,对不同亮度的感知程度也不同,人们可以使用数字图像处理技术来降低数

css之背景(background)家族

背景(background)是css中很重要的一部分,也是css的基础知道之一,现在来回顾css2中5个属性与css3中新增的3个属性和2个功能. CSS2_背景(background)前传 家族成员 背景(background)家族在css2中由5个主要的背景属性组成,分别是: background-color 指定填充的背景颜色 background-image 引用图片作为背景图 background-position 指定元素背景图片的位置 background-repeat 决定背景图

js判断浏览器类型

js判断浏览器类型  <script type="text/javascript" >     <!--   function getOs()   {       var OsObject = "";      if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {           return "MSIE";      }      if(isFiref

每日分享

一.判断浏览器类型 /* * 描述:判断浏览器信息 * 编写:LittleQiang_w * 日期:2016.1.5 * 版本:V1.1 */ //判断当前浏览类型 function BrowserType() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = use

《css3揭秘》的效果code

1.在阅读css3揭秘的基础上,跟着书中的效果组合起来的这组代码. 2.代码中有四张图片分别是 1.jpg 2.jpg  3.jpg 4.jpg; 作为demo,图片名称没有语义. 3.兼容性:  IE上有部分并不兼容,Edge,FF,chrome没有问题. 4.下面是一个选择器的实现: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"

Two Day

<a></a>超链接标签,超链接标签两要素 内容和地址 <a href="超链接地址">超链接文字</a> <a name=""></a>法做锚点,第一步使用的属性是name 第二步需要一个超链接来指向name锚点的位置(注意是当前页面 #) <a href="#"></a><!--#代表跳转到当前页面,相当于刷新页面--> <a h

css中的段落样式及背景

一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent : length text-align : left | right | center | justify letter-spacing : normal | length text-overflow:clip | ellipsis word-wrap:normal | break-word 其中

HTML静态网页:表格、表单

一.表格table table的属性 width        宽度,可以用百分比或者像素,像素常用960 border       边框,常用值是0 cellpadding  表格内容与单元格边框的边距,常用值0 cellspacing  单元格之间的间距,常用值0 align        单元格里面内容的对齐方式 bgcolor      背景色 background   背景图片 <tr></tr>行,属性 align        一行内容的水平对齐方式 valign