CSS基础与布局：从入门到精通-优快云博客

本文链接：https://blog.youkuaiyun.com/sichenss/article/details/123374744

本文详细介绍了CSS的引入方式、书写顺序、选择器、字体样式、文本样式、元素显示格式、盒子模型、定位、装饰技术等内容，适合初学者理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

一.css引入方式

(1)内嵌式:CSS写在style标签中(小案例)
提示:style标签可以写在页面任意位置,但是通常约定写在head标签中
(2)外联式:CSS写在一个单独的.css文件中(项目中)
- 提示:
需要通过link标签在网页中引入
注释:
rel="styleheet"表示关系为样式表

代码:

<link rel="stylesheet" href="./my.css">

(3)行内式:CSS写在标签的style属性中(配合js使用)
- 提示:
  - 基础班不推荐使用,之后会配合js使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            /* 设置颜色 */
            color: rgb(241, 14, 14);
            /* 字变大 font-size */
            font-size: 30px;
            /* background-color 背景颜色*/
            background-color: chartreuse;
            /* width height */
            width: 400px;
            /* 背景图片 */
            background-image:url(../网页练习/小黄人.png);
		}
    </style>
</head>
<body>
    <h1>你好世界</h1>
    <!-- 行内式 -->
    <div style="color:chartreuse; font-size: 70px;">这是div标签</div>
    <div>这个div是什么颜色</div>
</body>
</html>

(1)CSS的书写顺序:浏览器执行效率更高

1.浮动 / display
2.盒子模型: margin border padding 宽高背景色
3.文字样式

(2)a标签使用细节:

a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能跳转
如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大
因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部
宽度不设置块元素会默认占满一行

  ul li a {
     display: block;
     height: 40px;
      text-decoration: none;//去除下划线
      color: #000;
    }

二.选择器

1.标签选择器:

就是以标签名命名的选择器

2.类选择器:

结构:

.类名{
	css属性名:属性值;
	}

注意点:
(1)在所有的标签上都有class属性,class属性中的属性值称为类名
(2)类名只能是由数字,字母,下划线,中划线组成,但不能以数字或者中划线做开头
(3)一个标签可能用多个类名,需要空格隔开即可
(4)类名可以重复使用,一个类选择器可以同时选中多个标签(多个标签同时使用类选择器)*/

3.id选择器:

主要是配合js做页面效果的

结构:

#id属性值{
	css属性名:属性值;
}

注意点:
- (1)所有标签上都有id属性
- (2)id属性值类似与身份证号,在一个页面中是唯一的,不可重复的
- (3)一个标签上只能有一个id属性
- (4)一个id选择器只能选中一个标签(只能用一次,不能多个标签同时使用)

4.通配符选择器:

结构:

* {
    css属性名:属性值;
}

作用:

找到页面中所有的标签,设置样式

注意点:
(1)开发中使用较少,只会在极特殊的情况下才会用到
(2)在基础班小页面中可能会用于去除标签默认的,margin和padding()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		/*类选择器*/
        .one{
                    color: crimson;
                }
		/*id选择器*/
		#blue{
        color: darkblue;
    	}
		/*通配符选择器*/
        *{
                color:darkmagenta
            }
    </style>
</head>
<body>
    <p class="one">pppppp</p>
    <p class="one">这个p是什么颜色的</p>
    <p id="blue">2222222222</p> 
    <!-- 只能用一次blue -->
    <p>pppppp</p>
    <p>这个p是什么颜色的</p>
    <p>2222222222</p>    
</body>
</html>

选择器进阶

5.复合选择器:

(1)后代选择器:(用空格隔开)

有儿子,孙子,重孙子…
后代选择器中,选择器与选择器之间用空格隔开
作用:
- 根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素
选择器语法:

选择器1 选择器2{

      css

    }

(2)子代选择器:(用>隔开)

作用:
- 根据HTML标签的嵌套关系,选择父元素子代中满足条件的元素
结果:
- 在选择器1所找到的标签的子代中,找到满足选择器2的标签.设置样式
注意点:
- 子代只包括儿子
选择器语法:

 选择器1 > 选择器2{

      css

    }

(3)并集选择器:( 用 , 隔开 )

作用:同时选择多组标签,设置相同的样式
语法:
```
选择器1,选择器2{
	css
}
```
结果:
- 找到选择器1和选择器2选中的标签,设置样式
注意点:
- (1)并集选择器中的每组选择器之间通过,隔开
- (2)并集选择器中的每组选择器可以是基础选择器或者复合选择器
- (3)并集选择器中的每组选择器通常一行写一个,提高代码的可读性

(4)交集选择器:(连在一起,什么也不加)

(5)hover伪类选择器:

作用:选中鼠标悬停在元素上的状态,设置样式
注意:
- (1)伪类选择器选中的元素的某种状态
- (2)任何一个标签都有伪类
选择器语法:
```
选择器:hover{
	css
}
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*后代选择器*/
    div  span  a{
            color: red;
            text-decoration: none;
            font-weight: 700;
        }    
    /*子代选择器*/
    div>p>a{
            color: red;
            text-decoration: none;
            font-weight: 700;
        }
    /*并集选择器*/
    div  span  a,div>p>a,div.box{
        color: red;
    }
    /*交集选择器*/
    div.box{
        color: red;
    }
    /*hover伪类选择器*/
    a:hover{
        color: springgreen;
        background-color: tomato;
    }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div><span><a href="https://www.bilibili.com/video/BV1Kg411T7t9?p=66">哔哩哔哩</a></span></div>
    <div>
        <a href="https://www.bilibili.com/video/BV1Kg411T7t9?p=66">哔哩哔哩这是div的儿子</a>
        <p>
            <a href="https://www.bilibili.com/video/BV1Kg411T7t9?p=66">哔哩哔哩这是div的孙子</a>
    	</p>
	</div>
        <p class="box">这是p标签:box</p>
        <p>ppppppp</p>
        <div class="box">这是div标签:box</div>
        <img src="../图片/小米.webp" alt="小米12pro" title="小米12pro">
</body>
</html>

三.字体样式:

(1)字体大小:font-size(默认是16px)

font-size:数字+px;

(2)字体粗细:font-weight

关键字:
- (正常)normal
- (加粗)bold
- 纯数字:正常:400
- 加粗:700

(3)字体样式:font-style(是否倾斜)

默认: normal
倾斜: italic

(4)字体类型:font-family

(调整字体(网页一般都是像微软雅黑的字体))
一般写结果具体的字体,中间用,隔开 最后写一个种类兜底,就是前边都没有,就按这种类的字体使用
- windows默认是微软雅黑
- macOS 默认是苹方

①无衬线字体(sans-serif)

特点:文字笔画粗细均匀,并且首尾无装饰
场景:网页中大多采用无衬线字体
常见字体:黑体,Arial

②衬线字体(serif)

特点:文字笔画粗细不均,并且首尾有笔锋装饰
场景:报刊杂志中应用广泛
常见字体有:宋体,Times New Roman;

③等宽字体(monospace)

特点:每个字母或文字的宽度相等
场景:一般用于程序代码编写,有利于代码的阅读和编写
常见该系列字体:Consolas,fira code

(5)字体类型:font属性连写

文本样式:

  font:style weight size family;

注意:如果需要单独的样式,写在连写的下边
省略要求:只能省略前两个,如果省略相当于设置了默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .font{
            font-style:italic;
            font-weight: 800;
            font-size: 30px;
            font-family: 宋体;
                }
        .css{
            font:normal 700 200px 雅黑;  
        }
    </style>
</head>
<body>
    <div class="css">这是一段div文字</div>
</body>
</html>

四.文本样式:

(1)文本缩进: text-indent:em(em一个字的大小)

- text-indent:em ;
- text-indent: 18px ;

(2)文本水平对齐: text-align:

取值:

属性值:

- left:		左对齐
- center:  居中对齐
- right:   右对齐

注意:
- text-align:center; 能让那些元素水平居中?
  - ①文本
  - ②span标签,a标签
  - ③input标签,img标签
如果需要让以上元素水平居中,text-align:center
- 需要给以上元素的(父元素)设置

(3)文本修饰: text-decoration

取值:

- underline://下划线(常用)
- ine-through:   //删除线(不常用)
- overline://上划线(几乎不用)
- none://无装饰线(常用)

/*开发中会使用*/
text-decoration:none;
/*清除a标签下的下划线*/

(4)行高: line-height

控制一行的上下行间距
取值:
- (1)数字加px
- (2)倍数(当前标签font-size的倍数)
应用:
- (1)让单行文本垂直居中可以设置line-height:文字父元素高度
- (2)网页精准布局时,会设置line-height:1;可以取消上下间距行高和font连写的时候注意:
  - 如果同时设置了行高和font连写,注意覆盖问题

font:style weight size/line-height family;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .font{
    	  text-indent: 2em;
        }
    .text{
            text-align: center;
        }
    .text-decoration{
            text-decoration:none;
            color: lightcoral;
        }
    </style>
</head>
<body>
        <h1 class="text">测试</h1>
        <p class="font" class="text">关注XXX，订阅更多精彩内容 点开小编的文章要趁早哦，不然新的文章都要凉凉了 自从佟丽娅离婚之后，38岁的佟丽娅一改往日的保守低调，开始大胆尝试性感路线，很多网友和粉丝第一次知道，原来佟丽娅也是“性感女神”，</p>
        <a href="../黑马12.30HTML/各类标签.html" class="text-decoration" target="_blank">佟丽娅</a>
</body>
</html>

(5)标签水平居中:

/* 水平居中 */
margin: 0 auto;

五.背景属性:

(1)背景颜色: ( bgc )

background-color:rgba(0,0,0,透明度);

(2)背景图片: ( bgi )

background-image: url(../图片/小米.webp);

(3)背景图平铺: ( bgr )

background-repeat:  repeat      //默认值,水平和垂直方向都平铺
background-repeat:  no-repeat   //(不平铺)图片只显示一个
background-repeat:  repeat-x    //(沿这水平方向(x轴)平铺)
background-repeat:  repeat-y    //(沿着垂直方向(y轴)平铺)

(4)背景位置: ( bgp )

		background-position
属性值:background-position:水平方向位置 垂直方向位置
         水平方向:(left center right) 
		垂直方向:(top center bottom)

正数:向右向下移动,
负数:向左向上移动
注意:背景颜色和背景图只显示在盒子中

(5)背景属性连写:

background:color image repeat position;

不分前后顺序,背景色,背景图,背景图位置,是否图平铺

/* 背景图位置如果是英文单词,可以颠倒位置 .如果是数值的话,不能颠倒位置*/

六.元素显示格式:

(1)块级元素:

1.独占一行(一行只能显示一个)
2.宽度默认是父元素宽度(父元素宽度的100%),高默认由内容撑开
3.可以设置宽高

div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer...

(2)行内元素:

1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高(写了也不生效)
```
a,span,b,u,i,s,strong,ins,em,del...
```

(3)行内块元素:

1.一行可以显示多个
2.可以设置宽高
代表标签:

input, textarea,button,select....

特殊情况:
- img标签有行内块元素特点,但是Chrone调试工具中显示结果是inline

(4)元素显示模式之间的转换:

属性:

display:block   转换成块级元素  
display:inline-block  转换成行内块元素
display:inline  转换成行内元素

拓展:标签嵌套规则

(1)块级元素一般作为大容器,
- 可以嵌套:
  - 文本,块级元素,行内元素,行内块元素等等…
但是:
- p标签中不要嵌套div,p,h等块元素 (h和p不能相互嵌套)
(2)a标签内部可以嵌套任意元素
- 但是:a标签不能嵌套a标签

七.CSS三个特性:

(1)继承性:

可以继承的常见属性:(文字控制属性都可以继承)

- 1.color
- 2.font:style weight size family
- 3.text-indent (缩进)
- 4.text-align(水平居中)

继承失效的特殊情况:
- 我没有的属性,就继承父的,我有了就用我的

(2)层叠性:

1.给同一个标签设置不同的样式->此时样式会层层叠加->会共同作用在标签上
2.给同一个标签设置相同的样式->此时样式会层叠覆盖->最终写在最后的样式会生效
注意点:
- 1.当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

(3)优先级:

特性:
- 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式: (谁更精准,谁的优先级高)
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意点:
!important 能将优先级加到最大
①!important写在属性值的后边,分号的前面
②!important不能提升继承的优先级,只要是继承优先级最低
③实际开发中不建议使用!important

都是继承的话,继承里边谁高,看继承哪个父级,哪个选择器生效

优先级计算规则:

复合选择器:
场景:
如果是复合选择器,此时需要通过权重叠加计算方法判断最终那个选择器优先级最高会生效
权重计算公式:(每一级之间不存在进位)

第一级第二级第三级第四级

( 0 , 0 , 0 , 0 )

复合选择器中行内样式 id选择器类选择器标签选择器

的个数的个数的个数的个数
比较规则:
①先比较第一级数字,如果比较出来了,之后通通不看
②如果一级数字相同,再去比较二级数字,如果比较出来,后边统统不看了
③…
④如果最终数字都相同,表示优先级相同,则比较层叠性

注意点: !important如果不是继承,则权重最高,天下第一

八.结构伪类:

(1)结构伪类

作用: 根据元素在HTML中的结构关系查找元素
优势: 减少对于HTML中类的依赖,有利于保持代码整洁
场景: 常用来查找某父级选择器中的子元素

- E:first-child{}  匹配父元素中的第一个子元素,并且是E元素
- E:last-child{}   匹配父元素中最后一个子元素,并且是E元素
- E:nth-child(n){}  匹配父元素中第n个子元素,并且是E元素
- E:nth-last-child(n){}  匹配父元素中倒数第n个元素,并且是E元素
- E:nth-last-child(4n){}  匹配父元素中第4n个元素,并且是E元素
- E:nth-last-child(-n+4){} 匹配父元素中前4个元素,并且是E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	/* 选中第一个 */
        li:first-child{
            background-color:pink;
            list-style: none;
        }
        /* 选中最后一个 */
        li:last-child{
            background-color:rgb(241, 13, 51);
            list-style: none;
        }
        /* 选中间的 */
        li:nth-child(5){
            background-color:rgb(28, 31, 184);
            list-style: none;
        }
        /* 选中倒数第几个 */
        li:nth-last-child(3){
            background-color: rgb(250, 14, 159);
        }
		/*选中第4n个*/
		li:nth-child(4n){
            margin-right: 0;
            /* font-size: 20px; */
            font-weight: 700;
        }
		/*选中前4个*/
        li:nth-child(-n+4){
            margin-top: 0;
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

(2)伪元素: 必须设置content属性

一般页面中的非主体内容可以使用伪元素
网页中的装饰性小图一般用这个
区别:
- (1)元素:HTML设置的标签
- (2)伪元素:由CSS模拟出来的标签效果

种类:

- 类名::before  作用:在父元素的最前添加一个伪元素
- 类名::after   作用:在父元素的最后添加一个伪元素

注意点:
- (1)必须设置content属性才能生效
- (2)伪元素默认是行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    		.father{
                width: 300px;
                height: 300px;
                background-color: pink;
            }
			/*在前边加*/
            .father::before{
                content: "老鼠";
            }
			/*在后边加*/
            .father::after{
                content: "大米";
            }
    </style>
</head>
<body>
    <div class="father">爱</div>
</body>
</html>

九.标准流:

标准流:

又称文档流
是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常用标准流排版规则:
- 1.块级元素:从上往下,垂直布局,独占一行
- 2.行内元素或者行内块元素:从左往右,水平布局,空间不够自动拆行

十.浮动:

(1)浮动的作用:

浏览器解析行内标签或行内块标签时,如果标签换行书写会产生一个空格的距离

浮动作用:

现在的作用:网页布局

float: left;   //左浮动
float: right;  //右浮动

浮动的特点:
- 1.浮动元素会脱离标准流(简称脱标),在标准流中不占位置相当于从地面飘到空中
  
  (脱离标准流,只会盖标签,但是不盖内容)
- 2.浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 3.浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
- 4.浮动元素有特有的显示效果
  - 一行可以显示多个
  - 可以设置宽高
  - (相当于行内块,且比行内块高级)
浮动的标签是顶对齐的(不想顶对齐,可以设置margin)
注意点:
- 浮动的标签不能使用margin:0 auto;居中

(2)清除浮动:

清除浮动是干什么?
- 清除浮动给别的标签带来的影响
影响:
- 如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
原因:
- 子元素脱标后不占位置
目的:
- 需要父元素有高度,从而不影响其他网页元素的布局
解决问题:

①直接给父级加高度

优点:简单粗暴,方便
缺点:有些布局中不能固定父元素高度,如:京东推荐模块,内容不固定

②额外标签法:

操作:

1.在父元素内容的最后添加一个块级元素

给添加的块级元素设置clear:both
- clear有(left,right)分别清除左右的影响
- clear:both清除所有的影响

缺点:会在页面中添加额外的标签,会让页面的html结构变复杂

③单伪元素清除法:

操作:用伪元素代替额外标签
(1)基本写法:

.clearfix::after{
    content:'';
    display:block;
    clear:both;
/*补充代码,让网页中看不到伪元素*/ 
    height: 0;
    隐藏的功能
    visibility: hidden;
}

优点: 工作中常用,直接给标签加类即可清除浮动

④双伪元素清除法: (常用)

写法:
- 这里出现.clearfix::before(作用:解决外边距塌陷问题)
- 外边距塌陷:父子级标签,都是块级,子级加margin会影响父级的位置

.clearfix::after{
        content:'';
        display:table;
    }
    /*真正清除浮动的标签*/
    .clearfix::after{
        clear:both;
    }

⑤直接给父元素设置

```
overflow:hidden;
```

十一.盒子模型

CSS规定,每个盒子分别由:

- 内容区域(content),
- 内边距区域(padding),
- 边框区域(border),
- 外边距(margin)

构成,这就是盒子模型

(1)边框: border:

属性名：border
属性值：单个的取值的连写，取值之间以空格隔开
快捷键bd+tab

边框连写形式：

border：10px solid red；
- 线条的种类（ solid：实线
          dashed:虚线
          dotted:点线
           ....）

①边框单向取值:

边框单方向设置: 只给盒子的某个方向设置边框
- 属性名:border-方位名词
- 属性值:连写的取值
```
border-right: 1px solid #000;	
```

②边框属性:

/*粗细:*/border-width:   数字加px;
/*样式:*/border-style:   实线solid,虚线dashed,点线dotted;
/*颜色:*/border-color:   颜色取值;

③边框圆角设置:

属性名:border-radius : 圆角的半径+px或者百分比
border-radius : 10px;

赋值规则:
- 从左上角开始赋值,然后顺时针赋值,没有赋值的看对角
(1)做一个圆形:
- 1.盒子必须是正方形
- 2.设置边框圆角为盒子宽高的一半
- border-radius 50%;
(2)做一个胶囊按钮:
- 1.盒子要求是长方形
- border-radius:盒子高度的一半

(2)内边距: padding

属性名: padding:   数字加px;
padding : 10px;

  
- padding可以当做复合属性使用,表示单独设置某个方向的内边距

- padding后边最多取四个值,上右下左;按照顺序顺时针取值

- (1)取三个值:上,左右,下

- (2)取两个值:上下,左右

- (3)多值写法,永远都是从上开始,顺时针转一圈,如果数不够,看对面的值

------

### (3)自动内减:         box-sizing

- 操作:给盒模型设置属性:

- ```css
  box-sizing:border-box;

优点:浏览器会自动计算多余大小,自动在内容中减去

(4)清除默认内外边距

浏览器会默认给部分标签设置默认的内外边距:padding margin ,

但是在一般项目开始前,需要先清除这些标签默认的margin和padding后续自己设置

最简单方法:

/*方法一-设置全部*/ 	
* {
     margin:0;
     padding:0;
     }
/*方法二:(并集选择想删除的标签)*/
     h1,h2,div,ul...{
     margin:0;
     padding:0;
		}

(5)版心居中:

 margin: 0 auto;

(6)外边距的合并现象:

场景:垂直布局的块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:只给一个盒子设置margin就行

(7)外边距折叠现象:塌陷问题:

场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
- (1)给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
- (2)给父元素设置overflow:hidden
- (3)转换成行内块元素
- (4)设置浮动

(8)行内标签的内外边距问题:

行内元素内外边距 nargin padding
如果想要通过margin和padding改变行内标签的垂直位置,无法生效
行内标签的margin-top或bottom 不生效
padding-top或bottom 不生效
解决方式:
- (1)加个行高line-height:;
- (2)设置为块元素即可

(9)list-style:none去掉列表符号:

list-style:none;

(10)通栏的设置:

只设高度,不设宽度即可

十二.定位:

(1)定位作用:

(1)标准流:
- 1.块级标签独占一行->垂直布局
- 2.行内块元素/行内元素一行显示多个->水平布局
(2)浮动:
- 1.可以让原本垂直布局的块级元素变成水平布局
(3)定位:
- 1.可以让元素自由的摆放在网页任何位置
- 2.一般用于盒子之间层叠的问题
(4)定位作用
- 1.可以解决盒子与盒子之间的层叠问题,定位之后的元素层级最高,可以层叠在其他盒子上面
- 2.可以让盒子始终固定在屏幕中的某个位置

(2)定位使用:

使用步骤:
1.设置定位的方式

- 属性名:position
- 常见属性值:
- 静态定位:position:static
- 相对定位:position:relative
- 绝对定位:position:absolute
- 固定位置:position:fixed

2.设置偏移值:
- 偏移值的设置分为两个方向,水平和垂直各选一个即可
- 选取的原则一般是就近原则(离那边近用那个)
- 方向:水平:(left/right) 属性值:数字加px 距离左边或右边的距离
- 垂直:(top/bottom) 属性值:数字加px 距离上边或下边的距离

(3)相对定位: ( por )

介绍:
- 自恋型定位:相对于自己之前的位置进行移动
```
    /*代码:*/position:relative;
```
特点:
- 1.不会改变标签的其他显示模式
- 2.占有原来的位置->没有脱标
- 3.改变位置参照自己原来的位置

(4)绝对定位: ( poa )

拼爹型定位: 相对于非静态定位的父元素进行定位移动
绝对定位:
- (查找父级就近找定位的父级,如果逐层查找找不到这样的父级,就以浏览器窗口为参照物进行定位)
- (1)先找已经定位的父级,如果有这样的父级,就可以以这个父级作为参照物来进行定位
- (2)有父级,但是父级没有定位,以浏览器窗口为参照物进行定位
代码:
```
position:absolute;
```
特点:
- 1.需要配合方位属性实现移动
- 2.默认相对于浏览器可视区域进行移动
- 3.页面中不占位置->已经脱标
- 4.改变标签的显示模式特点:具体行内块特点(在一行共存,宽高生效)
应用场景:
- 1.配合绝对定位组cp(子绝父相)
- 2.一般父级设置相对定位模式,子级是绝对定位(子绝父相)
注意:
- 绝对定位的盒子不能使用左右margin auto的方法居中了

(5)位移的方式: ( tft)

/* 位移:自己宽高的一半 */
transform: translate(-50%, -50%);

(6)固定定位: ( pof )

保持标签的位置一直不变,网页随意滚动,标签位置不变
死心眼型的,相对于浏览器进行定位移动
```
/*代码:*/position:fixed;
```
特点:
- 1.需要配合方位属性实现移动
- 2.相对于浏览器可视区域进行移动
- 3.在页面中不占位置->已经脱标
- 4.固定位置相对于浏览器位置固定
- 5.具有行内块的性质
应用场景:
- 1.让盒子固定在屏幕中某个位置(比如网站最顶部,一直显示)

(7)元素的层级关系:

不同布局方式元素的层级关系
标准流<浮动<定位
不同定位之间的层级关系:
- 相对,绝对,固定默认层级相同
- 此时***(HTMl)***(不是CSS中的)中写在下面的元素层级更高,会覆盖上面的元素

(8) z-index:

值为整数取值越大,标签越显示在上边
标签默认值是0注意:要配合定位才能生效
```
z-index:  999;
```

十三.装饰:

(1)图文垂直居中: ( vta )

基线:
- 浏览器文字类型元素排版中存在用于对齐的基线 baseline
浏览器处理行内和行内块的显示模式时候是按照文字的对齐方式来的

(1)想要解决这个问题,可以将图片格式改为块模式

(2)使用vertical-align :
场景:解决行内/行内块元素垂直对齐问题

问题:

当文字和图片在一行中显示时,其实底部是不对齐的

-  属性名:vertical-align
-    属性值:
-       vertical-align:baseline  默认基线对齐
-       vertical-align:top       顶部对齐
-       vertical-align:middle    中部对齐
-       vertical-align:bottom    底部对齐

(2)设置光标在标签上的样式:

- 属性名:cursor
-       常见属性值:
-         cursor:default  默认值,通常是箭头
-         cursor:pointer  小手效果,提示用户可以点击
-         cursor:text    工字型,提示用户可以选择文字
-         cursor:move    十字光标,提示用户可以移动

(3)控制内容溢出部分的显示效果

场景:商品标题太长,造成溢出:可以把溢出部分变为省略号 ,禁止换行

属性名:overflow
   属性值:
      visible  默认值,溢出部分可见
      hidden  溢出部分隐藏
      scroll  无论内容是否溢出,都显示右下滚动条
      auto   根据是否溢出,自动显示或隐藏滚动条
text-overflow: ellipsis;   //溢出部分变为省略号
white-space: nowrap;       //禁止换行

(4)让元素隐藏:

让某元素本身在屏幕中不可见,如鼠标hover后元素隐藏
常见属性:

- 1.visibility:hidden        //隐藏的时候占位置(工作中不常用)
- 2.display:none;(常用)      //隐藏的时候不占位置(工作中常用)

    /* 鼠标悬停的时候显示二维码 */
    /* 显示的是code,所以hover后边要加作用对象 
	这段代码的意思就是:当鼠标悬停在.app上时 .code的样式*/
    .nav ul li .app:hover .code{
        display: block;
    }

(5)元素透明度:

场景:让某元素整体(包括内容)一起变透明
属性名:opacity(英文意思:不透明的)
属性值:0~1之间的数字
1:完全不透明
0:完全透明
opacity会让标签内所有属性全部变透明

opacity: 0.3;

(6)transition: 设置样式过度

/后边跟属性名和时间+s后缀/

transition:	/*后边跟属性名  和时间+s后缀*/

(7)给标签添加阴影

box-shadow: 0 2px 3px 0  rgba(118,118,118,0.2);

(8)SEO三大标签:

title:网页标题标签
description:网页描述标签(desc)
keywords:网页关键词标签(kw)
写在html框架里边的meta里边