css的背景属性及盒模型

border:边框宽度 边框风格 边框颜色;
​​边框:border,网页中很多修饰性线条都是由边框来实现的。
边框宽度:border-width:
边框颜色:border-color
:边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线),也可以单独针对某一边
border-bottom:下边框 border-left:;左边框 border-right:;右边框 border-top:上边框
background 的背景属性:
1、背景颜色 background-color:
2、背景图片的设置 background-image:url(图片的路径)
3、背景图片平铺属性background-repeat 取值: :no-repeat/repeat/repeat-x/repeat-y
no-repeat 不平铺 repeat 平铺整个容器 repeat-x 平铺整个x轴 repeat-y 平铺整个y轴
4、背景图的位置 性background-position 取值: left/center/right 或(x y)也可以是负值
5、背景图的固定 性 background-attachment 取值:scroll(滚动)/fixed(固定)
区别: 背景图:进行网页渲染不占空间。 img导入图片:html结构,暂居空间。
盒模型:
padding用法: 1:padding是在盒子里面,在盒子与内容之间。
2:padding的作用:控制子元素在父元素里面的位置关系。
特点 3.padding会把盒子撑大。 如果想要保持原有的大小,需要在宽高的基础上减去padding值。
4. padding的值 不能为负值。 不会对背景图造成影响。
5. 如果一个盒子没有设置固定宽高,添加padding是不用减得。
:padding的设置特点:
一个值:四周都有 二个值时: 上下 左右 三个值时: 上 左右 下 四个值时: 上右下左 顺时针方向

发布了7 篇原创文章 · 获赞 0 · 访问量 46

猜你喜欢

转载自blog.csdn.net/lkzy12345/article/details/105059021