标准文档流组成
块级元素(block) <h1>…<h6>、<p>、<div>、列表
内联元素(inline) <span>、<a>、<img/>、<strong>...
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立
display属性
值 | 说明 |
block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 |
inline | 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符 |
inline-block | 行内块元素,元素既具有内联元素的特性,也具有块元素的特性 |
none | 设置元素不会被显示 |
display特性
块级元素与行级元素的转变 (block、inline)
控制块元素排到一行 (inline-block)
控制元素的显示和隐藏 (none)
float属性
清除浮动 clear属性
值 | 说明 |
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左、右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
清除浮动,防止父级边框塌陷的四种方法
- 浮动元素后面加空div 简单,空div会造成HTML代码冗余
- 设置父元素的高度 简单,元素固定高会降低扩展性
- 父级添加overflow属性 简单,下拉列表框的场景不能用
- 父级添加伪类after 写法比上面稍微复杂一点,但是没有副作用,推荐使用
.clear:after{ content: ''; /*在clear类后面添加内容为空*/ display: block; /*把添加的内容转化为块元素*/ clear: both; /*清除这个元素两边的浮动*/ }
inline-block和float的区别
display:inline-block 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便 位置方向不可控制,会解析空格 IE 6、IE 7上不支持 float 可以让元素排在一行并且支持宽度和高度,可以决定排列方向 float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式
弹性盒子
盒子模型
content-box
box-sizing:content-box
特点:加padding和margin都会改变原来盒子的尺寸
向外扩展
border-box
box-sizing:border-box
特点:加padding和margin整体的盒子模型不变大
向内扩展
弹性盒子使用
方式
在父级元素设置display:flex
注意
如果父级元素用了flex 那么子元素不需要浮动了,加也没有用
父级元素的属性
justify-content 水平排列
值 | 描述 |
---|---|
flex-start | 默认值。项目位于容器的开头。 |
flex-end | 项目位于容器的结尾。 |
center | 项目位于容器的中心。 |
space-between | 项目位于各行之间留有空白的容器内。 |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
align-item垂直排列
值 | 描述 |
---|---|
stretch | 默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。 |
center | 元素位于容器的中心。 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 |
flex-start | 元素位于容器的开头。 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 |
flex-end | 元素位于容器的结尾。 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 |
baseline | 元素位于容器的基线上。 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
flex-direction灵活项目的方向(基本不用 了解就行,用了就是垂直于水平相反)
值 | 描述 |
---|---|
row | 默认值。灵活的项目将水平显示,正如一个行一样。 |
row-reverse | 与 row 相同,但是以相反的顺序。 |
column | 灵活的项目将垂直显示,正如一个列一样。 |
column-reverse | 与 column 相同,但是以相反的顺序。 |
initial | 设置该属性为它的默认值 |
inherit | 从父元素继承该属性 |
flex-wrap 规定flex容器是单行或者多行
值 | 描述 |
---|---|
nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
align-content 规定多行的水平排列
值 | 描述 |
---|---|
stretch | 默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于'flex-start'。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。 |
center | 元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。) |
flex-start | 元素位于容器的开头。 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。 |
flex-end | 元素位于容器的结尾。 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。 |
space-between | 元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'flex-start'。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。 |
space-around | 元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于'center'。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
子元素属性
flex :1 平分父类的宽度 width就失效了 值是系数 例如1
flex-grow:1 属性用于设置或检索弹性盒子的扩展比率
align-self 子元素单独垂直布局
order 规定子元素的顺序