盒子模型
- CSS 在处理网页的时候会认为每个元素都是一个盒子，一个盒子分为以下几个部分：
1、内容区：content
2、内边距：padding
3、边框 ：border
4、外边距：margin
图片1.png
内容区
内容区指的是盒子中放置内容的区域，也就是元素的文本内容，子元素也是存在于内容区的， 可以通过width和height两个属性设置内容区的大小
但是，width和height属性只适用于块元素
p{
width:100px;
height:100px;
}
内边距
内边距指的是元素内容区与边框以内的空间 默认情况下width和height不包含padding的大小。可以使用padding属性来设置元素的内边距
例1：
padding：10px，5px，5px，10px（设置元素的上右下左的内边距）
例2：
padding:10px,10px,10px
(设置上，左右，下的内边距)
例3：
padding：10px，10px
(设置上下，左右的内边距)
例4：
padding：10px
（设置上下左右的内边距）
另外在CSS中还提供了padding-top、padding-right、padding-left、padding-bottom分别制定四个方向的内边距
p{
padding:10px,10px,10px,10px
}
边框
可以在元素周围创建边框，边框是元素可见框的最外部 可以同border属性来设置盒子的边框
- 边框和内边距一样，默认width和height不包括边框的宽度 ,也能使用border-top/left/right/bottom来指定边框
设置边框的宽度、颜色、样式
p{
border:1px red solid
}
- 边框的样式
没有 none； 点线 dotted； 虚线 dashed； 实线 solid ；双线 double； 脊线 ridge；凹线 inset； 凸线 outset
外边距
外边距是元素边框与周围元素相距的空间 使用margin属性设置外边距
- 用法与内边距，边框类似，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以margin：0 ，auto可以是元素居中
display
- 不能为行内元素设置width、height、margin-top和margin-bottom。因为他们只适用于块元素，这时我们可以通过修改display来修改元素的性质。
可选值：
block 设置元素为块元素
inline 设置元素为行内元素
inline-block 设置元素为行内块元素
none （隐藏元素元素将在页面内完全消失）
visibility
主要适用于元素是否可见
- 和display的区别：使用display设置为none时 ，元素彻底消失，使用visibility隐藏元素，隐藏后的元素在文档中所占的位置依然存在，不会被其他元素覆盖
可选值
visible 可见的
hidden 隐藏的
overflow
当相关标签里面的内容超出了样式的宽度和高度时，浏览器会让内容溢出盒子，
- 可以通过oxerflow来控制内容溢出的情况
可选值：
visible 默认值
scroll 添加滚动条
auto 据需要添加滚动条（比scroll更智能，能够自行判断）
hidden 隐藏超出盒子的内容
网友评论