2020.02.13 html&css学习
盒子模型
盒子模型:框模型
css处理网页时,他认为每个元素都包含在一个看不见的盒子中
内容区(content)
内边距(padding)
外边距(margin)
边框(border)
使用width来设置内容区的宽度,height来设置内容区高度
为元素设置边框(BORDER),必须指定三个样式
border-width:边框的宽度
使用border-width可以分别制定四个边框的颜色
如果在border-width中指定四个值,这四个字是上左下右的顺序 顺时针的顺序
如果指定三个值,则会分别设置给上,左右,下
如果指定两个值,就是上下,左右、
如果指定一个值,则都是
border-color:边框的颜色
border-style:边框的样式
也可以分别指定四个边框的样式,和width的规则一样
border
边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色
而且没有任何的顺序要求
不能分开指定四个边框,只能同时指定。
内边距,padding
内边距指定的是盒子中的内容区和边框的之间的距离
一共有四个方向的内边距,可以通过
padding-top(bottom,left,right)来设置
内边距会影响我们的盒子大小,内容区的颜色会延申到内边距
盒子的大小有内容区,内边距,边框来决定
padding也可以同时设置四个边框的样式,和border的样式一致
外边距:外边距是盒子与盒子之间的距离,不会影响可见框的大小,而是影响盒子的距离
盒子的四个外边距:
margin-top(bottom,left,right),铀元素都是考上靠左摆的
所以我们注意向上,左设置外边距时,设置下,右会影响其他盒子的位置
外边距也可以指定为一个负值,则元素会向反方向移动
还可以设置为auto,一般指设置值水平方向的margin,如果只指定左右边距设为auto,则设置为最大值
垂直方向外边距如果设置为auto,则外边距默认就是0
如果left和right同时设置为auto,则会居中,所以经常将左右外边距设置为auto
外边距同样可以简写属性margin,规则和和padding一样
垂直的相邻外边距会发生外边距的一个重叠
是指兄弟元素之间的相邻外边距会取最大值,而不是取和
如果父子元素的垂直外边距相邻了,子元素的上外边距会设置给父元素