小程序开发之【前端开发】【学习第三节】【一】

这一节就是学布局了。

盒子模型是CSS布局的基础，CSS假定每个元素都会生成一个或多个矩形框，每个元素框中心都有内容框content，内边距padding，边框border和外边距margin，这些默认为0.盒子模型根据浏览器具体实现可分为W3C标准盒子模型和IE盒子模型，这两种盒子模型在宽度和高度的计算不一致，WXSS完全遵守W3C盒子模型规范。

元素按照显示方式分为块级元素和行内元素。我们可以通过display设置属性为block，将一个元素强制设置为块级元素，设置属性inline，将一个元素强制设置为行内元素。

块级元素举例

第一个块级元素

第二个块级元素

第二个块级元素其他信息


块级元素



文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

结果图

行内元素,，盒子模型中的高度，宽度，上下margin，上下padding设置均无效，只能设置左右margin和padding。

行内元素举例

前面的文字元素元素元素元素元素元素元素元素元素后面的文字

行内块元素

行内块元素是行内元素和块级元素的混合，当display设置为inline-block时，元素就被设置为了一个行内块元素，行内块元素可以设置宽，高，内边距和外边距，可以简单认为行内块元素就是把块级元素以行的形式展现，保留了块级元素对宽，高，内边距，外边距的设置，就是一张图放在文本行中。

前面的文字行内块元素行内块元素行内块元素行内块元素后面的文字

前面的文字行内块元素后面的文字

浮动和定位以及Flex布局三种布局方案

浮动

其他元素
浮动框




其他元素
浮动框



其他元素
浮动框

.clearfix:after{
display:block;
height:0;
clear:both;
content:''
}

定位

文本文本relative文本文本文本文本文本文本文本



文本文本absolute文本文本文本文本文本文本文本



文本文本absolute不设置包含块文本文本文本文本文本文本文本



文本文本fixed文本文本文本文本文本文本文本

flex布局

flexible box的缩写，即弹性盒子布局，WXSS对其进行了实现，项目可以随意使用。