html-css的学习总结

html-css

clear==>清楚浮动元素对当前元素的影响

 clear: both; 

​    clear

​            作用：

​              *清楚浮动元素对当前元素所产生的影响*

​              *可选值：*

​                  *left 清楚左侧浮动元素对当前元素的影响*

​                  *right 清楚右侧元素对当前元素的影响*

​                  *both 清楚两侧中最大影响的那侧*

​      

2.clearfix ==>清楚高度塌陷和解决外边距重合

 		.clearfix::before,
        .clearfix::after{
            content: '';
            /* 用来解决外边距重合 */
            display: table;
            /*  用来解决高度塌陷*/
            clear: both;
        }

3.绝对定位来设置包含块居中和平移来设置包含块居中两种方法

.box2{
			//设置宽和高,这样就只有外边距为auto,就可以自动补齐
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            margin: auto;
            /* 让其外边距水平和垂直自动补齐等式 */
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            /* 这样设置就可以让我们的子元素在包含块中居中， */
        }
//第二种方法
.box2{
			
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
			//使用平移来进行对元素设置居中
			transform: translate(-50%,-50%);
        }

4.z-index ==> 设置层级

			position: absolute;
            z-index: 1;
       z-index 层级设置，数越大层级越高，如果不设置z-index，则默认后面写的层级高. 
        	不管父元素的层级多高，它的子元素的层级都比它高 

5.引入图标字体

   //引入文件
   <link rel="stylesheet" href="../01.html/fa/css/all.css">
   //使用(一般用 i标签使用图标字体)
    <i class="fas fa-bell"></i>
	//也可以使用伪类来添加图标字体
	.ul li::before{
            content: "\f1b0"; //使用它的代码值
            font-family:'Font Awesome 5 Free';
            font-weight: 900;
            color: orange;
            margin-left: 40px;
        }

6.字体族

 font-family: sans-serif;
     /* 字体族可选值：
     serif 衬线字体
     sans-serif 非衬线字体
     monospace 等宽字体
     cursive 草书字体
     */

7.行高设置 是元素给其内部的文本设置行高

text-align: right;
            /* 可选值：
                        left 左对齐
                        center 居中对齐
                        justify 两端对齐
            */

8.vertical-align设置 用来设置行内元素对齐方式的

display属性值为inline、inline-block、inline-table另加一个table-cell的元素.
vertical-align: bottom;
            /* vertical-align
            可选值：
                    baseline 默认值 基线对齐
                    top 顶部对齐
                    bottom 底部对齐
                    middle 居中对齐
                    也可以是数值
                    在遇到图片要对齐其框边时，也可以使用这个属性来对齐
            */

9.文本的省略号设置

 white-space: nowrap ; //对于文本是否换行设置
            /* 可选值：
                    normal 正常
                    nowrap 不换行
                    pre 保留空白
                    */
 overflow: hidden; //超出的隐藏
 text-overflow: ellipsis;  超出部分的显示形式
                    /* 文本显示形式
                    ellipsis 省略号
                    */

10.背景图片

background-image: url("./tupian/1.jpg"); //图片路径
 background-repeat: no-repeat; /* 用来设置背景的重复方式
            可选值：
            repeat 默认值，背景会沿着x，y方向重复
            repeat-x 沿x重复
            repeat-y 沿y重复
            no-repeat 不重复
            */
/* background-position: top right; */ 偏移量的计算
            /* 表示图片要在背景的位置 至少需要两个值
                    如果只写一个 则默认为center
                    2.还可以通过偏移量来指定图片的位置 
             */
 background-clip: content-box;
            /* 设置背景的范围，
            可选值：
            border-box 默认值，背景会出现在边框的下边
            padding-box 背景不会出现在边框，只会出现在内容区和内边距
            content-box 背景只会出现在内容区
			*/ 
background-origin: border-box;
            /* 
            背景图片的偏移量计算的原点
            padding-box 默认值，background-position从内边距开始计算
            content-box 从内容区处开始计算也就是内容区的左上角
            border-box 背景图片变量从边框处左上角开始计算
            */
background-size: 100% auto;
            /* 
            第一个值为宽度，第二个高度
            如果只写第一个，则第二个为auto
            cover  图片的比例不变，将元素铺满
            contain 图片比例不变，将图片完整显示  
            */ 
background-attachment: fixed;
            /* 
            背景图片是否跟随元素移动
            可选值
            scroll 默认 会跟随移动
            fixed 固定在页面中，不会随元素移动
            */            

11.表格的设置

table{
/* border-spacing: 0px; */
/* 指定边框之间的距离，但为0px时，边框之间的距离是两个距离加一块的，视觉效果不好 */
border-collapse: collapse;
 /*  属性值： collapse 设置边框的合并 */
 };
div{
display: table-cell; //行内元素
    /* 将元素设置为单元格 td */
    vertical-align: middle;
  /* 将元素设置为单元格后，再将此父元素的vertical-align设置为middle，
            是让它在垂直方向上居中 */
            }
 //设置块元素的水平居中           
 margin: 0 auto;
 /* 这是设置它的水平方向的居中 */

12.表格的结构

<table>
  <!-- 表示表格的一个头部 -->
	<thead>
	 <!-- tr 表示表格当中的一行，有几个tr就是有几行 -->
		<tr>
		 <!-- th 表示头部中的行，里面的字体加粗居中 -->
		  <th>
		  //表示身体
	 <tbody>
	  	<tr>
	  	 <!-- td 表示表格当中的一列，有几个td就有几个单元格 -->
	 	 <td>
	 	 <!-- rowspan==>表示"纵向"合并单元格,那么下一行的td就该不写 colspan==> 横向的合并单元格,那么这行的后面的某列就应该不写-->
	  	<td rowspan="2">
	  	//底部
	  	 <tfoot>

13.表单结构

<form autocomplete="off"> 
    <!--  autocomplete="off" 关闭自动补全-->
     <input type="text" name="username" readonly autofocus>
     <!--readonly 将表单设置为只读，数据会提交
     disabled 将表单设置为禁用，不会提交-->
     <!-- autofocus 自动获取焦点 -->
     //radio==>单选框,通常两个radio用同样的name配和使用
     //checked==> 默认选中
     <input type="radio" name="1" value="2" checked><br>
     <select> //下拉框
     	<option value="xxx"> //下拉框的选项
     	 <!-- 重置按钮 -->
     <input type="reset">
       

14.伪类

 a:link{
            /* 正常的连接,也指没有点过的连接 */
a:visited{ // 点击后的样式设置
            /* 只能改颜色再visited中 */
a:hover{
            /* 鼠标放在连接上出现的变化 */
a:active{
            /* 点击出现的变化 */

15.超链接

 <!-- a标签也是行内元素，可以嵌套任何元素，除了它自身-->
<!-- target属性：用来指定超链接打开的位置
    可选值：
        self：默认值在当前页面中打开超链接
        blank：在新页面中打开超链接
        
-->
<!-- javascript:; 作为href的属性，此时点击超链接什么也不会发生 -->
<!-- href的#号属性，直接转到当前页面的顶部位置 
id属性：每一个标签都可以添加一个id属性
        id属性时元素的唯一表示，一个页面中不能出现重复的id属性
        可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性
<a href="#buttom">到底部</a>
<a id="buttom" href="#">回到顶部</a>

16.动画==>animation

  @keyframes test { //动画的设置名字和来去 
            
            from{
                margin-left: 0px;
            }
            to{
                margin-left: 700px;
            }
        }
   animation-name: test; // 动画的名字
   animation-duration: 2s; //执行时间
   animation-iteration-count: infinite; 
    /* count 动画执行的次数
        可选值： 次数
        infinite 无限执行    
     */
   animation-direction: normal; //动画的定位,
       /* 
       normal
       默认值，从from到to
       reverse 从to到from
       alternate 从from到to再从to到from
       alternate-reverse 从to向from再从from到to
       */
   animation-play-state: paused; //动画刚开始执行的状态
        可选值：
        running 默认值 动画执行
        paused 动画暂停
    */
    animation-fill-mode: none; //动画执行完毕后的位置 
        /* 
        可选值；
        none：默认值 动画执行完毕后元素回到原来位置
        forwards 动画执行完毕后元素会停在动画结束的位置
        backwards 动画延时等待时，元素就处于开始位置
        both 结合了forwards和backwards
        也可以用简写属性
        */

17.弹性盒设置 flex

display: flex; //设置弹性盒 ==>父元素(容器的设置)
flex-direction:row; //设置容器中弹性元素的排列方式
                可选值：
                row 弹性元素水平排列
                主轴：自左向右
                侧轴：与主轴垂直方向成为侧轴
                row-reverse 弹性元素在容器中反向水平排列
                column 弹性元素纵向排列（自上向下）
                column-reverse 纵向自下而上
                */
flex-wrap: nowrap;//设置弹性元素是否在弹性容器中自动换行
     可选值：
     nowrap 默认值，元素不会自动换行
     wrap 元素沿着辅轴方向换行
     wrap-reverse 元素沿着辅轴反方向换行
     */ 
    /* flex-flow: ;  flex-wrap 和flex-direction的简写属性
         例如 flex-flow: row wrap; 自左向右排列，换行
         */
justify-content: flex-end;
    如何分配主轴上的空白空间 以及 主轴元素如何排列 
    可选值：
    flex-start 元素沿着主轴起边排列
    flex-end 元素沿着主轴终边排列
    center 元素居中排列
    space-around 空白平均分布元素两列，中间距离是边上的距离的两倍
    space-evenly 空白分配到元素的单侧，这样距离是一样的
    space-between 空白均匀分布到元素之间
    */
align-items 
     元素在辅轴上如何对齐
     可选值：
     stretch 默认值，将同一行元素的长度设为相同的值
     flex-start 元素不会拉伸，沿着辅轴起边对齐
     felx-end沿着辅轴终边对齐
     center 居中对齐
     baseline 基线对齐
    */
align-content:  辅轴上空白的设置
    如何分配辅轴上的空白空间（主轴元素如何排列）
    可选值：
    flex-start 元素沿着辅轴起边排列
    flex-end 元素沿着辅轴终边排列
    center 元素居中排列
    space-around 空白平均分布元素两列，中间距离是边上的距离的两倍
    space-evenly 空白分配到元素的单侧，这样距离是一样的
    space-between 空白均匀分布到元素之间 */
    /* 如果让一个元素在父元素块中居中 可以设置
**/**
    justify-content和 align-items都为center就可以达到居中的效果
    
子元素(弹性元素的设置)
flex-grow 弹性元素的属性 ==>指定弹性元素伸展系数 (一般为1)
	当父元素有多余空间时，子元素如何伸展
	父元素的剩余空间，会按比例进行分呸
flex-shrink  指定弹性元素的收缩系数
	当父元素中的空间不足以容纳所有的子元素时，对子元素进行收缩
	为0时 不收缩，父元素不够时会溢出

flex-basis  指定元素在主轴上的基础长度
	主轴横向，则 flex-basis指定是宽度
	主轴纵向，则 flex-basis指定是长度度
	默认值是auto，就是元素本身的高宽度
flex: 1 1 auto;
    /* 增长 缩减  基础
    //简写属性
    initial  ===>“flex：0 1 auto” 
    auto    ===>“flex： 1 1 auto”
    none    ===>“flex：0 0 auto” 弹性元素没有弹性
 order: 1;
     决定弹性元素的排列顺序 如果弹性元素为3个,那么你设置每个元素的order,就可以设置他们的排列顺序

18.display和visibility(元素的显示状态)和border

dispaly:
    inline-block 将元素设置为行内块元素
    none 元素隐藏
    block 将元素设置为块元素
    inline 将元素设置为行内元素
visibility:用来设置元素的显示状态
    visible 默认值 正常
    hidden 隐藏，但依然占据页面中位置
border:
border-style: 
	solid  实线
    dotted 点状虚线 
    dashed 虚线
border: 10px red solid; 
	简写属性:
        边框的宽度
        边框的颜色 
        边框的风格必须的三个要素
    

19.媒体查询

媒体查询
    @media 查询规则
        all  所有设备
        print 打印设备
        screen 带屏幕的设备
        speech 屏幕阅读器
添加only, 表示只有only的使用主要是为了适应老的浏览器 */
    /* @media only screen{
    body{}}
    
 width 视口的宽度
 height 视口的高度 
 min-width,视口的最小宽度
 max-width 视口的最大宽度
 /* 样式切换的分界点,被称为断点, */    
 一般常用的断点
     <768 超小屏幕 max-width=768px
     >768 小屏幕 min-width=768px
     >992 中型屏幕 min-width=992px
     <1200 大屏幕 min-width=1200px
 //实例==>在宽度的范围为500-1000px的范围内body的背景颜色为#FF6700
@media only screen and (min-width:500px) and (max-width:1000px){
            body{
                background-color: #ff6700;
            }
        }     

20.平移和旋转

/* transform: translate(); */  简写属性
    /* transform: translateX(); */
    /* transform 可以设置多个 translate 中间用空格隔开，一个元素只会有一个						 transform生效 */
    平移不会影响别的元素。
    translateX() 沿着x轴方向平移
    translateY() 沿着y轴方向平移
    translateZ() 沿着z方向平移
    
**/**
    -还有一个值是百分比，它是相对于自身来计算的
    translateX(-50%)
    
transform: rotateX();
    旋转：
    旋转可以使元素沿着 x y z 旋转指定的角度
    rotateX(45deg)  沿着x轴旋转45度
    rotateY(1turn)  沿着y轴旋转1圈
    rotateZ()
transform: rotateY(180deg)  translateZ(500px);
    /* 先沿着y轴旋转180度，再沿z轴方向平移500像素，哪个在前哪个先动 */
    本来是该贴近我们人眼的但因y轴转换了角度,所以,这个远离了我们
    /* z轴的平移，调整元素在轴的位置，，就是元素和人眼之间的距离
   z轴平移属于立体效果，默认情况下网页不支持透视，看效果还得设置网页的透视。
    perspective: 800px; //网页的透视===>元素距离视图的距离，以像素计。

21.定位

relative 相对定位，
	position不是static值就是开启定位，开启定位才可以使用top和left等值 */
	/* 定位元素和定位位置的上侧距离 ：
	设置 relative==>相对于自身位置的参照，相对定位会提升元素的层级，并且不会改变元素的性质 */
	
absolute 绝对定位 开启元素绝对定位后，元素会从文档流中脱离，改变元素的性质 变为块元素
   开启后元素会提升一个层级，
    **绝对定位是相对于其<span style="color:red;">"包含块"</span>进行定位，
    "包含块"就是离当前元素最近的祖先 块 元素
    而绝对定位的包含块就是离它最近的开启了"定位"的祖先元素，
    如果没有开启定位的祖先元素，则相对于根元素进行定位（html） 

fixed，固定定位 也是一种绝对定位，所以大部分特点和绝对定位一样
    唯一不同：
    固定定位"永远参考"于浏览器的视口进行定位，
    固定定位的元素"不会随网页的滚动条滚动"。也就是固定定位
    
sticky 粘滞定位 与相对定位特点差不多，但不同的是，粘滞定位可以在元素到达某一位置时，将其固定  例:==>position:sticky top:20px; //当元素到达20px的top值位置时,就会固定在top为20px的那个位置

22.over-flow (处理溢出)

overflow 处理溢出
    属性值:
    visible 默认不变化
    hidden  将溢出的内容隐藏
    scroll  生成两个滚动条
    auto    根据需要生成滚动条
    -x	    是水平方向生成滚动条 // overflow-x
    -y	    是垂直方向生成滚动条
    */

23.运动

.box1{
animation: ymm  0.3s steps(4) infinite ;}
.box1:hover{
         animation-play-state: paused;
//运动设置
@keyframes ymm {
             from{
                background-position: 0  ;
                /* background-color: rgb(81, 172, 59); */
                /* box-shadow: 1px 0px 0px transparent; */
             }
          to{
            background-position: -450px  ;
            /* background-color: rgb(160, 12, 12); */
            /* box-shadow: 10px 5px 15px rgba(0, 0, 0, .7); */
          }   
         }

24.transition

transition-timing-function: cubic-bezier(1,-0.93,0,1.95); */
     /* function 默认值为ease，是先快后满的一个效果
     linear 匀速运动
     ease-in 加速运动
     ease-out 开始很快的减速运动
     ease-in-out 先加速，后减速运动
     cubic-bezier() 来指定时序函数
	steps() 分布执行过度效果
        第一个值为步数，第二个值为从哪开始过度
        end  在时间结束时进行过度
        start 在时间开始时进行过度
 transition-delay: ;
 	过度效果的延迟
/* transition: ; //简写属性
    同时设置过度相关的所有属性，只有一个要求，
    如果写延迟，则两个时间中第一个是持续时间，
    第二个是延迟时间。