CSS基础

1. CSS样式使用

1. 内部样式（嵌入样式）<style type="text/css"></style>要放head中间
2. 行内样式<p style="color:red;"></p>
3. 外部样式<link href="1.css" rel="stylesheet" type="text/css"/>放head中
4. 导入式 写在style内@import "1.css";or@import url(1.css);

2. 文本样式

1. font-family:"宋体","黑体";
   1. 多个字体浏览器依次查找。若没有，浏览器使用默认样式
   2. 可以是具体字体名也可以是字体集（Serif Sans-serif Monospace Cursive Fantasy）
2. font-size:20px;
   1. 绝对字体大小
      1. in cm mm pt pc
      2. xx-small x-small small medium large x-large xx-large
   2. 相对字体大小
      1. px
      2. em
3. color:red; color:#008800 color:rgb(0,0,0)
   1. rgb 0 ~ 255 或 0% ~ 100%
   2. 超出的数值自己变成 0或255或0%或100%
4. font-weight:bold;
   1. 100 ~ 900
   2. lighter normal(400) bold(700) bolder
5. font-style:normal;
   1. normal
   2. italic 斜体 一般表示引用
   3. oblique 斜体
6. font-variant:small-caps 小型的大写字母
7. font:font-style font-variant font-weight font-size/line-height font-family
   1. 前3顺序可换 但总体保持不变
8. text-align:center使块内的文本相对于其父元素居中
9. 行高技巧（相对于font-size）

   div{font-size: 20px;text-indent: 1em;line-height:2em}
   p{font-size: 30px}
   
   <div>
       <p>行高技巧</p>
   </div>
   

    - text-indent 缩进
    - em和10%都是相对于font-size
    - line-height的值为20px * 2计算的值而不是30px * 2
   

10. vertical-align:baseline;对块元素无效 行内元素有效
    • super/sub 上标 下标
    • top/bottom/middle 行最高/低/中线处对齐
    • text-top/text-bottom 文本最高/最低处对齐
    • ±15px 相对于基线上移/下移15px
    • ±100% 相对于基线上移/下移100%
11. 单行水平垂直居中

       .content{
                width:400px;
                height:400px;
                line-height: 400px;
                text-align: center;
            }
        
        <div class="content">
            <p>website</p>
        </div>
    

12. 多项水平垂直居中

            .out{
                width:400px;
                height:400px;
                display: table;
            }
            .in{
                vertical-align: middle;
                display: table-cell;
                text-align: center;
            }
    	   <div class="out">
    	        <div class="in">
    	            <h1>122</h1>
    	            <h2>999</h2>
    	        </div>
    	    </div>
    

13. word-spacing:1em;单词之间间隙
14. letter-spacing:-0.5em;字母之间间隙
15. text-transform:capitalize;
    • capitalize/none 无样式
    • uppercase/lowercase 大写/小写
16. text-decoration:underline overline line-through none;

    •   				下划线 上划线 贯穿线
      

    • 样式可同时存在 none在最后所有样式无效

3. 盒子模型

1. max-width:300px;min-width:400px;如果max-width小于min-width那么会显示min-width
2. 可设置宽高的元素
   • 块级元素 p div h1 ul ol li dl dt dd
   • 替换元素 img input textarea 等
3. 盒子宽高 = 内容 + padding + border-width +margin
4. 背景颜色区域 = 内容 + padding + border
5. margin可为负值 padding不能为负值

6.         .content{
               width:200px;
               height:200px;
               padding: 20px;
               background: red;
               border:10px solid green;
           }
           .one{
               width:100%;
               height:100%;
               background: aqua;
               border:5px solid green;
           }
   	    <div class="content">
   	        <div class="one"></div>
   	    </div>
   

    - one的宽高为200px 再加上5px border 为 210px
   

7. 默认情况下块元素都有margin

8.        .content{
               width:200px;
               height:200px;
               margin-right: 30px;
               float:left;
           }
           .ct{
               margin-left: 20px;
               float:left;
           }
   
   	    <div class="content"></div>
   	    <div class="content ct"></div>
   

    - 水平方向上两个块float布局，添加margin后两个块的margin都会生效
    - 垂直方向两个块 添加margin后 两个margin会合并 结果为值较大的margin
   

9. 边框默认和里面的文本颜色一致

4. 背景图片

1. background-attachment:scroll图片随着滚动而滚动
   • fixed 图片固定在一处

2. background-position:10% 10%;
   background-position:left;
   

    - left/right 靠左/右 垂直居中
    - top bottom 靠顶/底 水平居中
    - center 水平垂直都居中
   

3. background不分先后顺序

5. 列表样式

1. 无序列表list-style-type:circle;
   • circle 空心圆 disc实心圆 square 实心正方形
2. 有序列表list-style-type:decimal;
   • decimal 从1开始的整数
   • lower-roman 小写罗马数字
   • upper-roman 大写罗马数字
   • lower-alpha 小写英文字母
   • upper-alpha 大写英文字母
3. 列表图片标记list-style-image:url(img.png);
4. 列表标记位置list-style-position:outside;文本不环绕图标
   • inside 文本环绕图标
5. list-style: 顺序不固定 list-style-image会覆盖list-style-type

6. float定位

1. css三种定位机制 普通流 浮动 绝对定位
2. float浮动
   1. float浮动不影响前面元素 影响后面元素（环绕）

          .bg{
               width:300px;
               height:300px;
               border:1px solid green;
           }
           .sm{
               width:50px;
               height:50px;
               background-color: aqua;
               border:1px solid green;
               float: left;
           }
   
   	    <div class="bg" >
   	        <p>11111111111111</p>
   	        <div class="sm"></div>
   	        <p>1. 无序列表`list-style-type:circle;`
   	            - circle 空心圆 disc实心圆 square 实心正方形
   	        </p>
   	    </div>
   

   2. 第一个元素左浮动 后面元素未浮动 未浮动的第一个元素会被覆盖

          .big{
               width:300px;
               height:300px;
               border:2px solid black;
           }
           .sm{
               width:50px;
               height:50px;
           }
           .one{
               background-color: aqua;
               float:left;
           }
           .two{
               background-color: yellow;
           }
           .three{
               background-color: green;
           }
   
   	    <div class="big">
   	        <div class="sm one"></div>
   	        <div class="sm two"></div>
   	        <div class="sm three"></div>
   	    </div>
   

3. clear清除浮动
   1. left/right 清除左/右一个浮动，不会全部清除

          .big{
               width:300px;
               height:300px;
               border:2px solid black;
           }
           .sm{
               width:50px;
               height:50px;
               float:left;
           }
           .one{
               background-color: aqua;
           }
           .two{
               background-color: yellow;
           }
           .three{
               background-color: green;
               clear:left;
           }
           
   	    <div class="big">
   	        <div class="sm one"></div>
   	        <div class="sm two"></div>
   	        <div class="sm three"></div>
   	    </div>
   

   2. both 若有左/右浮动则清除左/右浮动

7. 清除浮动常用方法

1. 在浮动元素后使用一个空元素<div style="clear:both"></div>把浮动撑起来
2. 给浮动元素父容器添加overflow:hidden;
3. 使用:afrer伪元素（也是给浮动元素父容器）

   	        .clearfix:after{
               content:"";
               display: block;
               height: 0;
               visibility: hidden;
               clear: both;
           }
           .clearfix{zoom:1}
   

    - zoom兼容IE
   

4. 给父元素设定height，只适用于高度固定布局
5. 父元素也一起浮动，会有新问题，不推荐

8. position

1. static（常规定位 常规流）
   1. 会忽略top bottom left right(不是margin) z-index声明
   2. 上下两相邻都设置了外边距，则外边距为两者中最大的
   3. 有固定width和height的元素，左右外边距设为auto，则会水平居中
2. relative（不脱离常规流）
   1. 可以用top bottom left right z-index 进行相对定位（相对于自己在static常规流中的位置）
   2. 任何元素都可以设置为relative，其后代相对于他进行绝对定位absolute
   3. 使浮动元素发生偏移

           .big{
               width:300px;
               height:300px;
               border:2px solid black;
               top:30px;
               position: relative;
               float:left;
           }
   		<div class="big"></div>
   

   4. 可以使用z-index
3. absolute（脱离常规流）
   1. 宽高百分比 相对于 最近的relative祖先元素
   2. lrtb均为0且没有设置width和height时 将填充relative父元素

   	.parent{position:relative}
   	.child{
   		position:absolute;
   		top:0;
   		bottom:0;
   		left:0;
   		right:0;
   	}
   

   3. lrtb均为0且设置了width和height时 将居中

          .parent{
               position: relative;
               width:200px;
               height:200px;
               background: blue;
           }
           .child{
               position: absolute;
               width:40px;
               height:40px;
               background: black;
               left:0;
               right:0;
               top:0;
               bottom:0;
               margin:auto auto;
           }
   	    <div class="parent">
   	        <div class="child"></div>
   	    </div>
   

   4. lrtb为auto时 没有变化
   5. 没有relative的祖先元素，会相对于body操作
4. fixed
   1. 继承absolute特点
   2. 随着滚动而滚动，视窗位置不变
5. sticky（想象有个定位矩形 捕获块后 块变成固定定位）

          .logo{
               background: blue;
               border: 1px solid red;
               width:100%;
               height:50px;
           }
           .nav{
               width:100%;
               height:50px;
               top:0;
               background: aqua;
               position: sticky;
               border: 1px solid green;
           }
   	    <div class="logo">logo</div>
   	    <div class="content">
   	        <div class="nav">nav</div>
   	        <p style="font-size:30px">一大段文字</p>
   	    </div>
   

    - 没有relative则参照body
    - 如果最近的relative元素有滚动（块移出视窗）则偏移标尺是最近的祖先元素；若祖先元素没有滚动 则偏移标尺是视窗
    - top一定要有 top值为几就相对偏移多少
   

9. 可以先用position+lrtb进行定位 再用margin进行位移