css盒子样式有哪些,盒子css样式

盒子模型

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 隐藏超出盒子的内容