CSS笔记2

5.布局

5.1盒子布局

border：

dotted 定义点状边框

dashed 定义虚线

solid 定义实线

double 定义双线

margin：外边距

四个值：上，右，下，左

padding：内边距

四个值：上，右，下，左

5.2元素分类

块级元素：独占一行，可以设置宽和高

div p hn等

内联元素：不会自动换行，不能设置宽和高

span

块级元素可以和内联元素相互转换通过display

inline：块级转内联

block：内联转块级

none：隐藏元素

隐藏方式

display：none

设置高度和宽度为0

5.3浮动布局

通过设置float属性进行布局

none：不浮动

left：向左浮动，后面的内容会流向对象右侧

right：向右浮动，后面内容会流向左侧

clear：清除浮动

5.4定位布局

属性：position 定位方式

static：默认值正常显示

absolute：绝对定位，会将对象从文档流中分离出来，通过设置left right top bottom四个方向上的值相较于父级的绝对定位，如果不存在这样的父级元素那就相较于body标签

relative：相对定位，不会将对象从文档流中分离出来，通过设置left right top bottom四个方向上的值进行相对定位

5.5其他属性

overflow：属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

隐藏元素方式：

1.display

2.width:0 height:0

3.overflow

zoom：对图片进行放大缩小

一般取1或100%按原比例显示

5.6css3弹性盒子

flex-direction：弹性盒子中子元素的排列方式

值	描述
row	默认值。作为一行，水平地显示弹性项目。
row-reverse	等同行，但方向相反。
column	作为列，垂直地显示弹性项目。
column-reverse	等同列，但方向相反。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

flex-wrap：设置子元素超过父元素后是否自动换行

值	描述
nowrap	默认值。规定弹性项目不会换行。
wrap	规定弹性项目会在需要时换行。
wrap-reverse	规定弹性项目会在需要时换行，以反方向。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

flex-flow：flex-direction和flex-wrap的简写

值	描述
flex-direction	可能的值：rowrow-reversecolumncolumn-reverseinitialinherit默认值为 "row"。规定弹性项目的方向。
flex-wrap	可能的值：nowrapwrapwrap-reverseinitialinherit默认值为 "nowrap"。规定弹性项目是否应换行。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

align-items：设置弹性盒子在侧轴（纵轴）上的对齐方式

值	描述
stretch	默认。项目被拉伸以适合容器。
center	项目位于容器的中央。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的末端。
baseline	项目被定位到容器的基线。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

align-content：对flex-wrap的一个修改，和align-items相似，但不是设置对齐方式

值	描述
stretch	默认值。行拉伸以占据剩余空间。
center	朝着弹性容器的中央对行打包。
flex-start	朝着弹性容器的开头对行打包。
flex-end	朝着弹性容器的结尾对行打包。
space-between	行均匀分布在弹性容器中。
space-around	行均匀分布在弹性容器中，两端各占一半。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

justifl-content：（水平）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

flex：设置的是弹性项目的弹性长度。

flex-grow	数字，规定项目相对于其余弹性项目的增长量。
flex-shrink	数字，规定项目相对于其余弹性项目的收缩量。
flex-basis	项目的长度。合法值："auto"、"inherit"，或单位为 "%", "px", "em" 的值，或任何其他长度单位。
auto	等同于 1 1 auto。
initial	等同于 0 1 auto。参阅 initial。
none	等同于 0 0 auto。
inherit	从其父元素继承该属性。参阅 inherit。

扩展：

order：可以改变弹性盒子的顺序

值	描述
number	默认值为 0。规定弹性项目的顺序。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

flex-grow ：属性规定在相同的容器中，项目相对于其余弹性项目的增长量。

值描述number数字值，规定该项目相对于其余弹性项目的增长量。默认为 0。initial将此属性设置为其默认值。参阅 initial。inherit从其父元素继承此属性。参阅 inherit。

flex-shrink ：属性固定在相同的容器中，项目相对于其余弹性项目的收缩量。

值描述number数字，规定项目相对于其余弹性项目的收缩量。默认值为 1。initial将此属性设置为其默认值。参阅 initial。inherit从其父元素继承此属性。参阅 inherit。

flex-basis： 属性规定弹性项目的初始长度。

值	描述
number	长度单位或百分百，规定弹性项目的初始长度。
auto	默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。