CSS第三天（背景属性，三大特性，盒子模型+浮动+定位,圆角border-radius,伪类）

白灵一

已于 2022-07-27 11:31:26 修改

阅读量942

点赞数

文章标签： css 前端

于 2022-07-18 11:38:39 首次发布

本文链接：https://blog.csdn.net/m0_70190404/article/details/125558706

版权

一、背景（background）属性

二、CSS三大特性

（一）、层叠性

（二）、继承性

一·、背景（background）属性

最大的优点控制图片位置方便

1.背景颜色：background-color

（

背景色半透明

/* (0,0,0)代表(red, green, blue)全黑，0.3为其透明度alpha */
background: rgba(0, 0, 0, .3)

）

background-color: aqua;

2.背景图片：background-image （超大的图片相比于插入图片更适合用背景图片）

background-image: url(img/和平.jpg);

3.背景图片平铺：background-repeat （默认取repeat，即铺满整个背景）

background-repeat: no-repeat;

4.背景图片位置：background-position（可以用方位词直接表示，也可以精确表示,还可以是混合单位,但是顺序一定是前面的为x，后面的为y方向）

body {
background-position: center;
background-position: left center;
background-position: 30px 50px;
background-position: 30px bottom;
}

5.背景固定：background-attachment （默认是滚动的scroll，fixed为固定的）

background-attachment: fixed;

上面五个属性的复合写法：对顺序没有要求

background: fixed blue url(img/雨.png) no-repeat bottom;

附：background-color属性有没有继承性:因为对象的背景默认是透明的，所以如果父对象设置了背景颜色之后，子对象也呈现为父对象的背景颜色，好像子对象继承了父对象的背景颜色，其实这是一种视觉错误。

二、CSS三大特性

1、层叠性

就近原则，同等优先级下选离<body>中元素近的样式。

<style>
        .cl_Sel {
            color: blue!important;
        }
        .cl_Sel {
            color: yellow!important;
        }
</style>

<body>
    <div id="id_Sel" class="cl_Sel">
        选择器优先级
    </div>
</body>

结果：

2、继承性

子继承父的特性；但是只能继承部分属性。详细见

 <style>
        .cl_Sel {
            color: blue!important;
        }
        #id_Sel {
            color:rgb(135, 171, 209);
            font: 14px/15px "Microsoft YaHei";
        }
        .cl_Sel {
            color: yellow!important;
        }
        
    </style>
<body>
    <div id="id_Sel" class="cl_Sel">
         选择器优先级
        <p>优先级继承最小</p>
    </div>
</body>

注意：行高的继承:

font: 14px/1.5 "Microsoft YaHei"; 这里没有单位的1.5表示随字体的变化，行高是对应字体的1.5倍。

只有子属性中的字体size大于父属性中的size时，才成立？

<style>
 body {

            font: 14px/1.5 "Microsoft YaHei";
       }
div {
            /* 当前文字的1.5倍，div的行高为20*1.5=30 */
            font-size: 20px;
     }
p {
            /* p的行高为15*1.5=22.5 */
            /* 只有子属性中的字体size大于父属性中的size时，才成立 */
            font-size: 15px;
}
</style>

<body>

    <div id="id_Sel" class="cl_Sel">
         选择器优先级
    </div>

    <p>优先级继承最小</p>
</body>

一、列表元素可继承：

list-style、list-style-type、list-style-position、list-style-image。

二、所有元素都可以继承的属性：

1、元素可见性：visibility

2、光标属性：cursor

三、内联元素可以继承的属性

1、字体系列属性

font、font-family、font-size、font-style、font-variant、font-weight；

2、除text-indent、text-align之外的文本系列属性

letter-spacing、word-spacing、white-space、line-height、color、text-decoration、text-transform、direction。

四、块级元素可以继承的属性

1、text-indent、text-align

3、优先级

优先级：继承/* < 元素选择器 < 类选择器/伪类选择器 < id选择器 < 行内样式style="" < important!

（1）、

<style>
        .cl_Sel {
            color: blue!important;
        }
        #id_Sel {
            color:rgb(228, 228, 82);
        }
</style>

<body>
    <div id="id_Sel" class="cl_Sel">
        选择器优先级
    </div>
</body>

结果：

（2）、注意!!!

<style>
        .first {
            color: brown!important;
/* 虽然这里的优先级（最高）比p元素选择器高，但是对于p元素来说，这里的选择属于继承 */
        }
        p {
            color:aqua;
        }
    </style>
</head>
<body>
    <!-- 优先级 -->
    <div id="first">
        <p>优先级继承最小</p>
        <a href="#">a元素选择器</a>
        <!-- a元素选择器自身具有样式 -->
    </div>   
</body>

结果显示：

（3）、复合选择器需要权重叠加，来计算优先级。

权重可以叠加，但是不可以进位

<style>
        ul li {
            color: blue;
        }

        li {
            color: aqua;
        }
</head>
<body>
   <ul>
        <li>复合选择器</li>
    </ul>
</body>

<li>和<ul>都是等权重的元素选择器，但是ul li 叠加的权重（0,0,0,2）要大于li（0,0,0,1）一个选择器的权重！

三、页面布局的三大核心

页面布局的三大核心：盒子模型，浮动和定位。

（一）、盒子模型

border边框 content内容 padding内边距 margin外边距

1、border边框（任何元素都可以有边框）

（1）、border-width 边框的宽度

（2）、border-style （边框是solid实线，dashed虚线，dotted点线等）

（3）、border-color 边框的颜色

边框的复合写法：border： 1px solid red; 没有顺序

边框有四边：border-top，border-bottom，border-right，border-left；复合写法同上

div {
            width: 80px;
            height: 50px;
            border: 5px solid blue;
            border-top: 2px dotted rgb(201, 100, 145);
        }

注意border和border-top的顺序需要注意，不可以反过来，否则前面的样式会失效！

一般测量盒子的实际大小时，不算边框

2、padding内边距

如果盒子给定了大小，当给它加上内边距时，盒子会被撑大。一般为了与效果图保持一致，需要减小盒子的宽和高。

当孩子元素没有指定标签值，无论它的padding为多少，都不会撑大盒子。

应用：当导航栏中的字数不一样多时，可以给它们相同的内边距，让它们自动改变大小。

<style>
        .nav {
            height: 40px;
            border-top: 3px solid orange;
            border-bottom: 3px solid rgb(106, 99, 99);
            line-height: 40px;
            text-align:center;
            background-color: antiquewhite;

        }
        .nav a {
            display: inline-block;
            height: 40px;
            font-size: 12px;
            color: rgb(33, 27, 18);
            text-decoration: none;
            padding: 0 40px;
        }
        .nav a:hover{
            background-color: rgb(210, 203, 194);
            color: orange;
        }
    </style>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">新浪微博热榜</a>
        <a href="#">一起看</a>
    </div>
</body>

结果：

4、margin外边距

常用法：水平居中 margin: 2em auto; 让其上下有一定跨度，左右对齐；（只能用于块元素）

常见问题：(1)、元素嵌套存在塌陷问题即父子元素谁的外边距更大，父子元素一起塌陷到一方，而不会单独分开。

解决方法：

(2)、外边距合并造成混。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

对于一些自带内、外边距的标签，常用的方法是：

* {
padding: 0;
margin: 0;
}

附加：5、盒子阴影（box-shadow）

box-shadow：inset x-offset y-offset blur-radius color；
（1）inset：阴影类型，可选值，默认投影方式为外阴影；inset表示内阴影
（2）x-offset：x轴位移，用来指定阴影水平位移量，可为正值（在对象的右边）或负值（在对象的左边）
（3）y-offset：y轴位移，用来指定阴影垂直位移量，可为正值（在对象的底部）或负值（在对象的顶部）
（4）blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围就越大，阴影边缘就越模糊。只能为正值，为0时不具有模糊效果
（5）color：阴影颜色，定义绘制阴影时所用的颜色，可以是十六进制、rgb、rgba透明色等

box-shadow:  1em 1em 2em green;

效果：

（二）、浮动 float

1、float 属性

用于定位和格式化内容。float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

   <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <p>
        <img src="img/雨.png" width="150px">
        重庆的雨不像苏北（南通）的雨那般轻柔，苏北的雨大多雷声大雨点小，我在苏北待两年，
        未曾见过像样的大雨，那雨跟个小姑凉似的，有时真如语文书里描写的细如牛毛，重庆的雨不然，
        特别是夏季，来的快去的也快，豆大的雨噼里啪啦打在青瓦上，顺着屋檐、沟渠溜到另外一个世界玩耍，
        人站在窗前，脑子里除了四面八方雨声，再无其他，心就不一样；六月天里一场雨再凉爽不过，无论肌肤感受如何，
        心就不一样；想罢这雨终究是落在夏季，没落在某些人的心里。
    </p>
</body>

效果：变为

float可以让元素排在一行并且支持宽度和高度，可以决定排列方向，使用简单，

inline-block（行内块） 也可以实现但是：

float：浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级元素上添加清除浮动的样式

* {
  box-sizing: border-box;
}

.img-container {
  float: left;
  width: 33.33%;
  padding: 5px;
}

<!-- 父级元素添加清除浮动样式 -->
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

box-sizing 属性允许我们在框的总宽度（和高度）中包括内边距和边框，确保内边距留在框内而不会破裂。

inline-block（行内块）：位置、方向不可控，会解析空格

浮动元素重叠
1、行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上
2、块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上
3、若不浮动的是块级元素，那么浮动的元素将显示在其上方
4、若不浮动的是行内元素或者行内块元素，那么浮动的元素不会覆盖它，而是将其挤往左方

如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象
浮动元素会尽可能地向顶端对齐、向左或向右对齐
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

2、clear 属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

    <style>
        .img1 {
            float: left;
        }
        .img2 {
            float:right;
        }
        .text {
            clear: right;
        }

    </style>
</head>
<body>
    <p>
        <img class="img1" src="img/雨.png" width="150px">
        <img class="img2" src="img/橙色.png">
        <p class="text">
        重庆的雨不像苏北（南通）的雨那般轻柔，苏北的雨大多雷声大雨点小，我在苏北待两年，
        未曾见过像样的大雨，那雨跟个小姑凉似的，有时真如语文书里描写的细如牛毛，重庆的雨不然，
        特别是夏季，来的快去的也快，豆大的雨噼里啪啦打在青瓦上，顺着屋檐、沟渠溜到另外一个世界玩耍，
        人站在窗前，脑子里除了四面八方雨声，再无其他，心就不一样；六月天里一场雨再凉爽不过，无论肌肤感受如何，
        心就不一样；想罢这雨终究是落在夏季，没落在某些人的心里。
        </p>
        
    </p>
</body>
</html>

=》

3、浮动的元素溢出包含它的元素解决方法clearfix hack

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

.clearfix{
  overflow: auto;
}

现在常用方法

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

附：溢出

1、overflow: hidden 溢出的部分被剪裁

2、overflow: visible 溢出的部分显示出来

3、overflow: scroll 溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：

4、overflow: auto 与scroll相似会自动加滚动条，但是只加必要的滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

（三）、定位 ( Position)

position 属性指定了元素的定位类型。

position 属性的五个值：静态定位（static）固定定位（fixed）相对定位（relative）absolute（绝对定位）粘性（sticky）

1、静态定位（static）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

2、固定定位（fixed）

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

p.pos_fixed
{
    border: 3px solid green;
	position:fixed;
	top:30px;
	right:5px;

}

3、相对定位（relative）

相对定位元素的定位是相对其正常位置。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

相对定位元素经常被用来作为绝对定位元素的容器块。

4、absolute（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素(与相对定位不同之处)，如果元素没有已定位的父元素，那么它的位置相对于<html>。

<style>
	* {
	margin:0;
		padding:0;
	}
	div {
		height:10px;
		width:10px;
		border:3px solid red;
		position:absolute;
	   left:10px;
	   top:10px;
	}
    h2
   {
	position:absolute;
	left:10px;
	top:10px;
    }
</style>

<div>
<h2>这是一个绝对定位了的标题</h2>
	</div>

5、粘性（sticky）

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

附：重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序。

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

附：设置层的透明度
（1）opacity：x； x值0~1，值越小越透明
（2）filter：alpha（opacity=x） x值为0~100，值越小越透明
网页中的元素都含有两个堆叠层，一个是未设置绝对定位时所处的环境，这时所有层的z-index属性值总为0；另一个是设置绝对定位时所处的堆叠环境，这个环境所处的位置由z-index属性来指定。

img {
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        opacity: 0.6;  /*x值0~1，值越小越透明 */
      }

四、圆角（border-radius）

语法格式：border-*-*-radius:[ <length> | <percentage> ]{1,2}

border-*-radius 属性提供 1~2 个参数，参数之间使用空格进行分隔。其中第一个参数表示圆角水平方向的半径或半轴，第二个参数表示圆角垂直方向的半径或半轴

图：

常见形式：

1、 border-radius: 15px;

=》 border-top-left-radius: 15pt 15pt;

border-top-right-radius: 15pt 15pt;

border-bottom-right-radius: 15pt 15pt;

border-bottom-left-radius: 15pt 15pt;

=》 border-radius: ( 15/110 )*100%; 加上边框总高度/宽度是110

div {
            display: inline-block;
            text-align:center;
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 5px solid blue;
            border-radius: 15px;
        }
<body>
    
    <div class="fir2">圆角</div>
    
</body>

效果：

2、

border-radius: 42px/27.5px;

=》 border-top-left-radius: 42px/27.5px;

border-top-right-radius:42px/27.5px;

border-bottom-right-radius: 42px/27.5px;

border-bottom-left-radius: 42px/27.5px;

=》border-radius: 20%/25%; (210*20%=42px)

 span {
            display: inline-block;
            width: 200px;
            height: 100px;
            text-align:center;
            line-height: 100px;
            border: 5px solid rgb(108, 202, 186);
         }
<body>
    
    <div class="fir2">圆角</div>
    
</body>

效果：

3、四个属性值按照左上、右上、右下、左下的顺时针顺序排列，按顺时针解释，没有就找对边。

border-radius: 4px, 6px, 8px, 10px 分别代表左上，右上，右下，左下；

border-radius: 4px, 6px, 8px 分别代表左上，右上和左下，右下；

border-radius: 4px, 6px 分别代表左上和右下，右上和左下；

效果图：

border-radius: 18px 30px 1px;

4、上下左右半圆，如上半圆：宽是高的一倍，左右上角一致且与高度相等；

span {
            display: inline-block;
            width: 200px;
            height: 100px;
            text-align:center;
            line-height: 100px;
            border: 5px solid rgb(108, 202, 186);
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
         }


<body>
    
    <div class="fir2">圆角</div>
    
</body>

5、扇形遵循“三同，一不同”原则，“三同”指的是元素的宽度、高度、圆角半径相同，“一不同”是圆角取值位置不同