前端CSS学习(三)

1、盒子模型

盒子的概念
	1、页面中的每一个标签,都可看做是一 个“盒子” ,通过盒子的视角更方便的进行布局
	2、浏览器在渲染 (显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为盒子

	CSS中规定每个盒子分别由一下几个部分构成:
		内容区域(content) 
		内边距区域(padding) 
		边框区域(border) 
		外边距区域(margin)

在这里插入图片描述

1、内容的宽度和高度:利用width和height属性默认设置是盒子内容区域的大小
	常见取值:数字+ px

	盒子尺寸计算:	
		盒子尺寸 = width/height + 2*边框线 + 2*内边距
	
		方法一:手动内减
			操作:自己计算多余大小,手动在内容中减去
			缺点:项目中计算量太大,很麻烦
			
		方法二:自动内减
			操作:给盒子设置属性box-sizing : border-box ;
			优点:浏览器会自动计算多余大小,自动在内容中减去



2、边框(border)-连写形式:单个取值的连写,取值之间以空格隔开
	如: border : 10px solid red;
	快捷键:bd+tab

	边框(border) -单方向设置:只给盒子的某个方向单独设置边框
	取值: border+位名词
	如:border- left: 5px dotted #000;

3、内边距( padding )
	padding属性可以当做复合属性使用-上右下左
		四值:上 右 下 左  	 如:padding: 10px 20px 40px 80px; 
		三值:上 (左 右) 下    如:padding: 10px 40px 80px; 
		两值:(上 下) (左 右)  如:padding: 10px 80px;
		一值:(上 下 左 右) 	 如:padding: 10px;

	padding优化内容区域宽度---实现根据文字字数自动调整宽度
	如:padding: 0 16px;

 4、外边距(margin)
 	用法与内边距相似。
 	
 5、清除默认内外边距
	浏览器会默认给部分标签设置默认的margin和padding,但-般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
	比如: body标签默认有margin: 8px
	比如: p标签默认有.上下的margin
	比如: ul标签默认由上下的margin和padding-left
	
	解决方法:
		*{
			margin: 0;
			padding: 10;
		  }

6、版心居中 margin: 0 auto;  上下=0,左右=auto自动平均

7、外边距折叠现象
	①合并现象:垂直布局的块级元素,上下的margin会合并
		结果: 最终两者距离为margin的最大值
		解决方法: 只给其中一个盒子设置margin即可
	
	②塌陷现象:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
	外边距塌陷:父子标签,都是块级,子级加margin会影响父级的位置

		结果:导致父元素一起往下移动
		解决方法:
		1.给父元素设置border-top 或者padding-top (分隔父子 元素的margin-top)
		2.给父元素设置overflow: hidden(推荐)
		3.转换成行内块元素
		4.设置浮动

7、行内元素的垂直内外边距
	如果想要通过margin或padding改变行内标签的垂直位置,无法生效
	行内标签的margin-top和bottom不生效
	行内标签的padding-top或botttom不生效
	解决方法:设置 line-height属性

网页新闻列表案例

在这里插入图片描述

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .new{
            /* 内容区域 */
            width: 400px;
            height: 500px;            
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px ;
        }

        .new h2{
            border-bottom:1px solid #ccc;
            font-size: 30px;
            line-height: 1;
            padding-bottom: 9px;
            text-align: center;
        }

        ul {
            list-style: none;            
        }
        .new li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .new a{
            text-decoration: none;
            color: #666;
            font-size: 20px;
        }

    </style>  
</head>
<body>    
    <div class="new">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计,平面设计,php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>

        </ul>
    </div>    
</body>
</html>

2、CSS浮动

2.1 结构伪类选择器

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

选择器
在这里插入图片描述

n的注意点:
	1、n为:0、1、2、3、4、5、6.
	2、通过n可以组成常见公式 

n组成的常见公式:
在这里插入图片描述

<!DOCTYPE html>
<!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: #df1717;
        }

        li:nth-child(3n){
            background-color: aqua;
        }
        li:last-child{
            color: #2d0484;
        }
        li:nth-last-child(2){
            color: #08ec6f;
        }
        
    </style>    
</head>
<body>   
     <!-- ul>li{这是第$个1i}*8 --> 
    <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.2 伪元素

伪元素:一般页面中的非主体内容可以使用伪元素
区别:
	1. 元素: HTML设置的标签
	2. 伪元素:由CSS模拟出的标签效果
种类:
	1、: :before——在父元素内容的最前添加一个伪元素
	2、: :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: 100px;
            height: 50px;
            background-color: pink;
        }   
        .father::before{
            content: '春天';
        }
        .father::after{
            content: '百花';
        }     
    </style>    
</head>
<body>   
     <!--伪元素通过css创建标签,装饰性的不重要的小图 --> 
    <div class="father"></div>
</body>
</html>

在这里插入图片描述

2.3 标准流

标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素

	常见标准流排版规则:
		1、块级元素:从上往下,垂直布局,独占一行
		2、行内元素 或行内块元素:从左往右,水平布局,空间不够自动折行

2.4 浮动

网页浮动:让元素向左或向右“浮动”,并在页面中腾出其它元素的位置。
		1、实现文字和图片的混排:通过让图片元素浮动并紧贴文字元素,即可实现图文混排的效果。			
		2、实现多栏布局:通过让多个元素浮动到不同的位置和方向,就可以实现多栏布局的效果。			
		3、实现横向菜单:通过让菜单项浮动到一行并排列,就可以实现横向菜单的效果。			
		4、实现响应式布局:浮动可以让元素从正常文档流脱离,从而能够被自适应布局所利用,以在各种显示尺寸的设备上呈现更优秀的用户体验。
		
浮动的特点
	1.浮动元素会脱离标准流 (简称:脱标),在标准流中不占位置
	2.浮动元素比标准流高半个级别, 可以覆盖标准流中的元素
	3. 浮动找浮动,下一个浮动元素会在上一一个浮动元素后面左右浮动
	4.浮动元素有特殊的显示效果:一行可以显示多个,可以设置宽高
	
注意点:
	浮动的元素不能通过text-align:center或者margin:0 auto
<!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>
       *{
        margin: 0;
        padding: 0;        
       }

        .top{
            height: 40px;
            background-color: #333;
            margin:0 auto;
        }
        .header{
            width: 1226px;
            height: 460px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .conten{
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
        .left{
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }
        .right{
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
            float: left;
        }
    </style>    
</head>
<body>   
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="conten">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>
</html>

在这里插入图片描述

清除浮动: 清除浮动带来的影响,如果子元素浮动了,此时子元素不能撑开标准流的块级父元素
	原因:子元素浮动后脱标-→不占位置
	清除浮动目的:需要父元素有高度,从而不影响其他网页元素的布局

清除浮动的方法:
	1、直接设置父元素高度
		特点:优点:简单粗暴,方便
		缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

	2、额外标签法
		操作:
			1、在父元素内容的最后添加一个块级元素
			2、给添加的块级元素设置 clear:both——清除左右两侧浮动的影响	
		缺点:会在页面中添加额外的标签,会让页面的HTML结构变得复杂

	3、单伪元素清除法:用伪元素替代额外标签
		优点:项目中使用,直接给标签加类即可清除浮动

	4、双伪元素清除法
		优点:项目中使用,直接给标签加类即可清除浮动
	
	5、直接给父元素设置overflow : hidden
		优点:方便

单伪元素清除法写法:
在这里插入图片描述
双伪元素清除法写法:
在这里插入图片描述

CSS书写顺序

CSS书写顺序:浏览器执行效率更高
	1.浮动/ display
	2.盒子模型: margin border padding 宽度高度背景色
	3.文字样式

案例

在这里插入图片描述

3、CSS定位修饰

3.1 定位

网页常见布局方式:
	1、 标准流:
		1、块级元素独占一行→垂直布局.
		2、行内元素/行内块元素- 行显示多个→水平布局
	2、浮动:可以让原本垂直布局的块级元素变成水平布局
	3、 定位
		1、可以让元素自由的摆放在网页的任意位置
		2、一般用于盒子之间的层叠情况,定位之后的元素层级最高,可以层叠在其他盒子.上面
		3、可以让盒子始终固定在屏幕中的某 个位置

设置定位方式: position

常见属性值:
在这里插入图片描述

设置偏移值:
	1、偏移值设置分为两个方向, 水平和垂直方向各选一个使用即可
	2、选取的原则一般是就近原则(离哪边近用哪个)

注意:如果left和right都有,以1eft为准; top和bottom都有 以top为准

在这里插入图片描述

相对定位

相对定位:自恋型定位,相对于自己之前的位置进行移动
语法结构: position:relative;
特点:
	1、需要配合方位属性实现移动
	2、相对于自 己原来位置进行移动
	3、在页面中占位置 → 没有脱标
应用场景:
	1、配合绝对定位组CP (子绝父相:父级相对定位;子级绝对定位)
	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>
        .box{
            position: relative;
            left: 100px;
            top: 100px;

            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>贝尔曼方程和汉密尔顿函数都是用于解决动态过程的最优问题,都是关于状态变量、控制变量和时间的一个函数(实质是泛函)</p>
    <p>贝尔曼方程和汉密尔顿函数都是用于解决动态过程的最优问题,都是关于状态变量、控制变量和时间的一个函数(实质是泛函) </p>
    <div class="box">box</div>
    <p>贝尔曼方程和汉密尔顿函数都是用于解决动态过程的最优问题,都是关于状态变量、控制变量和时间的一个函数(实质是泛函)</p>
    <p>贝尔曼方程和汉密尔顿函数都是用于解决动态过程的最优问题,都是关于状态变量、控制变量和时间的一个函数(实质是泛函)</p>
</body>
</html>

在这里插入图片描述

绝对定位

绝对定位:拼爹型定位,相对于非静态定位的父元素进行定位移动
		先找已经定位的父级,如果有这样的父级就以这个父级为参照物进行定位;
		有父级,但父级没有定位,以浏览器窗口为参照为进行定位

语法结构: position: absolute;
特点:
	1、需要配合方位属性实现移动
	2、默认相对于浏览器可视区域进行移动
	3、在页面中不占位置-→已经脱标
	4、改变标签的显示模式特点:具体行内块特点(在一行共存,宽高生效)

立用场景:配合绝对定位组CP (子绝父相:父级相对定位;子级绝对定位)
绝对定位查找父级的方式:就近找定位的父级,如果逐层查找不到这样的父级,就以浏览器窗口为参照进行定位

绝对定位的盒子不能使用左右marginauto居中
	1、先移动50%的相数,再反方向移动一半的长度  如:left: 50%; margin-left: 150px;
	2、位移:自己宽度高度的一半 如:left: 50%; transform :translate(-50%,-50%);

固定定位

固定定位:死心眼型定位,相对于浏览器进行定位移动
语法结构代码: position: fixed;
	特点:
		1、需要配合方位属性实现移动
		2、相对于浏览器可视区域进行移动
		3、在页面中不占位置→已经脱标
		4、具备行内块特点,需要设置宽高
	应用场景:让盒子固定在屏幕中的某个位置

元素层级关系

不同布局方式元素的层级关系:标准流<浮动<定位.
不同定位之间的层级关系:相对、绝对、固定默认层级相同,此时HTML中写在下面的元素层级更高,会覆盖上面的元素
	z-index:整数; ——取值越大,显示顺序越靠上,z- index的默认值是0,z-index必须配合定位才生效

3.2 装饰

垂直对齐方式

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)
在这里插入图片描述

垂直对齐方式:vertical-align

属性值:
在这里插入图片描述
在这里插入图片描述

光标类型: cursor

  光标类型:设置鼠标光标在元素上时显示的样式

常见属性值:
在这里插入图片描述

边框圆角

边框圆角:让盒子四个角变得圆润,增加页面细节,提升用户体验
语法结构: border-radius
常见取值:数字+px、百分比
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角! 
	4值:左上 右上 右下 左下
	3值:左上 (右上 右下) 左下
	2值:(左上 右上) (右下 左下)
	1值:(左上 右上 右下 左下)	

.

边框圆角的常见应用
	1、画一个正圆:
		1、盒子必须是正方形
		2、设置边框圆角为盒子宽高的一半 border-radius:50%;

	2、胶囊按钮:
		1、 盒子要求是长方形
		2、设置-→border-radius:盒子高度的一半

overflow溢出部分 显示效果

溢出部分: 指的是盒子内容部分所超出盒子范围的区域
应用场景: 控制内容溢出部分的显示效果,如:显示、隐藏、滚动.....

常见属性值:

属性值 效果
visible 默认值,溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出,都显示滚动条
auto 根据是否溢出,自动显示或隐藏滚动条

元素本身隐藏

场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
常见属性:
	visibility: hidden——占位隐藏
	display: none——不占位隐藏

元素整体透明度:让某元素整体(包括内容)一起变透明
语法结构:opacity:数字;    0~1之间的数字,1:表示完全不透明,0:表示完全透明

放大效果:hover 伪类和transform属性

放大效果:通过CSS中的:hover 伪类和transform属性来设置将鼠标放在图片上时有放大效果
	1、给需要放大的图片元素设置一个固定的宽度和高度,并将overflow属性设置为hidden以避免图片溢出。

	2、通过:hover伪类选择器对图片元素设置transform属性,并将其缩放比例属性scale设置为1.2或其他适合的比例值。
	
	3、在:hover伪类选择器中同时对margin属性进行调整。为了避免造成周围元素的位置抖动,需要在:hover下对图片元素设置margin负值。
<!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>
        .image-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: auto;
            transition: all 0.5s ease;
        }
        .image-container:hover img {
            transform: scale(1.2);
            margin: -10px;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="./QQ图片20230512153518.png" alt="">
    </div>
    
</body>
</html>

4、项目样式补充

4.1 CSS精灵图

精灵图的介绍:项目中将多张小图片,合并成一-张大图片, 这张大图片称之为精灵图
优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度

精灵图的使用步骤:
	1、创建一个盒子设置盒子的尺寸和小图尺寸相同
	2、将精灵图设置为盒子的背景图片
	3、修改背景图位置:通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position: x y;
	
	background-position: x y;——改变背景图的位置 水平方向位置 垂直方向的位置
	想要向左侧移动图片,位置取负数; 想要向上侧移动图片,位置取负数;
	background-position: -3px 0;

4.2 背景图片尺寸

background-size: 宽度 高度;——设置背景图片的大小

取值:
在这里插入图片描述

	background连写: background: color image repeat position/size;
	注意点:background-size和background连写同时设置时,需要注意覆盖问题
	解决:
		1、要么单独的样式写连写的下面
		2、要么单独的样式写在连写的里面

4.3 文字阴影

文字阴影:text-shadow
语法结构:text-shadow: h-shadow v-shadow blur color;

4.4 盒子阴影

盒子阴影:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节
属性名: box-shadow

取值

参数 作用
h-shadow 必须,水平偏移量。允许负值
v-shadow 必须,垂直偏移量。允许负值
blur 可选,模糊度
spread 可选,阴影扩大
color 可选,阴影颜色
inset 可选,将阴影改为内部阴影

4.5 过渡

过渡:让元素的样式慢慢的变化,常配合hover使用, 增强网页交互体验
属性名: transition

常见取值

参数 取值
过渡的属性 a11 :所有能过渡的属性都过渡、具体属性名 如: width :只有width有过渡
过渡的时长 数字+s (秒)
注意点:
	1、 过渡需要:默认状态和hover状态样式不同,才能有过渡效果
	2、transition属性给需 要过渡的元素本身加
	3、 transition属性设置在不同状态中, 效果不同的
		1、给默认状态设置, 鼠标移入移出都有过渡效果
		2、给hover状态设置, 鼠标移入有过渡效果,移出没有过渡效果

在这里插入图片描述

5、项目前置认知

5.1 骨架结构标签

<!DOCTYPE html> 文档类型声明,告诉浏览器该网页的HTML版本

<html lang="en"> 标识网页使用的语言  用来:搜索引擎归类+浏览器翻译
常见语言: zh-CN简体中文/ en英文

<meta charset="UTF-8"> 标识 网页 使用的字符编码
作用:保存和打开的字符编码需要统一设置, 否则可能会出现乱码
常见字符编码:
	1. UTF-8: 万国码,国际化的字符编码,收录了全球语言的文字
	2. GB2312: 6000+汉字
	3. GBK: 20000+汉字
	
	注意点:开发中统一使用UTF-8字符编码即可

在这里插入图片描述

5.2 ico图标设置

ico图标:显示在标签页标题左侧的小图标,习惯使用.ico格式的图标
代码:<link rel="shortcut icon" href="ico图标路径" type= " image/x- icon">

在这里插入图片描述
在这里插入图片描述