盒子模型

盒子模型

 

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

网页布局的过程

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

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

3.往盒子里装入内容

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

 

盒子模型的组成

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

css盒子模型本质上就是一个盒子,封装周围的HTML元素,它包括:边框,外边距,内边距和实际内容盒子模型_第1张图片

盒子模型_第2张图片

1.边框 (border)

盒子模型_第3张图片

         border可以设置元素的边框,边框有三部分组成:边框高度(粗细)、边框样式、边框颜色

       语法:

盒子模型_第4张图片

       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;

盒子模型_第5张图片

              复合型写法:

盒子模型_第6张图片

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

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

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

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

              解决方法:

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

              padding的巧妙应用:

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

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

      

       padding不会撑开盒子的情况

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

 

       margin(外边距)

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

盒子模型_第7张图片

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

      

       margin的典型应用

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

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

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

盒子模型_第8张图片

 

 

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

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

 

 

       外边距合并

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

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

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

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

                           

              嵌套问题

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

 

盒子模型_第9张图片

 

       解决方法:

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

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

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

 

       清除内外边距

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

             

盒子模型_第10张图片

 

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

 

 

       圆角边框

              css3新增圆角边框样式

              语法格式: border-radius:px;

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

盒子模型_第11张图片

            常用写法:

                    

盒子模型_第12张图片

                    

       盒子阴影

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

             

盒子模型_第13张图片

       文字阴影

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

盒子模型_第14张图片

 

你可能感兴趣的:(HTMLcss)