盒模型和开发中常用的布局

目录

1. 有关盒子模型的css属性

 1.1列表的样式

2.浮动布局

2.1 HTML元素的分类

2.2 display属性

2.3 伪元素清除浮动

3 flex布局

3.1 含义

3.2 设置flex容器

---

1. 有关盒子模型的css属性

边框：border-width;border-style;border-color;

外边距：margin(-top\-right\-bottom\-left)

内边距：padding(-top\-right\-bottom\-left)

 1.1列表的样式

取消列表样式：list-style:none; 例如取消无序列表 li前面的小点

列表样式在边距之内：list-style: inside;

2.浮动布局

2.1 HTML元素的分类

块元素：可以设置宽度和高度，独立成行。h1-6、p、div、ul、li

行内元素（内联元素、行级元素）：不可以设置宽度和高度，不独立成行。a、span

行内块元素：可以设置宽度和高度，不独立成行img，input，button

2.2 display属性

block：转换为块元素

inline：转换为行内元素

inline-block：转换为行内块元素

none：隐藏元素

2.3 伪元素清除浮动

.clear::after,.clear::before{

         content:””;      

        display:block;    

         clear:both;

}

空div清除浮动：clear：both

将元素设置为浮动元素（float），块元素可以在同一行显示。

3 flex布局

3.1 含义

flex布局又叫弹性布局（或者叫弹性盒子布局）

将元素设置为display：flex；元素会变为一个flex容器。 容器内部的元素为flex元素或者叫flex项目（flex-item）

3.2 设置flex容器

flex-direction：设置flex项目排列方向

        row（默认值）：主轴为水平方向，起点在左端。

        row-reverse：主轴为水平方向，起点在右端。

        column：主轴为垂直方向，起点在上沿。

        column-reverse：主轴为垂直方向，起点在下沿。

justify-content：flex项目主轴排列方式

        flex-start（默认值）：左对齐

        flex-end：右对齐

        center： 居中

        space-between：两端对齐，项目之间的间隔都相等。

        space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

align-items：flex项目在交叉轴的排列方式

        flex-start：交叉轴的起点对齐。

        flex-end：交叉轴的终点对齐。

        center：交叉轴的中点对齐。

        stretch（延伸）（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。