css设计汇总
1.对于绝大多数网站而言,最佳行间距应该是字体高度的125%
2.对于绝大多数移动端设备而言,最佳行间距是字体高度的150%
3.每行的字符数量应当控制在45~60个之间(中文也有一个约定俗成的数量),而在移动端上,这个数量通常需要减半看起来才足够舒适。
4.小写字母x的高度是这套字体的x高度,小写字母的整体比例会直接影响到阅读的体验。
5.通过将max-width设置为100% ,便可以告诉浏览器不要让图片的大小超过了它的容器元素。这样,即使浏览器窗□变窄,图片也不会溢出或被裁剪了 :
.slats img {
width: 100%;
max-width: 100%;
}
6.一般的网页是960px,按照1:1.618这个比例来计算的话,那么高度就可以设置为594px
7.在DIV里的图片居中问题:
外层DIV:要设置宽高和行高(line-height),图片要设border:0; “vertical-align:middle;”。
8.
行间距 line-height
字符间距 letter-spacing
单词间距 word-spacing
大小写 text-transform
值:
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写
空白格 white-space
值:
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器也不会换行。
pre-wrap 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器,会换行。
nowrap 一直不换行,直到使用br
9.表格边框
属性:border-collapse
值:
separate:边框分隔
collapse:边框合并
10.隐藏元素有两种方式
display:none; 使用display:none; 隐藏一个元素,这个元素将不再占有原空间 “坑” 让出来了
visibility:hidden; 使用 visibility:hidden;隐藏一个元素,这个元素继续占有原空间,只是“看不见”
11.如果style.css中,<style>标签中,style属性上有冲突的样式,那么谁的优先级更高?
a.style标签与外部文件style.css样式重复 ,那么优先使用: 最后出现的一个
eg.
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.p1{
color:green;
}
</style>
<p class="p1">优先使用p1 颜色是绿色的样式</p>
或
<style>
.p1{
color:green;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<p class="p1">优先使用style.css的样式</p>
b.style标签上的与style属性冲突 ,优先使用style属性
e.g.
<style>
.p1{
color:green;
}
</style>
<p class="p1" style="color:red">p1 颜色是红色,优先使用style属性</p>
c.如果样式上增加了!important,则优先级最高,甚至高于style属性
12.绝对定位
属性:position
值: absolute
通过指定left,top绝对定位一个元素
a.设置了绝对定位的元素,相当于该元素被从原文档中删除了
b.绝对定位是基于最近的一个"定位了"的父容器
c.如果父容器(如:div),并没有定位,这找它上级最近的一个定位了的父容器(如:body)
e.g.
<style>
p.abs{
position: absolute;
left: 100px;
top: 50px;
}
</style>
<body>
<div>
<p>正常文字</p>
</div>
<div>
这个div没有定位
<p class="abs" >绝对定位的文字</p>
</div>
</body>
d.通过绝对定位可以把一个元素放在令一个元素上,这样位置就重复了。
重复了,就存在一个谁掩盖谁的问题。 这个时候就可以使用z-index属性, 当z-index的值越大,就表示放上面,z-index:越小就表示放下面。
13.相对定位
属性:position
值:relative
与绝对定位不同的是,相对定位不会把该元素从原文档删除掉,而是在原文档的位置的基础上,移动一定的距离
14.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性:float
值: left,right
a.文字向右浮动
浮动后,原来的“坑”就让出来了,并且是在原来的高度的基础上,向右浮动
b.文字向左浮动
首先,向左浮动后,会把“坑”让出来,这个时候"浮动的文字后面的正常的文字“ 就会过来试图占这个坑,但是,发现 “浮动的文字”并没有走,结果,就只好排在它后面了
c.文字围绕图片
当图片浮动时,文字围绕着图片
d.不允许出现浮动元素
属性:clear
值: left right both none
e.水平排列div
默认的div排列是会换行的,如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方,如果超出了父容器,还会有自动换行的效果
15.元素的diplay显示方式有多种,隐藏、块级、内联、内联-块级
display:none 隐藏(使得被选择的元素隐藏,并且不占用原来的位置 )
display:block 块级(表示块级元素,块级元素会自动在前面和后面加上换行,并且在其上的width和height也能够生效,div默认是块级元素)
display:inline 内联(表示内联元素,内联元素前后没有换行,并且在其上的width和height也无效。 其大小由其中的内容决定,span默认是内联元素(不会有换行,width和height也不会生效) )
display:inline-block 内联-块级 (内联是不换行,但是不能指定大小,块级时能制定大小,但是会换行,有时候,需要元素处于同一行,同时还能指定大小,这个时候,就需要用到内联-块级)
其他的显示方式:
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格
16.CSS 布局 水平居中
内容居中
通过设置属性align="center" 居中的内容
通过样式style="text-align:center" 居中的内容
元素居中
设置本div的宽度,然后再使用样式 margin: 0 auto来使得元素居中
内联元素(如:span)的居中可以通过放置在div中,然后让div text-align实现居中
17.CSS 布局 垂直居中
line-height方式 :line-height 适合单独一行垂直居中
内边距方式 :借助设置相同的上下内边距,实现垂直居中效果,可以用在多行文本上
table方式 :首先通过display: table-cell;把div用单元格的形式显示,然后借用单元格的垂直居中vertical-align: middle; 来达到效果。这样对图片也可以居中,而 line-height就不能对图片居中。
e.g.
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="example.gif">
</div>
18.左侧固定,右边自动占满
<style>
.left{
width:200px;
float:left;
box-sizing: border-box; color: rgb(51, 51, 51); font-family: arial, verdana, "Microsoft YaHei", Tahoma, Simsun, sans-serif;"> }
.right{
overflow:hidden;
}
</style>
<div class="left">左边固定宽度</div>
<div class="right">右边自动填满</div>
19.一个div始终贴在下方
<style>
#div1
{
position: relative;
height: 300px;
width: 90%;
}
#div2
{
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
}
</style>
<div id="div1">
<div id="div2"> 无论蓝色div高度如何变化,绿色div都会贴在下面
</div>
</div>
首先把蓝色div(div1)设置为相对定位,然后把内部的绿色div(div2)设置为绝对定位, bottom: 0表示贴在下面
19. CSS应用 显示图片一部分
a.使用背景方式
对div使用背景图片
background:transparent url(wangwang.gif) no-repeat scroll -83px -0px ;
等同于
background-image:url(/site/wangwang.gif);
background-repeat:no-repeat;
background-attachment:scroll;
background-position: -83px -0px;
设置scroll -83px -0px 把图片向左滚动83个像素,向上滚动0个像素。
再把div大小设置为和小图片大小一样,即可大小只显示部分图片的效果
b.使用img方式
借助裁剪的方式只显示部分图片:
clip:rect(top, right, bottom, left)
裁剪之后,只显示被裁剪出来的图片,所以还需要把整个图片向左移动,才看上去像拿到了想要的那部分图片
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
20.块级元素和内联元素的边框区别
块级元素div默认是占用100%的宽度,常见的块级元素有div h1 p 等
内联元素span的宽度由其内容的宽度决定,常见的内联元素有 a b strong i input 等
21.div设置滚动条样式(只用于div)
overflow:auto;height:88%;
22.ie兼容CSS3渐变写法
IE用滤镜:filter
linear-gradient 在 ie9 以下是不支持的,所以对于 ie6 - ie8 我们可以使用滤镜来解决,代码如下:
.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
由于 filter 是 ie 的私有属性,所以我们需要针对 ie9 单独处理滤镜效果,代码如下:
:root 样式名称{filter:none;}
e.g.
.gradient{
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}