css常用样式详解

css样式

元素的分类

1. 行内元素

   特点：可以和其他元素或文本元素共行显示

   不可手动修改宽和高，大小由内容决定

   eg：a、i、b、u、t

2. 块级元素

   特点：独占一行，不可以和其他元素共行

   可以手动修改大小style，width，height）

   eg：div、 p 、 h1~h6 、 ul、 ol 、table

3. 行内块元素

   特点：即和其他元素共行显示，又可以设置宽和高

   eg：img、input

4. 元素类型的互相转换

   display取值	含义
   none	隐藏
   block	转换成块级元素
   inline	转换成行内元素
   inline-block	转换为行内块元素

   块级元素放在一行：float样式 取值：left、right

颜色表示方式

• 英语单词表示：red/blue/green/grey/gold/yellow

• rgba表示（red/green/blue/alpha）

  r,g,b表示范围：0_{255，十六进制00}FF

• alpha透明度：0–透明，1–透明，0.5–半透明

• eg：

  十六进制	颜色
  #FFFFFF	白色
  #ABCDEF	天蓝色
  #000000	黑色
  rgba（0，0，0，1）	黑色不透明
  rgba（0，0，0，0.5）	黑色半透明

边框样式

• 说明：所有的元素都有边框。块级元素和行内块元素可以设置大小。

• 溢出：当标签的内容超过边框大小时，会出现溢出

  • 溢出样式：overflow

    样式值	效果
    visible	可见 （默认）
    hidden	隐藏
    scroll	显示滚动动条
    auto	自动

• 边框设置

  需要设置边框的：“宽度，样式、颜色”

  语法：border：width style color

  边框线的样式值	效果
  soild	实线
  dashed	虚线
  dotted	点线
  dounle	双线

  • 针对四周边框的设置：border-top/border-right/border-bottom/border-left

  • 使用边框设置三角标：

    a. 元素的宽高设置成0

    b. 设置元素四个方向边框一样

    c. 设置一个边框的颜色可见，其他三个边框隐藏，颜色用transparent

    #b3{
            width:0px;
            height:0px;
            border:50px solid red;
            border-top:50px solid transparent;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
        }
    

• 轮廓线

  围绕在元素变量周围的线

  • 样式outline：取值：”width style color‘’
    • 一般不显示轮廓线，outline：none

• 圆角边框

  样式：border-radius

  取值：像素，%百分比（根据元素的大小定）

  eg：border-radius:50px 50px 50px 50px;

盒子模型

一切元素皆有边框

• 盒子模型：定义元素在网页中的实际大小。包含:外边距，边框，内边距，内容大小

• 标签最终大小：

  • 宽=左右外边距+左右边框+左右内边距+内容宽
  • 高=上下外边距+上下边框+上下内边距+内容高

• 外边距margin，取值：百分比或像素

  • margin：v1 上右下左内边距

  • margin：v1 v2 上下和左右内边距

  • margin：v1 v2 v3 上 右左 下内边距

  • margin：v1 v2 v3 v4 上 右 下 左 内边距

  • 清除外边距 margin：0

  • 在父元素中水平居中 margin：0 auto

  • 单独设置外边距：margin-top、margin-right、margin-bottom、margin-left

• 内边距padding，取值：百分比或像素

  标签的内容到边框之间的距离

  • padding：上 右 下 左

  • 单独设置内边距:padding-top、padding-right、padding-bottom、padding-left