目录
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。