小白学习css记录2盒模型

代码显示

body {    
  background: url(伪装学渣.jpg) no-repeat center center fixed;
    /*兼容浏览器版本*/
        -webkit-background-size: cover;
  -o-background-size: cover; 
  background-size: cover;   
  }
 
 p{
  font-family:STFangsong;
  line-height:1.6em;
  }
 p.guarantee{
  border-color:white;  /*设置边框颜色*/
  border-style:dashed;  /*设置边框样式为实线*/
  border-width:1px;  /*设置边框粗细为1px*/
  background-color:#a7cece;
  padding:25px;  /*设置内边距*/
  padding-left:50px;
  margin:30px;  /*设置外边距*/
  margin-right:300px;
  line-height:1.9em;  /*设置行高为默认的1.9倍*/
  font-family:STKaiti;
  font-style:italic;  /*设置字体斜体*/
  /*background-image:url(1.jpg);设置元素的背景图像*/
  }

基础内容

盒模型

1.什么是盒模型？

内容区：

内边距：

边框：

外边距：

2.怎样设置盒模型？

p.guarantee{
  border-color:black;  /*设置边框颜色*/
  border-style:solid;  /*设置边框样式为实线*/
  border-width:1px;  /*设置边框粗细为1px*/
  background-color:#a7cece;
  padding:25px;   /*设置内边距*/
  margin:30px;   /*设置外边距*/
  line-height:1.9em;  /*设置行高为默认的1.9倍*/
  font-family:STKaiti;
  font-style:italic;  /*设置字体斜体*/
  background-image:url(1.jpg);/*设置元素的背景图像*/
 }

background-image与< img >的区别

3.处理背景图像

background-image:url(image.jpg);

• 值可以是URL，也可以是相对路径，也可以是一个完整的URL（http://…）。
• 背景图像只能出现在内容区和内边距下。
• 默认如果图片大小不够，会重复，也就是会平铺。

background-repeat:no-repeat;

• no-repeat表示图像显示一次，不会重复。
• repeat-x表示图像只在水平方向重复。
• repeat-y表示图像只在垂直方向重复。
• inherit表示继承，按照父元素的设置来处理。
• repeat设置图像在水平和垂直方向上重复，这是默认行为。

background-position:top left;

可以设置图像的位置，可以按像素指定，也可以指定一个百分数，或者还可以直接使用关键字指定，如top、left、right、bottom、center。

4.处理内边距

padding:12px;/*设置四周的内边距*/
padding-left:30px;/*设置左内边距*/

注意：属性的顺序很重要，下面的属性会覆盖上面的属性。

5.处理外边距

margin:20px;/*处理四周的外边距*/
margin-right:250px;/*处理右外边距*/

6.处理边框

border-style属性可以控制边框的视觉样式。共有八种可用的边框样式，包括实线、虚线、脊线和槽线。
值：

• solid：实线
• dotted：虚线，看起来像一系列小点
• double：有两条线
• dashed：破折线
• groove：槽线，看起来就像页面中的一个槽，不过在书上很难看出来
• inset：内凹，看起来页面凹进去
• outset：外凸
• tidge：脊线，看起来像页面上一个凸起的山脊

border-width属性控制边框的宽度。可以使用关键字或像素指定边框宽度。

border-width:thin;
border-width:medium;
border-width:thick;
border-width:5px;

border-color属性控制边框的颜色。可以使用英文单词、16进制、rgb来表示颜色。

border-color:red;
border-color:rgb(100%,0%,0%);
border-color:#ff0000;

指定某一边的边框样式、宽度、颜色：
border-top-color、border-right-style、border-bottom-width、border-left-color

指定边框圆角：

border-radius:15px;/*指定四个圆角*/
border-top-right-radius:3em;/*边框半径的度量相对于元素字体的大小*/
border-bottom-left-radius:0px;