iOS div样式 div样式设计

转载

mob64ca14068b0b 2024-08-22 14:00:39

文章标签 iOS div样式 css 边距背景图片 文章分类 iOS 移动开发

小编今天学习了怎样使用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不行,除非盒子有内容

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