css设计汇总
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;}
以上是关于css设计汇总的主要内容，如果未能解决你的问题，请参考以下文章