目录
1.弹性盒子
flex
flex-direction 指定容器中弹性元素的排列方式;
主轴由flex的设置的方向决定;
flex-grow指定弹性元素伸展的系数默认值是零;
当父元素有多余的空间时子元素如何伸展,0就是不伸展,
要是把flex-grow写入子元素,则子元素按照flex-grow的比值被分配剩余空白部分
flex-shrink表示收缩系数。当父元素不足以容纳子元素时对子元素进行收缩
当值为零的时候就是不收缩,当外面的框小的时候内容会溢出
这时使用flex-wrap:wrap;多出的部分会沿着辅轴方向排列
flex-flow是简写属性
justify-content
如何分配空白区域
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
sparce-between 空白均匀分布到元素间
spare-around 空白分布到元素两侧。
在纵向上align-item
中stretch属性把元素的长度设置为相同的值;
指的是行与行之间的高度
flex-start:元素不会拉伸,沿着辅轴起边方向对齐
flex-end:沿着辅轴终边对齐
flex-baseline:沿着基线对齐就是文字底边的基线。
在纵轴上分配空白空间
用align-conent:
和横着的一样。
设置弹性元素的属性
flex-basic:可以设置弹性元素的基础长度;
如果主轴是纵向的则设置的是高度;
2.文本标签
html格式化标签粗体表示重要性(内容的重要性)或者斜体表示着重点(语气上的强调)表示你要呈现的文章时重要的所以要突出显示 一个粗体,一个斜体
与是定义粗体或斜体文本与上面的那两个是不一样的
cite标签:网站中所有加书名号的内容都可以使用cite标签
《XXX》
短引用标签的内容浏览器会默认给他加上一个“”
blockquote长引用(块级引用不能放在中)
独占一行
sup标签用来表示一个上标;
sub标签用来表示一个下标;
del标签用来表示一个删除的内容画一个横线
ins表示插入一个内容插入的内容有下划线
pre标签时预格式标签保留了格式;
code专门用来表示代码的标签
3.定位
通过position属性
relative是相对定位
当开启元素相对定位时,而不设置偏移量。和没有设置一样
2:开启后可以通过,left right top bottom 四个属性设置元素的偏移量。
是相对与原来位置移动的。
3:相对定位的元素不会脱离文档流。原来的位置虽然是空的但还占位置。
4:相对定位会使元素提升一个层级。会覆盖其他元素。
通常偏移量使用两个就可以对一个元素进行定位。
相对定位,不会该改变元素的性质,块还是块,内联还是内联
绝对定位absolute
开启绝对定位后脱离文档流
开启绝对定位后
而且是相对于浏览器窗口定位的
3:绝对定位是相对于离他最近的的开启了定位的祖先元素定位的
(一般情况开启子元素的绝对定位,也会开启祖先元素的绝对定位。)
4:如果所有的祖先元素都未开启定位,则会相对于浏览器窗口定位。
5:绝对定位会使元素提升一个层级
6:定位会改变元素的性质
内联元素变成块元素,块元素的宽度和高度默认被内容撑开
固定定位fixed
position也是一种绝对定位
它的大部分特点都和绝对定位一样
不同的是:
固定定位永远会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口的某个位置,不会随滚顶条滚动