CSS 学习笔记（清除浮动~a标签的伪类选择器）

最新推荐文章于 2022-11-01 20:23:28 发布

甜甜今天学了吗

最新推荐文章于 2022-11-01 20:23:28 发布

阅读量500

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/dawanhjiao/article/details/103153628

版权

2.9.5overflow:hidden; 清除浮动
1.可以将超出标签范围的内容裁减掉
2.清除浮动

.head{
            background-color: sandybrown;
            overflow: hidden;/*给第1个大盒子添加这个属性*/
        }

3.给外面的大盒子设置overflow: hidden;属性后，里面的小盒子再设置margin-top属性后，外面的盒子不会和里面的盒子一起被顶下来。

 .head{
            width: 500px;
            height: 500px;
            background-color: red;
            overflow: hidden;
        }

3.定位流排版方式
1.定位流的分类
1.1相对定位position: relative;
1.1.1相对定位是不脱离文档流的，会继续占用文档流的一份空间
1.1.2相对定位是相对自己以前在标准流中以前的位置来移动
1.1.3在相对定位中要区分块级元素、行内元素、行内块级元素
1.1.4因为相对定位的元素是不脱离文档流的，所以在给相对定位的元素设置margin\padding\border属性时也会影响其他元素。（相当于是给相对定位的那个元素未定位是在标准流中的位置进行添加margin\padding\border属性）
1.1.5应用
1.用于微调元素的位置
2.配合绝对定位使用

.box2{
            background-color: green;
            position: relative;/*relative相对定位*/
            top: 20px;/*相对自己以前在标准流中的位置向上移动20px*/
            left: 50px;
            right: xpx;
            bottom: xpx;
            /*relative配合top、bottom、left、right使用*/
        }

1.2绝对定位position: absolute;
1.2.1绝对定位的元素会脱离文档流，并且不区分块级元素/行内元素/行内块级元素
1.2.2

默认情况下绝对定位是相对于body来定位，无论它有没有祖先元素
如果一个绝对定位的元素有祖先元素，并且它的祖先元素也是定位流（相对定位/绝对定位/固定定位），那么这个绝对定位的元素就会以定位流的祖先元素当做参考点
如果一个绝对定位的元素有祖先元素，并且它的多个祖先元素也是定位流（相对定位/绝对定位/固定定位），那么这个绝对定位的元素就会以离它最近的定位流的祖先元素当做参考点
注意
1如果一个绝对定位的元素是以body作为参考点，其实它是以网页首屏的高度和宽度作为参考点的，而不是整个页面作为参考点。（比如设置了一个元素的right: 0;bottom: 0; 当把页面从首页滑动时，它的位置将不在左下角）
4.2 一个绝对定位的元素会忽略祖先元素的padding。（当它的祖先元素为定位流时，并且设置了padding，但是left: 0;top: 0;可以使它移到祖先元素的左上角处，不会被padding挤下来）
1.2.3绝对定位-子绝父相
相对定位的弊端：相对定位的元素不会脱离文档流，所以仍旧会占用一部分空间，不利于布局。
绝对定位的弊端：默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度、高度的变化而变化。
子绝父相的原因：让子元素相对于它的父元素定位时，给父元素设置相对定位，因为相对定位是相对原来位置定位且占据文档流的空间，所以可以保证子元素一定是相对父元素定位的。
一般，父用相对定位，子用绝对定位，也就是子绝父相。
1.2.4绝对定位-水平居中
margin: 0 auto;在绝对定位中不起作用
让绝对定位的元素水平居中:

.box{
            width: 100px;
            height: 200px;
            background-color: sandybrown;
            position: absolute;
            left: 50%;
            margin-left: -50px;/*左对左，右对右*/
            /*right: 50%;
            margin-right: -50px;*/
        }

距body左边一半，再将元素向左移动元素的一半，元素就会水平居中。
垂直居中:

 .box{
            width: 100px;
            height: 100px;
            background-color: sandybrown;
            position: absolute;
            bottom: 50%;
            margin-bottom: -50px;/*上对上，下对下*/
            /*top: 50%;
            margin-top: -50px;*/
        }

1.3固定定位position：fixed;
1.固定定位的元素是脱离标准流的，不区分块级元素/行内元素/行内块级元素。
2.固定定位的元素不会随着滚动条的滚动而滚动。
应用场景：不想让它随着滚动条滚动的元素。
注意IE6不支持固定定位。

1.4静态定位
静态定位就是元素默认情况下的定位。

定位流- z-index属性
z-index: 1;注意，没有单位。
1.z-index属性：默认情况下所有元素都有一个默认的z-index属性，取值是0。z-index属性是用来专门控制定位流元素的覆盖关系。
2.默认情况下，定位流的元素会盖住标准流的元素；后定位的元素会盖住先定位的元素。
3.如果定位流的元素设置了z-index属性，那么谁的z-index属性比较大，谁就显示在上面。
注意
1.从父现象
如果两个子元素的父元素都设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性的值大，谁就会显示在上面。

a标签伪类选择器
a标签的状态

a:link{
            /*访问之前*/
            /*text-decoration: none;在这个状态下设置无下划线后，其他状态下也会没有下划线*/
        }
a:visited{
            /*访问之后*/
        }
a:hover{
             /*鼠标悬停时*/
        }
a:active{
            /*长按时*/
        }