CSS-常见属性和盒子模型

系列文章目录

一、CSS常用属性

1. 宽度和高度

在css中，高度、宽度、字体大小等尺寸属性，一般都使用px（像素）作为单位。

• 高度：height: 高度
• 宽度：width: 宽度

注意：行内标签无法设置长宽！

2. 字体相关

• 字体：font-family: "字体名称";，字体名称比如：微软雅黑、宋体、黑体等。

  字体名称可以写多个，用逗号隔开，后面的字体就属于备用字体。前面的不支持，就用后面的。

• 字体样式：font-style: 选项;

  • normal - 文字正常显示
  • italic - 文本以斜体显示

• 字体大小：font-size: 大小;

• 字体粗细：font-weight: 选项;

  • lighter - 变细
  • normal - 正常粗细
  • bolder - 加粗
  • inherit - 继承父元素的粗细

3. 颜色相关

CSS的颜色，可以是颜色的名称，如red、bilue等。也可以是RGB或HEX值：

RGB： rgb(255,181,197)，由3个数值区间为[0,255]的数字构成；

HEX： 由6位十六进制数字组成，以#号开头，如#FFB5C5；

• 文字颜色：color: 颜色;

• 透明度：

  使用rgba(255,181,197, 0.8)可以设置透明度，前三个参数的作用和rgb()的参数作用一致，最后一个参数用来设置透明度，范围是[0,1]，值越低，越透明。

4. 文本相关

• 文本对齐：text-align: 选项;

  • center - 居中
  • right - 右对齐
  • left - 左对齐
  • justify - 两端对齐

• 文本装饰：text-decoration: 选项;

  • underline - 下划线
  • overline - 上划线
  • line-through - 删除线
  • none - 不装饰，通常用来去除a标签的下划线

• 首行缩进：text-indent 大小px;

  也可以写2em，缩进2个字符。

5. 背景相关

• 背景颜色：background-color: 颜色;
• 背景图片：background: url("图片路径");

默认情况下，如果图片尺寸不足以填满整个元素，浏览器就会将图片复制多份，拼接在一起，填满屏幕。

• 背景重复：backgorund-repeat: 选项;
  • repeat - 重复，就是上面讲的默认情况
  • no-repeat - 不重复，直接左上角对齐放图片
  • repeat-x - 水平方向重复
  • repeat-y - 垂直方向重复
• 指定图片位置：background-position :水平位置选项 垂直位置选项;，两个选项配合使用，如：右上角为right top
  • top - 上方
  • bottom - 下方
  • center - 居中
  • left - 左边
  • right - 右边
  • 也可以写x% y%，左上角是 0% 0%；右下角是 100% 100%

6. 简写形式

如果属性的名称像上面的background-xxx;一样，前缀都相同，则可以简写。

属性名只写前缀，然后直接写各种值，没有顺序要求，用空格分开：

background: 颜色 url("图片路径") 背景重复……;

7. 边框

• 边框粗细：border-width: 粗细px;

• 边框样式：border-style: 选项;

  • dotted - 点线边框
  • dashed - 虚线边框
  • solid - 实线边框
  • double - 双边框
  • none - 无边框
  • hidden - 隐藏边框

• 边框颜色：border-color: 颜色;

  给四条边分别设置样式：

  前缀和后缀都不变，只需要在中间加入top（上边框）、bottom（下边框）、left（左边框）、right（右边框），即可分别设置。

  比如，设置上边框的颜色为红色：border-top-color: red;。

• 圆角：border-radius: 度数%，在长宽一致的情况下，将度数设置为50%，就是一个圆。

  圆角也可以向上面那样分开设置：

  border-top-left-radius:2em; 
  border-top-right-radius:2em;
  border-bottom-right-radius:2em;
  border-bottom-left-radius:2em;
  

  em是另一个单位，名称为相对长度单位。

8. display属性

• 隐藏元素：display: none;彻底隐藏，包括占用的位置也会一并让出。
• 使元素具有行内元素的特点：display: inline;
• 使元素具有块级元素的特点：display: block;
• 使元素具有行内块元素的特点：display: inline-block;，行内块元素拥有行内和块级两种元素的特点，既可以设置尺寸，又不会独占一行。

二、盒子模型

• 盒子模型的概念：

  

• 注意事项：

  • 相邻两个元素的margin，以大的为准，小的会失效。比如，元素A右边margin为50，元素B左边margin为20，则两个元素border之间的距离为50。
  • 行内元素设置padding和margin，上下是无效的，左右是有效的。

常见的浏览器，通常会给body标签渲染8px的margin，通常我们在写页面的时候，会手动去除这8px的margin。

• 修改margin：

  选择器 {
      margin-left: 值px;
      margin-top: 值px;
      margin-right: 值px;
      margin-bottom: 值px;
  }
  
  /* 简写1：全部为0 */
  选择器  {
      margin: 0px;
  }
  
  /* 简写2：上下的值为10，左右为20 */
  选择器 {
      margin: 10 20;
  }
  
  /* 简写3：上的值为0，下的值为10，左右为20 */
  选择器 {
      margin: 0 10 20;
  }
  
  /* 简写4：按照上、右、下、左的顺序设置值*/
  选择器 {
      margin: 0 10 20 30;
  }
  

  • 内容水平居中：margin: 0 auto;，该设置会使元素内容参照border水平居中。垂直居中则没有对应的设置方法。

  border的修改已经在上面讲过，而padding的修改方法与margin类似，在此不做赘述。

下一篇