前端初级入门.pdfVIP

Web

前端入门

1盒模型

目录2元素层级

CONTENTS3文字设置

4元素大小

Part

1盒模型

01

1盒模型基本概念

content为盒子最内层设置宽高即可

padding为第二层,为复合属性填充影响可视区域的大小

padding有4个值为顺时针:上右下左.三个值表示上左右下.两个值表示上

下左右.一个值表示所有

border表示边框:

大小,颜色,样式

border-style:表示方式有

solid(实线)

dotted(点线)

dashed(虚线)

double(双实线)

2margin

盒模型的最外层，元素不会显示出来，但是会占据文档流，会使元

素占据对应的空间。

border

盒模型的第二层，会显示出来，一般用于对一个元素加上边框，作

用于区分元素和外界。（脑补快递的包装）

3padding

被称为元素的内补丁，用于对元素内部元素位置的调整。

Part

2元素层级

02

1定位

元素定位的三种情况。

1.position：relative；（相对定位）

2.position：absolute；（绝对定位）

3.position：fixed；（固定位，ie6低版本不支持）

结合z-index：number；进行元素层级调整

Part

3文字设置

03

1换行，还是省略号

overflow:(用于子集多于父集之间关系调整)

clip:直接把多余的部分裁减掉

ellipsis:设置出现省略号

*对子集超出父集的处理,(对父集添加)

hidden:对超出部分隐藏

scroll:滚动查看超出部分内容(white-space:nowrap

（强制文本不换行）配合使用)

Part

4元素大小设置

04

1单位

px

em

rem

2宽高设置

Width，height，min-width，max-width

谢谢观赏

PPT模板下载：/moban/行PPT模板：/hangye/

节日PPT模板：/jieri/PPT素材下载：/sucai/

PPT背景图片：/b