1. 技术文章
  2. CSS样式属性

CSS样式属性

由 浪尽此生 提交于 2019-12-31 12:38:26

CSS属性

  • 属性1 宽和高
    • width属性可以为元素设置宽度
    • height属性可以为元素设置高度

    PS：只有块级标签才可以设置宽度，内联标签的宽度由内容决定。

  • 属性2 字体属性

    • 文字字体：font-family可以存放多种字体，如果浏览器不支持第一种字体会自动尝试下一种，浏览器会使用它能识别的第一种字体。如果到最后都没有浏览器支持的字体，那么就会使用浏览器的默认字体显示。

      body {
    font-family: "Microsoft Yahei", "微软雅黑", "Arial"
}

    • 字体大小：font-size，可以设置为数字px形式和inherit，设置为inherit表示继承父元素的字体大小值。

    • 字重：font-weight用来设置字体的字重（粗细）。

      值 描述
      normal 默认值，标准粗细
      bold 粗体
      bolder 更粗
      lighter 更细
      100~900 设置具体粗细，400等同于normal，而700等同于bold
      inherit 继承父元素字体的粗细值

    • 字体颜色：color用于设置字体的颜色，颜色可以通过三种形式指定：

      1. 十六进制：如：#FF000 (前两位表示Red，中间两位表示Green，最后两位表示Blue)
      2. 一个RGB值： 如： RGB(255,0,0) (第一个数字表示Red，第二个数字表示Green，第三个数字表示Blue)
      3. 颜色的名称： 如：red

      PS：rgba形式表示，可以设置第四个值为色彩透明度范围是：0.0-1.0

    • 文本属性连写：

      /* 格式：font: font-style font-weight  font-size/line-height  font-family; */
font: italic 700 50px/40px 微软雅黑;

      PS：font:后边写属性的值。一定按照书写顺序。
      PS：文本属性连写中文字大小和字体为必写项。

  • 属性3 文字属性

    • 文字对齐：text-align属性规定元素中的文本的水平对齐方式。

      值 描述
      left 左边对齐 默认值
      right 右对齐
      center 居中对齐
      justify 两端对齐

    • 文字装饰：text-decoration给文字添加特殊效果

      值 描述
      none 默认。定义标准的文本。
      underline 定义文本下的一条线。
      overline 定义文本上的一条线。
      line-through 定义穿过文本下的一条线。
      inherit 继承父元素的text-decoration属性的值。

    PS：应用场景：为去掉a标签的下划线

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <style>
        a {
            text-decoration: none;
        }
        a:active{
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <a href="https://www.baidu.com">百度</a>
</body>
</html>

    • 首行缩进text-indent将段落的第一行缩进指定像素

      p {
    text-indent: 32px
}
  • 属性4 背景属性
    /*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

支持简写：
/*格式：background-color background-image background-repeat background-position*/
background:#ffffff url('1.png') no-repeat right top;
    • PS：雪碧图：为了减小网页的请求图片的次数，将很多小图片放到一个图片上，通过背景的background-position：像素的方式切换图片。
    • PS：背景固定：background-attachment: fixed;滚轮背景不动
  • 属性5 边框属性
    Border-style:  solid   /*实线*/
                    dotted  /*点线*/
                    dashed  /*虚线*/
                        none /*无边框*/
Border-color   /*边框颜色*/
Border-width   /*边框粗细*/

    • PS1：可以在border和style/color/width之间加入top/left/right/bottom准确的设置边框的哪一边。

    • 边框属性的简写

      border(-top/left/right/bottom): 1px solid #eee

      PS:简写没有顺序要求，但是线型必写。

    • 圆脚边框border-radius

      • 将该属性设置为50%就可以把一个方形的盒子设置为圆形

        div>img {
    border-radius: 50%
}

    • 边框合并border-collapse: collapse

      • 作用：表格边框转化为细线边框

      • 原表现形式

        <head>
    <style>
      table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>学号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abner</td>
            <td>111</td>
        </tr>
        <tr>
            <td>marry</td>
            <td>222</td>
        </tr>
    </tbody>
</table>
</body>
    表现形式1:![深度截图_选择区域_20181011154721](/home/abner/图片/深度截图_选择区域_20181011154721.png)

  - 细线表格

    ```html
    <head>
        <style>
            table {
                border-collapse: collapse;
            }
            table, th, td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>abner</td>
                <td>111</td>
            </tr>
            <tr>
                <td>marry</td>
                <td>222</td>
            </tr>
        </tbody>
    </table>
    </body>
    ```

    表现形式2：![深度截图_选择区域_20181011155205](/home/abner/图片/深度截图_选择区域_20181011155205.png)

  - PS:去除轮廓线`outline-style: none`
  • 属性6 display属性

    • 作用：用于控制HTML元素的显示效果

      值 意义
      display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
      display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
      display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
      display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

      PS：display:"none"与visibility:hidden的区别：

      visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

      display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

  • 属性7 盒子模型

    • 示意图：

      img

      • magin外边距

        • 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

        • 格式：margin(-top/right/bottom/left): px/盒子的百分比/auto自动居中

        • 外边距简写：

          /*第一种*/
margin: apx bpx cpx dpx;
/*PS:顺序：上右下左，顺时针*/
/*第二种*/
margin: apx bpx cpx;
/*PS:顺序：上，左右，下*/
/*第三种*/
margin: apx bpx;
/*PS:顺序：上下，左右*/
/*第四种*/
margin: apx;
/*PS:顺序：四个方向*/

        PS：垂直方向外边距合并（取最大值）：两个盒子垂直布局，一个设置上外边距，一个设置下外边距，取的设置较大的值，而不是相加。

      • padding内边距

        • 作用：用于控制内容和边框之间的距离
        • 格式：padding(-top/right/bottom/left): px/盒子的百分比/auto自动居中

      • Border：环绕在内边距和外边距之间，围绕着内容和内边距

      • Content：盒子的内容负责显示文本和图像

  • 属性8 浮动属性

    • 文档流：

      元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

    • 特点：

      • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
      • 由于浮动框不在文档的普通文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

    • 格式：float: left| right| none

      • left:向左浮动；
      • right:向右浮动；
      • none:默认值，不浮动

    • 清除浮动的方式

      • 额外标签法：在最后一个浮动元素后添加标签。

        clear: left/right/both

        例：

        <div>
    <div class="content"></div>
    <div class="sidebar"></div>
    <div style="clear:both;"></div>
</div>

        PS:常使用clear: both

      • 给浮动元素的父级元素使用overflow:hiddle;

        • 例：

          .main {
    overflow: hidden;
}
          <div class="main">
    <div class="content"></div>
    <div class="sidebar"></div>
</div>

          PS:如果有内容出了盒子，就无法使用这个方法。

      • 伪元素清除浮动（推荐使用）

        • 书写一个伪元素类选择器，在浮动元素的父盒子调用伪元素清除浮动

          例：

          .clearfix:after {
    content:".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix {
    zoom: 1;
}
          <div class="main clearfix">
    <div></div>
</div>

          PS:: after 相当于在当前盒子后加了一个盒子。

  • 属性9 溢出属性overflow

    • 作用：overflow 属性规定当内容溢出元素框时发生的事情。

    • 属性值：

      值 描述
      visible 默认值。内容不会被修剪，会呈现在元素框之外。
      hidden 内容会被修剪，并且其余内容是不可见的。
      scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
      auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
      inherit 规定应该从父元素继承 overflow 属性的值。

    • PS：

      • overflow（水平和垂直均设置）
      • overflow-x（设置水平方向）
      • overflow-y（设置垂直方向）
  • 属性10 定位属性

    • 定位属性分为四种类型的定位：

      1. 静态定位（默认）

        • 格式：position: static;
        • PS：不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

      2. 绝对定位

        • 定义：设置为绝对定位的元素框从文档流完全删除（等同于浮动），并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

        • 重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

        • 格式：position: absolute

        • 然后使用left/right/top/bottom来确定具体位置

        • 特点：

          1.元素使用绝对定位之后不占据原来的位置（脱标）
2.元素使用绝对定位，位置是从浏览器出发。
3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
5.给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）

        • PS：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

      3. 相对定位

        • 定义：相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

        • 格式：position: relative

        • 特点：

          1.使用相对定位，位置从自身出发。
2.不脱标，其他的元素不能占有其原来的位置。
3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。
4.行内元素使用相对定位不能转行内块元素。

        • PS：position：relative的一个主要用法：方便绝对定位元素找到参照物。

      4. 固定定位

        • fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

        • 格式：position: fixed

        • 特点：

          1.固定定位之后，不占据原来的位置（脱标）
2.元素使用固定定位之后，位置从浏览器出发。
3.元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）

        • PS：在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

    • 定位有四个方向：left/right/top/bottom

  • 属性11 z-index

    • 作用：设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。

      #i2 {
  z-index: 999;
}
  • 属性12 opacity
    • 作用：设置整个标签的透明度，作用于整个标签，取值范围是0~1，0是完全透明，1是完全不透明。
    • opacity和rgba的区别
      • opacity作用范围是整个标签
      • rgba透明度设置只能局限于背景
标签
ps
文档流
绝对定位
css边框
background
border
position
css样式
display
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!