2-3、盒子模型
内容:content
宽度:width : 长度值 | 百分比 | auto
最大宽度:max-width : 长度值 | 百分比 | auto
最小宽度:min-width : 长度值 | 百分比 | auto
高度:height : 长度值 | 百分比 | auto
最大高度:max-height : 长度值 | 百分比 | auto
最小高度:min-height : 长度值 | 百分比 | auto
通常只有块级元素和替换元素(img、input、textarea等)才可以设置高宽。
边框 border
边框如果不设置颜色,那么默认和内容字体颜色一致。
b边框宽度:border-width : thin | medium | thick | 长度值 (窄、中等、厚)
边框颜色: border-color
b边框样式:border-style
边框的四边的样式都可以单独设置:
boder-top-width : 1px;
border-top-color: #fff;
border-top-style: solid;
也可以简写:
border-top : 1xp solid #fff;
填充 内边距 padding
同样可以分别设置四个方向的值;不可以是负值;
外边距
同样可以分别设置四个方向的值;可以是负值; 长度值 | 百分比 | auto
很多标签是默认带有margin的,所以一般在最开始的时候,添加一个margin : 0;
div不垂直居中时,可以给一个margin: o auto;
,相对于父元素设置外边框,这里可以查一下为什么。
c垂直方向上,两个元素都设置了外边框,会进行重合,比如一个20px,一个30px,那么距离就是30px。
display
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7df6bcc6e2b8996b1180d6357e03afc6.png)
内联元素(行级元素),如果有换行的话,两个内联元素之间会有空格,不换行写在一起就可以去掉。