CSS笔记3
作者：互联网
目录
2.BFC(block formatting context)块级格式化环境
一.轮廓阴影圆角
outline 用来设置元素的轮廓线，用法和border一样，不同点 就是轮廓不会影响到可见框的大小
box-shadow 用来设置元素的阴影，阴影不会影响页面布局
第一个值 水平偏移值
第二个值 垂直偏移值
第三个值 阴影的模糊半径越大越模糊
第四个值 阴影的颜色
border-radius：用来设置圆角
border-top-left-radius：50px 100px;
第一个值水平半径
第二个值垂直半径
二.浮动
1.作用： 通过浮动可以使一个元素向父元素的左侧或右侧移动 使用 float 属性来设置元素浮动 可选值 none：默认值 元素不浮动 left：向左 right：向右 目前主要作用：让页面中的元素水平排列
2.特点： （1）浮动元素会完全脱离文档流，不再占据文档流的位置
（2）设置浮动以后元素会向父元素的左侧或右侧移动
（3）浮动元素默认不会从父元素中移除
（4）浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
（5）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
（6）浮动元素不会超过他上边的浮动的兄弟元素，最多和他一样高
3.其它特点：（1）浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以用浮动来设置文字环绕图片
脱离文档流的特点
块元素
1.块元素不在独占一行
2.脱离文档流以后，块元素的宽度和高度默认被内容撑开
行内元素
行内元素脱离文档流会变成块元素，特点和块元素一样
三.高度塌陷和BFC
1.高度塌陷
1）在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动，会脱离文档流，将不法撑开父元素，导致父元素的高度丢失
2）解决方式
- 开启元素的BFC
- 使用after伪元素设置clear属性
.box::after{ display:block；clear:both； }
2.BFC(block formatting context)块级格式化环境
BFC是一个CSS中的一个隐藏的属性, 开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC的特点：
1.元素不会被浮动元素所覆盖
2.子元素和父元素外边距不会重叠
3.可以包含浮动的子元素
-
开启浮动元素的BFC方式：
1.设置元素的浮动 缺点 从文档流中脱离
2.将元素设置为行内块元素 缺点
3.将元素的overflow设置为一个非visible的值
-常用方式 为元素设置 overflow：hidden 开启BFC 以使其可以包含浮动的子元素
3.clear
1）当我们不希望某个元素因为其他元素浮动的影响而改变位置
可以通过clear属性来清除浮动元素对当前元素所产生的影响
2）clear 可选值
left 清除左侧浮动元素对当前元素的影响
right 清楚右侧浮动元素对当前元素的影响
both 清楚两侧中最大影响的那侧
原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距， 以使其位置不受其他元素的影响
3）clearfix
四.定位
- 定义
定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面中的任意位置。
通过position属性来设置定位。
可选值
static 默认值 元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
- 分类
1.相对定位relative
特点：1）元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
偏移量（offset）： top bottom left right
2) 相对定位是参照于在文档流中的位置进行定位的
3）相对定位会提升元素的层级
4）相对定位不会脱离文档流
5）相对定位不会改变元素的性质块还是块，行内还是行内
2.绝对定位absolute
特点 1）开启元素定位后，如果不设置偏移量元素的位置不会发生改变
2）开启元素定位后，元素会脱离文档流
3）元素的性质会发生改变，行内会变成块，块的宽度被内容撑开
4）元素提高一个层级
5）绝对定位是相对其包含块进行定位的
包含块（containing block）
-正常情况下
包含块就是离当前元素最近的祖先块元素
-绝对定位的包含块
包含块就是离它最近的开启了定位的祖先块元素，如果祖先块元素都没有开启定位，则根元素就是它的包含块
3.固定定位fixed
固定定位也是一种绝对定位，大部分特点与绝对定位一样。
不同点：固定定位永远参照浏览器的视口进行定位
4.粘滞定位sticky
特点：和相对定位基本相同，不同点 可以在元素到达某个位置将其固定
五.元素的层级
标签：浮动,定位,元素,开启,笔记,文档,BFC,CSS 来源： https://blog.csdn.net/m0_66506641/article/details/122756035