鹿泽鹿泽  2024-07-09 09:04:02 鹿泽笔记 |  隐藏边栏 |  0 

CSS通常称为CSS样式表或层叠样式表(级联样式表)，主要用于设置HTML页面中的文本内容，为用户展现较具观赏的外表的。以下是小编来在优化网站时遇到的CSS一些小知识点。

边距清空

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldse,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
a{text-decoration:none;}

清除浮动

.clearfix:after{conter:"";display:block;clear:both;}
.clearfix{zoom:1;}

浏览器当做编辑器

浏览器地址栏输入代码，可直接将浏览当做编辑器

data:text/html,<html contenteditable>

鼠标隐藏

*{cursor:none!important;}

文字模糊效果

p{color:transparent;text-shadow:#111 0 0 5px;}

居中样式

垂直居中样式(translate css3需IE9)

.center-vertical{position:relative;top:50%;transform:translateY(-50%);}

水平居中样式(translate css3需IE9)

.center-horizontal{position:relative;left:50%;transform:translateX(-50%);}

多重边框

div{box-shadow:0 0 0 6px rgba(0,0,0,0.2),0 0 0 12px rgba(0,0,0,0.2),0 0 0 18px rgba(0,0,0,0.2),0 0 0 24px rgba(0,0,0,0.2);height:200px;margin:50px auto; width:400px;}

实时编辑css（IE6无效）

<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body{color:blue}
</style>
</body>
</html>

文本框灰置

有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使

<input type="text" name="input1" value="鹿泽">

鹿泽的内容，”鹿泽”两个字不可以修改。实现的方式归纳一下，有如下几种。

方法1: onfocus=this.blur() 当鼠标放上就离开焦点

<input type="text" name="input1" value="鹿泽" onfocus=this.blur()>

方法2:readonly

<input type="text" name="input1" value="鹿泽" readonly>
<input type="text" name="input1" value="鹿泽" readonly="true">

方法3: disabled

<input type="text" name="input1" value="鹿泽" disabled="true">

css3 移动web样式媒体查询的变化

外联 ：当屏幕等于小于480px调用new_file.css

内联：当屏幕大于480px调用使用本样式

<style>
@media screen and (max-width:480px){
body {
background: blue;
}
}
</style>

一定要注意and后面的空格

设置文本居中

text-align:center

属性规定元素中的文本的水平对齐方式，设置文本居中。

text-align的center应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。

text-align具有向下传递性，会不断地向子元素传递。如果设置一个div，则其子div中的内容也会居中。

margin:0 auto

自动对齐，设置块元素或与之类似的元素居中。

用margin：0auto使元素产生位置变化，需要将其放在div中。需要使文本居中，只要将文本放在一个div中即可。不过，使用margin的时候需要注意的情况比较多，稍不注意的时候就容易导致margin失效。

float：left或margin：100px将magrin：0auto的效果覆盖。

使用margin需要指定DOCTYPE.DOCTYPE是指定浏览器用哪一种标准解析HTML代码，如果不指定，可能会不失效。此外，DOCTYPE前不能够有代码，否则也会导致margin；0auto失效。

CENTER

使布局居中。

<center>是将所有被包含的元素都居中显示,而text-align：center只是将元素下面的内联元素居中显示。但HTML5中不支持<center>，不建议使用该方法。

设置文本两端对齐

text-align:justify

text-align:justify属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。

IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last要生效，必须先定义text-align为justify。

line-height:0解决标准浏览器容器底部多余的空白

.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}

说明：模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格。

@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}

说明：

text-align-last:justify目前只有IE支持，标准浏览器需要使用.demo:after伪类模拟类似效果。

opera浏览器需要添加vertical-align:top才能完全解决底部多余的空白,且子类必须是inline-block元素。

.content:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}

设置文本溢出省略

CSS单行文本溢出省略问题

.overhidde{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

这里的width属性是必须的，因为需要知道它的宽度是多少，才能判断溢出；

overflow:hidden;是为了隐藏溢出的文本；
white-space:nowrap;默认。空白会被浏览器忽略；
text-overflow:ellipsis;显示省略符号来代表被修剪的文本。

css多行文本溢出省略问题

.overhidden2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本，大家可以试一下不加的效果，就一目了然了。

line-clamp属性是为了控制文本显示多少行。

关于display和box-orient，在这里简单说一下：

必须定义display属性才可以对box进行划分。
box-orient属性指定一个box子元素是否应按水平或垂直排列。

产品运营
1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

你可能也喜欢

热评文章

上一篇
下一篇