黑马程序员技术交流社区

标题: HTML+CSS笔记 [打印本页]

作者: 无幸长相依 时间: 2018-11-28 12:05
标题: HTML+CSS笔记
前端基础班的学习的收获，华丽的页面我做不出来，
笔记还是有写的，所以学习就是不断积累的过程。
1.网页的基本格式
<!doctype html>
<thml>
<head>
<title></title>
</head>

<body></body>
</html>

其中：
html标签--》父标签。
head标签--》英文单词的意思是头部，在其中可以写title标签、meta标签、link标签、
body标签--》存放页面所显示的信息。
ttitle标签--》显示标题信息。
<!doctype html >:告诉浏览器该网页使用什么格式的代码，并且该段代码是HTML5特有的。

注意：!doctype html 注意事项
a. ！必须写
b. ！和doctype 中间不能有空格

基本格式的注意事项
a. 所有标签都是成对出现的，有开始(<html>)有结束(</html>)
b.所有标签都是由"<"和">"包裹着的

编写代码时的重点：
一定要注意层次关系，注意格式。

2.标题标签
<h1></h1>
<<---->>
<h2></h2>
<<---->>
<h3></h3>
<<---->>
<h4></h4>
<<---->>
<h5></h5>
<<---->>
<h6></h6>
注意：
a.标题标签都属于双标签（有开始，有结束）

b.都是成双成对出现

c.编写代码的时候一定要注意结束标签中含有一个“/”
例如：<h1></h1>中的</h1>
d.其中<h1></h1>标签所显示的文字最大，<h6></h6>标签所显示的文字最小。

3.段落标签(p)
<p></p>
例如：
<p>你好</p>
注意：
      段落标签属于块元素
      块元素的特性是所显示的文字内容独占一行。
4.strong标签
使所修饰的字体加粗
5.em标签
使所修饰的字体变为斜体

注意：strong标签和em标签都不是块元素

6.换行<br/>
使文字换行
7.水平线<hr/>
在页面上显示一条水平线

注意：
a.<br/>和<hr/>都是单标签
b.<br/>和<hr/>都是块元素
c.从规范的角度来说每个单标签都会有一个"/",例如<hr/>

8.特殊符号
a.空格
   半角下的空格，在编码时无论输入多少，浏览器最后解析为一个。
   全角下的空格，在编码时输入多少，则浏览器就会解析多少。
    
   其中：
         半角下的空格和全角下的空格，在项目开发中不常用，所以了解即可。
          在项目开发中常用，该符号的易错点是：
         1)分号丢失
         2)&符号写成$符号

b.大于号(>)
>
c.小于号(<)
<
d.双引号("")
   "
e.版权号
   ©

9.img图片标签
语法：
<img src="图片路径" alt=“替换文字” title=“所显示的文字” width="宽度"  height="高度"/>
注意:
  a.img属于单标签
  b.img不是块元素
  c.img标签中的属性
src:图片路径(在项目开发中绝大多数都是相对路径)
alt:当src属性中的图片路径出现问题时，该属性值就会出现
title：当鼠标悬浮在该图片上时，该属性就会显示
width：设置图片宽度
height:设置图片高度

注意：在真实开发中图片的高度和宽度，都是用CSS样式或者脚本进行控制，不推荐在标签中直接设置图片的高度和宽度。

10.超链接
   语法：<a href=""></a>
<a href="跳转的路径地址" target="打开的方式">文字内容</a>
注意：
a.其中href这个属性必须有，target这个属性可有可无
b.target属性有两个属性值 _self    _blank
   其中_self代表的是在本浏览器窗口打开所链接的网页
      _blank代表的是在新的浏览器窗口打开链接网页
c.a标签有两个功能
页面与页面之间的跳转
例如:
<a herf="demo2.html"  target="_blank">跳转</a>
功能性链接
<a href="mailto:邮箱地址">联系我</a>

<a href="tencent://message/?uin=qq号&Site=&Menu-=yes">联系客服</a>

锚点：
   同一页面
<a name="top">top</a>
<a href="#top">回到顶部</a>
   不同页面
例如：
demo1.html
<a name="nihao">nihao</a>
demo2.html
<a href="demo.html#nihao">访问demo1.html中的nihao</a>

注意事项：
a.从页面中如果想实现锚链接，必须有一个a标签为<a name="所创名字">文字内容</a>这种格式
   这么做是设置锚点，然后通过<a href="#名字">文字内容</a>
   这种格式来跳转到所设置的锚点。其中在href中#是不能缺少的
b.在不同页面中，如果想实现锚链接，其中一个页面必须设置锚点链接，另一个页面必须使用相应的锚点名才能进行跳转。
例如：
   demo1.html
<a name="nihao">nihao</a>
      demo2.html
         <a href="demo.html#nihao">访问demo1.html中的nihao</a>

重点：
想实现不同页面同锚点跳转必须在href中添加锚点所对应的页面名，然后再后面添加。#锚点名

11.无序列表ul
<ul>
      <li></li>

      <li></li>

      <li></li>
</ul>

例如：
<ul>
      <li>好好学习</li>
      <li>天天向上</li>
      <li>java</li>
      <li>C#</li>
      <li>C++</li>
      <li>UIUE</li>
</ul>

注意事项：
a.如果想使用ul无序列表，必须先声明ul无序列表
b.ul中有一个子项li该标签可以任意多，但是每一个li标签都是块级元素，独占一行。
c.在li中可以添加任何标签，但是添加的标签要对你所设置的页面无影响，
d.ul的默认样式是在每一个li标签前都有一个实心小圆点。
e.ul无序列表可以适用在导航栏或侧边新闻中。

12.有序列表
<ol>
      <li>3</li>

      <li>2</li>

      <li>1</li>
</ol>
例如:
<ol>
      <li>好好学习</li>
      <li>天天向上</li>
      <li>java</li>
</ol>

注意
      a.有序列表他的默认样式，li前是阿拉伯数字，即1.2.3...
      b.应用场合
         可用在调查问卷
         可用在试卷
         可用在一切有顺序的场合中

13.定义列表
      <dl>
         <dt></dt>
         <dd></dd>
      </dl>

例如：
      <dl>
            <dt>水果</dt>
            <dd>苹果</dd>
            <dd>香蕉/dd>
            <dt>服装</dt>
            <dd>男装</dd>
            <dd>女装</dd>
      </dl>

注意：
a.dl是定义列表，其中包含两个子项，分别是dt、dd。
b.dt代表一个种类的总称,dd代表的是dt所示的内容的子项。
      例如：
                     <dt>服装</dt> ------>>标题性的文字
                     <dd>男装</dd> ------>>解释标题的文字或是其子类
                     <dd>女装</dd>
c.dl列表的默认样式是dt所修饰的文字与dd所修饰的文字有一定的格式间隔。
      服装
         男装
         女装

d.应用场合
      可用于带有标题的问题
      也可用于代表标题解释性的文字
      也可用于图文并茂的形式

14.表格
基本语法
      <table>
         <tr>
            <td></td>
            <td></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
         ....

      </table>

例如：

      <table>

                  <tr>
                     <td>姓名</td>
                     <td>成绩</td>
                  </tr>
                  <tr>
                     <td>战三</td>
                     <td>100</td>
                  </tr>
                  <tr>
                     <td>李四</td>
                     <td>100</td>
                  </tr>

            </table>

注意事项：
      a.table 标签是制作表哥类一个多用标签
      b.应用场合
         可用在页面上的简单布局上
         可用在制作成绩表格的数据表上
      c.table标签包含三个子标签
         分别是tr、th、td、
         其中tr代表的是行，td代表的是列
         th可用于做标题（因为在网页的简单布局之中，不会用到th，所以标签不常用）
      d.table中使用Border进行设置表格的表据
      e.table中有两个较重要的属性分别是colspan和rowspan.

         其中colspan代表可跨列
            rowspan代表可跨行



15.视频标签（video）
语法：
      <video src="引入视频文件的路径" controls autoplay> </video>
其中
      autoplay:自动播放属性
      controls：控制控件
      src:引入的视频文件的路径（可以是绝对路径，也可以是先对路径，推荐使用相对路径）
注意：
      因为浏览器所支持的视频文件的格式不同，所以当用户使用所制作的网站时，不清楚用户到底使用的到底是那种浏览器，所以使用
      source标签解决这种问题。如下所示：
      <video autoplay>
         <source src="video/video.mp4" type="video/mp4">
         <source src="video/video.webm" type="video/webm">
         您的浏览器不适应video标签
      </video>
其中的type类型的value值一定要和引入的视频文件的格式相匹配

16.audio音频标签
语音：
      <audio src="引入音频文件的路径" autioplay controls> </audio>
      其中
      src:引入资源文件的路径

      解决浏览器兼容所引入的音频文件的解决方案

         <audio controls>

            <audio src="audio/music.ogg"  type="audio/ogg" />
            <audio src="audio/music.mp3" type="audio/mpeg"/>
            您的浏览器不支持audio标签
         </audio>
17.页面结构拆分
   a.header       表示页面的头部
   b.footer       表示页面的尾部
   c.section    表示页面的主体部分
   d.article    表示页面的文章内容
   e.aside       表示页面中的侧边导航
   f.nav          表示页面中的辅助侧边导航

注意：
   这六个标签没有默认样式，提高页面的可读性和层次性

18.内联框架(iframe)
      <iframe src="地址或是路径" name="" id=""  height=""  width=""></iframe>
例如：
      <iframe src="didi.html"  name="mianFrame" width="600" height="600">
      </iframe>
如果用户点击按钮或者是超链接的时候，在iframe内联框架中显示相应的网页
解决方案
      <iframe src="" name="Frame" width="500" height="500"></iframe>
      <a href="didi.html" target="Frame">点击显示学生成绩</a>
注意：
      a.如果想实现这种效果iframe的name名必须是唯一，否则没有意义。
      b.超链接中target属性值必须是iframe框架中的name名
      c.在一个网页中，建议不过多使用该标签，因为会影响用户的体验度，也会影响浏览器加载页面的时间
      d.如果想访问线上的网站，在网站地址前必须加上http,否则该网页显示不出来

19.form表单
语法：
<form action="所提交的地址" method="所提交的方式">
      <input type="属性值" name="" id="" value=""/>
</form>

例如：
<form action="index.html" method="po//2st">
      姓名:<input type="text" name="username" id="username" value=""/><be/>
      密码:<input type="password" name="password" id="password" value=""/><br/>
      <input type="submil" value="提交">
      <input type="reset"  value="重置">

      注意事项

      a.form表单中的form单词不能写错，否则该表单提交不了
      b.action提交的地址必须存在，否则无效
      c.method提交方式必须和后台的提交方式一样（跳方式和后台进行商讨）
      d.form表单仅有一种子项也就是input标签
      e.在input标签中必须存放在type属性，其属性值有很多包括text、password、button等

19.1单选框
语法：
      <input type="radio" name="sex" value="男" checked/>男
         <input type="radio" name="sex" value="女"/>女<br/>
注意：
      a.name名必须一致
      b.value属性中必须有值
      c.checked是默认选中的意思

19.2复选框
语法：
      <input type="checkbox" name="inters" value="游泳"/>游泳
      <input type="checkbox" name="inters" value="打篮球" checked/>打篮球
      <input type="checkbox" name="inters" value="跑步"/>跑步<br/>

注意：
      a.name名必须一致
      b.value属性中必须有值
      c.checked是默认选中的意思

type的属性值

-----------------------------------------------------------------------------------------
20.初识CSS样式
语法：
      选择器｛
         声明1;
         声明2;
         .....
      ｝

例如：
      h1{
         font-size:12px;
      }

注意：
   a.选择器一般为id选择器、class选择器、标签选择器、后代选择器、
   b.在选择器后面必须有一对大括号
   c.每写完一组属性时，必须在后面加上分号（;）
   d.将css样式写在<style>标签中
         语法：
            <style type="text/css">
            h1{
                  font-size:12px;

                  }

            </style>
            其中style type中 text/css必须写

21.导入CSS样式的方法
1）行内样式
      语法：
         <h1 style="color:red;">行内样式</h1>

      注意:
         其中：
         a.style是以标签的属性出现
         b.style所写的属性值必须用引号""括起来
         c.所写的属性值后面必须有分号";"
         d.可以写多个属性值
            例如：
            <p style="color:red;font-size:15px;">多个属性值</p>
2)内部样式
      语法：
         <style type="text/css">
            选择器｛
                  声明1；
                  声明2；
                     ...
                  ｝
         </style>
      注意:
         a.该写法必须写在<head></head>标签中
         b.这时的style是以标签的形式出现

3）外部样式
         a.链接样式表
      语法：
         <link href="链接地址路径" rel="stylesheet" type="text/css"/>
      注意：
         该标签中必须含有这三个属性，href,rel,type
         其中
         href:链接的地址
         rel：固定写法
         type:必须为text/css

         当浏览器先加载link标签所导入的css样式表，然后再解析加载html结构
      例如：
         <link href="css/style/.css" rel="stylesheet" type="text/css"/>
         b.导入样式表
      语法：
         @import url("导入的地址")
      例如：
         @import url("css/style.css")
         注意：
            a.其中的@符号不能丢
            b.import单词不能写错，url后一定要在""中写入导入文件的地址

22.选择器
1)id选择器
语法：
      #id名{
         声明1;
         声明2;
         .....
      }
      注意：
         a.当使用该选择器的时候，要确保页面中含有该名字的id，否则无效。
      例如：
         在页面中：
            <h1 id="myh1"> 标题</h1>
         使用选择器的时候：
            #myh1{
               color:red;
                  }
         b.其中"#"必须写，因为#代表id选择器
         c.在页面中id名，仅能有一个

2)类选择器
语法：
      类名{
         声明1:
         声明2:
         ...
      }
      例如：
         在页面中
         <p class=myp>班级</p>
         <p class=myp>姓名</p>
         <p class=myp>学号</p>
         <p class=myp>身高</p>
         使用css样式：
         . myp{
            color:red;
            font-size:56px;
         }
      其中：
         a."."不能缺少，因为它代表着类选择器
         b.在页面中class类名，可以有多个
            在命名一定要注意代表的语义性和可读性

3)标签选择器
   语法：
      标签名{
         声明1;
         声明2;
         ....
      }
      注意：
         a.其中标签名可以为p、h1-h6、hr、br、div、...
            所有的标签都可以使用标签选择器
         b.因为标签选择器的范围最大，所以优先级最低
            （对于id选择器和类选择器来说）
   注意：
      这三中选择器的优先级为：
         id选择器>类选择器>标签选择器

23.层次选择器
语法：
      选择器1 选择器2｛
         声明1；
         声明2；
         .....
      ｝

例如：
   ul li{
      color:red;
      font-size:25px;

   }
注意事项：
      a.选择器1 和选择器2 必须是包含关系，且选择器1 包含选择器2
      也就是说选择器2是选择器1的子元素
例如：
      <ul>
         <li>
               <ol>
                  <li></li>
               </ol>
            </li>
            <li>
                  <p>好奥学习</p>
         </li>
      </ul>

      b.选择器1 和选择器2 中间必须有一个空格
2）子选择器
      语法：
         选择器1>选择器2{
         声明1;
         ....
         声明2;
         ....
         }
例如：
      <ul>
      <li></li>
      <li>
            <p>好好学习</p>
      </li>
      </ul>
      css样式：
      ul>li{
      color：red;

      }
注意事项：
      a.选择器是选择的直接子元素
      b.选择器1和选择器2之间必须有">"

3)相邻兄弟选择器
   语法：
      选择器1+选择器2{
         声明1;
         ...
         声明2;
         ...
      }
例如：
      页面上：
         <ol>
            <li>1</li>
            <li id="myli">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
         </ol>
      css样式：
         #myli+li{
         color:red;
         }

代表选择相邻的兄弟元素
      注意：
         a.选择器1 和选择器2 之间必须用"+"进行连接
         b.该选择器的意思是:选择其后的相邻的兄弟元素与该元素和所选择的元素平级

4)通用兄弟选择器
      语法：
      选择器1~选择器2{
         声明1；
         ...
         声明2；
         ...
      }
      例如：
      在页面上：
         <ul>
            <li>好好<li>
            <li>学习<li>
            <li id="myli">天天<li>
            <li>向上<li>
            <li>振兴<li>
            <li>中华<li>
         </ul>
      css样式：
      #myli~li{
         color:red;
      }
      代表着选择所有和#myli标签同级和其后的兄弟li标签
      注意：
      a.选择器1 和选择器2 之间必须用"~"链接
      b.选择的是选择器1其后的兄弟标签

24.结构伪类选择器
1)E:first-child
   代表着：在父元素中匹配第一个元素元素E
   注意：
      a.如果不强调父元素是谁，默认是body
   例如：
      在页面上：
      <div>
         <p>第一个孩子</p>
         <p>第二个孩子</p>
      </div>
   在css样式表中：
   p:first-child{
   color:red;
   }
      如果这样写的话，当浏览器运行时，文字“第一个孩子”的字体颜色会变成红色
      这也就是说第一个p标签被选中

2)E:last-child
      含义：选择父元素中的最后一个子元素元素E
      例如：
      在页面中:
      <div>
            <p>第一个孩子</p>
            <p>第二个孩子</p>
      </div>
      在css样式中
      p:last-child{
         color:red;
      }
      当浏览器运行的时候，最后一个<p>标签将会被选中

3)在父级元素中元素E,匹配第n个元素F
      例如：
         <div>
            <h1>天天向上 </h1>
            <p>好好学习</p>
            <p>振兴中华</p>

         </div>
      在css样式中
         div p：nth-child(2){
            color:red;
         }
      其中n可以为1，2，3...
      也可以为even(偶数)、odd(奇数)
4)E:first-of-type
   代表着：在父级元素中找到第一个类型为元素E的元素
   例如：
   <div>
         <h1>天天向上 </h1>
         <p>好好学习</p>
         <p>振兴中华</p>

   </div>
   在css样式中
         div p：first-of-type(2){
         color:red;
         }
代表着：在div标签中第一个类型为P标签的标签将会被选中

5)E：last-of-type
   代表着：
         在父元素中匹配最后一个指定类型的元素E

6)E F:nth-of-type
   代表着：在父元素E中匹配第n个指定类型的元素F
   例如：
         在网页中：
         <div>
            <p>好好学习</p>
            <p>天天向上</p>
            <h1>振兴中华</h1>
            <h1>从我做起</h1>
         </div>
   在css样式中：
   div p:nth-of-type(2){
         color:red;
   }
   代表着：第二个p标签将会被选中

注意：
      nth-child(n)和nth-of-type(n)的区别
      nth-chili(n):在父级元素中，从第一个元素开始查找，不看类型
      nth-of-type(n):在父级元素中，先看类型，然后再找位置

25.属性选择器
1)E[attr]
其中E代表着元素
      attr代表着属性
例子：
      在页面中：
   <p>好好学习</p>
   <p name="myp">天天向上</p>
   在css样式中：
   p[name]{

   color:red;

   }
      也就是含有name属性的P标签会被选
2)E[attr=val]
   其中：val代表着属性值
   例如：
      在页面中：
      <p>好好学习</p>
      <p name="myp">天天向上</p>
   在css样式中：
   p[name=myp]{

      color:red;

   }
      在这里将会选中含有name属性并且name属性为myp的p标签
3)E[attr^=val]
      其中“^”代表着以什么字符开头
      例如：
         在页面中：
         <p>好好学习</p>
         <p name="myp">天天向上</p>
      在css样式中：
            p[name^=my]{

            color:red;

            }
      如果浏览器运行后，以my字符开头的name属性值的p标签，被选中
4)E[attr$=val]
      代表着：
         在元素E中，含有属性attr并且该属性值以val结尾的E元素

      例如：
                  在页面中：
                  <p>好好学习</p>
                  <p name="myp">天天向上</p>
            在css样式中：
                  p[name$=y]{

                     color:red;

                  }
5)E[attr*=val]
      代表着：
         在含有属性attr并且该属性值包含val字符串的E元素

         例如：
            在页面中：
            <p>好好学习</p>
            <p name="mypffffee">天天向上</p>
         在css样式中：
            p[name*=ff]{

                  color:red;

                  }

26.字体样式
1)font-family属性
      设置字体的类型
      例如
      body{font-family: Times,"Times New Roman","楷体";}
      其中：
      当用户访问你的页面的时候，如果没有第一个字体样式，就会自动选择第二个，如果
      第二个还没有就会选择第三个，第三个没有就选择使用浏览器默认的字体。
2)font-size属性
      设置字体大小
      如：
      p{
         font-size:56px;
      }
      注意：
      em=16px;

3)font-style属性
      常用值：normal、italic
      其中：
      normal---->正常字体
      italic---->斜体==》等同于标签<em></em>
4)font-weight属性：设置字体粗细
常用值：normal、bold、lighter、100-900
      其中：400等同于normal、700等同于bold

      其中：
      normal-->正常字体粗细
      bold  -->加粗
      bolder-->更粗
      lighter-->最细
      100是最细
      900是最粗

5)font属性
      字体属性的顺序：字体风格——》字体粗细——》字体大小——》字体类型

27.文本属性
a.colors:设置文本的颜色
   属性值可以为
      RGB:其中R代表着红色、G代表着绿色、B代表着蓝色
      RGBA:A代表着透明度，取值0-1
      具体的颜色
b.text-align:对齐方式
   属性值为：
      center
      left
      right

c.text-indent:首行缩进
      一般取值为像素（px）

d.line-height:设置文件的行高
      常取值像素（px）

e.text-decoratin:设置文本的装饰
      一般取值：
      none:无样式
      overline：上划线
      text-decoration: none;

      ：下划线
      line-through:删除线

f.vertical-align:垂直对齐
      一般取值：
      top    :顶部对齐
      middle  :中部对齐
      bottom  :底部对齐

28.文本阴影
text-shadow
语法：
text-shadow:阴影颜色 x轴位移 Y轴位移  模糊半径
例如：
text-shadow:red 12px 23px 12px;

29.超链接伪类：
语法：
   标签名：伪类名｛
   声明1:
   ....
   声明n:
   ....
   ｝
1)a：link 当访问前超链接的属性
      例如：
      a:link{
         color:red
         font-size:50px;
      }
2)a:visited 单击访问后的超链接样式
      例如：
      a:visited{
         font-size:60px;
      }
3)a:hover 当鼠标悬浮在超链接时，超链接的样式
      例如：
      a:hover{
         font-size:20px;
      }
4)a:active 当鼠标点击未释放的超链接样式
      例如：
      a:active{
         font-size:20px;
      }

4)背景定位
   background-position属性
   属性值：
   a.像素（px）
   Xpos Ypos
   其中Xpos表示水平位移
   Ypos表示垂直位移
   例如：background-position:12px 12px;

   b.百分比
      X% Y%
      使用百分比表示背景的位置
      例子：
      background-position:20% 30%；
      c.方向的关键字
      水平方向
      legt center right
      垂直方向
      top center bottom
      例如：
      background-position:left center:

5)background属性
   语法：
   background:背景颜色背景图像背景定位背景是否重复；
   例如：
   background:red url("img/img1.png") 20px 50px repeat-y;
   注意事项：
   当初学者学习背景样式时不建议直接使用backround属性，因为属性值需要添加多重值，每个值代表的意思不同，
   推荐当熟练掌握背景样式的设置后，在使用这种方式，这种方式减少代码的数据量

6)背景尺寸
   语法：
   background-size:属性值；
   属性值：
   auto    :默认值，使用图片的时候保持原样
   百分比    :当使用百分比时，不是相对于背景尺寸的大小来计算，而是根据对于元素宽度来计算的
   cover    :整个背景图片填充了整个元素
   contain :让背景图片保持本身的比例，将背景图片缩放到宽度或高度正好适应所定义的背景区域

30.)列表样式
1）list-style-type
      属性值：
      none:无标记符号
      disc:实心圆（默认样式）
      circle:空心圆
      square:实心正方形
      decimal:数字

例如：
      list-style-type:none;    //无标记符号
      list-style-type:disc;    //设置为实心圆
      list-style-type:circle;    //设置成空心圆
      list-style-type:square;    //设置成实心正方形
      list-style-type:decimal; //设置成数字

2)list-style-imege设置图片
      语法：
      list-style-image:url(图片的地址)：
      注意：
         图片的地址可以用双引号括上，也可以不用。
         但是根据的代码的标准，必须使用双引号

      例如：
         list-style-image:url("../img/img.png");
         其中“../”代表着上一级菜单

31.背景图片
1)background-color设置背景颜色
属性值：
可以是固定的颜色单词
可以是16进制
例如：
      background-color:red;
      background-color:#df5647;
2)background-image属性
语法：
background-image:url(图片路径)
例子：
background-image:url("../img/img3.png");
3)background-repeat属性
设置背景图片的重复方式
属性值：
      repeat:按照水平和垂直两个方向进行平铺
      no-repeat:不平铺，图片仅显示一次
      repeat-x:在x轴进行平铺
      repeat-y:在y轴进行平铺

32.边框颜色
语法：
border-color:属性值
其中属性值可以为
      一个值：代表着所有边框都是一个颜色
      例如：
         border-color:red;
         所有边框都为红色

      两个值：代表着上下边框一个颜色，左右边框一个颜色
      例如：
         border-color:red blue;
         代表着上下边框为红色，左右边框为蓝色

      三个值：上边框一个颜色，下边框一个颜色，左右边框一个颜色
      例如：
         border-color:#123d #efdgsd #kgddf;
         代表着上边框为#123d 下边框为#efdgsd 左右边框为kgddf

      四个之：上边框一个颜色，右边框一个颜色，下边框一个颜色，左边框一个颜色
      例如：
         border-color:#123d #efdgsd #kgddf red;
         代表着上边框为#123d 右边框为#efdgsd 下边框为kgddf 左边框为red

当分别设置上下左右边框时
      border-top-color:red;--->设置上边框颜色
      border-bottom-color:red;--->设置下边框颜色
      border-left-color:red;--->设置左边框颜色
      border-right-color:red;--->设置右边框颜色

33.设置边框的粗细
语法：
      border-width：属性值
      属性值为：
      thin       --->细边框
      medium    --->中等粗细
      thick    --->粗边框
      像素值    --->设置比边框的像素值

例如：
      border-width:htin;
      border-width:medium;
      border-width:thick;
      border-width:20px;

注意：
      a.属性值中thin、medium、thick这些值不常用了解即可，其中，像素值是在项目开发中非常常见的
      b.也可以单独设置边框的粗细顺序为：上右下左和设置边框颜色一样

34.边框的类型
语法：
      border-style:属性值：
      属性值可为：
         none
         hidden
         dotted    --->点状
         dashed    --->虚线
         solid    --->实线
         doube    --->双实线

注意：也可以单独设置边框的上下左右边框，设置的顺序和设置边框颜色的顺序一样

扩展：
同时设置边框的颜色、类型、粗细
   border:粗细类型颜色：
例如：
      border：10px solid red;

35.外边距（margin）
语法：
      margin:属性值
      属性值：
      一个参数：---》全部
      两个参数：---》上下，左右
      三个参数：--->上，左右，下
      四个参数：---》上右下左

分别设置：
margin-top:属性值
margin-bottom:属性值
margin-left:属性值
margin-right:属性值

例子：
margin:10px;
margin:20px 40px;
margin:20px 30px 40px;
margin:20px 30px 40px 50px;

   margin-top:20px;
   margin-bottom:30px;
   margin-left:40px;
   margin-right:50px;

   扩展：
      可以使用margin进行元素的居中
      margin：0px auto;

36.内边距（内填充）
语法：
      padding:属性值

例如：
      padding：10px;
      padding:20px 30px;
      padding:20px 30px 40px;
      padding:20px 30px 40px 50px;

注意：
      他和margin外边距类似，都可以单独的设置上下左右的值，
      也可以利用简写的方式通过参数值的数量来设置内边距和外边距

      padding-top:20px;
      padding-bottom:30px;
      padding-left:40px;
      padding-right:50px;

扩展：
      设置盒子的模式
      语法：
      box-sizing:属性值；
      content-box --->默认值，盒子的总尺度
      border-bxo  --->盒子的宽度或者是等于元素内容的宽度或者是高度
      inherit    --->不常用代表元素继承父元素的盒子模式

注意：盒子的总尺度=margin(外边距)+padding(内边距)+border(边框)+文本内容

?

40.定位元素
position:属性值：
      relative：相对定位，相对于原来的位子进行定位。
      并且原来的位子将会被保留：
         设置为相对定位的元素，他还存在于标准文档流中，其父级元素和相邻的元素没有任何影响
         例如：
            position:relative：
               top：10px;
               left:-30px;

         或者：
            position:relative;
            top:-10px;
            left:-0px;
扩展：
问题：如何使用块级元素中的字体垂直居中？
将行高line-height：的值设置和高度相等即可
解决方案：
例如: height：100px;
      line-height:100px;

absolute:绝对定位
注意点：
      a.当元素设置成绝对定位元素时，如果父元素是定位元素，就会根据父元素进行定位，如果父元素不是定位元素
      就会根据浏览器左上角（0.0）点进行定位
         例如：
         如果想让子元素根据父元素进行定位的话，需要做的是
         将父元素设置为定位元素，利用position：relative;进行设置，
         子元素根据绝对定位会按照父级的位子进行偏移、
         当父元素为#mudiv1，子元素是#mydiv-div1
         #mydiv1{
            position：relative;
         }
         #mydiv-div1{
            position:absolute;
            top:20px;
            left:20px;
         }
      b.绝对定位的元素发生偏移，原来的位子不会被保留
      c.设置绝对定位的元素，不会影响到其他定位的元素
      d.绝对定位的偏移量可以是，top、bottom、left、right、
         例如：
         position:absolute;
         top:20px;
         right:30px;

fixed:固定定位
      语法：
      position:fixed;
注意点：
      a.该属性是根据浏览器窗口定位的
      b.多用于侧边导航、小广告、

扩展：
      a.改变定位元素的层次性关系
      z-index:数值：
      默认为z-index:0;
      该数值可以为任意正整数

      b.改变元素的透明度
      opacity:数值；
      注意：该数值是从0到1的，可以为小数
      如：opacity:0.5;

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2