盒子模型

盒子模型

 

页面布局的三大核心，盒子模型 浮动和定位

网页布局的过程

1.先准备好相关的相关的网页元素，网页元素基本都是盒子box

2.利用css设置好盒子样式， 然后摆放到相应的位置

3.往盒子里装入内容

  网页布局的核心本质，就是利用css摆放盒子

 

盒子模型的组成

所为盒子，就是HTML页面中的布局元素，看做一个矩形的盒子，也就是一个盛装内容的容器。

css盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框，外边距，内边距和实际内容

1.边框 （border）

         border可以设置元素的边框，边框有三部分组成：边框高度（粗细）、边框样式、边框颜色

       语法：

       border-style：

              样式： solid（实线边框）；dashed（虚线边框）；dotted（点线边框）；

      

       边框的复合写法：

       边框分开写法：

       border-top  border-bottom  border-left  border-eight

       可以利用css的层叠性

              border: 1px solid blue

              border-top: 1px solid red

                     会覆盖掉上边框，其余不会层叠

 

       表格的细线边框

              border-collapse： collapse （相邻边框重叠，解决边框重叠变粗的问题）

             

       边框会影响盒子的实际大小

              边框会额外增加盒子的实际大小，我们有两种解决方法：

                     1.测量盒子大小的时候，不计算上边框

                     2.如果测量的时候包含了边框，则需要在盒子的width/height减去边框宽度

 

 

 

       2.内边距（padding）

              padding属性设置边框与内容的距离

              语法： padding-top：10px；

              复合型写法：

       当我们给盒子指定了padding属性之后会发生

              1.内容和边框有了距离，添加了内边距

              2.padding影响了盒子的实际大小

              也就是说，如果盒子已经有了宽度和高度，此时在指定内边距，会撑大盒子

              解决方法：

                     如果保证盒子和效果图大小保持一致，则让width/height减去多出来的内边距大小即可

              padding的巧妙应用：

                     因为导航栏内字数可能不一致，如果设置一样的盒子大小，会造成边框大小不一出现参差不齐的问题

                     解决方法： 我们不给盒子设置大小，用文字内容和padding边框将盒子撑起来，这样他们就能拥有一样的边框。

      

       padding不会撑开盒子的情况

              如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

 

       margin（外边距）

              margin属性用于设置外边距，控制盒子和盒子的距离

              margin的简写方式和padding的简写方式是一样的

      

       margin的典型应用

              外边距可以让块级盒子水平居中，需要满足的两个条件：

                     1.盒子必须制定了宽度width

                     2.盒子左右的外边距都设置为auto

 

 

              行内元素和行内块元素居中对齐的方式

                     行内元素和行内块元素水平居中->给它的父元素设置text-align：center属性即可

 

 

       外边距合并

              使用margin定义块级元素的垂直外边距的时候，可能会出想外边距合并的问题

              相邻块级元素垂直外边距的合并

                     当上下相邻的两个块级元素（兄弟关系）相遇时，如果上边的元素有下外边距margin-bottom ，下边的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom和margin-top的和，取两个值之中较大者。这种现象被称为相邻元素的垂直外边距合并

              解决问题：只给一个盒子添加外边距

                           

              嵌套问题

                     对于两个嵌套关系（父子元素）的块元素，父元素有上外边距的同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值。

 

 

       解决方法：

              1.可以为父元素定义上边框

              2.可以为父元素定义上内边距

              3.可以为父元素添加 overflow：hidden

 

       清除内外边距

              网页中元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们在布局前，首先要清除网页元素的内外边距

             

 

       注意：行内元素为了照顾兼容性，尽量只设置左右的内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以了。

 

 

       圆角边框

              css3新增圆角边框样式

              语法格式： border-radius：px；

              radius半径原理：椭圆与边框的交集形成圆角效果          

            常用写法：

                    

                    

       盒子阴影

              css3增加了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影

             

       文字阴影

              在css3中，可以通过 text-shadow属性将阴影用于文本