CSS学习03

最新推荐文章于 2024-06-17 23:57:31 发布

端木奇影

最新推荐文章于 2024-06-17 23:57:31 发布

阅读量309

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33756795/article/details/50573398

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS定位
- 定位方式：要与定位属性配合使用。
- - position：元素定位方式，取值：statics、fixed、relative、absolute
  - - statice：静态定位（默认状态、不定位）
    - fixed：固定定位
    - relative：相对定位
    - absolute：绝对定位
  - 定位坐标：指定定位的元素，偏移目标元素多远的距离。
  - - left：定位元素，距离目标元素左边的距离。
    - top：定位元素，距离目标元素上边的距离。
    - right：定位元素，距离目标元素右边的距离。
    - bottom：定位元素，距离目标元素下边的距离。
- 固定定位，position:fixed;
- - 固定定位，是相对于浏览器窗口来进行的定位。
  - 固定定位，不占空间，层级要高于普通元素。它不会随着网页的滚动而滚动。
  - 固定定位，如果不指定定位坐标的话，固定定位元素的位置在原地不动。
  - 固定定位元素，一定是“块元素”，不管原来它是什么元素。
- 相对定位，position:relative;
- - 相对定位，是相对于“原来的自己”进行定位。
  - 相对定位，依然占据空间，层级高于普通元素。
  - 相对定位，如果不指定定位坐标的话，相对定位元素的位置在原地不动。
  - 相对定位，原来是行内元素，定位后依然是行内元素；原来是块元素，定位后还是块元素。
- 提示：相对定位和绝对定位，一般情况下是配合使用。
- 绝对定位，position:absolute;
- - 相对于祖先定位元素（相对定位或绝对定位），来进行的定位。
  - - 如果它的父元素没有进行任何定位的话，再往上找定位元素。
    - 如果一直找到<body>都没有找到定位元素的话，那就相对于<body>来进行定位。
  - 绝对定位元素，不占空间，层级要高于普通元素。
  - 绝对定位，如果不指定定位坐标的话，绝对定位元素的位置在原地不动。
  - 绝对定位元素，是一个“块元素”，不管原来它是什么元素。
  - 例如：
  - ```
  <pre name="code" class="css">.news {
      width: 600px; 
      border: 1px solid #444; 
      margin: 20px auto; 
      padding: 20px;
      position: relative;
    }
  .news .div1{
      width: 100px;
      height: 100px; 
      background: red;
      position: absolute ;  /*相对定位*/ 
      right: 50px; 
      bottom:50px;
    }
```

- 如何调整层叠顺序：z-index: 100; /*堆叠顺序，值越大越靠前排*/
HTML引入CSS的方式
- 嵌入式
- - 通过<style>标记，来引入CSS样式。
  - 语法格式：<style type="text/css"></style>
  - 提示：<style>中的CSS样式，只能给当前网页使用。
  - - 同一个网页中，<style>标记可以多次出现。
- 外联式
- - 通过<link>标记，来引入一个外部的CSS文件（.css），这样的话，可以实现公共的CSS代码被多个网页共享。
  - ```
  <linke rel="stylesheet" type="text/css" href="css/public.css">
```
- 常用属性：
- - rel：也就是引入的是什么类型的文件，取值：stylesheet.
  - type：内容类型。
  - href：引入的CSS文件地址。
- 提示：
- - <link>标记放在<head>标记中。
  - 同一个网页，可以使用多个<link>来链入多个外部样式文件。
- ```
<link href="css/my.css" rel="stylesheet" type="text/css" />
<pre name="code" class="css">body {
    font-size: 14px; 
    color: #444; 
    font-family: 黑体; 
    background: yellow; 
  } /*my.css文件内容*/
```
    在CSS文件中，不能出现HTML标记。全部都是CSS的属性样式。
  - 行内样式
  - - 每一个HTML标记，都有一些公共的属性：class、id、title、style。
    - HTML标记中的style属性的值，与CSS中样式一模一样。
    - 提示：
    - - 行内样式中，CSS代码不能写的太多；
      - 行内样式中，多个CSS属性不能换行，也就是一行写完。
      - 经常用于Javascript中。
  - 优先级：
  - - 行内样式>嵌入式>外链式

CSS表格属性

border-collapse:表格边框线合并，取值：collapse。
例如：

<table width="500" border="1" align="left" style="border-collapse:collapse">
   <tr>
    <td> </td>
    <td> </td>
    <td> </td>
   </tr>

盒子模型
- 我们可以把每一个HTML标记，都看成是一个“盒子”。
- 这个“盒子”有哪些特征：内容的height或width、border、padding、margin
- 上下左右都有的计算方式：
- - “盒子”的总宽度：内容的宽度+边框宽度*2+内填充*2（左右）+外边距*2（左右）
- 上下外边距合并问题——这是一种现象
- - 什么情况下？上下外边距会合并呢？
  - - 上下两个块元素，如果每一个元素都制定了四个外边距，那么上下相邻的那个外边距会发生合并的现象，合并后取其中较大的外边距。
    - 举例：
    - ```
    <pre name="code" class="css"><style type="text/css">
    .body {
        margin: 0; 
        padding: 0;
      }
    .div1 { 
        width: 200px; 
        height: 200px; 
        background-color: red; 
        margin: 50px;
      }
    .div2 {  
        width: 200px; 
        height: 200px; 
        background-color: blue; 
        margin: 50px;
      }
    </style>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
```
- 如果要实现上下两个<div>之间的距离为100px，该如何实现呢？
- - 上下两个<div>其中一个只指定margin-bottom:100px;而另一个<div>的margin-top:0px;
  - 可以在上下两个<div>中间，添加一个空的<div>，并给空<div>指定高度为100px，也可以实现