css其他样式

最新推荐文章于 2020-11-09 09:36:00 发布

pleasecallme_522

最新推荐文章于 2020-11-09 09:36:00 发布

阅读量1k

点赞数

分类专栏： CSS学习文章标签： css

本文链接：https://blog.csdn.net/pleasecallme_522/article/details/52861432

版权

CSS学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.去掉a及input等标签的虚线框：

input,button{outline:none;}
::-moz-focus-inner{border:none;}
a{blr:expression(this.onFocus=this.blur());}
:focus{outline:0;-moz-outline-style:none;}

将其加入common.css公共样式中去。

2.元素透明度,格式如下：
opacity:0.5;filter:alpha(opacity=50)
其中，filter:alpha(opacity=50)是为IE浏览器做的隐藏，平时只需要像opacity:0.5;这样写就可。opacity的值介于0和1之间，0是全透明，1是不透明（关于这个问题一直记不清楚，其实可以这样记：0本来就代表没有，1代表有，所以，当为0时元素“没有”了，说明opacity为0是全透明。）

3.百分比宽高和最大最小宽高
max-width min-width max-height min-width
关于百分比在宽、高度的设置上，最有特色是用百分比设置img标签的宽和高。当img元素的宽度设置为百分比时，高度要设置为自适应，这样页面的尺寸改变时，图片可以等比例缩放，例如：
刚开始在页面中引入一张图片，图片和页面的宽度比例如图：（按ctrl+shift+m打开火狐浏览器的手机浏览模式）
这里写图片描述
在html文件中将该img元素的样式设置为：
img{width:100%; height:auto;}
此时再任意改变页面的尺寸时，照片将等比例缩放，如：

4.背景固定：background-attachment：fixed;设置之后，由于视窗不动，滑动页面时构成视差。

5.元素隐藏：有两种方法，但存在区别，
A.visibility:hidden/visible：该方法隐藏元素，同时给隐藏的元素保留住原有的位置;
B.display:none/block：不但隐藏，且元素已“消失”在页面之中，不会给隐藏的元素保留位置，即后面的元素会取代它之前的位置

6.子元素相对于父元素溢出隐藏，overflow该属性共有以下几个常用值：
A.overflow:hidden将子元素超出父元素大小范围的多余部分裁掉，可能会比较生硬；
B.overflow:scroll若子元素溢出，则在父元素的溢出方向自动出现一个滚动条。此方法一经设定，无论溢不溢出，都会出现滚动条。这一点有的时候会影响美观，可能会需要结合隐藏滚动条的知识来解决问题
C.overflow：auto自适应模式。溢出时自动出现滚动条，不溢出时表现正常。
D.overflow:inherit规定应该从父元素继承 overflow 属性的值。

7.文本溢出:text-overflow,常用值有以下两个：
A.clip:修剪文本，就是将超过文本大小的内容直接硬生生地截掉；
B.ellipsis：显示省略符号来代表被修剪的文本。
使用举例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.p1{width:12em; border:1px #000 solid;overflow:hidden; white-space:nowrap;text-overflow:clip;}
.p2{width:12em; border:1px #000 solid;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>

<body>
    <p class="p1">这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字</p>
    <p class="p2">这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字</p>
</body>
</html>

这里写图片描述

注：其中.p1 .p2类中用到的white-space:nowrap属性用于如何设置元素内部的空白。其常用的值为nowrap,表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

8.隐藏和禁用滚动条
A.x轴方向overflow-x:hidden;
B.y轴方向overflow-y:hidden;
没有隐藏滚动条之前，滚动条存在，通过滑动滚动条或鼠标滚轮来实现滚动效果：
这里写图片描述

设置隐藏滚动条之后，滚动条被隐藏，且失去滚动效果：
这里写图片描述

9.把a标签转换为按钮使用，将href里的值改为javascript:;即可：
<a href="javascript:;"></a>

10.网页实体：&，例如，网页中一般只能解析一个空格，用网页实体来表示空格时就可以解析多个。
（在某标签内输入内容时，按下&，然后选择实体符）

11.title属性：规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本，注：title 属性常供form 以及 a 元素这样可以获取焦点的元素使用，以提供关于输入格式和链接目标的信息。如：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
    <a title="点击这里跳转到首页" href="#">首页</a>
</body>
</html>

这里写图片描述

12.<img>标签的alt属性：指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。但是该属性在IE浏览器中时会有一些不一样，只有当用户把鼠标移动到 img 元素上时，IE会显示出 alt 属性的值。
例如：

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

在标准浏览器中，若图片无法正常加载：
这里写图片描述
在IE中，若图片可以正常加载，且鼠标移入时：

并且，W3C网站中是这样倡导大家的:我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式。

并且需要注意的是，alt 属性的值是一个最多可以包含 1024 个字符的字符串

13.!important属性及选择器优先级的问题：
A.选择器优先级：
一般情况下，在css里，选择器的优先级由高到低为：行间>id>class>标签选择器，并且如果同种类型的选择器对同一属性的不同描述时，在代码行中还会出现后写的覆盖前面样式的问题，例如下面这样一道面试题：（360面试题）
这里写图片描述
这道题的答案选择B

对这道题的分析如下：
css中选择器一般分为三种，标签名选择器，类选择器和ID选择器。而其他后代选择器和群组选择器只是对这三种选择器的一种扩充。关于更多选择器的详细介绍请看这一篇博客
一般而言，选择器越特殊，它的选择器越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1来表示标签选择器的优先级，用10表示类选择器的优先级，用100表示ID选择器的优先级。那么在上题中，#content p的优先级是100+1
p的优先级是1
.article的优先级是10
p.article的优先级是10+1
故本题中的答案为B

B.!impotant属性。该属性的应用示例：

<style type="text/css">
p{font-size:12px !important;}
#content p{font-size:13px;}
.article{font-size:14px;}
p.article{font-size:15px;}
</style>

<body>
    <div id="content">
        <p class="article" style="font-size:16px">test</p>
    </div>
</body>

上例中字体的大小是12px。很明显，上例中p的优先级是1最低，但是在设置字体的属性中加入！important属性后，该选择器的优先级变成了最高，可见它能够帮助开发者和用户在修改样式表的时候轻松覆盖原本的权重

14.text-transform:属性用来控制文本的大小写，其常用值有以下几个：
A.none：默认值，定义带有小写字母和大写字母的标准文本；
B.capitalize：文本中的每个单词用大写字母开头；
C.uppercase：定义只有大写字母；
D.lowercase：定义只有小写字母；

15.<iframe></iframe>：iframe 元素会创建包含另外一个文档的内联框架（即行内框架），通俗地说，就是将另一个页面引入当前页面（虽然已经过时，但需要知道且会使用）。一个示例：

<style type="text/css">
p{font-size:26px; text-align:center; margin-bottom:30px;}
</style>
</head>

<body>
    <p>这个页面中即将引入另外一个页面</p>
    <iframe name="smjh" align="center" src="https://www.baidu.com/" frameBorder="0 "width="760" height="300"></iframe>
</body>

这里写图片描述
下面介绍<iframe></iframe>标签内的常用属性：
A.width:<iframe>标签的宽
B.height:<iframe>标签的高
C.scrolling是否有滚动条，yes（有）no（无），默认为auto（需要的时候出现）
D.frameBorder是否有边框，正整数，默认为1，0为无边框
E.name规定iframe的名字
注：可以用<a href="这里换成你要修改网站的网址" target="smjh"></a>来让smjh这个iframe切换到你要修改的页面
························································································································································
iframe的优缺点：
A.优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
B.缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
··················································································································································
16.table在布局时的缺点：
A.太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
B.灵活性差，比如要将tr设置border等属性，是不行的，得通过td.
C.代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
D. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
E.table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
F.不够语义

17.标签语义化的好处：
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO（搜索引擎优化）：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

18.前端页面的三层结构：
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

19.sprites（雪碧图）
A.原理：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image，background- repeat，background-position的组合进行背景定位。background-position可以精确地定位出背景图片的位置。
示例：
在制作一个页面时，需要制作导航部分的效果，正常情况下背景为浅蓝色，而鼠标指上去时背景为深蓝色：
这里写图片描述

这里写图片描述

按照正常的处理方法，就是用两张颜色不同的图片来做li标签的背景，然后在鼠标移入和移出时做背景图片的替换。但是用雪碧图的思想处理这个问题的步骤如下：
1.在PS中将这两张图片合为同一张图片：
这里写图片描述
2.在鼠标移入移出时修改background-position的值即可：

.menu li a{display:block; width:96px; height:35px;background:url(../imgs/button.jpg);color:#001a7d; font-size:16px; text-align:center; line-height:35px;}
.menu li a:hover{color:#fffdf4; font-size:16px;line-height:35px; background-position:0 -35px;}

B.优点：
a. 减少网页的http请求，并防止出现闪白
b. 减少图片的字节，并解决了图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
c. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
······················································································································································
C.缺点：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

20.经常遇到的浏览器兼容性有哪些：
a. 浏览器默认的margin和padding不同
b. IE6双边距bug
c. 在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
d. min-height在IE6下不起作用
e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6
f. input边框问题，去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效
其他更多的在以后的学习中会不断地总结

21.外边距重叠：margin-collapse。
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则：
a. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
b. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
c. 两个外边距一正一负时，折叠结果是两者的相加的和。

pleasecallme_522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
css其他样式

1.去掉a及input等标签的虚线框：input,button{outline:none;}::-moz-focus-inner{border:none;}a{blr:expression(this.onFocus=this.blur());}:focus{outline:0;-moz-outline-style:none;}将其加入common.css公共样式中去。2.元素透明度,格式如下：
复制链接

扫一扫