CSS基础知识

块元素居中：
方法一：先设置width: 100px, 再设置margin: auto;
方法二：
父元素：水平居中 text-align:center; 垂直居中 vertical-align:middle; display: table-cell;
子元素：display:inline-block; vertical-align:middle;

CSS外部调用：<link rel="stylesheet" type="text/css" href="demo.css"/>

  	<!-- css创建 -->            
      <p><b>注意：</b>如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式</p>
 
 <!-- 边框清晰度 -->
 border: 1px solid  rgba(0, 0, 0, 0.1); 
   
 <!-- 边框弧度 -->
 border-radius: 0 30px 30px 30px; 
 
 <!-- 文本阴影 -->
 box-shadow: 2px 2px 12px #c0bbbb;
 
 <!-- 禁用的图片 -->
 {
    opacity: 0.6;
    cursor: not-allowed;
 } 
  <!-- 翻转 -->
  {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);<!--加前缀以兼容老版本-->
  }
 
  <!-- textarea文本框属性 -->
  {
      resize: none不能调节尺寸, horizontal可调节宽度,  vertical可调节高度, both都可调节
  }

   <!-- 控制在一行显示 -->
   {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-overflow:ellipsis;
      overflow: hidden;
   }
   <!-- flex布局 -->
   {
    display: flex;
    justify-content: space-between; center; 
    flex-wrap: nowrap; wrap;
   }
   
 
  <!-- css背景 -->
      <!-- 属性 -->
          background-color (背景颜色): red; #e0ffff；rgb(0, 255, 115)
          background-image: url('./image/color.jpg');
          background-repeat: repeat-x (横向平铺); no-repeat (不平铺), repeat-x (纵向平铺)
          background-attachment: fixed (图片固定不随页面滑动)
          background-position: right top (图片放置右上角)
          margin-right: 100px (文字在左显示，文本边缘离右边距离)
          margin-left:
          background-size: 100%; (背景图片宽度100%), 100px 100px; 
      <!-- 简写 -->
          body {
              background: #F2F2F2 url('img_tree.png') no-repeat fixed right top;
          }
 
  <!-- 文本 -->
      <!-- 属性 -->
          color (文字颜色): red; #e0ffff; rgb(0, 255, 115)
          text-shadow (文本阴影): 12px 2px blue (文字，阴影，阴影颜色三个属性值都要有)
          text-overflow:ellipsis;overflow:hidden; 超出显示省略号 
 
          vertical-align（文字显示位置): text-top(文字垂直向上对齐),super(上标字),sub(下标字),top(垂直向上对齐),middle(垂直居中对齐)
          direction (文本正、倒序显示): rtl (文本倒序显示)
          text-align (文本对齐): center; right;  justify (每一行被展开为宽度相等，左，右外边距是对齐)
          text-decoration (删除线): none (链接无下划线); overline (删除线在文本头上); line-through (删除线); underline (文本底部)
          text-transform（大小写转换）：uppercase（单词转大写）；lowercase（单词转小写）；capitalize（单词首字母大写）
          text-indent（文本缩进）:2em；50px
          letter-spacing（指定字符间的间距）：2px；-3px
          line-height（行与行之间的间距）：70%；200%
          word-spacing（单词之间的间距）：20px
 
          white-space（文本显示规则): nowrap (文字不会换行）；pre（按实际文本显示）；pre-wrap（保留空白符序列，但是正常地进行换行）；pre-line（合并空白符序列，但是保留换行符）
          word-wrap:break-word; 自动换行 
          word-break:break-all; 强制英文单词断行（需要将行内元素设置为块级元素。）
       
 
  <!-- 字体 -->
      <!-- 属性 -->
          font-family  (字体系列): "Times New Roman",Times,serif;  Arial,Helvetica,sans-serif;
          font-style (字体样式): italic (斜体)
          font-size (字体大小): 30px; 100%
          font-weight (字体加粗): lighter (加细); bold 加粗 ；400 (400等于正常)
          font-variant (单词转小型大写字体): small-caps
          简写：
          body {font:italic bold 12px/30px Georgia,serif;}
 
  <!-- css链接 -->  
          a:link {background-color:#B2FF99; color:#000000; text-decoration:none;}      /* 未访问链接*/
          a:visited {color:#00FF00;}  /* 已访问链接 */
          a:hover {font-size:150%;}  /* 鼠标移动到链接上 */
          a:active {color:#0000FF;}  /* 鼠标点击时 */ 
          a:link,a:visited {color:#00FF00;}
          a.one:link {color:#00FF00;}  
          li a:hover:not(.active) {}
 
          <p><a href="http://news.baidu.com/"  target="_blank">这是一个链接</a></p>
          <p> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果; a:active 必须在 a:hover 之后</p>
      
  <!-- css列表 -->
      <!-- 属性 -->
          list-style-type(无序:ul,有序:ol): none（无列表图）:circle(圆），square（方框），upper-roman（罗马计数），lower-alpha（a,b,c）；cjk-ideographic（一,二）；decimal（1,2）
          list-style-image（无序框内图）：url('sqpurple.gif')
      <!-- 简写 -->
          ul {list-style: square list-style-position url("sqpurple.gif");} 
 
  <!-- 表格 -->
      <!-- 属性 -->
          border-collapse: collapse（边框为无间隔）；
          caption-side: bottom（表名在底端）
         
      <!-- 例子 -->
          <style>
          table,th,td
          {border:1px solid black;}
          table {border-collapse: collapse; width:100%; height:150px;}  
          td {text-align:right; vertical-align:bottom; padding:15px;background-color:green; padding-top:5px;}
          caption {caption-side:bottom;}
          </style>
          <q>collapse:边框为无间隔;bottom:文字在底端；padding：文字与边框距离;caption-side:bottom表名在底端</q>
 
  <!-- 盒子模型 -->
      <!-- 属性 -->
          margin (外边距): 25px;auto（居中,配合width才有效）
          border (边框): 25px solid green;
          padding (内边距): 25px;
          width (内容): 30px
      
  <!-- css边框 -->
      <!-- 属性 -->
          border-style (边框风格属性):
              border-top-style (单独设置顶边框的风格)
              border-bottom-style
                  dotted: 定义一个点线边框
                  dashed: 定义一个虚线边框
                  solid: 定义实线边框
                  double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
                  groove: 定义3D沟槽边框。效果取决于边框的颜色值
                  ridge: 定义3D脊边框。效果取决于边框的颜色值
                  inset: 定义一个3D的嵌入边框。效果取决于边框的颜色值
                  outset: 定义一个3D突出边框。 效果取决于边框的颜色值
                  none: 无边框
          border-width (使用边框宽度，先使用 "border-style" 属性来设置边框) 5px; medium
                  border-left-width
          border-color (使用边框颜色，先使用 "border-style" 属性来设置边框): #98bf21; red
                  border-right-color
      <!-- 简写 -->
          p {border:5px solid red;}
 
  <!-- 轮廓 -->
      <!-- 属性 -->
          outline-style：solid（与边框属性一样）
          outline-color：#00ff00
          outline-width: 3px，thin，medium，thick，length
      <!-- 简写 -->
          outline: green dotted thick
 
  <!-- margin外边距 -->
      <!-- 属性 -->
          margin:100px 50px（100px：上下；50px:左右间距）; 2cm ; 25%
              margin-top
              margin-bottom
              margin-right
              margin-left
 
  <!-- padding填充 -->
      <!-- 属性 -->
          padding:25px 50px;
              padding-top
              padding-bottom
              padding-right
              padding-left
 
  <!-- css元素尺寸 -->
      <!-- 属性 -->
          height: 100%；auto；200px
              line-height（设置行高）
              max-height（最大高度）
              min-height（最低高度）
          width: 100%；auto；200px
              max-width
              min-width
 
  <!-- display与Visibility可见性 --> 
      <!-- 属性 -->
          visibility:
              hidden (元素被隐藏,但有占位)
              visible (默认显示)
              collapse (tr,td表格或表内容被隐藏)
          display:
              none (元素被隐藏，不占位)
              inline (li列表水平显示)
              block (使元素为块级元素)
              inline-block (下拉菜单列显示)
          <!-- 注意 -->
              inline: 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)
                          和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
              inline-block: 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
 
  <!-- 定位 -->
          position: 使用position来对齐元素时, 通常元素会设置 margin和padding
              static: 默认
              fixed: 独立与其他元素，不占空间;
              sticky: 类似fixed但与其他元素重叠，需指定 top, right, bottom 或 left 之一
              relative: 移动且占用原空间,和其他元素重叠
              absolute: 不占空间,和其他元素重叠
                      left；top；bottom；right（位置）：-20px; 20px
          z-index: -1（在重叠文本之后）
          clip (裁剪): rect(0px,1500px,155px,0px);
          overflow (内容溢出元素框): scroll(给出滚动条), hidden(隐藏), visible(溢出),  auto(如果导航栏选项多,允许滚动)
                  overflow-x；overflow-y
 
      <!-- 更改鼠标指针 -->
          cursor: default(正常), text(输入), auto(输入), move(移动), pointer(手势), wait(转圈), 
                      progress(转圈指针等待), help(帮助), crosshair(裁剪), e-resize(左右裁), n-resize(上下裁), ne-resize(左底裁), nw-resize(右底裁)
  <!-- 浮动 -->
          float: right, left
          clear (元素两侧不能出现浮动元素): both, left, right
 
  <!-- 边框 -->
          box-shadow(阴影位置与透明度): 0px 8px 16px 0px rgba(0,0,0,0.2);
    
  <!-- 图片透明/不透明 -->
      opacity (透明度): 1; 0.4 (通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度)
  
  <!-- 阴影 -->
      box-shadow: 10px 10px 5px #888888;
 
  <!-- 边框圆角 -->
      border-radius (为提示框添加圆角): 6px；15px 15px; 50%;
          border-top-left-radius
          border-top-right-radius
          border-bottom-right-radius
          border-bottom-left-radius
 
 
 
 
  <!-- 选择器 -->
      <!-- id例子 -->
          #name { }
       
      <!-- class例子 -->     
          .value{ }
 
      <!-- 后代选择器 -->
          div p{ }: 所有后代包括孙后代
          <div>
              <p>被选择</p>
              <div>
                  <p>被选择</p>
              </div>
          </div>
 
      <!-- 子元素选择器 -->
          div>p{ }: 只选择子后代，不包括孙后代
          <div>
              <p>被选择</p>
              <div>
                  <p>不被选择</p>
              </div>
          </div>
 
      <!-- 相邻兄弟选择器 -->
          div+p{ }: 选择紧接在div元素后的元素，且二者有相同父元素
          <div></div>
          <p>被选择</p>
          <p>不被选择</p>
 
      <!-- 后续兄弟选择器 -->
          div~p { }: 选取所有div元素之后的相邻兄弟元素
          <div></div>
          <p>被选择</p>
          <p>被选择</p>
 
      <!-- 获取焦点元素 -->
          input:focus {background-color:yellow; }
          用户: <input type="text" name="lastname" />
 
          div p:not(.sP): 选择div下类名非sP的所有子元素
          .on1 p:first-child: 表示选择列表中的第一个标签
          last-child: 表示选择列表中的最后一个标签
          nth-child(2): 表示选择列表中的第2个标签
          nth-child(2n): 表示选择列表中的偶数标签
          nth-last-child(3): 表示选择列表中的倒数第3个标签
          div p:first-of-type: 选择每个div父级的第一个p元素
          last-of-type: 选择每个div父级的最后一个p元素
          :nth-last-of-type(n)
 
      <!-- 通用选择器 -->
          *{color:red;}
 
  <!-- css属性选择器 -->
      [title]
      [title=hello]
      [title~=hello]
      [lang|=en]
      input[type="text"]
      <style>
	input[type="text"]
	{
	  width:150px;
	  display:block;
	  margin-bottom:10px;
	  background-color:yellow;
	  font-family: Verdana, Arial;
	}
	
	input[type="button"]
	{
	  width:120px;
	  margin-left:35px;
	  display:block;
	  font-family: Verdana, Arial;
	}
</style>
</head>
<body>
	
	<form name="input" action="" method="get">
	<input type="text" name="Name" value="Bill" size="20">
	<input type="text" name="Name" value="Gates" size="20">
	<input type="button" value="Example Button">
	  
</body>

转载自：
https://blog.csdn.net/XiaoMing1998/article/details/88385477