CSS思维导图

一、概念
    css——cascading style sheet（层叠样式表）

作用：规定html元素如何在网页中显示

特点：实现了结构与表现相分离（可维护性更高）

二、css语法
    选择器{属性:属性值;}

eg:  h1{color:red;}

三、样式表的创建
    
1.行内样式（内联样式）
                
        eg: <h1 style="color:red;">hello</h1>  
    2.内部样式（嵌入式样式）
        eg: <style type="text/css">
    h1{color:red;}
    </style>
            注：建议将style标签放在head部分
    3.外部样式表
        首先创建一个后缀名为.css的外部文件，然后在html页面的head部分使用link引入，语法如下：

<link rel="stylesheet" href="1.css">
            注：rel用来设置引入文件和当前文件之间的关系

注：当多种样式表出现在同一个html页面中产生冲突时，采取就近原则，即离被设置的元素越近，优先级越高
    当样式中出现!important关键词时，不再遵循就近原则，优先级最高

四、css选择器
    1.id选择器
        
eg:  <h1 id="city">北京</h1>
样式中： #city{color:red;}
            注：a) id名命名要语义化，常用命名方法：
        驼峰命名法：myFavCity    中划线连接命名法：my-fav-city
        b) id名是唯一的，不要出现同名的id
    2.class选择器（类选择器）
        eg: <h1 class="city">上海</h1>
样式中： .city{color:blue;}
            注：a) class命名也要语义化，驼峰命名或中划线连接命名
        b) 我们可以给具有相同样式的元素添加相同的class名        
         c) 类名词列表语法如下：  
       <div class="box box1"></div>
    3.标签选择器（类型选择器）
        eg:  p{color:red;}
            注：匹配网页中这类型的所有元素
    4.后代选择器
        eg: .ul-one li{color:red;}
            注：使用后代选择器的前提是元素必须是嵌套关系（包含与被包含的关系）
    5.群组选择器
        eg: h1,h2,h3,h4,h5,h6{font-weight:normal;}
            注：当需要给不同类型的元素设置相同的样式时可以使用群组选择器
    
6.通配符
        eg: *{margin:0; padding:0;}   去掉所有元素默认的间距
            <!-- 匹配包含html在内的所有html元素-->
    7.伪类选择器
        注：超链接的四个状态如下：
a) a:link   超链接的初始状态
b) a:visited   链接访问过后的状态
c) a:hover     鼠标划过（悬停）时的状态
d) a:active    鼠标按下（链接被激活）时的状态

            表示的是没有访问和访问之后还是黑色，但是鼠标滑过的时候是blue
a{color:black;}  a:hover{color:blue;}
    8、css选择器权重
        当有两个选择器匹配到了同一个元素时，设置了相同的css属性产生冲突，以权重较高的为准
            1.行内样式      权重：1000
2.id选择器      权重：100
3.class选择器，伪类选择器    权重：10
4.标签选择器      权重：1
                后代选择器    权重：所有选择器权重之和

五、字体类属性
    1.字体类型
        语法:  font-family:字体;
eg:  body{font-family:"Microsoft Yahei";}
    2.字体大小
        语法：font-size:数值+单位;
            注：a) 浏览器默认字体大小为16px
        b) 字体大小常用单位px,em,rem等
        c) 字体大小建议设置偶数不设置奇数
    3.字体加粗
        语法：font-weight:normal|bold|bolder|100-900;
            eg： h1{font-weight:normal;}   去掉h1自带的加粗效果
    4.字体倾斜
        语法：font-style:normal|italic|oblique;
            eg： em,i{font-style:normal;}   去掉em和i的倾斜效果
    5.字体颜色
        语法：color:属性值;
            注：颜色属性值的设置方法有三种：
                a) 十六进制写法
                    eg:  color:#fff;  白色     color:#000;  黑色
                b) rgb写法
                    eg: color:rgb(255,255,255); 白色   color:rgb(0,0,0);  黑色
                c) 颜色值单词
                    eg: color:white;  白色   color:black;   黑色
            扩展：font:12px/1.5  "Microsoft yahei";
font的复合写法：字体大小为12px，行高为字体大小的1.5倍，字体类型为微软雅黑

6、文本类属性
    1.文本水平对齐方式
        语法：text-align:left|center|right|justify(两端对齐);
            注：如果需要图片水平居中，给包含图片的容器添加text-align:center; 
    2.首行缩进
        语法：text-indent:数值+单位;
            注: 正值向后缩进，负值向前缩进
    3.文本修饰
        语法: text-decoration:none(默认值)|underline(下划线)|overline(上划线)|line-through(删除线);  
eg：a{color:black;text-decoration:none;}   a:hover{color:blue;text-decoration:underline;}
            注: 默认去掉超链接的下划线，划过时添加下划线
    4.行高
        语法：line-height:normal(默认值)|数值+单位|数值;
            注：a) line-height:2;   行高为字体大小的2倍
        b) 设置行高等于容器高，可以实现单行文本在定高容器中垂直居中
        c) line-height不允许设置负值
    5.字符间距
        语法：letter-spacing:数值+单位;
            注：允许设置负值
    6.词间距
        语法：word-spacing:数值+单位;
            注：主要针对英文，设置单词之间的距离，允许设置负值

七、列表类属性
    1.设置列表符号类型
        语法：list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号)；
    2.使用图片作为列表符号
        语法：list-style-image:url(1.jpg);
    3.设置列表符号位置
        语法: list-style-position:outside(外)|inside(里);
    4.列表属性简写方式
        语法:list-style:none;

八、背景类属性
    1.背景色
        语法：background-color:颜色值;
            注：颜色值的设置方法和color属性值设置方法相同
    2.背景图
        语法: background-image:url(2.jpg);
    3.背景平铺
        语法: background-repeat:repeat(平铺)|no-repeat(不平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);
    4.背景图位置
        语法：background-position:left|center|right|数值  top|center|bottom|数值;
            注：设置为数值时，水平方向正值向右，负值向左，垂直方向正值向下，负值向上
    5.背景简写方式
        语法：background:red url(1.jpg) no-repeat right bottom;
            注：简写中多个属性值用空格隔开，可以互换位置，建议按照这个顺序来写

九、浮动属性
    语法：float:none(默认值)|left(左浮动)|right(右浮动);
        注：当需要让竖着排列的元素横着排列时就需要用到浮动

十、盒模型概念及组成
    css盒模型是css的基石，每个html元素都有自己的盒子模型，css盒模型就是来设置html元素之间的位置关系。
css盒模型是由content(w*h)，padding(内填充),border(边框)，margin(外边距)四部分组成
    1.content
        content是由width和height组成的一个矩形区域
语法：width:数值+单位;    height:数值+单位
            注：当设置除0以外的其他数值时必须要加单位
    2.padding
        a) 单独设置某个方向的padding值，语法如下：padding-left:30px;
        b) padding属性简写方式
            padding:30px;   四个方向都为30px
padding:30px 0;   上下30px,左右0
padding:30px 0 10px;   上30px，左右0，下10px
padding:50px 30px 0 20px;  顺时针方向依次为上右下左
                注：a) 当元素本身设置的宽高包含padding值在内，单独设置padding值后，要在原来的宽高上减去设置的padding值，保证总宽高不变
    3.border
        a) 单独设置某个方向的边框 border-right-style:1px solid blue;
            注：边框线型可选值：solid 实线  dashed  虚线  dotted  点线   double 双线
        b) 如果四个方向都需要边框，并且相同  border:1px solid blue;
        c) 去掉某个方向的边框border-right:none|0;
            注：背景可以延伸到border区域，为实线时会被遮挡
    4.margin
        语法：margin:数值+单位;
            注：a) margin属性值的设置方法同padding
    b) 背景不能延伸到margin区域
    c) margin允许设置负值
    d) 给定宽块元素设置左右margin为auto可以实现水平居中

十一、html元素分类
    html元素根据自身的特征分为：块元素，内联元素，内联块元素三大类
    1.块元素
        常见块元素：div,p,ul,ol,li,dl,dt,dd,h1~h6,form等
            a) 块元素默认宽度为100%，以块的形式显示为一个矩形区域
b) 块元素默认情况下独占一行，自上而下排列
c) 块元素可以设置宽度和高度及任意margin,padding,border等
d) 块元素可以作为一个容器容纳其他的块元素和内联元素
                
注：p标签只能嵌套内联元素，不能嵌套块元素
    2.内联元素（行内元素）
        常见内联元素：a,span,strong,b,em,i等
            a) 内联元素默认情况下在一行逐个进行显示（横着排）
b) 内联元素默认不能设置宽度和高度，宽高是由内容撑开，也显示为一个矩形区域
c) 内联元素设置上下相关的一些属性不生效（上下padding，上下margin）
d) 内联元素可以嵌套内联元素，但是不建议嵌套块元素
                
注：a标签不能再次嵌套a
    3.内联块元素（行内块元素）
        常见的内联块元素：img,input,select,textarea等
            a) 在一行逐个进行显示，横着排
b) 可以设置宽高及任意margin,padding,border值

十二、元素类型转换
    1.转换为块元素
        display:block;
            注：是大部分块元素的默认display属性值
    2.转换为内联块元素
        display:inline-block;
            注：是img，input等这类型元素的默认display属性值
    3.转换为内联元素
        display:inline;
            注：是a，span等这类型元素的默认display属性值
    4.转换为li类型
        display:list-item;
            注：是li的默认display属性值
                不是特别重要
    5.将元素隐藏不显示
        display:none;
            注：需要元素再次显示时，设置除none以外的其他值即可
注：给内联元素设置了float后，就可以设置宽高及任意margin,padding，border值

十三、span应用
    语法：<span></span>
        注：a) 只有给span设置了样式后才会产生视觉上的变化
   b) 当需要把一部分文字从一段文字中独立出来时就需要用到span

十四、容器溢出
    语法：overflow:visible|hidden|scroll|auto;
        visible   默认值，溢出内容显示在容器框之外
hidden    溢出内容隐藏不显示
scroll    没有溢出显示默认滚动条，溢出时以滚动条的形式查看溢出内容
auto      自动检测，当有溢出时添加滚动条

十五、垂直对齐方式
    语法：vertical-align:baseline|top|middle|bottom;
        baseline   默认值，基线对齐
top        顶部对齐
middle     中部对齐
bottom     底部对齐
            注：vertical-align主要用来设置内联或内联块元素所在行的垂直对齐方式

十六、单行文本省略号的设置
    语法： width:value;   得是有宽度才是能够设置其下面的设置
        white-space:nowrap;    设置文本强制在一行显示
overflow:hidden;       溢出文本隐藏不显示
text-overflow:ellipsis;    显示省略号

十五、定位
    1.默认值
        position:static;   无特殊定位，遵循html默认显示原则
    2.绝对定位
        position:absolute;
参照物：离它最近的具有定位属性的父包含块，如果找不到满足条件的父包含块，相对于浏览器窗口进行定位
            注：我们通过left,right,top,bottom来确定元素定位的具体位置
    3.相对定位
        position:relative;
参照物：元素偏移前自身的位置
            注：相对定位也通过left,right,top,bottom来决定元素偏移的位置
                超出该块（本身的元素）就是为负值

网站
    https://www.w3school.com.cn/css/css_grid_container.asp