" CSS"标签下的所有文章

老生常谈系列之CSS3画三角及画圆

2017/11/02HTML5+CSS3 标签:0

这是一道前端开发中常常被问到的基础问题,该如何画一个三角形?该如何画一个圆?被问到的时候,可能在你脑海里飘过的就是“我好像在哪里看过,但是记不得了”,我们往往觉得很简单的问题,往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆,我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后,再去设置边框的弧度为宽高的一半

.circle{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: blue;
}

2、画三角形:
思路是将某两个边框设置为透明,然后设置三角形底边的边框颜色以及高度即可

//向上
.triangle-up{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 20px solid red;
}
//向左
.triangle-left{
    width: 0;
    height:0;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid blueviolet;
}
//等边三角形,底边等于左右边的和
.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
//直角三角形,四边形的相邻两边的边框设为一样的宽度,一边透明,一边有颜色
.triangle-90{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-bottom: 50px solid maroon;
}

阅读更多

使用css设置打印

我们都知道A4的尺寸是210mm * 297mm,在css中,我们可以直接使用毫米的单位来设置页面的宽高,当然你也可以使用相应的像素进行设置,不过只是通过body或者html来设置宽高的话,可能也会出现问题,而在这里我们需要使用@page来对页面进行定义,@page主要是用于打印的时候定义页面的类型,比如A4,A5,A3等等。下面先来看一下@page的使用方法。

@page{
  size: A4;
  margin: 0;
}

另外在设置好@page后,我们可能还会需要设置分页,分页很简单,直接使用page-break-before:always;或者page-break-after:always;就可以设置分页,在网页中是不会显示任何效果的,不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中,使用如下:

@media print{
  .page-break{
    page-break-before:always;
  }
}

.page-break是需要分页的class的元素。
阅读更多

移动端使用rem字体,注意事项

2017/03/31移动端 标签:0

rem的使用在移动端非常广泛的,但是很多小童鞋,包括我自己在内,有时候使用的方法都是错误的,下面我们一起来讨论下,rem到底该如何使用才能兼容手机端所有手机。

在使用rem之前,我们必须给html设置一个相对的font-size,然后让rem相对于这个字体的大小进行设置。这样才能在手机端正常浏览和使用,只要我们设置了html的font-size,那么我们对于div元素的宽高,我们都可以直接使用rem作为单位使用了。

为了让页面上的所有元素能够兼容所有了浏览器,保证rem的宽高一样。那么我们得给html设置一个font-size的值为625%(切记,移动端一定要设置成625%,PC端可以设置为62.5%)。相关代码如下:

阅读更多

CSS渐变与浏览器兼容

对于IE、Firefox以及chrome浏览器来说,要使用CSS实现渐变效果,那可是件难事,因为IE与Firefox及chrome使用的代码都不一样啊。一定要注意,IE10以下版本仅能使用滤镜来实现哦。

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#00a0e9));
background: -moz-linear-gradient(top, #33bbee, #00a0e9);
background: -o-linear-gradient(top,#33bbee, #00a0e9);
background: -ms-linear-gradient(top,#33bbee 0%,#00a0e9 100%); /*IE10+*/
-ms-filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#33bbee, endColorstr=#00a0e9); /*IE*/
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#33bbee,endColorStr=#00a0e9);/*IE6,7*/

史上最全的 css hack 解决方案

在使用css时,总是会遇到很多问题,并且由于每一个浏览器对css的兼容性不一样,而面对网站访问的用户来说,他们使用的浏览器版本以及浏览器产品都有不同,那么我们就必须得了解css hack的相应技术,来解决css在各个浏览器中的显示效果,并满足用户的体验程度!下面是一套完美解决css hack的各种方案,不论对于任何浏览器都很实用,希望大家喜欢!

CSS技巧

1、div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
2、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
例如:
<#div id=”imfloat”>
相应的css为
#IamFloat
{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}

3、浮动ie产生的双倍距离
#box
{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略
} 阅读更多

五个方案即可解决XHTML+CSS兼容性

2015/07/03HTML5+CSS3 标签:0

XHTML+CSS是我们经常都能看到的相应的一门网页制作语言的整合以及一个超前的技术,不过由于浏览器泛滥的今天,我们不知道用户会使用什么样的浏览器来浏览网站,而为了让所有用户看到我们网站上的东西不出问题,网页布局不错乱,所有就有一种技术叫做CSS兼容或者说浏览器兼容技术,那么下面我们就来看五个解决XHTML+CSS兼容性的解决方法!

1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改: 阅读更多

1

share

AD