前端--css基础04[浮动,清除浮动,盒子阴影,边框圆角,伪元素,定位[四大定位]] ---彩蛋{清除浮动的方法,一个盒子居中的方案}

最新推荐文章于 2022-10-07 19:03:02 发布

别动我代码儿

最新推荐文章于 2022-10-07 19:03:02 发布

阅读量2.4k

点赞数

分类专栏： CSS 文章标签：浮动及清除浮动定位清除浮动盒子居中方案盒子阴影

本文链接：https://blog.csdn.net/weixin_45176415/article/details/99334441

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css基础04

1.浮动

☞标准流: 在网页中标签的默认显示方式
☞浮动(重点)
float: left | right

作用：通过浮动 + 盒子模型实现网页布局（摆放盒子）

特点：

1. 元素设置浮动后，该元素会脱离标准流（元素不会再按照自己原来的默认方式去显示了）

2. 当给元素设置浮动后，该元素不占位置（脱标）

3. 当给元素都设置浮动后，元素会在一行显示（脱标）

4. 文字不会受浮动的影响{浮动最初的目的是用来实现文字和图片环绕显示效果的}

浮动的使用场景：

1. 在网页布局中，如果希望块级元素在一行显示，那么就设置浮动。

2. 网页导航区域推荐使用列表实现配合浮动

☞清除浮动（网页布局）

父级div定义 height
原理：父级 div手动定义 height，就解决了父级 div无法自动获取到高度的问题。简单、
代码少、容易掌握，但只适合高度固定的布局.
结尾处加空 div标签 clear：both
原理：在浮动元素的后面添加一个空div兄弟元素，利用 css 提高的clear：both清除浮动，
让父级div能自动获取到高度，如果页面浮动布局多，就要增加很多空 div，让人感觉很
不好 .
父级div定义伪类：after 和 zoom
/清除浮动代码/
.clearfix：after{
content：""；
display：block；
visibility：hidden；
height：0；
line-height：0；
clear：both；
}
.clearfix{zoom：1}
原理：IE8以上和非 IE浏览器才支持：after，原理和方法 2有点类似，zoom(IE专有属性)
可解决ie6，ie7 浮动问题，推荐使用，建议定义公共类，以减少CSS 代码。
父级div宽度设置100% overflow：hidden
超出盒子部分会被隐藏，不推荐使用.
双伪元素法：
.clearfix：before，.clearfix：after {
content： “”；
display： block；
clear：both；
}
.clearfix {
zoom： 1；}

2. 盒子阴影

box-shadow: 0px 0px 10px red;
总结：
1. 第一个值代表阴影在水平方向的偏移位置（正数向右，负数向左）
2. 第二个值代表阴影在垂直方向的偏移位置（正数向下，负数向上）
3. 第三个值代表阴影模糊度
4. 可以给盒子设置多个阴影，使用逗号隔开。
例如：box-shadow: 0px 0px 20px blue, -5px -5px 10px yellow;
5. 默认盒子阴影是外阴影，如果希望设置内阴影，加上 inset
例如： box-shadow:inset 0px 0px 20px blue;

3. 伪元素：

假的标签（通过CSS代码模拟出的一个html标签）
::before {
content:“内容”;
}

::after {
    content:"内容";
}

注意：
    1.伪元素中必须设置content属性

    2.伪元素就是一个行内元素

    3.一个标签中，相同的伪元素只能设置一个

    4.before在结构中永远都在第一个位置处，
      after永远都在结构的末尾

    5.伪元素不能嵌套使用。

☞边框圆角：可以将直角实现一个弧度的效果
border-radius: 值(百分比);

4. 定位重点：

作用：
定位 + 浮动 + 盒子模型 ====》网页布局。

定位：通过改变元素位置实现元素压着元素效果

☞静态定位（了解）

写法：
    position: static;

   left | right | top | bottom: 值；

总结：
1. 不能通过静态定位的方式改变元素位置【静态定位就是元素在标准流下的默认显示方式】

☞绝对定位【掌握】

写法：
    position: absolute;

    left | right  | top  | bottom: 值;

特点：
    1.在网页中用来实现一个元素（标签）压着另外一个标签的时候，要使用绝对定位。
    2. 绝对定位的元素也是脱标元素
    3. 绝对定位的元素不占位置。
总结：
  1. 通过绝对定位改变元素位置的。

  2. 如果一个绝对定位的元素其父元素是一个标准下的元素，那么绝对定位的子元素默认就参照浏览器（body）左上角进行位置改变

  3. 如果其父元素是一个除静态定位之外的一个定位元素，那么该绝对定位的子元素就参照父元素改变位置。

☞相对定位

写法：
   position: relative;
   left | right | top | bottom: 值;

使用场景：
   1. 子绝父相（子元素是绝对定位，父元素就设置相对定位）
位置特点：
   1. 相对定位可以改变元素位置
   2. 相对定位指的是相对元素自己原来的位置，与父元素是否有定位无关。
   3. 相对定位的元素没有脱标，占位置

☞固定定位【掌握，最简单】

写法：
    position: fixed;

位置特点：
   1. 固定定位可以改变元素位置。

   2. 固定定位的元素，不会参照其父元素改变位置，始终参数浏览器（body）

   3. 固定定位的元素也是脱标元素，不占位置。
  
定位层级： 只有定位的元素才有层级特点【除静态定位】

定位层级规则：

1. 如果定位的层级相同，那么最后的定位元素会压着前面的定位元素（后来居上原则）

2. 如果z-index层级的值不相同，那么值越大层级越高

3. 如果父元素存在层级关系，那么在网页看父元素的层级。

4. 新选择器扩展

结构伪类选择器：与HTML结构有关系。

1.  :first-child{}  选中父元素中第一个子元素

2.  :last-child {}  选中父元素中最后一个子元素

3.  :nth-child(n) {}  选中父元素中第n个子元素

    n的取值从 0开始..

4.  :nth-last-child(n) {}  选中父元素中倒数第n个子元素

    n的取值从 0开始..

标签包含(了解)：

1. 标题和段落标签不能相互包含

2. 段落标签不能包含div

3. 不推荐使用行内元素包含块级元素【行内元素包含行内元素】

5. 盒子大小计算：

box-sizing: border-box | content-box(默认值);

总结：  
    ✔ 如果没有设置box-sizing: border-box;那么盒子的实际大小 = 内容 + 边框 + 内边距

    ✔ 如果设置了 box-sizing: border-box;那么盒子的实际大小 = 设置的宽度和高度的大小。

6.扩展

☞隐藏元素：

visibility: hidden; 隐藏元素后占位置（网页布局中基本不用）

display: none; 隐藏元素，隐藏元素后不占位置。（网页布局中常用）

display: block; 显示元素

☞ 将溢出的部分隐藏。

overflow:hidden | scroll(设置滚动条)  | auto(自动)  | visible(可见的，默认值)
vertical-align属性：

☞ vertical-align

1. vertical-align属性只能用在行内块元素或者table标签中。

要解决的问题：
     
2. 图片标签默认底部的3像素空白

   ✔ 给图片设置 vertical-align: bottom| top | middle;

   ✔ 将图片转换为块级元素

6. 怎么让一个盒子居中的方案

1.absolute + transform:绝对定位加转换
parent{
position:relative;
width: 1000px;
height: 500px;
background-color: aqua;
}.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 500px;height: 200px;
background: red;
}

2.absolute + -margin:绝对定位加margin负边距
parent1{
position:relative;
width: 1000px;
height: 500px;
background-color: aqua;
}
.child1{
position: absolute;
left: 50%;
top: 50%;
margin-top:-100px;
margin-left: -250px;
width: 500px;
height: 200px;
background: red;
}
3.inline-block + text-align + table-cell + vertical-align(单元格方式)
parent2{
width: 1000px;
height: 500px;
background-color: aqua;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child2{
display: inline-block;
width: 500px;
height: 200px;
background: red;
}

4.flex + justify-content + align-items(弹性模型)
parent3{
display: flex;
justify-content: center;
align-items: center;
width: 1000px;
height: 500px;
background-color: aqua;
}
.child3{
width: 500px;
height: 200px;
background: red;
}