珠江网站建设,学风网站建设,网站开发工程师要求,温州市手机网站制作目录 盒子模型块级盒子内联级盒子内联块级盒子弹性盒子display 改变模型区域划分text 内容区padding 填充区border 边框区margin 外边距直接设置盒子大小 布局横向布局方法一 float 浮起来方法二 内联块级元素实现方法三 弹性盒子模型 盒子模型 块级盒子 独占一行#xff0c… 目录 盒子模型块级盒子内联级盒子内联块级盒子弹性盒子display 改变模型区域划分text 内容区padding 填充区border 边框区margin 外边距直接设置盒子大小 布局横向布局方法一 float 浮起来方法二 内联块级元素实现方法三 弹性盒子模型 盒子模型 块级盒子 独占一行对宽度高度支持div、p、ul、li。 内联级盒子 不独占一行对宽度高度不支持span、a。 内联块级盒子 不独占一行对宽度高度支持img、input。 弹性盒子 一个父级元素设置成弹性盒子其子元素默认始终横向布局。 不管子元素宽度之和是否超过父级元素最终都能放到父级元素中。 display 改变模型 display:block; 块级盒子 display:inline; 内联级盒子 display:inline-block; 内联块级盒子 display:fiex; 弹性盒子 区域划分 从里到外内容区、填充区、边框区、外边距。 text 内容区 width、height 默认针对内容区设置大小。 div, span{width:100px; height:50px; }padding 填充区 padding 默认是0 顺序是上、右、下、左。不够的话之间对称。(顺时针) 也可以单独对某一个方向进行设置 padding-top; 上 padding-bottom; 下 padding-left; 左 padding-right; 右 div, span{background: red;width:100px; height:50px; padding:10px 20px 30px 40px; }border 边框区 border-style:边框样式; border-color:边框颜色; border-width:边框宽度; 当然也可以单独对某一个方法边框设置 border-top宽度 样式 颜色 上 border-bottom 下 border-left 左 border-right 右 也可以对某个方向边框的某个属性设置 border-top-width; 上边框宽度 还有很多组合就不再一一列举了。 div, span{background: red;width:100px; height:70px; padding:10px 20px 30px 40px;border:5px solid black; //border-top-color:green; //border-bottom-color:blue; // }margin 外边距 margin用法与padding相似。 特殊的想要左右居中只用设置上下距离左右用auto即可。但反过来不能上下居中。 div, span{background: red;width:100px; height:70px; padding:10px 20px 30px 40px;border:5px solid black;border-top-color:green;border-bottom-color:blue;margin:10px auto; // 居中 }直接设置盒子大小 box-sizing:content-box 设置内容区大小 box-sizing:border-box 设置整个盒子的大小 布局 横向布局 方法一 float 浮起来 添加floatleft 父级没有高度父级消失给父级加高度。 缺点高度需要自己计算无法随最高子集的高度变化。 需要父级加 overflow:hidden; 本意是超出部分隐藏但是父级没有添加高度就会随之变化。 但任然有缺点难以均分。 .top{width:800px;background: yellow;overflow:hidden; }.bottom{width:800px;height:200px;background:pink; }.left{width:300px;height:100px;background:orange;float:left; } .right{width:300px;height:100px;background: purple;float:left; }div classtoptopdiv classleftleft/divdiv classrightright/div/divdiv classbottombottom/div方法二 内联块级元素实现 缺点会产生空白浏览器把空格换行当作空白字符处理最终以一个空格的形式展示。 解决空白1、让元素连起来 2、让父类文本大小为0子类另行设置。 方法三 弹性盒子模型 这是最常用的方法。 让父级变成弹性盒子模型里面自动变成横向布局。 优点不论子级宽度和多大都可以横向放入其中。 下一文章将详细介绍弹性盒子模型。