CSS(四)|页面布局之盒子模型

CSS(四)|页面布局之盒子模型_第1张图片

01.盒子模型

在这里插入图片描述
1.1看透网页布局的本质
CSS(四)|页面布局之盒子模型_第2张图片
1.2盒子模型(Box Modle)组成
CSS(四)|页面布局之盒子模型_第3张图片
CSS(四)|页面布局之盒子模型_第4张图片
CSS(四)|页面布局之盒子模型_第5张图片
1.3边框(border)
CSS(四)|页面布局之盒子模型_第6张图片
CSS(四)|页面布局之盒子模型_第7张图片
CSS(四)|页面布局之盒子模型_第8张图片
CSS(四)|页面布局之盒子模型_第9张图片
CSS(四)|页面布局之盒子模型_第10张图片
CSS(四)|页面布局之盒子模型_第11张图片
CSS(四)|页面布局之盒子模型_第12张图片
CSS(四)|页面布局之盒子模型_第13张图片
CSS(四)|页面布局之盒子模型_第14张图片
CSS(四)|页面布局之盒子模型_第15张图片
1.4表格的细线边框
CSS(四)|页面布局之盒子模型_第16张图片
CSS(四)|页面布局之盒子模型_第17张图片
第一个图没有合并相邻的边框
CSS(四)|页面布局之盒子模型_第18张图片

1.5边框会影响盒子实际大小
CSS(四)|页面布局之盒子模型_第19张图片
CSS(四)|页面布局之盒子模型_第20张图片
CSS(四)|页面布局之盒子模型_第21张图片
1.6内边距(padding)
CSS(四)|页面布局之盒子模型_第22张图片
CSS(四)|页面布局之盒子模型_第23张图片
CSS(四)|页面布局之盒子模型_第24张图片
CSS(四)|页面布局之盒子模型_第25张图片
在这里插入图片描述
CSS(四)|页面布局之盒子模型_第26张图片
CSS(四)|页面布局之盒子模型_第27张图片
CSS(四)|页面布局之盒子模型_第28张图片
CSS(四)|页面布局之盒子模型_第29张图片
案例:新浪导航案例-paddind影响盒子好处
CSS(四)|页面布局之盒子模型_第30张图片
CSS(四)|页面布局之盒子模型_第31张图片
CSS(四)|页面布局之盒子模型_第32张图片
CSS(四)|页面布局之盒子模型_第33张图片
在这里插入图片描述
案例:小米导航案例修改-padding影响盒子大小计算
在这里插入图片描述
CSS(四)|页面布局之盒子模型_第34张图片
CSS(四)|页面布局之盒子模型_第35张图片
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小。

CSS(四)|页面布局之盒子模型_第36张图片
CSS(四)|页面布局之盒子模型_第37张图片
1.7外边距(margin)
CSS(四)|页面布局之盒子模型_第38张图片
CSS(四)|页面布局之盒子模型_第39张图片
CSS(四)|页面布局之盒子模型_第40张图片

CSS(四)|页面布局之盒子模型_第41张图片
1.8外边距典型应用
CSS(四)|页面布局之盒子模型_第42张图片
CSS(四)|页面布局之盒子模型_第43张图片
CSS(四)|页面布局之盒子模型_第44张图片
CSS(四)|页面布局之盒子模型_第45张图片
CSS(四)|页面布局之盒子模型_第46张图片
1.9外边距合并

CSS(四)|页面布局之盒子模型_第47张图片
CSS(四)|页面布局之盒子模型_第48张图片
CSS(四)|页面布局之盒子模型_第49张图片
1.10清除内外边距
CSS(四)|页面布局之盒子模型_第50张图片
CSS(四)|页面布局之盒子模型_第51张图片
CSS(四)|页面布局之盒子模型_第52张图片

02.PS基本操作

CSS(四)|页面布局之盒子模型_第53张图片
CSS(四)|页面布局之盒子模型_第54张图片

03.综合案例

案例1:产品模块
CSS(四)|页面布局之盒子模型_第55张图片
CSS(四)|页面布局之盒子模型_第56张图片
CSS(四)|页面布局之盒子模型_第57张图片
CSS(四)|页面布局之盒子模型_第58张图片
CSS(四)|页面布局之盒子模型_第59张图片
CSS(四)|页面布局之盒子模型_第60张图片
案例2:快报模块
CSS(四)|页面布局之盒子模型_第61张图片
CSS(四)|页面布局之盒子模型_第62张图片
CSS(四)|页面布局之盒子模型_第63张图片
CSS(四)|页面布局之盒子模型_第64张图片
CSS(四)|页面布局之盒子模型_第65张图片
CSS(四)|页面布局之盒子模型_第66张图片
CSS(四)|页面布局之盒子模型_第67张图片
CSS(四)|页面布局之盒子模型_第68张图片

04.圆角边框(重点)

CSS(四)|页面布局之盒子模型_第69张图片
CSS(四)|页面布局之盒子模型_第70张图片
CSS(四)|页面布局之盒子模型_第71张图片
CSS(四)|页面布局之盒子模型_第72张图片
CSS(四)|页面布局之盒子模型_第73张图片

05.盒子阴影(重点)

CSS(四)|页面布局之盒子模型_第74张图片
blur模糊距离(虚实效果)
CSS(四)|页面布局之盒子模型_第75张图片
CSS(四)|页面布局之盒子模型_第76张图片
CSS(四)|页面布局之盒子模型_第77张图片

06.文字阴影

CSS(四)|页面布局之盒子模型_第78张图片
CSS(四)|页面布局之盒子模型_第79张图片在这里插入图片描述

你可能感兴趣的:(前端笔记,前端学习)