网站建设与运营意义,自己怎么开发棋牌软件,房山营销型网站制作开发,网站权重对优化的作用盒子
盒子模型解释元素在页面中显示成一个方块#xff0c;类似一个盒子#xff0c;CSS盒子模型就是使用现实中盒子来做比喻#xff0c;帮助我们设置元素对应的样式。盒子模型示意图如下#xff1a; 把元素叫做盒子#xff0c;设置对应的样式分别为#xff1a;盒子的边框…盒子
盒子模型解释元素在页面中显示成一个方块类似一个盒子CSS盒子模型就是使用现实中盒子来做比喻帮助我们设置元素对应的样式。盒子模型示意图如下 把元素叫做盒子设置对应的样式分别为盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
盒子模型的尺寸
按照下面代码制作页面
!DOCTYPE html
html langen
headmeta charsetUTF-8title盒子的真实尺寸/titlestyle typetext/css.box01{width:50px;height:50px;background-color:gold;}.box02{width:50px;height:50px;background-color:gold;border:50pxsolid #000}.box03{width:50px;height:50px;background-color:gold;border:50pxsolid #000;padding: 50px;}/style
/head
bodydiv classbox011/divbr /div classbox022/divbr /div classbox033/div
/body
/html页面显示效果如下
通过上面的页面得出结论盒子的width和height设置的是盒子内容的宽和高不是盒子本身的宽和高盒子的真实尺寸计算公式如下
盒子宽度 width padding左右 border左右盒子高度 height padding上下 border上下
思考题在布局中如果我想增大内容和边框的距离又不想改变盒子显示的尺寸应该怎么做
也就是使用padding时会让改变当前元素的尺寸,可以使用
box-sizingcontent-box | border-box
默认值content-box
课堂练习 请制作图中所示的标题
margin相关技巧1、设置元素水平居中 margin:x auto;2、margin负值让元素位移及边框合并
外边距合并
外边距合并指的是当两个垂直外边距相遇时它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下
1、使用这种特性2、设置一边的外边距一般设置margin-top3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候内部的盒子设置的margin-top会加到外边的盒子上导致内部的盒子margin-top设置失败解决方法如下
1、外部盒子设置一个边框2、外部盒子设置 overflow:hidden3、使用伪元素类
.clearfix:before{content: ;display:table;
}
