CSS样式属性

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 两端对齐

值	描述
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 盒子模型
- 示意图：
  - 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透明度设置只能局限于背景

posted @ 2018-10-15 21:34 AbnerLing 阅读(96) 评论(0) 编辑收藏举报

刷新页面返回顶部

AbnerLing

CSS样式属性

CSS属性

属性1 宽和高

属性2 字体属性

属性3 文字属性

属性4 背景属性

属性5 边框属性

属性6 display属性

属性7 盒子模型

属性8 浮动属性

属性9 溢出属性overflow

属性10 定位属性

属性11 z-index

属性12 opacity

公告

属性9 溢出属性`overflow`