CSS基础知识

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

<link rel="stylesheet" type="text/css" href="css/style.css"></link>
    	<!-- 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

flex布局进一步可查看：https://cloud.tencent.com/developer/article/1354252
以及
https://www.runoob.com/w3cnote/flex-grammar.html