html+css总结总结

一. 标签分类

1. 行内元素 a button i b span   不独占一行，不可设置宽高
2. 块元素 div p ul li h1-h6 form table  独占，可设宽高
3. 行内块元素 img input  不独占，可设宽高

二. css 三种引入方式

   1. 内联式（行内样式）  <div style="color:pink">hello</div>
   2. 内嵌式   <style> h1{color:blue;} </style>
   3. 外引式   <link rel="stylesheet" href="./Untitled-1.css">

三. 常用选择器

1.  通配符选择器
2.  标签选择器
3.  类选择器
4.  id选择器

四. 样式

/* 字体： */
color: pink;
font-family: "宋体";
font-size: 30px;
font-weight: 700;
/* italic */
/* font-style:nomoral; */
/* 文本： */
/* 文本对齐 */
text-align: end;
/* 文本修饰 underline line-through */
/* text-decoration:overline; */
/* 文本缩进 */
/* text-indent:2em; */
/* 剪切文本 */
text-overflow: clip;
/* 转换大小写  capitalize 首字母大写  lowercase 小写  uppercase 大写 */
/* text-transform:capitalize;  */
/* 文字间距： */
/* 字母或中文间距 */
letter-spacing: 30px;
/* 英文单词间距 */
word-spacing: 50px;
/* line-height:50px;  */
/*  */
background-image: url("./nicon-10750f3f7d.png");
background-repeat: no-repeat;
background-position: 8px -62px;
background-position: 50% 50%;
background-size: 30px 30px;
background-size: 50% 50%;

五. css 优先级

样式优先级：
    !important > 行内样式 > id > class > tag > * > 继承父元素
权重：
        10000      1000    100    10     1    0      无
    有些样式不能继承  能继承的一般是文字样式
 层级：
 	z-index不一定是整数 ，数越大层级越高，只能用于定位元素（relative/absolute/fixed,staticy粘性定位层级更高）
 	当一个div的Z-index为整数时,它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。当一个div的Z-index为auto时,如果它和它的兄弟进行比较,采用它父元素的Z-index。

六. CSS 选择器组合使用

选择器匹配规则：从右向左

子代选择器：
    div>h1{}
后代选择器：
    div h1{}
并列选择器：
    h1,p{}
带有.box的div:
div.box

七. css 三大特性

1. 层叠性
2. 继承性
3. 优先级

# 命名规则
1. 不能数字或数字开头命名
2. 驼峰或下划线命名

八. 文档流

浏览器根据元素排列方式,块元素从上到下,内联元素(行内元素和行内块元素)从左到右,遇到阻塞自动换行.称为流式布局.

九. 标准盒模型

box-sizing: content-box;
width: 50px;
border: 5px solid black;
padding: 5px;
margin: 5px;

width设置的是content的宽度
盒子组成:content+padding+border+margin

十. 怪异盒模型

box-sizing: border-box;
width: 50px;
border: 5px solid black;
padding: 5px;
margin: 5px;

width设置的是border+padding+content 盒子组成:content+padding+border+margin

十一. 内外边距

1. 内边距

padding: 10px 20px 30px 40px;
/* 上 右 下 左  */
padding: 10px 20px 30px;
/* 上 左右 下 */
padding: 10px;
/* 上下左右 */

2. 外边距

maigin: 10px 20px 30px 40px;
/* 上 右 下 左  */
margin: 10px 20px 30px;
/* 上 左右 下 */
margin: 10px;
/* 上下左右 */

3. 外边距重合问题(两个都是正值或负值时,以绝对值大的为准 一正一负时，以两数的和为准)

.a {
  width: 50px;
  height: 50px;
  border: 5px solid black;
  margin-bottom: 50px;
}
.b {
  border: 5px solid green;
  height: 100px;
  width: 50px;
  margin-top: 100px;
}

    <!-- 解决办法:
    给后一个元素设置float
    不需要解决-->

4. 外边距穿透问题发生条件:
  1. 在垂直方向  2. 父元素没有边框
解决方法:
  1. 给父元素添加边框
  2. 不使用外边距,使用内边距
  3. 父元素加overflow：hidden
  4. 给父或子设置display：inline-block
  5. 给父或子设置float
  6. 给父或子设置position：absolute
  7. 中间使用一个空元素

#box2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.parent {
  /* border: 5px solid black; */
  width: 100px;
  height: 150px;
  background-color: rgb(113, 206, 183);
}
.son {
  /* border: 5px solid green; */
  height: 100px;
  width: 50px;
  background-color: rgb(252, 190, 190);
  margin-top: 50px;
}

<div class="parent">
  <div class="son"></div>
</div>

十二. 边框

boeder: 1px soild red;
border-width: 1px;
border-style: dotted;
/* soild 实线 dotted 点状 double 双实线 groove 凹槽 */
border-color: pink;
border-top: 1px soild red;
border-radius: 50%;

十三. 块元素的居中

margin: 0 auto ;

十四. 图片居中

对其父元素设置text-align:center;

十五. 文本居中

对父元素设置text-align:center;

十六. 让多个元素同处在一行显示

1. 使用display: inline-block;
(元素间有间隙,对父元素添加{font-size:0}解决)
(会使margin:0 auto失效,要使用text-align:center居中)
(设置inline-block 后div不对齐,解决:
1、暴力float，当然这是备选方案，毕竟脱离文档流后页面元素会不好控制
2、简单粗暴地给所有元素都加上内容，例如空格符
3、设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置。
原文链接:https://blog.csdn.net/shuiseyangguang/article/details/84069906)

.s {
  width: 100px;
  height: 100px;
  background-color: rgb(245, 155, 155);
  display: inline-block;
}
.d {
  width: 100px;
  height: 100px;
  background-color: rgb(91, 148, 255);
  display: inline-block;
}
.f {
  width: 100px;
  height: 100px;
  background-color: rgb(156, 55, 55);
  display: inline-block;
}

<div class="s"></div>
<div class="d"></div>
<div class="f"></div>

2. 使用浮动(元素间没有间隙)

十七. 浮动

开启浮动后,浮动对自身的影响:
    1. 会立即脱离文档流(在文档流中没有该元素位置)
    2. 层级默认会提升半层 会覆盖其他元素()
    3. 不会覆盖文字
    4. 保留了inline-block的优点,去掉了他的缺点,相当于inline-block的升级版,默认内容撑开,可设宽高,会使margin:0 auto;失效
    5. 浮动不会继承

浮动对兄弟元素影响:
    1. a元素开启浮动后 后面的块元素b默认上移 如果想保持在原来的位置可以清楚浮动
    2. a元素是块级元素 没开启浮动,下面的b元素开启浮动后 上不去

浮动对父元素影响:
    1. 当所有子元素都浮动,父元素将没有内容,不被撑开,高度塌陷

清浮动方法:(不能清除兄弟元素的影响，清楚的是子元素对父元素的影响)
    1. 给父元素设置高度
    2. 给父元素也设置浮动
    3. 给父元素添加display:inline-block;
    4. 在浮动元素下添加新div自定义clear:both;清除父元素的浮动影响(如果对兄弟元素使用clear:left/clear:right要与浮动方向相同)

.clear {
  height: 0;
  font-size: 0;
  /* 解决IE6低版本中默认元素最小19像素高度的兼容性问题,只能解决到最后2像素 */
  clear: both;
  /* 表示其左右方向不能有浮动,使此元素在浮动元素下一行显示,而不会被浮动元素覆盖 */
}

    5. 在浮动元素下加一句:<br clear="all">
    6. overflow三大属性:
        auto(溢出显示滚动条)  scroll(默认显示滚动条)  hidden(溢出隐藏)

.parent {
  margin: 0 auto;
  border: 1px solid rgb(91, 148, 255);
  zoom: 1;
  /* ie6浏览器 */
  /* overflow:auto; */
  overflow: hidden;
  /* 标准浏览器适用,ie6下不适用 */
  /* 两者同时使用,适用所有浏览器 */
}
.son {
  width: 100px;
  height: 100px;
  background-color: rgb(245, 155, 155);
}

    7. 使用after伪类(ie6 ie7不支持after伪类,但ie6 ie7下浮动元素的父级有宽度就不用清浮动)

.parent {
  margin: 0 auto;
  border: 1px solid rgb(91, 148, 255);
  zoom: 1;
  /* 加上zoom:1就可以清楚所有的浏览器浮动 */
}
.clearfix::after {
  content: "";
  /*  给元素追加一个空块 且这个快两边无浮动*/
  display: block;
  /* 伪元素是inline,要设成block */
  clear: both;
}

十八. 伪元素(:😃

元素的特殊位置,开始位置 结束位置 第一行

/* 元素前面 */
.box::before {
  content: "eeeeeee";
}
/* 元素后面 */
.box::after {
  content: "ffffff";
}
/* 第一行 */
.box::first-line {
  background-color: rgb(174, 255, 143);
}
/* 首字母 */
.box::first-letter {
  color: rgb(245, 32, 32);
}

十九. 伪类(😃 (优先级 10)

/* 悬浮状态 */
.box:hover {
  color: blue;
}
/* 激活状态 */
.box:active {
  color: brown;
}
/* 未访问状态 */
a:link {
  color: cornflowerblue;
}
/* 访问过后状态 */
a:visited {
  color: chocolate;
}

二十. 定位

相对定位:
    position:relative;
    1. 相对于元素自身在文档流中的位置
    2. 没有脱离文档流
    3. 层级默认会上调,可通过z-index调整
    4. 默认会在原来文档流位置, 可使用top left bottom right调整位置
    5. 使用场景一般用于对元素位置的微调

绝对定位:
    position: absolute;
    1. 参考点 距离自己最近的非static定位的祖先元素 如果找不到那么他的祖先定位则相对最初的包含块
    2. 脱离文档流
    3. 层级默认会上调,可通过z-index调整
    4. 默认会在原来文档流位置, 可使用top left bottom right调整位置
    5. 子绝父相 使用场景想要元素相对于祖先元素定位

固定定位:
position: fixed;
    1. 相对于浏览器可视窗口的位置
    2. 脱离文档流
    3. 层级默认会上调,可通过z-index调整
    4. 默认会在原来文档流位置, 可使用top left bottom right调整位置
    5. 使用场景一般用于对浏览器可视窗口的定位
粘性定位 position:sticky;
静态定位 position:static;
  一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

二十一. 定位居中方法

body {
  width: 100%;
  height: 500px;
  position: relative;
  background-color: rgb(192, 242, 255);
}

.box {
  width: 300px;
  height: 200px;
  background-color: rgb(253, 99, 125);
  position: absolute;
  /* 方法一 */
  /* left: 50%;
            margin-left: -150px; */

  /* 方法二 */
  left: 50%;
  transform: translate(-50%, 0);
}

二十二. emmet 方法

二十三. 通常用 i 标签实现小图标 字体默认倾斜

二十四. 图片默认对齐文字基准线，下面会出现三像素的间距，font-size:0;解决

二十五. a 为 inline 属性，要包括 img 时，可换成 inline-block

二十六. 字体图标

引入样式文件，像使用字体的方法使用字体图标

二十七. 过渡

重点：初状态和末状态

.box {
  width: 50px;
  height: 60px;
  background-color: red;
  transition: width 5s;
}
.box:hover {
  width: 80px;
  height: 80px;
  background-color: pink;
  border-radious: 50%;
}

二十八.关键帧动画

/* 渐变轮播 */
.box {
  width: 400px;
  height: 400px;
  /* 
      名称* 
      动画时长* 
      运动轨迹（先快后慢 匀速 先满后快 默认匀速）
      动画延迟时间 默认无延迟
      动画播放次数 默认一次
      动画播放方向 默认顺时针
      动画结束后的状态 默认会恢复原来的状态

        */
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  animation: banner 5s infinite;
}
@keyframes banner {
  0% {
    background-size: 100% 100%;
    background-image: url("./1.png");
  }
  20% {
    background-image: url("./2.png");
  }
  40% {
    background-image: url("./3.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  60% {
    background-image: url("./4.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  80% {
    background-image: url("./6.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  100% {
    background-image: url("./1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

  /* 无缝轮播 */
    <style>
    .box{
      width: 100px;
      height: 100px;
      position: relative;
      overflow: hidden;
      /*
      名称*
      动画时长*
      运动轨迹（先快后慢 匀速 先满后快 默认匀速）
      动画延迟时间 默认无延迟
      动画播放次数 默认一次
      动画播放方向 默认顺时针
      动画结束后的状态 默认会恢复原来的状态

        */
      /* animation: name duration timing-function delay iteration-count direction fill-mode; */

    }
    @keyframes banner{
      0%{
        position: absolute;
        left: 0px;
      }
      20%{
        left: -100px;
      }
      40%{
        left: -200px;
      }
      60%{
        left: -300px;
      }
      80%{
        left: -400px;
      }
      /*
      100%{
        left: -500px;
      }
      */
      99.9%{
        left: -500px;
      }
      100%{
        left: 0px;
      }
    }
    .b{
      width: 600px;
      height: 100px;
      position: absolute;
      display: inline-block;
      animation: banner 5s infinite;
    }
    .b:hover{
      animation-play-state: paused;
    }
    img{
      float: left;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="b">
    <img src="./1.png" alt="">
    <img src="./2.png" alt="">
    <img src="./3.png" alt="">
    <img src="./4.png" alt="">
    <img src="./6.png" alt="">
    <img src="./1.png" alt="">
    </div>
  </div>
</body>

二十九.悬浮效果可以控制子元素 孙元素 或兄弟元素

三十.实现拐弯边框：

1. 可使用透明伪元素遮挡
2. 利用绝对定位调整层级的方式 遮挡

三十一.input

默认带有边框
outline 轮廓线不会占用空间

三十二.HSLA(H,S,L,A)

取值介绍:
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。
使用说明:
HSL记法。
此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。

三十三.省略号

单行省略号(块元素)

p {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行省略号

div {
  width: 50px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* 指定子元素垂直排列 */
  -webkit-line-clamp: 3;

  text-overflow: ellipsis;
  text-align: justify;
  /* 行数 */
  overflow: hidden;
}

三十四.常用转义字符

   空格
&lt;    <
&gt;    >
&copy;  @

三十五.box-shadow 盒阴影

box-shadow: 10px 10px 5px red;
/* x便宜量 y偏移量 偏移距离 阴影颜色 */

三十六.transform、translate、transation、transport

transform 位置、转换

    transform:translate3d(10px,10px,10px);
    transform:scale(1.2,1.2);
    transform: rotate(-8deg);

    text-transform: capitalize;
    /* 首字母转大写 */

translate 翻译

    <p translate="no">这个段落不能翻译。</p>
    <p>这个段落可以被翻译</p>

transport 传输

transition 动画过渡

transition: width 5s;

三十七 .盒子不设高度内容撑开（脱离文档流的内容除外）

三十八.水平居中方法

margin:0 auto;

text-align:center;

left:50%;

display:flex;

父元素display:table-cell;子元素margin-left:剩余宽度的一半

三十九.垂直居中

1. display：flex
2.  table-cell
3. margin，transform配合
4. inline-block+vertical-aligin
5. absolute+负margin
6. absolute+margin:auto  和方法5类似，当宽度和高度未知时使用
7. 方法7：absolute+transform  与方法5类似
8. 强大的grid
源文:https://blog.csdn.net/qq_43677117/article/details/109475579

四十.relative 定位不脱离文档流，重新定位后，之前的位置仍被占用

四十一.三角形

.box {
  width: 0px;
  height: 0px;
  border-width: 0px 8px 8px 8px;
  border-style: soild;
  border-color: transprant transparent red;
}

eg:
     .xiaosanjiao::after {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 0 8px 8px;
  border-color: transparent transparent white;
  border-style: solid;
  /* border: 4px solid transparent;
            border-bottom: 4px solid rgb(206, 116, 116); */
  position: absolute;
  top: 19px;
  left: 24px;
  display: none;
}
#borderR:hover .xiaosanjiao::after {
  display: block;
}

四十二.过渡效果

#borderR .erweima {
  position: absolute;
  top: 28px;
  left: -25px;
  width: 124px;
  /* height: 148px; */
  /* dizplay:none也不需要 */
  background-color: #fff;
  z-index: 100;
  text-align: center;
  box-shadow: 0px 5px 10px #c4c4c4;

  /* 开始状态 */
  height: 0;
  transition: all 2s;
  overflow: hidden;
}
#borderR:hover .erweima {
  /* display: block; */

  /* 结束状态 */
  height: 148px;
}

四十三.表格

    <style>
        table{
            text-align: center;
            border-collapse: collapse;
        }
    </style>
    <!-- cellspacing单元格外边距  cellpadding单元格内边距 align整体居中 width整体table宽度 height单元格高度 默认单位px border边框宽度 -->

    <!-- td属性 align rowspan colspan -->
    <table border="1" width="300" height="200" align="center">
    <tr>
        <td>第三节</td>
        <!-- 跨行 -->
        <td rowspan="2">语文</td>
        <!-- 跨列 -->
        <td colspan="2">语文</td>
        <td>数学</td>
        <td>英语</td>
    </tr>

    <table>
        <caption >表格的标题</caption>
        <thead>
            <tr>
                <th>hd</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>身体</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>脚</td>
            </tr>
        </tfoot>
    </table>

input 轮廓线

    input{
            /* 轮廓线，从边框位置向外延伸 不会占用空间 */
            outline: none;
        }

四十四.表单

     <form action="./费用报销单.html" method="post">
        用户名：<input type="text" name="username" placeholder="请输入用户名"><br>
        密&emsp;码：<input type="password" name="password"><br>
        <input type="submit" value="提交">
        <input type="reset">
        <button disabled="disabled"></button>
        <button type="reset"></button>
        <button type="submit"></button>
        <input type="text"><button  type="search">search1</button>
        <br>
        <!-- 颜色选择 -->
        <input type="color">
        <input type="date" name="" id="">
        <input type="datetime" name="" id="">
        <input type="datetime-local" name="" id="">
        <input type="email" name="" id="">
        <input type="file" name="" id="">
        <input type="image" src="" alt="">
        <input type="month" name="" id="">
        <input type="number" name="" id="">
        <input type="range" name="" id="">
        <hr>
        <!-- name提交数据必须要有 可以实现分组作用（单选框和多选框） checked默认选中 value值给程序员看-->
        性别：
            <input type="radio" name="gender" checked value="男"> 男
            <input type="radio" name="gender" value="女"> 女<br>
        爱好：
            <input type="checkbox" name="hobby
            "> 抽烟
            <input type="checkbox" name="hobby"> 喝酒
            <input type="checkbox" name="hobby"> 敲代码

            <hr>
            <!-- 下拉框 -->
        地址：
        <select name="address" id="">
            <option value="郑州">郑州</option>
            <option value="驻马店">驻马店</option>
            <option value="周口">周口</option>
        </select><br>

            <!-- 文本域 -->
            <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>

四十五.lable 扩大点击范围

    <form action="./课程表.html">
        <label for="username">用户名</label>
        <input type="text" id="username">

        <!-- 或者 -->
        <label>
            用户名<input type="text">
        </label>
    </form>

四十六.background-size:cover/contain属性

.box{
       
         background-image: url("./1.jpg");
     
         /* cover覆盖box,以最大宽度为准 */
         /* background-size: cover; */

         /* contain包含图片, 以最小宽度为准*/
         background-size: contain;

     }
   
 <div class="image">
     <img src="./2.jpg" alt="">
 </div>

四十七.vertical-align属性

       vertical-align: baseline;
    // top 	把元素的顶端与行中最高元素的顶端对齐
    // text-top 	把元素的顶端与父元素字体的顶端对齐
    // middle 	把此元素放置在父元素的中部。
    // bottom 	使元素及其后代元素的底部与整行的底部对齐。
    // text-bottom 	把元素的底端与父元素字体的底端对齐。
    // length 	将元素升高或降低指定的高度，可以是负数。
    // 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

四十八.transform属性

    transform: translate3d(10px, 20px ,30px);
    // translate(x,y) 定义 2D 转换
    // translate3d(x,y,z) 定义 3D 转换
    transform: scale(1.25,1.25);
    // scale(x[,y]?) 	定义 2D 缩放转换
    // scale3d(x,y,z)  定义 3D 缩放转换
    transform: rotate3d(100,30,40,350deg);
    // rotate(angle)  定义 2D 旋转，在参数中规定角度
    // rotate3d(x,y,z,angle)  定义 3D 旋转

四十九.开启绝对定位后,元素会自动变为块元素

五十.git

五十一.bootstrap

五十二.用span 或 i 或 em设置背景图 有宽高 ,但是打开显示宽为0 设置display:inline-block, 或用 p

五十三.tr设置边框无效,加border-collapse:collapse解决 ; td设置宽度无效,td宽度由内容撑开,可在里面设置div,为div添加宽度

五十四.不设置position的情况下设置z-index无效

五十五.pre标签显示内容原样式