2020.02.13

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一样

垂直的相邻外边距会发生外边距的一个重叠
是指兄弟元素之间的相邻外边距会取最大值，而不是取和
如果父子元素的垂直外边距相邻了，子元素的上外边距会设置给父元素