浮动与定位，css3

最新推荐文章于 2024-07-11 21:11:19 发布

是wz呀

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量635

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/m0_63170206/article/details/124199770

版权

1. 复合选择器

在这里插入图片描述

1.1后代选择器

注：
1.又名包含选择器，把外层标签卸载前面，内层标签写在后面，中间用空格分隔，
当标签发生嵌套时，内层标签就成为外层标签的后代
2.语法：元素1 元素2 {样式声明}
3.元素1和元素2中间用空格隔开
4.元素1是父级，元素2是子级，最终选择的是元素2
5.元素1，2可以是任意的选择器

<style>
		ol li {
			color: pink;
		}
		ol li a {
			color: red;
		}
	</style>
</head>
<body>
	<ol>
	<li>你好</li>
	<li><a href="">后代选择器</a></li>

1.2子元素选择器

注：
1.只能选择作为某元素的最近一级子元素
2.语法：元素1>元素2（样式声明），表示选择元素1里面的所有直接后代（子元素）元素2
3.元素1和元素2中间用大于号隔开
4.元素1是父级，元素2是子级，最终选择的是元素2
5.元素2必须是亲儿子，其孙子，重孙之类都不归它管

<style>
		.nav>a {
			color: pink;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="">我是儿子</a>
		<p><a href="">我是孙子</a></p>

1.3并集选择器

注：
1.可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
2.并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
3，语法：元素1，元素2{样式声明}
4.逗号可以理解为和的意思
5.并集选择器通常用于集体声明
6.并集选择器喜欢竖着写，最后一个选择器不需要加逗号

<style>
		div,
		p,
		.pig li {
			color: pink;
		}
	</style>
</head>
<body>
	<div>熊大</div>
	<p>熊二</p>
	<ul class="pig">
		<li>小猪</li>
	</ul>

1.4链接伪类选择器

在这里插入图片描述

注：
1.常用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个，第n个元素
2.按照LVHA的顺序声明（love hate)
3.因链接a在浏览器中具有默认样式，实际工作中需要给链接单独指定样式

<style>
		/* 把没有访问的链接选出 */
		a:link {
			color: black;
			text-decoration: none;
		}
		/* 把访问过的链接选出 */
		a:visited {
			color: red;
		}
		/* 选择鼠标经过的链接 */
		a:hover {
			color: blue;
		}
		/* 选择我们鼠标正在按下还没有弹起鼠标的那个链接 */
		a:active {
			color: green;
		}
	</style>
</head>
<body>
	<a href="#">小猪</a>

1.5focus伪类选择器

注：
1.用于选取获得焦点的表单元素，焦点就是光标，一般input类
表单元素才能获取，因此这个选择器主要针对表单元素来说

2.盒子模型-阴影

2.1 盒子模型-圆角边框

border-radius：length（半径）
注：
1.length可以用px，也可以用百分比写（50%-宽度和高度的一半）
2.该属性可以跟四个值:左上角，右上角，右下角，左下角 border-top-left-radius

2.2盒子阴影

参数：inset/outset 水平偏移垂直偏移模糊距离颜色
在这里插入图片描述

box-shadow：h-shadow v-shadow blur spread color inset
为盒子添加阴影
注：1.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2.盒子阴影不占用空间，不会影响其他盒子排列
3.属性值可复合写

<style>
		div {
			width: 200px;
			height: 200px;
			margin: 100px auto;
		}
/* 当鼠标经过盒子时为盒子添加阴影 */
		div:hover {
			
			box-shadow: 10px 10px 10px -4px rgba(red, green, blue, alpha);

		}
	</style>

2.3文字阴影

text-shadow属性，与盒子阴影属性相似
参数：水平偏移垂直偏移模糊距离颜色
在这里插入图片描述

传统布局方式：
1.普通流（标准流）
标签按照规定好的默认方式排列

3.浮动（float）

3.1浮动属性

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘
注：
1.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2.三大布局方式：普通流，浮动，定位
3.浮动特性：
（1）浮动元素会脱离标准流（脱标）
脱离标准流的控制移动到指定位置，浮动的盒子不再保留原先的位置
（2）浮动的元素会在一行内显示并且元素顶部对齐
（3）多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
（4）浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
4.浮动的元素会具有行内块元素的特性
（1）任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素
相似的特性
（2）如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度
（3）如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
（4）浮动的盒子中间是没有缝隙的，是紧挨着一起的
（5）行内元素同理
5.浮动元素经常和标准流父元素混合使用
在这里插入图片描述

使用步骤：
1.用网页布局第一准则：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.用网页布局第二准则：先设置盒子大小，再摆放位置
6.浮动布局注意事项
在这里插入图片描述

1.浮动和标准流的父盒子搭配，即先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余的兄弟元素也要浮动
3.浮动盒子只能影响盒子后面的标准流，不会影响前面的标准流

3.2.清除浮动

在这里插入图片描述

注：
1.本质是清除浮动元素造成的影响
2.如果父盒子本身有高度，则不需要清除浮动
3.清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

3.3清除浮动方法

在这里插入图片描述

策略：闭合浮动，只让浮动在父盒子内部影响，不影响盒子外面的其他盒子

1.额外标签法（隔墙法）
在浮动元素末尾添加一个空的标签，如div style=“clear:both”></div,或者其他标签
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差
注：这个新增的盒子要求必须是块级元素不能是行内元素

<style>
		.box {
			width: 800px;
			border: 1px solid blue;
			margin: 0 auto;
		}
		.damao {
			float: left;
			width: 300px;
			height: 200px;
			background-color: purple;

		}
		.ermao {
			float: left;
			width: 300px;
			height: 200px;
			background-color: pink;
		}
		.footer {
			height: 200px;
			background-color: black;
		}
		.clear {
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="damao">大猫</div>
	<div class="ermao">二猫</div>
	<div class="clear"></div>
	<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
	<div class="footer"></div>
</body>

2.父级添加overflow属性
属性值：hidden，auto,scroll
这是给父元素添加代码
优点：代码简洁
缺点：无法显示溢出的部分

<style>
		.box {
			/* 清除浮动 */
			overflow: hidden;
			width: 800px;
			border: 1px solid blue;
			margin: 0 auto;
		}
		.damao {
			float: left;
			width: 300px;
			height: 200px;
			background-color: purple;

		}
		.ermao {
			float: left;
			width: 300px;
			height: 200px;
			background-color: pink;
		}
		.footer {
			height: 200px;
			background-color: black;
		}
		
	</style>

3.父级添加after伪元素
在这里插入图片描述

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度，淘宝，网易等
4.父级添加双伪元素
在这里插入图片描述

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米，腾讯等

4.定位

在这里插入图片描述

4.1定位简介

浮动与定位的区别
1.浮动可以让多个块级盒子一行没有缝隙排列，经常用于横向排列盒子
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位组成
定位=定位模式+边偏移
在这里插入图片描述

在这里插入图片描述

1.定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
2.定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置
3.边偏移的属性只存在定位中

4.2静态定位static

静态定位static 是元素的默认定位方式，无定位的意思

4.3相对定位relative

特点：
1.元素在移动位置的时候，是相对它原来的位置来说的，移动位置的时候参照点是自己原来的位置
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

4.4绝对定位absolute

特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为标准定位
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置（脱标）

4.5子绝父相

1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时，需要占有位置，所以需要相对定位
4.子绝父相不是绝对的，也有子绝父绝的现象

4.6固定定位fixed

固定定位是元素固定于浏览器可视区的位置，主要使用场景是：可以在浏览器页面滚动时，元素的位置不会改变
特点：
1.以浏览器的可视窗口为参照点移动元素
2.跟父元素没有任何关系
3.不随着滚动条的滚动而滚动
4.固定定位不占有原先的位置，固定定位也是脱标的，固定定位也可以看作时一种特殊的绝对定位
固定定位小技巧（固定在版心右侧位置）
1.先让固定定位的盒子left：50%：走到浏览器可视区（版心）的一半的位置
2.让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了

4.7粘性定位sticky

特点：
1.相对定位和固定定位的混合
2.粘性定位占有原先的位置（相对定位特点）
3.以浏览器的可视窗口为参照点移动元素（固定定位特点）
4.必须添加top，left,right,bottom其中一个才有效
5.跟页面滚动搭配使用，兼容性较差，ie不支持

4.8定位叠放次序z-index

 <style>
      * {
        padding: 0;
        margin: 0;
      }
      .a {
        color: pink;
        position: absolute;
        z-index: 100;
        width: 200px;
        height: 200px;
        border: 1px solid;
        /* 该盒子会在上面 */
        background-color: red;
      }
      .b {
        background-color: palegoldenrod;

        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="a"></div>
    <div class="b"></div>

使用定位布局可能会出现盒子重叠的情况，此时可以用z-index来控制盒子的先后次序（z轴）
语法：选择器{z-index：1；}
注：
1.数值可以是正整数，负数或0，默认是auto，数值越大，盒子越靠上
2.如果属性值相同，则按照书写顺序，后来居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性

4.9定位的拓展

1.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin属性水平居中
方法：
1.left属性走50%（父容器的一半）
2.margin-left属性负值往左边走盒子宽度的一半
3.top属性走50%
5.margin-top属性往上面走盒子宽度的一半
写案例
2.定位的特殊特性
注：
1.绝对定位和固定定位和浮动相似
2.行内元素添加绝对或者固定定位，可以直接设置高度和宽度
3.块级元素添加绝对定位或者固定定位，如果不给宽度或高度，默认大小是内容的大小

3.脱标的盒子不会触发外边距塌陷
浮动定位，绝对定位（固定定位）元素都不会触发外边距合并的问题

4.绝对定位（固定定位）会压住盒子
注：
1.浮动元素指挥压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字或图片
2.绝对定位（固定定位）会压住下面标准流所有的内容
3.浮动不会压住文字的原因：浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素
4.如果一个盒子既有left又有right，则执行左侧
若果一个盒子既有top，又有bottom，则执行上侧

4.10.网页布局总结

1.一个完整的网页是由标准流，浮动，定位一起完成布局的
2.标准流可以让盒子上下或者左右排列，垂直的块级盒子显示就用标准流布局
3.浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平线是就用浮动布局
4.定位最大的特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自幼在某个盒子内移动就用定位布局

5.元素的显示与隐藏

在这里插入图片描述

5.1.display属性

<style>
       .a  {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid rebeccapurple;
            display: none;
            margin: 0 auto;
        }
        /* 占据a的位置 */
        .b  {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid rebeccapurple;
            /* display: none; */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

注：
1.值为none：隐藏对象
2.值为block：除了转换为块级元素之外，还有显示元素的意思
3.display隐藏对象后不占有原来的位置

5.2.visibility可见性

 <style>
       .a  {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid rebeccapurple;
            visibility: hidden;
            margin: 0 auto;
        }
        /* 不占据a的位置,盒子会位于下方 */
        .b  {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid rebeccapurple;
            /* display: none; */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>

注：
1.值为visible：元素可视
2.值为hidden：元素隐藏
3.visibility隐藏元素后，继续占有原来的位置

5.3overflow溢出

指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
注：
1.值为visible：不剪切内容也不添加滚动条
2.值为hidden：不显示超过对象尺寸的内容，溢出的部分被隐藏
3.值为scroll：溢出和不溢出均显示滚动条
4.值为auto：溢出时显示滚动条，不溢出不显示滚动条
5.如果有定位的盒子，请慎用overflow：hidden，因为它会隐藏多余的部分

6.相关实例

6.1盒子模型操作

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div
        {
            width: 100px;
            margin: 0 auto;
            height: 100px;
            border: 3px black solid;
            box-shadow:  10px 20px 3px rebeccapurple;
            border-radius:10px 15px ;
            text-align: center;
            text-shadow: 3px 3px 3px red;
            color: black;
            font-size: large;

        }
    </style>

运行结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/82101f1189c747c99d2650941b21a12c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pivd3rlkYA=,size_20,color_FFFFFF,t_70,g_se,x_16

6.2浮动操作

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      .a {
        width: 400px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid black;
      }
      .b,
      .c,
      .d {
        width: 100px;
        height: 100px;
        /* 设置浮动后盒子具有行内块元素的特点 */
        float: left;
        border: 1px solid palegoldenrod;
        background-color: aqua;
      }
    </style>

运行结果：
在这里插入图片描述

6.3定位操作

<style>
      * {
        padding: 0;
        margin: 0;
      }
      .one {
        width: 700px;

        
      }
      .a,
      .b,
      .c {
        padding: 10px;
        width: 160px;
        margin: 10px;
        height: 160px;
        display: inline-block;
        border: red solid;
        
      }
      img {
        width: 100%;
        height: 100%;
      }
      .img {
        padding: 10px;
        width: 160px;
        margin: 10px;
        height: 160px;
        display: inline-block;
        border: orange solid;
      }
      .two {
        text-align: center;
        margin: 0 auto;
        
      }
      .font {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div class="a"><img src="../html/3.jpg" alt="网页设计" /></div>
      <div class="b"><img src="../html/3.jpg" alt="网页设计" /></div>
      <div class="c"><img src="../html/3.jpg" alt="网页设计" /></div>
    </div>
    <div class="two">
      <div class="img"><img src="../html/3.jpg" alt="网页设计" /></div>
      <div class="font">这是一行文字</div>
    </div>

运行结果：
在这里插入图片描述

6.4 元素的显示与隐藏操作

 <title>Document</title>
    <style>
       .a  {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid rebeccapurple;
            /* overflow: hidden; */
           
            margin: 0 auto;
        }
       
    </style>

运行结果：
在这里插入图片描述

<style>
       .a  {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid rebeccapurple;
            overflow: hidden;
           
            margin: 0 auto;
        }
       
    </style>

运行结果：
在这里插入图片描述

<style>
       .a  {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            border: 1px solid rebeccapurple;
            overflow: scroll;
           
            margin: 0 auto;
        }
       
    </style>

运行结果：
在这里插入图片描述

是wz呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与定位，css3

1. 复合选择器1.1后代选择器注：1.又名包含选择器，把外层标签卸载前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代2.语法：元素1 元素2 {样式声明}3.元素1和元素2中间用空格隔开4.元素1是父级，元素2是子级，最终选择的是元素25.元素1，2可以是任意的选择器<style> ol li { color: pink; } ol li a { color: red; } </style>&
复制链接

扫一扫