前端学习笔记6-CSS入门四

最新推荐文章于 2024-04-22 20:37:19 发布

JustDI-CM

最新推荐文章于 2024-04-22 20:37:19 发布

阅读量238

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/JustDI0209/article/details/104041286

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。

网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网

1.表格样式：

---border-collapse，控制边框合并

---border-spacing，控制边框间隔，单位px

---caption-side，控制表格标题位置，默认top，可选bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      table,th,td{border:1px solid gray;}
      #t2{border-collapse:collapse}
      #t3{border-spacing: 5px 10px}
      #t4{caption-side: bottom}
    </style>
</head>
<body>
    <table id="t1">
      <caption>默认边框</caption>
      <!--表头-->
      <thead>
      <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
      </tr>
      </thead>
      <!--表身-->
      <tbody>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tbody>
      <!--表脚-->
      <tfoot>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tfoot>
    </table>
    <hr/>
    <table id="t2">
      <caption>合并边框</caption>
      <!--表头-->
      <thead>
      <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
      </tr>
      </thead>
      <!--表身-->
      <tbody>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tbody>
      <!--表脚-->
      <tfoot>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tfoot>
    </table>
    <hr/>
    <table id="t3">
      <caption>间隔边框</caption>
      <!--表头-->
      <thead>
      <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
      </tr>
      </thead>
      <!--表身-->
      <tbody>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tbody>
      <!--表脚-->
      <tfoot>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tfoot>
    </table>
    <hr/>
    <table id="t4">
      <caption>标题在下</caption>
      <!--表头-->
      <thead>
      <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
      </tr>
      </thead>
      <!--表身-->
      <tbody>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tbody>
      <!--表脚-->
      <tfoot>
      <tr>
        <td>标准单元格1</td>
        <td>标准单元格2</td>
      </tr>
      </tfoot>
    </table>
</body>
</html>

效果展示：

2.盒子模型：

---width、height，控制宽高

---border，控制边框

---margin，控制外边距

---padding，控制内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    #d1,#d2,#d3{
      width: 200px;
      height: 100px;
      border: 1px solid red;
    }
    #d1{
      /*padding，控制外边框，可写4个值，代表上、右、下、左（顺时针）
      也可分开写padding-top、padding-left等分别赋值
      或者2个值，代表上下、左右*/
      /*如果有padding值和子元素，父元素会自动撑开*/
      padding-top: 10px;
      padding-left: 20px;
    }
    #d1 #d1son{
      width: 100px;
      height: 50px;
      border: 1px solid blue;
    }
    #d2{
      /*margin，控制外边框，可写4个值，代表上、右、下、左（顺时针）*/
      /*或者2个值，代表上下、左右*/
      margin: 10px 20px;
    }
  </style>
</head>
<body>
    <div id="d1">
      <div id="d1son"></div>
    </div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>
</html>

效果展示：

3.float，控制元素脱离文档流：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    /*定义父元素样式*/
    #father
    {
      width:400px;
      background-color:#0C6A9D;
      border:1px solid silver;
    }
    /*定义子元素样式*/
    #father div
    {
      padding:10px;
      margin:15px;
      border:2px dashed red;
      background-color:#FCD568;
    }
    /*定义文本样式*/
    #father p
    {
      margin:15px;
      border:2px dashed red;
      background-color:#FCD568;
    }
    #son1
    {
      /*son1的浮动方式设置为left，son1脱离文档流，靠左显示，长度由内容决定，不会占一行*/
      float: left;
    }
    #son2
    {
      /*son2的浮动方式设置为left，son1脱离文档流，靠左显示，长度由内容决定，不会占一行*/
      float: left;
    }
    #son3
    {
      /*son3的浮动方式设置为right，son1脱离文档流，靠右显示，长度由内容决定，不会占一行*/
      float: right;
    }
  </style>
</head>
<body>
    <div id="father">
      <div id="son1">box1</div>
      <div id="son2">box2</div>
      <div id="son3">box3</div>
      <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，</p>
    </div>
</body>
</html>

效果展示：

4.position，定位：

---fixed，固定定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置

---relative，相对定位，使用top、bottom、left和right这4个属性来设置元素相对初始位置的位置

---absolute，绝对定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器的位置，与fixed相比，absolute的元素脱离了文档流，是独立存在的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      div{
        width: 100px;
        height: 50px;
        border: 1px solid red;
        margin: 10px 20px;
      }
      #d2{
        position: relative;
        top: 10px;
        left: 20px;
      }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2">相对定位</div>
    <div id="d3"></div>
</body>
</html>

效果展示：

JustDI-CM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记6-CSS入门四

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网1.表格样式：---border-collapse，控制边框合并---border-spacing，控制边框间隔，单位px---captio...
复制链接

扫一扫