css-03

最新推荐文章于 2024-11-10 11:49:10 发布

Aciel_

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量1k

点赞数 41

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Aciel_/article/details/139756017

版权

一.css三大特性

层叠,继承,优先级是我们学习CSS 必须掌握的三个特性。

1.1 css层叠性

层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。

当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。

1.2 css继承性

继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

>注意

>1.**所以对于字体、文本属性等网页中通用的样式可以使用继承。**例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。

> 2.并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 继承:字体大小,颜色可以继承,除a标签以外 ,a标签的颜色不能继承 line-height*/
        /* 下面的属性就不具有继承性:边框.外边距.内边距.背景.定位.元素高属性 */
        
        .father {
            font-size: 32px;
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">div元素</div>
        <a href="" class="son2">链接元素a</a>
        <p>div元素链接元素a</p>
    </div>
</body>

</html>

1.3 css优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。

●浏览器默认样式<继承样式<通配符选择器<标签选择器<id选择器<行内样式<!important

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

选择器	权重
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.数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

> 2.继承的权重是 0

二. 盒子模型（CSS重点）

CSS三个大模块：盒子模型、浮动、定位，其余的都是细节。

把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

2.1盒子模型（Box Model）

所谓盒子模型：

●就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

●CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

●外边距（margin）、

●边框（border）、

●内边距（padding）、

●实际内容（content）四个属性。

2.2 盒子边框（border）

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框样式（border-style），常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

三.边框综合设置

3.1 边框综合设置

border : border-width border-style border-color

/*没有顺序*/

border: 1px solid red;

3.2 圆角边框(CSS3)

当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

border-radius: 左上角右上角右下角左下角;

border-radius: 50%;

- 其中每一个值可以为数值或百分比的形式。

- 技巧：让一个正方形变成圆圈

- 以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。

- 而我们这里矩形就只用用高度的一半就好了。精确单位。

四.内边距(padding)

padding属性用于设置内边距, 是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距


        .con {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 一个值上下左右都是20px */
            padding: 20px;
            /*两个值 上下  左右 */
            padding: 10px 10px;
            /* 三个值 上 左右 下 */
            padding: 10px 20px 30px;
            /* 四个值  上  右  下  左 */
            padding: 10px 20px 30px 40px;
        }

五. 外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

5.1 外边距塌陷 (外边距合并)

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

解决办法:

给元素设置边框:可以为父元素定义1像素的上边框或上内边距

border-top: 1px solid red;

或

padding-top: 20px;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            /* 给元素设置边框:可以为父元素定义1像素的上边框
            或上内边距 */
            border-top: 1px solid red;
            /* padding-top: 20px; */
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">儿子元素</div>
    </div>
</body>

</html>