用css来设置div的样式

小编今天学习了怎样使用CSS来设置div的样式，下面就是小编今天总结出来的一些知识点啦！

css样式：具有层叠性和继承性

css样式有两种链接方式：

1.内联样式：就是在同一个网页内编写css样式和布局代码

2.外联式：创建一个css文件，并在其中编写css独立的样式，然后在将其和所需要应用它的HTML文件链接起来。

链接独立的css文件的方法：<link rel="stylesheet" type="text/css" href="css/wailian.css"/>（stylesheet:样式表   type="text/css"：类型为text/css）

                                                                      设置div的背景：

设置背景图片平铺方式：background-repeat: repeat;/background-repeat: no-repeat;

设置背景图片位置，可以设置成百分比，也可以是像素，还可以是位置名称：background-position:0 0 ;/background-position:center

设置div的背景色：background-color:black ;（在设置背景图片的同时也要设置背景颜色,背景图片显示的优先级要高于背景颜色,当图片显示不出来时可以显示背景颜色）

设置background连写的方法:background:图片 颜色 平铺方式 图片定位

                                                                         设置边距

设置外边距：

margin-top: 20px;

/*margin-right: 30px;

margin-bottom: 40px;

margin-left: 30px;*/

/*margin:20px;只有一个值，同时设置四个方向的值*/

/*margin:0 20px;两个值，第一个值是上下（x轴）,第二个值是左右（y轴）*/

/*margin:20px 30px 40px;三个值，三个值分别是上  左右  下*/

/*margin: 0 0 0 20px;四个值分别是:上  右  下  左*/

设置内边距：与设置外边距一样

padding-top: 20px;

padding-right: 30px;

padding-bottom: 40px;

padding-left: 30px;

padding:20px;只有一个值，同时设置四个方向的值*/

padding:0 20px;两个值，第一个值是上下（x轴）,第二个值是左右（y轴）*/

padding:20px 30px 40px;三个值，三个值分别是上  左右  下*/

padding: 0 0 0 20px;四个值分别是:上  右  下  左*/

padding和margin的区别:当盒子没有宽高时padding可以叠加到盒子的宽高中,而margin不行,除非盒子有内容

盒子正真的宽度=本身的宽度+左边距+右边距+左边框+右边框;

盒子正真的高度=本身的高度+上边距+下边距+上边框+下边框;

                                                                    div的塌陷现象

塌陷现象，问题出在父级标签

解决div塌陷现象的方法：

解决方法1.超出隐藏：overflow: hidden;

解决方法2.设置边框透明：border: 1px solid transparent;  (transparent:透明的)

以上就是小编今天学习总结出来的经验啦，希望对大家有所帮助！