02_CSS (个人笔记)

已于 2023-05-29 02:31:00 修改
阅读量116 收藏 1
点赞数
分类专栏： 前端 文章标签： css html 前端
于 2023-04-10 23:21:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56552986/article/details/130072191
版权

CSS

一、CSS概述

1.1、什么是CSS

Cascading Style Sheet 级联样式表。

表现HTML或XHTML文件样式的计算机语言。

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

1.2、CSS的发展史

  • CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；

  • CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离

  • CSS2.1 融入了更多高级的用法，如浮动，定位等。

  • CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用

    的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。

    由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3

    已经成为一种趋势，因此本书会讲解最新的CSS3版本

    学习中主要为css2.1和css3

CSS的优势

  • 内容与表现分离
  • 网页的表现统一，容易修改
  • 丰富的样式，使得页面布局更加灵活
  • 减少网页的代码量，增加网页的浏览速度，节省网络带宽
  • 运用独立于页面的CSS，有利于网页被搜索引擎收录

二、CSS基本语法及美化元素

/*demo01.css*/
#p4{
    background-color:pink;
    font-size:24px;
    font-wight:border;
    font-style:italic;
    font-family:"华云彩云"
}

 /*组合样式：div里的p标签样式*/
div p{
    color:blue;
}

div .p32{
    font-size:32px;
    font-family:"k=黑体"
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>CSS学习</title>
    <meta charset="UTF-8"/>
    <!--内部样式表-->
    <style type="text/css">
        /*标签样式*/
         p{
          color:red;
        }
        /*类标签*/
        .f20{
          font-size:20px;
        }
        /* id样式 整个html要id名字要唯一，虽然不报错*/

    </style>

    <!--外部样式表：用另一个CSS文件导入#p4,div p,.p32*/-->
     <link rel="stylesheet" href="css/demo01.css">

</head>
<body>
    <!--<p><font color="red"> 这是一个段落</font></p>
    <p><font color="red"> 这是一个段落</font></p>
    <p><font color="red"> 这是一个段落</font></p>-->
    <p> 这是一个段落</p>
    <p> 这是一个段落</p>
    <p> 这是一个段落</p>
    <p class="f20"> 这是一个段落</p>
    <p id="p4"> 这是一个段落</p>


    <div>
          <!--嵌入样式表  //blue, yellow(优先级高)就近原则-->
        <p><span style="font-size:60px;font-weight:bolder;color:yellow">aaa</span></p>
        <span class="p32">bbb</span>
        <p class="p32">!!!</p>

    </div>

</body>
</html>


<!--
(1)为什么使用CSS:统一美化

    规范，<style>可以编写css的代码，每一个声明，最好使用分号；结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }

(3)CSS的位置分类：(优先级高)就近原则
        嵌入式样式表(在标签上设置美化): 看起来很乱
			<h1 style="color:red;">style属性的应用</h1> 
			<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

        内部样式表(css代码全写在头部head) 
			<style type="text/css">
				选择器{
					声明1;
                    声明2;
                    声明3;
				}
			</style>
			
        外部样式表（用另一个文件专写CSS）
			(1)链接式（使用的最多）<link rel="stylesheet" href="css/demo01.css">
			(1)导入式 <style> @import url("css/style.css");</style>

	

(3)CSS的最基本分类：选择器
   3.1 基本选择器：
            优先级：三种不遵循就近原则，固定的
            id选择器 > class选择器 > 标签选择器

        -标签选择器: 对应标签  ->  标签名{ }  标签选择器，会选择到页面上所有的这个标签的元素
        -id选择器:  id="p4"  ->   #p4{ }   id在html必须保证全局唯一！
        -类样式表: class="p32"-> .p32{ }    好处，可以多个标签归类，是同一个class,可以复用
        -组合样式表:div里的p标签样式   div p{ }
                                   div #p4{ }
                                   div .p32{ }
		-通配符  所有的标签都选中 效率较低
		*{   // 包厢数问题
			margin:0px;
			padding:0px;
		}
		
   3.2 层次选择器(高级选择器)

        -后代选择器: 所有后代都选
            body p{
                background: firebrick;
            }

        -子选择器: 只有直接亲儿子才选
            body>p{
                background: chartreuse;
            }

        -相邻兄弟选择器：只有一个，相邻（向下）
            .active+p{
                background: aqua;
            }

        -通用兄弟选择器：当前选中元素的向下的所有兄弟元素(不包含自己)
            .active~p{
                background: aqua;
            }

   3.3 结构伪类选择器(高级选择器) ：用伪类：  ？:？   可以避免使用，class,id选择器
        -ul的第一个子元素
            ul li:first-child{
                background: aqua;
            }

        -ul的最后一个子元素
            ul li:last-child{
                background: #7c06cb;
            }

        -选中当前p元素的父级元素，选择当前第一个子元素（不理类型）
        -选中当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素p才生效（和p同标签才可以）
            p:nth-child(1){
                background: brown;
            }
            p:nth-of-type(1){
                background: #2ebe77;
            }
		
		-超链接伪类在下面....


   3.4 属性选择器(高级选择器)： id与class结合版（！！！！常用）

        标签名[属性名]: 
			如 E[attr]{ }    选中具有 属性attr 的E元素
		标签名[属性名=值]:     
			如 E[attr=val]{ } 选中具有 属性attr且值为val 的E元素     (绝对等于这个值)
		标签名[属性名*=值]:     选中具有 属性attr且值包含val 的E元素   (包含这个值)
		标签名[属性名^=值]:     选中具有 属性attr且值以val开头 的E元素  (以这个值开头)
		标签名[属性名$=值]:     选中具有 属性attr且值以val结尾 的E元素  (以这个值结尾)
          


(4) 美化网页元素
	字体样式 ：
        -单独设置：
            font-style:字体风格   normal(正常)、italic(倾斜)和 oblique(倾斜)
            font-weight:字体粗细  normal(默认正常) 粗bold 更粗bolder 细lighter
						100-900  400(normal) 700(bold) 
            font-size:字体大小	  单位px（像素） em、rem、cm、mm、pt、pc
						倍数
					   单词   small smaller large larger
            font-family:字体类型  "隶书" "宋体" "楷体"
            color:字体颜色

        -一起设置：font:字体风格 字体粗细 字体大小 字体
            p{
                font:oblique lighter 12px "楷体";

				/* 可以简写 但是font-size 和 font-family不能不写 */
				font:30px/1.5 '宋体';
            }

    文本样式：
		color:文本颜色
        	颜色表示：
                1.单词
                2.RGB 红绿蓝 0~F 前两位红色分量，中间两位绿色分量，最后两位蓝色分量 rgb(r,g,b) 
                3.RGBA 红绿蓝+透明度A:0~1     color: rgba(0,255,255,0.9)

		text-align:水平对齐方式  left(默认左) right(右) center(中) justify(两端对齐) 
 		== 标签属性 algin
		vertical-align:垂直对齐方式: middle、top、bottom
		text-indent: 段落首行缩进2em   1em = 1个文字的大小
        height:300px;
        line-height:300px;行高，和 块的高度一致，才可以上下居中

        text-decoration:文本装饰 
					:underline下划线 line-through中划线 overline上划线 none去掉划线(默认)        															（超连接常用去下划线）
		
    文本阴影:
		text-shadow:文本阴影: color(颜色阴影) x-offset(阴影水平位移) y-offset(阴影垂直位移) 
														     blur-radius(阴影模糊半径)

            h1{
                color: rgba(0,255,255,0.9);
                text-align:center;
            }
            .p1{
                text-indent: 2em;
            }
            .p3{
                background:#7c06cb;
                height: 300px;
                line-height: 300px;
            }


            /*下划线*/
            .l1{
                text-decoration: underline;
            }
            /*中划线*/
            .l2{
                text-decoration: line-through;
            }
            /*上划线*/
            .l3{
                text-decoration: overline;
            }
            /*超链接去下划线*/
            a{
                text-decoration: none;
            }


    超链接伪类：
		伪类样式: 标签名:伪类名{声明...}
        /*默认颜色：未点击时的颜色*/
        a:link{        ==a{ }
            text-decoration: none;
            color: #000000;
        }
		/*连接点后的颜色*/
		a:visited{ 

		}
        /*鼠标悬浮的颜色 重点*/
        a:hover{
            color: orange;
            font-size:50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }

        实际网页开发中通常只设置两种状态，一是a{color:#333;}，一是a:hover { color:#B46210;}

       

    列表样式：
        list-style-type:
			disc 实心圆(默认类型)
            none 去掉实心圆（无标记符号）
            circle空心圆
            square正方形
			decimal数字
		list-style-image
        list-style-position

        list-style


    背景样式：
		背景属性:
		background-color:背景颜色 
		background-image:背景图像 :url(图片路径)
		background-position背景定位:xpx ypx 
									x% y% 
								   x(关键字:left center right) y(top center bottom)
		background-repeat背景重复方式:
			repeat:沿水平垂直方向平铺
			no-repeat:不平铺，即只显示一次
			repeat-x:只沿水平方向平铺
			repeat-y:只沿垂直方向平铺
		background（背景样式简写）:背景颜色 背景图像 背景定位 背景不重复显示
	

		背景尺寸: 
		background-size:
			auto(保持原样默认值) 
			percentage(比例) 
			cover(不保持图片宽高 放大填充整个元素)
			contain(保持图片宽高比例 放大填充整个元素)

		背景透明：
			opacity: 背景透明度 :0.5 
		
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认是全部平铺的*/
            background-image: url("images/b.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }


	其他样式:
		1、圆角边框
			border-radius:数值或百分比;
				如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%	
			border-top-left-radius
            border-top-right-radius
            border-bottom-right-radius
            border-bottom-left-radius
		2、盒子阴影：为盒子添加阴影
			box-shadow: h-shadow(必需，水平) v-shadow(必需，垂直) blur(可选) spread(可选) color(可选) 
						inset(可选);

    渐变样式:网站推荐：http://color.oulu.me/
        线性渐变: 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
        径向渐变: 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
       
		CSS3渐变兼容:
			IE浏览器是Trident内核，加前缀：-ms
            Chrome浏览器是Webkit内核，加前缀：-webkit
            Safari浏览器是Webkit内核，加前缀：-webkit
            Opera浏览器是Blink内核，加前缀：-o
            Firefox浏览器是Mozilla内核，加前缀：-moz-

		线性渐变:linear-gradient(position(渐变方向),color1(第一种颜色),color2(第二种颜色))
				兼容Webkit内核的浏览器：
						-webkit-linear-gradient ( position, color1, color2,…) 1
    <style>
        body{
            background-image: linear-gradient(45deg, rgb(251, 244, 208), rgb(209, 			   																221, 250));
        }
    </style>

-->

三、盒子模型-margin(外边距)+border(边框)padding(内边距)+宽高

  • 3.1盒子模型平面图

  • 盒子模型立体图

  • 盒子型模尺寸

盒子阴影: 和文本阴影顺序不同

计算某个盒子顺序（非常重要）
宽高 => padding => border => margin
宽高 + padding + border + margin = 盒子的总宽高

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>盒子模型</title>
    <meta charset="UTF-8"/>

    <style type="text/css">
        #div1{
            width:400px;
            height:400px;
            background-color:greenyellow;

            /*边框样式*/
            border-width:1px;     /*边框粗细*/
            border-style:dotted;  /*solid 代表实线，dotted代表虚线 double双实线*/
            border-color:blue;
        }
        /*可以合并一起写：border:4px double blue;/
        /*可以单独设置四各边top bottom left right  ：border-top:4px double blue*/

        #div2{
            width:150px;
            height:150px;
            background-color:darkorange;
            
            margin:100px 100px;   /*两个参数（上-下 左-右）也可以一个参数(四边)上右下左 */
            /*填充 把div3挤压到中间*/
            padding-top:50px;
            padding-left:50px;
            /*padding-right:50px padding-left:50px只填充了上左 下右没有*/
        }
        #div3{
            width:100px;
            height:100px;
            background-color:red;
           /* margin:50px 50px;*/ /* ？问题：只用margin解决为什么最后一层margin上下失效？ 
            						 未解决：
            			
            */  
        }
        /*
        #div2{
            width:200px;
            height:200px;
            background-color:darkorange;

            margin:100px 100px;   
        }
        #div3{
            width:100px;
            height:100px;
            background-color:red;
           	margin:50px 50px; 
        	问题：为什么最后一层margin上下失效？
        	// 已解决：
        
        
        	简介
        	本文介绍如何解决margin合并的问题。包括父子元素的合并和兄弟元素的合并。

            margin合并(塌陷)的场景
                当2个垂直外边距相遇时，他们将合并为一个外边距。
                合并之后的外边距的高度等于2个发生合并的外边距的高度中的较大值。 

            下述场景会导致margin合并：
                当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/下外边距会发生合并。
                当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
                当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。

        	实例1：父子元素外边距合并
                但在Chrome和FireFox会出现这种情况，在IE6 IE7中均显示正常，
                这恰恰说明了IE是不符合规范的，而Chrome和FireFox则是严格遵守规范的。
				需求：子元素相对于父元素向下偏移50px。
        		<style>
                    body {
                        margin: 0;
                    }

                    .outer {
                        width: 400px;
                        height: 300px;
                        background-color: yellow;;
                    }

                    .inner {
                        width: 200px;
                        height: 200px;
                        margin-top: 50px;
                        background-color: pink;
                    }
        		<style>
                <div class="outer">
                    <div class="inner"> </div>
                </div>

		*/

        #div4{
            width:200px;
            height:200px;
            background-color:greenyellow;
            margin-left:100px ;

        }

       
    </style>

</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">

            </div>
        </div>
    </div>

    <div id="div4">  <!--差了边框2px-->

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

<!--
总结如下：

(1)包厢数问题：如何把页面(0,0)坐标 填充满
	
    <style type="text/css">
		
		/*body默认有一个外边距margin:8px*/
        body{
            margin:0px;
            padding:0px;
        }

		h2{
        margin: 0px; /*默认有外边距上下13.280px*/
   		}
		ul,li{
            margin: 0px;
            padding: 0px;
        }

		/*实际开发初始化*/
        h1,ul,li,a,body{
            margin:0;
            padding:0;
            text-decoration:none;
        }
    <style/>

(2)border 边框   (四条边统一写)  (四条边分开设置是 border-top/right/bottom/left)
	border-width 边框粗细 :thin medium thick 像素值px
	border-style 边框样式 :none hidden dotted dashed solid(常用) double
	border-color 边框颜色 
		一个参数：
		border-color: red(上下左右)
		两个参数：
		border-color: red(上下) yellow(左右)
		三个参数：
		border-color: red(上) yellow(左右) blue(下)
		四个参数：
		border-color: red(上) yellow(右) blue(下) black(左)

	border简写 同时设置边框的颜色、粗细和样式
		border:粗细 样式 颜色 
        border:1px solid red;

	border-radius: 圆角边框
        画圆：圆角=半径=（边长+边框）/2 
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 10px solid red;
                border-radius: 60px;
            }
        </style>
        <body>
            <div></div>
        </body>

        画头像
        <style>
            img{
                border-radius: 25px;
            }
        </style>
        <body>
            //头像是50*50px
            <img src="images/tx.jpg" alt="">
        </body>

(3)margin 外边距
    margin-top
    margin-right
    margin-bottom
    margin-left
	
	细节：
	<一起写和分开写区别：注意上下左右区别：有左一定有右(自动间隔出来) 有上不一定有下(下边不指出不会																	间隔出来)>
	margin :0px;             外边距上下左右都有
	margin :1px;  			 外边距上下左右都有
	margin :1px 2px;         外边距上下左右都有
	margin :1px 2px 3px;     外边距上左右下都有
	margin :1px 2px 3px 4px; 外边距上右下左都有

 	下边距不指出永远是0px
	margin-top:1px; 
	上边距=1 下边距=0(而不是=父容器的height-上边距) 左边距=0 右边距=父容器的width-左边距
	
	margin-top:1px;  
	margin-left:2px;
	上边距=1 下边距=0(而不是=父容器的height-上边距) 左边距=2 右边距=父容器的width-左边距
	
	margin-top:1px;
	margin-buttom:2px;
	margin-left:3px;
	margin-righat:4px;
	上边距=1 下边距=2px(而不是=父容器的height-上边距) 左边距=3 右边距=4(不是=父容器的width-左边距)
	

	外边距的妙用：网页居中对齐()
	margin:0px auto;(条件:块元素 固定宽度)
		div:块元素,直接用  :需要设置一下宽度 不然无效
        <div style="margin:0px auto;">
        <div/>

		img:不是块元素，需要先块元素化，再用
		<img src="images/tx.jpg" alt=""  style="display:block; margin: 0 auto;">


(4)padding内边距
	padding-top 
    padding-right
    padding-bottom
    padding-left

	细节:和margin外边距一样：
	分开写和一起下有区别
	padding :0px;             内边距上下左右都有
	padding :1px;  			  内边距上下左右都有
	padding :1px 2px;         内边距上下左右都有
	padding :1px 2px 3px;     内边距上左右下都有
	padding :1px 2px 3px 4px; 内边距上右下左都有

 	所有内边距不指出永远是0px-----只有这里和margin有区别
	padding-top:1px; 只有上内边距是1 其他全为0
	
	margin-top:1px;  
	margin-left:2px;
	上边距=1 下边距=0 左边距=2 右边距0
	
	margin-top:1px;
	margin-buttom:2px;
	margin-left:3px;
	margin-righat:4px;
	上边距=1 下边距=2px 左边距=3 右边距=4
	


-->

四、浮动

1、传统网页布局的三种方式

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

  • 普通流（标准流）
  • 浮动
  • 定位

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。

2、标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列

  1. 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

3、为什么需要浮动？

总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

4、什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 { float: 属性值; }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdKQCRdz-1681139267994)(2.CSS.assets/image-20230310184809840-1681127986728-3.png)]

5、浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置)

2、浮动的元素会一行内显示 并且 元素顶部对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ECRU6t84-1681139267995)(2.CSS.assets/image-20230310184933290.png)]

注意：

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3、浮动的元素会具有行内块元素的特性

​ 浮动元素的大小根据内容来决定

​ 浮动的盒子中间是没有缝隙的

6、浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

1、常见网页布局

浮动布局注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

2、清除浮动（5种）

1、为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

2、清除浮动本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
  • 父级有了高度，就不会影响下面的标准流了

3、清除浮动样式

语法：

选择器{clear:属性值;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IO8INxoQ-1681139267996)(2.CSS.assets/image-20230310190257107.png)]

我们实际工作中， 几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

4、清除浮动的五种方式

①额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。

使用方式：

​ 额外标签法会在浮动元素末尾添加一个空的标签。

例如 
<div style="clear:both">
</div>，
或者其他标签（如<br />等）。

​ 优点： 通俗易懂，书写方便

​ 缺点： 添加许多无意义的标签，结构化较差

​ 注意： 要求这个新的空标签必须是块级元素。

总结:

  1. 清除浮动本质是?

​ 清除浮动的本质是清除浮动元素脱离标准流造成的影响

  1. 清除浮动策略是?

​ 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

  1. 额外标签法?

​ 隔墙法, 就是在最后一个浮动的子元素后面添

  1. 加一个额外标签, 添加 清除浮动样式.

​ 实际工作可能会遇到,但是不常用

②父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

例如：

overflow:hidden | auto | scroll;

优点：代码简洁

缺点：无法显示溢出的部分注意：是给父元素添加代码

③父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
    *zoom: 1;
}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站： 百度、淘宝网、网易等

④父级添加双伪元素

给父元素添加

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
*zoom:1;
}

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

⑤加高法height

总结

为什么需要清除浮动？

  1. 父级没高度。

  2. 子盒子浮动了。

  3. 影响下面布局了，我们就应该清除浮动了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mdEpS46E-1681139267997)(2.CSS.assets/image-20230310190936522.png)]

代码总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    div{
        width:100px;
        height:100px;
        border:1px solid red;
        display: inline-block;
    }
    span{
        width:100px;
        height:100px;
        border:1px solid red;
       display: inline-block;
    }
</style>

<body>

    <div>div块元素</div>
    <span>span行内元素</span>

</body>
</html>

<!--

    (1)标准文档流
        标准文档流：指元素根据块元素或行内元素的特性按从上到下，
					从左到右的方式自然排列。这也是元素默认的排列方式
        标准文档流组成:
            块级元素（block）:独占一行(标签自动换行) <h1>…<h6>、<p>、<div>、列表
                height :不起作用（不能扩大行高，因为不能独占一行）
            内联元素（inline）:(标签不自动换行)  <span>、<a>、<img/>、<strong>...
                height 起作用
            内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立


    (2)display:
        block 块元素:独占一行 (能设置宽高)
        inline 行内元素   (不能设置宽高)
        inline-block 既是块元素也是行元素，块元素行/内元素 保持块元素特性(可保持固定大小)，
						但是可以内联，在一行
					==行内元素 + 可以设置宽高
        display:none 设置的元素不会被显示

      display特性
        块级元素与行级元素的转变（block、inline）
        控制块元素排到一行（inline-block）
        控制元素的显示和隐藏（none）

      使用场景:
        块元素排在一行的方法
            可以使用什么属性使块元素排在一行？
            inline-block
            float

            刚刚学过的inline-block；然后介绍还有一种方式可以实现让块元素排在一行。引出浮动。


    (3)float: 浮动 :理解为在水里浮起来，离开了父元素(浮动元素脱离标准文档流)  
									问题：会出现父级边框塌陷问题：
        left: 左浮动
        right:右浮动
        none:默认值。正常按标准文档流显示

        解决父级边框塌陷问题：
            1.设置父级元素的高度
            2.浮动元素后面加空div标签，清除浮动
                clear；right; 它的右侧不允许有浮动元素，否则在右侧元素的下边右浮动
                clear；left;  它的左侧不允许有浮动元素，否则在左侧元素的下边左浮动
                clear；both; 它的两侧不允许有浮动元素，否则在两侧的下边左/右浮动
                clear；none; 左/右浮动
            3.父级添加overflow属性（溢出处理） overflow:hidden;
                hidden属性值，这个值在网页中经常使用，
                通常与< div>宽度结合使用设置< div>自动扩展高度，或者隐藏超出的内容
            4.在父级添加一个伪类:after（推荐）
                father:after{
                    content:'';    /*在clear类后面添加内容为空*/
                    display:block; /*把添加的内容转化为块元素*/
                    clear:both;    /*清除这个元素两边的浮动*/
                }

        小结：【清除浮动，防止父级边框塌陷的四种方法】
            1.浮动元素后面加空div
                简单，空div会造成HTML代码冗余
            2.设置父元素的高度
                简单，元素固定高会降低扩展性
            3.父级添加overflow属性
                简单，下拉列表框的场景不能用
            4.父级添加伪类after
                写法比上面稍微复杂一点，但是没有副作用，推荐使用


    (4)inline-block和float区别
        display:inline-block
            可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
            位置方向不可控制，会解析空格
            IE 6、IE 7上不支持
        float
            可以让元素排在一行并且支持宽度和高度，可以决定排列方向
            float 浮动以后元素脱离文档流，会对周围元素产生影响，
            必须在它的父级上添加 空内容清除浮动 的样式 保证父级边框不塌陷
-->

案例

①qq导航栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cgndcjyc-1681139267997)(2.CSS.assets/image-20230410210519467.png)]

<!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: 0px;
            padding: 0px;
        }
        .box{
            background-color: skyblue;
            height: 50px;
            padding: 5px;
        }
        ul{
            list-style-type: none;
            /* border:1px solid red ; */
            overflow: hidden;
            margin: 0;
            padding: 10px;
        }
        li{
            
            float: left;
            padding: 5px;
            
            line-height: 20px;
            color: white;
        }
        li:hover{
            color: orange;
            background-color: rgb(227, 214, 214);
            /* border:1px solid orange ; */
            cursor: pointer;  
        }
    </style>
</head>
<body>

    <div class="box">
        <ul >
            <li>深圳</li>
            <li>长沙</li>
            <li>成都</li>
            <li>北京</li>
        </ul>
    </div>
    
</body>
</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>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 970px;
            margin: 100px auto;
        }

        #top{
            height: 103px;
            width: 970px;
            /* background-color: antiquewhite; */
        }
        #top-left{
            float: left;
            background-color: red;
            width: 277px;
            height: 103px;
            
        }
        #top-right{
            float: right;
            width: 679px;
            height: 103px;
            /* background-color: skyblue; */
        }
        #top-right-up{
            width: 137px;
            height: 49px;
            float: right;
            background-color: greenyellow;
            
        }
        #top-right-down{
            margin-top: 8px;
            width: 679px;
            height: 46px;
            float: right;
            background-color: greenyellow;
        }



        #main{
            height: 435px;
            width: 970px;
            margin: 10px 0px;
            /* background-color: black; */
        }
        #mian-left{
            float: left;
            width: 310px;
            height: 435px;
            background-color: yellow;
        }
        #mian-right{
            float: left;
            margin-left: 10px;
            width: 650px;
            height: 435px;
            /* background-color: skyblue; */
        }
        #main-right-up{
            width: 650px;
            height: 400px;
            /* background-color: yellowgreen; */
        }
        #main-right-up-left{
            float: left;
            width: 450px;
            height: 400px;
            /* background-color: black; */
        }
        #main-right-up-left-up{
            height: 240px;
            background-color: skyblue;
        }
        #main-right-up-left-center{
            margin-top: 10px;
            height: 110px;
            background-color: skyblue;
        }
        #main-right-up-left-down{
            height: 30px;
            margin-top: 10px;
            background-color: skyblue;
        }
        #main-right-up-right{
            float: left;
            margin-left: 10px;
            width: 190px;
            height: 400px;
            background-color: purple;
        }
        #main-right-down{
            margin-top: 10px;
            width: 650px;
            height: 25px;
            background-color: yellowgreen;
        }

        


        


        #bottom{
            height: 35px;
            width: 970px;
            background-color: blue;

        }

    </style>
</head>
<body>
    <div id="box">
        <div id="top">
            <div id="top-left"></div>
            <div id="top-right">
                <div id="top-right-up"></div>
                <div id="top-right-down"></div>
            </div>
        </div>
    
        <div id="main">
            <div id="mian-left"></div>
            <div id="mian-right">
    
                <div id="main-right-up">
                    <div id="main-right-up-left">
                        <div id="main-right-up-left-up"></div>
                        <div id="main-right-up-left-center"></div>
                        <div id="main-right-up-left-down"></div>
                    </div>
                    <div id="main-right-up-right"></div>
                </div>
    
                <div id="main-right-down"></div>
    
            </div>
        </div>
    
        <div id="bottom">
    
        </div>
    </div>
</body>
</html>

五、定位

在这里插入图片描述

父相子绝

position: fixed; absolute; relative;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 12px;
            font-height: 25px;
        }

        #father{
            border: 1px solid black;
            position: relative;
        }

        #first{
            background-color: #3cbda6;
            border: 1px dashed #3cbda6;
        }
        #second{
            background-color: #f700fd;
            border: 1px dashed #f700fd;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #7f1fb6;
            border: 1px dashed #7f1fb6;
        }
    </style>
</head>
<body>

    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>

</body>
</html>

<!--

定位使用场景
	下拉菜单
	不随滚动条移动的固定导航
	鼠标移入弹出的消息框

(1)position:static  静态定位(默认值)，没有定位

(2)position:relative :相对定位
	top:10px 离上边多+10px = 向下偏移10px
	相对自身原来位置进行偏移，偏移设置：top、left、right、bottom，
	
	相对定位元素的规律
        设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
        设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
        设置相对定位的盒子原来的位置会被保留下来
	

(3)position:absolute  绝对定位:基于XXX定位，上下左右
    1.没有父级元素定位前提下，该元素相对于浏览器定位
    2.假如父级元素有定位，则该元素相对于最近父级元素定位
    3.该元素一定在父级元素范围内移动
	相对于父级或者浏览器的位置偏移，进行指定的偏移，
	绝对定位的话，它不在标准文档流中(浮起来)，原来的位置不会被保留

(4)fixed:固定定位 (类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口)
	偏移设置： left、right、top、bottom


定位小结：
	(1)相对定位
        相对定位的特性
        相对于自己的初始位置来定位
        元素位置发生偏移后，它原来的位置会被保留下来
        层级提高，可以把标准文档流中的元素及浮动元素盖在下边
	相对定位的使用场景
		相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，
		为绝对定位创造定位父级而又不设置偏移量(！！！)
	(2)绝对定位
		绝对定位的特性
		绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
		元素位置发生偏移后，原来的位置不会被保留
		层级提高，可以把标准文档流中的元素及浮动元素盖在下边
		设置绝对定位的元素脱离文档流
	绝对定位的使用场景
		一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
	(3)固定定位
		固定定位的特性
		相对浏览器窗口来定位
		偏移量不会随滚动条的移动而移动
	固定定位的使用场景
		一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等


(5)z-index: 层级
	调整元素定位时重叠层的上下位置
        z-index属性值：整数，默认值为0
        设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
        z-index值大的层位于其值小的层上方
	
	小结:
        网页中的元素都含有两个堆叠层级
        未设置绝对定位时所处的环境，z-index是0
        设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
        改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，
        只需调整绝对定位层的z-index值即可

	网页元素透明度设置
-->

gaoming很上心
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
HTML+CSS个人学习笔记
03-17
HTML+CSS个人学习笔记
个人笔记--CSS
11-25
CSS个人笔记，如果有错误和意见，请在评论中提出！！！
HTML+CSS个人笔记
qq_53233068的博客
09-10 4440
HTML+CSS个人笔记 HTML(Hyper Text Markup Language) 浏览器 什么是浏览器内核？ 浏览器所采用的渲染引擎（“Rendering Engine”）是浏览器最核心的组成部分，通俗的叫浏览器内核。 五大主流浏览器 浏览器 内核 简介 IE Trident 微软 仅支持windows Safari Webkit 苹果 Mac Firedox（火狐） Gecko Mozilla基金会 支持Windows、Linux、Mac Chrome（谷
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 58万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
html加css制作个人博客,初学HTML+CSS练习搭建个人博客笔记
weixin_33871105的博客
06-29 1214
前言工作需求初学html+css的使用，在网上看视频学着写了一个个人博客[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zRlIxPs-1589808685220)(https://img-blog.csdn.net/20171013175254065?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHVhbmczNTEz...
h5+css学习笔记
m0_62410752的博客
03-15 400
个人学习笔记，自己看的
CSS学习笔记Day1
primebrake的博客
05-13 904
如果把HTML比作是一个人，那CSS就是他的穿搭。所以学习CSS是做好网页至关重要的一步。
CSS基础笔记-04cascade-specificity-inheritance
渔道的博客
01-07 1312
本文对级联(cascade)，具体性(specificity)，源顺序(source order)，继承性(inheritance)作了系统性的理解和学习。
CSS+DIV个人学习笔记
2401_84093490的博客
05-10 928
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
PINK老师HTML5+CSS3笔记
incandescent__dr的博客
05-21 821
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 PINK老师HTML5+CSS3笔记前言一、常用浏览器及其内核二、web标准三、HTML标签1.html语法规范2.快速生成页面骨架3.HTML常用标签3.1 标题标签3.2 段落标签 换行标签3.3 文本格式化标签3.4 div span标签3.5 图像标签和路径3.6 超链接标签3.7 锚点链接3.8 注释标签3.9 特殊字符总结 前言 提示：这里可以添加本文要记录的大概内容： https://www.bilibili.com/vi.
HTML/CSS/JavaScript笔记
neukfc的博客
03-30 968
HTML/CSS/JavaScript个人学习笔记前言简介HTMLCSS内联样式内部样式表如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 学习用途所做的个人笔记，部分资料图片来自： 菜鸟教程.，如有侵权或标注遗漏请随时告知 ：） 简介 HTML：超文本标记语言，是一种描述性语言。 CSS：层叠样式
最新HTMLCSS学习：移动端项目准备工作（笔记二十）_html移动端笔记
2401_84281748的博客
05-02 810
1、屏幕尺寸：指的是屏幕对角线的长度​2、分辨率：是指宽度上和高度上最多能显示的物理像素点个数​3、点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小​4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度​5、DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思​6、设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。
css 个人学习笔记
07-03
个人学习总结，关于css的。。。。。。。。。。。。。。。。。。。。。。。
01-HTML-CSS个人听课笔记
10-13
内容概要：HTML5 新特性、语义化、CSS 选择器及优先级、position 属性：relative，absolute，sticky，Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局：...
note_in_test：个人笔记
02-21
学习笔记 这是一个Jekyll项目，用于记录学习笔记，随缘更新。 环境 需要环境支持，并且只能使用2.6版本。 Ruby+Devkit 2.6.6-2 (x64) 安装好Ruby后，需要使用Bundler来安装和运行Jekyll。在命令行输入以下命令安装...
JavaWeb基础1：HTML/CSS/JS/HTTP
m0_53842576的博客
08-05 471
JavaWeb基础1：HTML/CSS/JS/HTTP (qq.com)
4个自定义倒计时
lulei5153的博客
08-03 361
【代码】4个自定义倒计时。
CSS实现元素hover时背景色拉伸渐变
p_s_p的博客
08-05 985
【代码】CSS实现元素hover时背景色拉伸渐变。
HTML&CSS
最新发布
m0_73620971的博客
08-05 1149
1、 是一个单标签。2、img 标签必须具有 src 属性，a 标签必须具有 href 属性。3、input 标签中必须指明 type 属性，其中提交按钮必须放至 form 标签内。4、类选择器前缀为 "."，ID选择器前缀为 "#"。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaoming很上心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值