Css学习笔记(四)

最新推荐文章于 2022-02-16 15:55:09 发布

mikw999

最新推荐文章于 2022-02-16 15:55:09 发布

阅读量170

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/mikw999/article/details/101065847

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Css三大特性

css层叠性

所谓层叠性是指多重css样式的的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性会把另一个属性叠掉。

一般情况下，如果出现相同的样式，则会按照css书顺序，以最后样式为准

  div
    {
        font-size: 12px;
        color: skyblue
        
    }
    div
    {
        color: red
    }

前面的天蓝色会被后面的红色来覆盖。哪个样式离结构近，就执行那个样式/

css继承性

所谓继承性是指书写css样式表时，子标签会继承父标签的某些样式，如文本和字号，想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是：子承父业。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    div
    {
        font-size: 12px;
        color: skyblue       
    }
  
    </style>
</head>
<body>
   <div>
       <p>内容哦</p>
   </div>
</body>
</html>

如上并没有设置p的属性，但是p继承了div的属性，这就是css的继承性。

注意

恰当的使用继承可以简化代码，降低css样式的复杂性，子元素可以继承父元素的样式（text- ， font-，line- 这些元素开头的都可以继承，以及color属性）。

css优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级问题。此外还有一些特殊情况要注意

1，继承样式的权重为0.即在嵌套结构中，不管父元素样式权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承的样式。
2，行内样式有限。应用style属性的元素，其行内的权重非常高，可以理解为远大于100.总之，他拥有比上面的选择器都大的优先级。

3，权重相同的时候，css遵循就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在后面的样式优先级最大。
4，此外，定义了一个！important 命令，该命令赋予最大的优先级。也就是不管权重如何以及样式位置的远近，！important都具有最大的优先级。

css特殊性（specificity）

关于css权重，我们许哟一套公式来计算，这个就是css specificity，我们成为css特性或者非凡性。他是衡量css值优先级的一个标准，具体规范如下

specificity用一个四位数字段来表示，更像是四个级别，值从左到右，左面最大，一级大于一级，数位之间没有进制，级别之间不可超越
在这里插入图片描述
权重可是可以叠加的
div ul li 是0，0，0，3
.nav ul li 是0，0，1，2
a:hover 是 0，0，1，1
.nav a 是0，0，1，1
#nav p 是0，1，0，1

总结

1，使用 !import声明规则
2. 内嵌在 HTML元素的style属性的声明
3. 使用了id 选择器的规则
4. 使用了类选择器，属性选择器，为元素和伪类选择器的规则
5. 使用了元素选择器的规则
6. 只包含一个通用选择器的规则
7. 同一类选择器则遵循就近原则

Css盒子

CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。这个时候我们对其对象设置css高度(css height)、css宽度(css width)、css边框(css border)、css 边距(css margin)、填充（css padding）,即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样：

一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。

盒子边框

边框就是那层皮，下图的border部分
在这里插入图片描述
语法 : border: width style color
其中边框的样式（style）常用属性为下

边框的综合设定：

在这里插入图片描述

  <style>
   .email
   {
       border-top: 1px solid red;
       border-bottom: 1px solid pink;
   }
   .tel
   {
       border: 1px solid skyblue;
   }
  
    </style>

表格的细线边框

html里面表格边框会叠加在一起，所以会显得特别的粗，用border-collapse: collapse;和border-collapse: collapse; 就可以合并在一起

<head>
    <style>
    table
    {
        width: 700px;
        height: 700px;
        border: 1px solid red;
        border-collapse: collapse;
    }
    td
    {
        border: 1px solid red;
        border-collapse: collapse;
    }
    </style>
</head>
<body>
 <table  cellpadding="0" cellspacing="0">
     <tr>
         <td>1231</td>
         <td>1231</td>
         <td>1231</td>
         <td>1231</td>
     </tr>
     <tr>
         <td>113131</td>
         <td>113131</td>
         <td>113131</td>
         <td>113131</td>
     </tr>
     <tr>
         <td>23232</td>
         <td>23232</td>
         <td>23232</td>
         <td>23232</td>
     </tr>
 </table>


</body>
 </table>

圆角边框（css3）

语法

<head>
    <style>
   
    div
    {
        width: 50px;
        height: 50px;
        color: red;
        border: 1px solid black;
        background-color: pink;
        border-radius: 10px; <>
    }
    </style>
</head>
<body>
 
    <div>
        内容
    </div>


</body>

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。
在这里插入图片描述

*padding-top;上内边距
padding-right;右内边距
padding-right;下内边距
padding-right;左内边距
*
在这里插入图片描述

外边距（margin）

在这里插入图片描述
margin属性用于设置外边距，设置外边距会在元素之间创建空白，这段空白通常不能放置其他内容。
margin-top；上外边距
margin-right；右外边距
margin-bottom；下外边距
maigin-left；上外边距
maigin：上外边距右外边距下外边距做外边距
取值顺序和内边距相同。

外边距实现和子居中

可以让一个盒子实现水平居中，需要满足以下两个条件；
1，必须是块级元素
2，盒子必须指定宽度（width）

然后给做右外边距都设置auto，就可以是块级元素水平居中
实际工作中常用这种方式进行网页布局，代码如下

 div
    {
        width: 960px;
        margin: 0 auto;    
    }

清除元素的默认内外边距

为了更方便控制网页中的元素，制作网页的时候，可以使用如下代码清楚默认元素的默认内外边距；

   *
   {
       padding: 0;   /* 清除内边距 */
       margin: 0;       /* 清除外边距 */
   }

注意：行内元素只有左右内外边距，没有上下的内外边距的。

外边距合并问题

使用margin定义块元素的垂直外边距时候，可能会出现外边距合并

相邻块元素垂直外边距合并

当上下相邻的两个块级元素相遇时，如果有上面的元素又下外边距margin-bottom ，下面的元素有上外边距 margin-top，则他们的之间的垂直不是marigin-bottom和margin-top之和，而是两者中的较大者，这种现象叫做相邻块元素垂直外边距合并，也称外边距塌陷。

在这里插入图片描述

解决方案：外边距只给一个元素不要分开给，避免就好了

相邻块元素垂直外边距合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并成两者中较大者，即使父元素的上外边距为0，也会发生合并，
在这里插入图片描述
解决方案：
1，可以为父元素定义1像素的上边框或者上内边距
2，可以为父元素添加 overflow：hidden；

Content的宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制，
width和height的属性值可以为不同单位的数值或对于父元素的百分比%,实际工作中最常用的是像素值，
大多数浏览器的计算原则是：

  /* 外盒尺寸计算（元素空间尺寸） */
   Element 空间高度 =content height +padding + border +margin
   Element 空间宽度 =content width +padding + border +margin

   /* 内盒尺寸计算（元素大小） */
   Element height =content height +padding + border （height为内容高度）
   Element width =content width +padding + border （height为内容宽度）

注意：
1，宽度属性width和高度属性height只适用于块级元素，对行内元素无效（img标签和input除外）
2，计算盒子模型总高度的时候，还要考虑上下盒子垂直外边距合并的情况
3，如果一个盒子没有给定宽度或者高度，或者继承了父亲的宽高，则padding不会影响本盒子的大小；

mikw999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css学习笔记(四)

Css三大特性css层叠性所谓层叠性是指多重css样式的的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性会把另一个属性叠掉。一般情况下，如果出现相同的样式，则会按照css书顺序，以最后样式为准 div { font-size: 12px; color: skyblue ...
复制链接

扫一扫