您的位置：首页 > Web前端 > CSS

【笔记】CSS的三大特性和css元素显示模式

2020-07-04 18:20 309 查看

CSS三大特性

一、层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。 层叠性主要解决样式冲突的问题

层叠性原则：
  • 如果样式冲突，则遵循
    就近原则
    ，哪个样式近 ，就执行哪个样式。
    例如：
div{
background-color: black;
}
div{
background-color: orange;
}

先给div背景颜色设置成黑色，后设置成橙色。因为div离设置成橙色这个样式近，所以

最终div会显示成橙色

二、继承性

子标签会继承父标签的某些样式，如文本颜色和字号( 

text- , font- , line-这些元素开头
的可以继承,以及
color属性
)

案例：

<style>
div{
color: blueviolet;
font-size: 16px;
}
</style>
<body>
<div>
<p>我是子标签，没有设置样式，但是
父标签设置了，所以我继承后字体变大变紫了</p>
</div>
</body>

效果显示：

继承中的特殊情况——
行高的继承
body {
font : 12px/1.5 Microsolft YaHei;
}
  • 行高可以跟单位，也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素行高为1.5
  • 此时子元素行高为：当前子元素的文字大小*1.5
  • body行高1.5，子元素可以根据自己文字大小自动调整行高
    例如：
<style>
body{
color: blueviolet;
font: 12px/1.5 'Microsoft Himalaya';
}
div{
/* 子元素继承了父元素body的行高1.5 ,这个1.5就是当前元素文字大小font-size 的1.5倍 */
/* 所以当前div的行高就是14 * 1.5 = 21像素*/
font-size: 14px;
}
</style>

三、优先级

当同一个元素指定多个选择器
如下：

<style>
div{
color: blue;
}
.new {
color: orange;
}
</style>

<body>
<div class="new"></div>
</body>

这时就会有一个原则告诉我们，到底该选择谁，因此也就会有优先级的产生。

  • 选择器相同, 则执行层叠性。
  • 选择器不同,则根据 
    选择器权重
    执行

选择器权重大小如下表所示：

选择器 选择器权重
继承 或 * 0,0,0,0
元素选择器 0,0,0,1
类选择器 ，伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style=“ ” 1,0,0,0
！important 无穷大

因此在上述代码中，

div
是元素选择器，
.new
是类选择器。类选择器的权重大于元素选择器，所以最后显示效果为橙色。

优先级注意事项：

  • 权重由4位数组成，但是不会有进位
  • 等级判断从左往右，数值相等则判断下一位
  • 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
  • a链接浏览器有默认指定样式，蓝色，下划线。因此给a链接的父元素body指定样式时，a不会继承。
    例如：
<style>
/*父元素的权重是100*/
#father {
color: orange;
}
/*p继承的权重是0*/
p {
color: blue;
}
</style>

<body>
<div id="father">
<p>我会变蓝</p>
</div>
</body>

尽管ID选择器的权重较大，但是p继承过来的权重过来的权重是0，所以p标签会执行自己设置的样式，最终结果是蓝色。

/所以以后我们看标签到底执行那个样式，就先看这个标签有没有直接被选出来/

权重叠加

如果是复合选择器,则会有权重叠加,需要计算权重

<style>
/*ul li 的权重是 0，0，0，1 + 0,0,0,1 = 0,0,0,2  */
ul li {
color: blue;
}
/*li 的权重是0，0，0，1*/
li {
color: orange;
}
/*.new li 的权重是0，0，1，0 + 0，0，0，0，1 = 0，0，1，1*/
.new li {
color: pink;
}
</style>

<body>
<div class="new">
<ul>
<li>我会变粉色</li>
<li>我会变粉色</li>
</ul>
</div>
</body>

注意：

权重会叠加，但永远不会有进位

CSS元素显示模式

什么是元素显示模式？

元素显示模式就是 

元素（标签）以什么样的方式显示

比如
div
，它的显示方式就是自己独占一行，而
span
标签，一行却可以放多个。
在网页中有许许多多的标签，不同的地方会用到不同的标签，了解它们的特点能有利帮助我们布局。

一、块元素

常见的块元素有

<h1>~<h6>、<p>、<div>、<ul>、 <ol>、<li>
等 ,其中 
<div>
标签是最典型的块元素。

特点：
  • 自己独占一行，高度和宽度、外边距以及内边距都可以控制
  • 宽度默认是父级宽度的100%
  • 是一个容器或者盒子，里面可以放块级元素或者行内元素
  • 文字类的元素内不能使用块级元素。
    <p>、<h1>~<h6>
    等都属于文字类块级类标签。
<p> <div>不可以把我放p里面</div> </p> /*此种方法是错误的*/

二、行内元素

常见的行内元素有

<a>、<strong>、 <b>、<em>、<i>、 <del>、 <ins>、 <span>
等 ,其中 
<span>
标签是最典型的行内元素。

特点：
  • 一行可以显示多个
  • 不能直接设置宽、高
  • 默认宽度就是它的文本宽度
  • 行内元素内只能放文本或其他行内元素
  • 链接里面不能再放链接，但是行内元素
    <a>
    链接里面可以放块元素，这是个特殊情况。

三、行内块元素

行内元素中有一些特殊标签，它们同时具有块元素和行内元素特点，比如

<img>、<input>、<td>
等

特点：
  • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
  • 默认宽度就是它本身内容的宽度（行内元素特点）
  • 高度，行高、外边距以及内边距都可以控制（块元素特点）

以

input
为例：

<style>
input {
width: 100px;
height: 50px;
}
</style>
<body>
<input type='text'>
<input type='text'>
</body>

显示效果：

四、元素显示模式转换

在一些情况下，一种模式的元素需要另外一种模式的元素的特性，这时我们就需要转换元素显示模式。比如我们想要给行内元素

<span>
设置宽和高，这就需要把
<span>
转换成块元素。

  1. 转换为块元素 
    display: block；
<style>
a {
display: block;/*转换为块元素*/
width: 200px;
background-color: palevioletred;
}
</style>

<body>
<a href="#">我是行内元素，本来不能设置高度</a>
<a href="#">我是行内元素，但是转换成了块元素</a>
</body>

效果显示：

2. 转换为行内元素 

diaplay: inline；

<style>
div {
display: inline; /*将div转换为行内元素*/
}
</style>

3.转换为行内块元素 

display: inline-block

<style>
span {
display: inline-block; /*将span标签转换为行内块元素，可设置高度宽度*/
width: 2000px;
height: 50px;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航