CSS布局(盒模型，浮动，定位，动画效果）
程序员文章站
2022-04-25 11:38:39
...
-
元素在文档流中特点：
**- 块元素** - 块元素会在页面中独占一行(自上向下垂直排列) - 默认宽度是父元素的全部（会把父元素撑满） - 默认高度是被内容撑开（子元素） **- 行内元素** - 行内元素不会独占页面的一行，只占自身的大小 - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素 则元素会换到第二行继续自左向右排列（书写习惯一致） - 行内元素的默认宽度和高度都是被内容撑开 -
盒子模型
内容区（content），元素中的所有的子元素和文本内容都在内容区中排列 width 设置内容区的宽度 height 设置内容区的高度 边框（border），边框属于盒子边缘，边框里边属于盒子内部 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style 内边距（padding） - 内容区和边框之间的距离是内边距 padding-top padding-right padding-bottom padding-left 外边距（margin） - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的位置 - 一共有四个方向的外边距： margin-top - 上外边距，设置一个正值，元素会向下移动 margin-right - 默认情况下设置margin-right不会产生任何效果 margin-bottom - 下外边距，设置一个正值，其下边的元素会向下移动 margin-left - 左外边距，设置一个正值，元素会向右移动 - margin也可以设置负值，如果是负值则元素会向相反的方向移动 -
overflow 属性
使用 overflow 属性来设置父元素如何处理溢出的子元素可选值： visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出内容将会被裁剪不会显示 scroll 生成两个滚动条，通过滚动条来查看完整的内容 auto 根据需要生成滚动条 -
行内元素的盒模型
- 行内元素不支持设置宽度和高度 - 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局 - 行内元素可以设置border，垂直方向的border不会影响页面的布局 - 行内元素可以设置margin，垂直方向的margin不会影响布局 -
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值： content-box 默认值，宽度和高度用来设置内容区的大小 border-box 宽度和高度用来设置整个盒子可见框的大小 width 和 height 指的是内容区 和 内边距 和 边框的总大小 -
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动 第三个值 阴影的模糊半径 第四个值 阴影的颜色 -
border-radius: 用来设置圆角 圆角设置的圆的半径大小
-
浮动：通过浮动可以使一个元素向其父元素的左侧或右侧移动
可选值： none 默认值 ，元素不浮动 left 元素向左浮动 right 元素向右浮动 **浮动的特点：** 1、浮动元素会完全脱离文档流，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高 -
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
**脱离文档流的特点：** 块元素： 1、块元素不在独占页面的一行 2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开 行内元素： 行内元素脱离文档流以后会变成块元素，特点和块元素一样 脱离文档流以后，不需要再区分块和行内了 -
BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC 开启BFC该元素会变成一个独立的布局区域 - 元素开启BFC后的特点： 1.开启BFC的元素不会被浮动元素所覆盖 2.开启BFC的元素子元素和父元素外边距不会重叠 3.开启BFC的元素可以包含浮动的子元素 - 可以通过一些特殊方式来开启元素的BFC： 1、设置元素的浮动（不推荐） 2、将元素设置为行内块元素（不推荐） 3、将元素的overflow设置为一个非visible的值 - 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素 -
clear（clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题）
-作用：清除浮动元素对当前元素所产生的影响 -可选值： left 清除左侧浮动元素对当前元素的影响 right 清除右侧浮动元素对当前元素的影响 both 清除两侧中最大影响的那侧 原理： 设置清除浮动以后，浏览器会自动为元素添加一个上外边距， 以使其位置不受其他元素的影响 -
定位（position）- 使用position属性来设置定位
可选值： static默认值，元素是静止的没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位（参照与浏览器视口，元素不会随网页的滚动条滚动） sticky 开启元素的粘滞定位（可以在元素到达某个位置时将其固定) -
绝对定位
- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位- 绝对定位的特点： 1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离 3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开 4.绝对定位会使元素提升一个层级 5.绝对定位元素是相对于其包含块进行定位的（一般是开启相对定位的包含块） -
包含块( containing block )
-正常情况下：
包含块就是离当前元素最近的祖先块元素
<div><span><em>hello</em></span></div>
- 绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素，
如果所有的祖先元素都没有开启定位则根元素就是它的包含块
- html（根元素、初始包含块）
-
水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度 -
垂直方向布局
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度 -
z-index 指定元素的层级
*z-index*需要一个整数作为参数 值越大元素的层级越高,元素的层级越高越优先显示 -
字体相关的样式
color 用来设置字体颜色 font-size 字体的大小 和font-size相关的单位 em 相当于当前元素的一个font-size rem 相对于根元素的一个font-size font-family 字体族（字体的格式） 可选值： serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体 - 指定字体的类别，浏览器会自动使用该类别下的字体 - font-family 可以同时指定多个字体，多个字体间使用,隔开 字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推 -
行高（line height）
-行高指的是文字占有的实际高度 - 可以通过line-height来设置行高 行高可以直接指定一个大小（px em） 也可以直接为行高设置一个整数 如果是一个整数的话，行高将会是字体的指定的倍数 - 行高经常还用来设置文字的行间距 行间距 = 行高 - 字体大小 字体框 - 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度 行高会在字体框的上下平均分配 -
text-align 文本的水平对齐
可选值： left 左侧对齐 right 右对齐 center 居中对齐 justify 两端对齐 -
vertical-align 设置元素垂直对齐的方式
可选值： baseline 默认值 基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐 -
text-decoration 设置文本修饰
可选值： none 什么都没有 underline 下划线 line-through 删除线 overline 上划线 -
white-space 设置网页如何处理空白
可选值： normal 正常 nowrap 不换行 pre 保留空白 -
background-image 设置背景图片
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素，将会一个部分背景无法完全显示 - 如果背景图片和元素一样大，则会直接正常显示 -
background-repeat 用来设置背景的重复方式
可选值： repeat 默认值 ， 背景会沿着x轴 y轴双方向重复 repeat-x 沿着x轴方向重复 repeat-y 沿着y轴方向重复 no-repeat 背景图片不重复 -
background-position 用来设置背景图片的位置
设置方式： 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置 使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center 通过偏移量来指定背景图片的位置： 水平方向的偏移量 垂直方向变量 -
设置背景的范围
background-clip 可选值： border-box 默认值，背景会出现在边框的下边 padding-box 背景不会出现在边框，只出现在内容区和内边距 content-box 背景只会出现在内容区 background-origin 背景图片的偏移量计算的原点 padding-box 默认值，background-position从内边距处开始计算 content-box 背景图片的偏移量从内容区处计算 border-box 背景图片的变量从边框处开始计算 -
渐变
**linear-gradient()**：线性渐变，颜色沿着一条直线发生变化
background-image: linear-gradient(red,yellow,#bfa,orange);
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
**radial-gradient()** 径向渐变(放射性的效果)
radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top right left center bottom
-
过渡（transition）
- 通过过渡可以指定一个属性发生变化时的切换方式 - 通过过渡可以创建一些非常好的效果，提升用户的体验 transition-property: 指定要执行过渡的属性 transition-duration: 指定过渡效果的持续时间 transition-timing-function: 过渡的时序函数 transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 -
动画(animation)
-设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤 animation-duration: 动画的执行时间 animation-delay:动画的延时 animation-iteration-count 动画执行的次数 animation-direction: 指定动画运行的方向 animation-play-state: 设置动画的执行状态 animation-fill-mode: 动画的填充模式 -
变形（transform）
-是指通过CSS来改变元素的形状或位置 - 变形不会影响到页面的布局 - transform 用来设置元素的变形效果 - 平移： translateX() 沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平移 - 平移元素，百分比是相对于自身计算的 -旋转可以使元素沿着x y 或 z旋转指定的角度 rotateX() rotateY() rotateZ() -元素进行缩放的函数： scaleX() 水平方向缩放 scaleY() 垂直方向缩放 scale() 双方向的缩放 -
弹性盒
-flex-direction 指定容器中弹性元素的排列方式 -flex-wrap: 设置弹性元素是否在弹性容器中自动换行 -justify-content：如何分配主轴上的空白空间（主轴上的元素如何排列） -align-items: 元素在辅轴上如何对齐 -flex-grow: 弹性元素的缩减系数 -
媒体查询
语法： @media 查询规则{} 媒体类型： all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系 可以在媒体类型前添加一个only，表示只有。 only的使用主要是为了兼容一些老版本浏览器
上一篇： jQuery获取元素相对父元素的位置
下一篇： css position 位置