1.网络布局要学习三大核心,盒子模型,浮动和定位2.网页布局的核心本质:利用CSS摆盒子3.网页布局过程:a.先准备好相关网页元素,网页元素基本都是盒子b.利用CSS设置好盒子样式,然后摆放到相应位置c.往盒子里面装内容4.盒子模型(BoxModel)组成a.CSS盒子模型本质上是一个盒子,封装周围的HTML元素b.边框(border)内容(content)内边距(padding)外边距(margin)
二、边框(border)语法border:boder-widthborder-style
border-color1.边框粗细(border-width)定义边框粗细,单位为px2.边框样式(border-style)3.表格细线边框(border-collapse)border-collapse:collapse;
border-collapse属性控制浏览器绘制表格边框的方式,它控制相邻单元格的边框
collapse是合并的意思,表示相邻边框合并在一起
4.边框的复合型写法border:1pxsolidred;(无顺序)5.边框分开写法border-top:5pxsolidred;6.层叠性上边为红色,其余三边为蓝色,可用就近原则
注意:边框会影响盒子实际大小三、内边距(padding)设置内边距,即边框与内容之间的距离
padding-left是左内边距,padding-right是右内边距,padding-top是上内边距,padding-top是上内边距,padding-bottom是下内边距
padding简写
padding影响盒子实际大小
若盒子已经有了宽或高,此时再指定内边框会撑大盒子;若盒子本身没有指定宽或高,则此时padding不会撑开盒子
当字数不同时可以给盒子一个padding值
四、外边距(margin)设置外边距,即控制盒子和盒子之间的距离
左外边距(margin-left)右外边距(margin-right)上外边距(margin-top)下外边距(margin-bottom)
margin简写方式代表的意义与padding完全一致
外边距可以让块级盒子水平居中,但必须满足两个条件:a.盒子必须指定宽度b.盒子左右的外边距都设为auto此方法让块级元素水平居中,行内元素或行内块元素水平居中要给其父元素添加text-align:center即可