全栈：前端第二周（第四天）

目录

一、元素的分类

display（显示）：设置元素以什么类型显示

二、盒模型

        1、内容的宽高（contant）

                1）height：设置元素的高

                2）width：设置元素的宽

        2、内边距

        3、外边距

        4、边框（border）：给元素设置边框

                1）border-width：设置边框粗细

                2）border-style：设置边框的样式

                3）border-color：设置边框的颜色

                4）一些属性的全称：

5、精灵图（将多个图标放到一张图片上，减少服务器接收和发送的请求次数，提高页面的加载速度   网页的优化）

6、浮动（使元素向左或向右移动，其周围的元素会重新排列）

---

一、元素的分类

行内标签 ：一行可以出现多个，前后元素不换行

行内标签	span ，b， i ，u ，sup ，sub ...
行内块标签	img， input， textarea ，select， button ...

块标签：自己独占一块/行，前后元素自动换行，h1-h6 ，p ，ul， ol ，li ，dl ，dt， dd， form， table t，r ...

display（显示）：设置元素以什么类型显示

inline	默认 此元素被显示为行内元素
block	此元素被显示为块级元素
inline-block	行内块元素
none	此元素不被显示

二、盒模型

通过盒模型进行网页布局，盒模型由宽高，内边距，外框，外边距组成。

        1、内容的宽高（contant）

                1）height：设置元素的高

auto	默认值 浏览器计算出来的
高度	px，em，rem
%	基于父元素宽高的百分比

                2）width：设置元素的宽

auto	默认值 浏览器计算出来的
高度	px，em，rem
%	基于父元素宽高的百分比

注：块级元素可以设置宽高，行内元素不可以设置宽高（由内容撑开）

一些使用的盒子限定宽高：

min-height	设置元素的最小高度
max-height	设置元素的最大高度
min-width	设置元素的最小宽度
max-width	设置元素的最大宽度
line-height	设置行高

        2、内边距

                padding:定义元素边框与元素内容之间的空间

高度	px，em，rem
%	基于父元素宽高的百分比

                可以将padding分为四个边来分别定义：

                 padding-top       ：定义元素的顶部填充
                 padding-right     ：定义元素的右部填充
                 padding-bottom ：定义元素的底部填充
                 padding-left       ：定义元素的左部填充

        简略使用时，给一个值为四边填充；

        两个值先上下后左右；

        三个值先上，左右，下；

        四个值则为先上，右，下左；

        3、外边距

                margin:定义元素周围的空间，元素与元素之间的间距

高度	px，em，rem
%	基于父元素宽高的百分比

                可以将padding分为四个边来分别定义：

                 margin-top       ：定义元素的顶部外距
                 margin-right     ：定义元素的右部外距
                 margin-bottom ：定义元素的底部外距
                 margin-left       ：定义元素的左部外距

        简略使用时，给一个值为四边填充；

        两个值先上下后左右；

        三个值先上，左右，下；

        四个值则为先上，右，下左；

        4、边框（border）：给元素设置边框

                1）border-width：设置边框粗细

mediun	默认 中等粗细的边框
thin	定义细的边框
thick	定义粗的边框
绝对粗细值	px

                2）border-style：设置边框的样式

none	定义无边框
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突
dotted	定义点状边框。在大多数浏览器中呈现为实线
dashed	定义虚线。在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线。双线的宽度等于 border-width 的值
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值
inset	定义 3D inset 边框。其效果取决于 border-color 的值
outset	定义 3D outset 边框。其效果取决于 border-color 的值

                3）border-color：设置边框的颜色

                可以使用十六进制，颜色名，rgb(),rgba()来设定颜色，transparent来设置透明度。

                4）一些属性的全称：

                1、border-top：设置上边框

                        border-top-width：设置上边框粗细

                        border-top-style：设置上边框样式

                        border-top-color：设置上边框颜色

                2、border-right：设置右边框

                        border-right-width：设置右边框粗细

                        border-right-style：设置右边框样式

                        border-right-color：设置右边框颜色

               3、border-bottom：设置下边框

                        border-bottom-width：设置下边框粗细

                        border-bottom-style：设置下边框样式

                        border-bottom-color：设置下边框颜色

                4、border-left：设置左边框

                        border-left-width：设置左边框粗细

                        border-left-style：设置左边框样式

                        border-left-color：设置左边框颜色

5、精灵图（将多个图标放到一张图片上，减少服务器接收和发送的请求次数，提高页面的加载速度   网页的优化）

使用盒模型定义一个小窗口，将图片作为背景图片加入，然后改变背景图片的位置，使想要显示的内容透过窗口露出。
 

6、浮动（使元素向左或向右移动，其周围的元素会重新排列）

        页面布局中使用的最多是块元素（盒子），该元素基本上下排列，使用浮动可以进行向左或向右移动。

1、float：指定一个盒子(元素)是否可以浮动。
           none：默认，元素不浮动
           left：元素向左浮动
           right：元素向右浮动
浮动直到遇到另一个浮动元素或遇到父级元素的边框才会停止

2、clear：清除浮动   在元素左右不允许浮动元素（浮动元素会脱离标准文档流时使用）
           left：清除左浮动的元素   在左侧不允许浮动元素
           right：清除右浮动的元素   在右侧不允许浮动元素
           both：在左右两侧都不允许浮动元素
           none：不清除