盒子模型的创建和设置

盒子模型分为:内容区(content) 内边距(padding) 边框(border) 外边距(magin)

1.内容区
用width和height指定内容区的宽和高
2.边框
border-width:10px 顺序:四周 设置4个边的边框宽度
border-width:10px 20px 30px 40px 顺序:上右下左 设置边框的宽度
border-width:10px 20px 30px 顺序: 上,左右,下 设置边框的宽度
border-width:10px 20px 顺序:上下,左右 设置边框的宽度


还可以单独设置一边的边框高度,或者是颜色:border-top-width:10px 上边框的宽度设置为10px border-top-color:red 上边框的颜色设置为红色


可以通过border-sytle设置边框的样式(solid实线,dotted点状虚线……)

border: 颜色 样式 宽度 同时设置4个边的颜色,央视和宽度
border-top:颜色 样式 宽度 同时设置上边框的颜色,样式,宽度

3.padding内边距
padding:100px 4个边的内边距都是100px
padding:100px 200px 顺序:上下,左右
padding:100px 200px 300px 顺序: 上,左右,下
padding:100px 200px 300px 400px 顺序:上右下左
4.margin-left/right/top/bottom:100px 设置 左/右/上/下 的外边距 (可以设置负值,向反方向移动)
margin-left:auto/margin-right:auto 这两个都是设置水平居中

margin设置的方式跟padding一样,

margin:50px auto 10px 设置水平居中,auto就是根据父元素的自动调整

如果 垂直方向上的 相邻 的两个外边距都被设置了, 会用最大值,而不是和

如果 父子元素的上边距相邻,会一起移动,想要分离子元素,1.gei 给父元素设置上边框 或 上内边距


注意!

内联元素 无内容区的宽,高,水平方向的外边距求和


display

display:block 显示为块元素
display:none 元素不会被显示,也不会占地方
display:inline 元素显示为内联元素
display:inline-block 元素显示为行内块元素

你可能感兴趣的:(盒子模型的创建和设置)