4.27 笔记

 <!-- 伪类 => :选择器名 => 选中满足指定条件的元素 -->

  <!-- :hover => 被鼠标移入的标签 -->

  <!-- div:hover => 是div并且又是被鼠标移入的标签 -->

  <!-- div  :hover => div内被鼠标移入的后代元素 -->

  <!-- 盒模型 => 给元素设置尺寸,间距 -->

  <!-- 可以把所有的标签都想象成一个盒子 -->

  <!-- 标签的width和height设置的不是盒子的宽高, 而是内容的宽高 -->

  <!-- 内容的宽高 => 内胆的大小 -->

  <!-- 盒子的宽高 => 保温杯的大小 -->

  <!--

  盒模型只有五个样式

  01: width => 宽 => 内胆的宽

  02: height => 高 => 内胆的高

  03: padding => 内边距 => 真空层的厚度

  04: margin => 外边距 => 两个保温杯之间的距离

  05: border => 边框 => 外壁的厚度

  -->10px => 边框厚度 (不能设百分比)

      solid => 边框样式

      #000 => 边框颜色

      border: 10px solid #000; */

      border-left: 10px solid #000;

      border-right: 10px solid #000;

      border-top: 10px solid #000;

      border-bottom: 10px solid #000; *

      //* 复合样式 */

      /* 复合样式都是简写, 总是可以写成单一样式的形式 */

      /* border: 10px solid #000; */

      border-width: 10px;

      border-style: solid;

      border-color: #000;

      /* 如果你又要写单一样式,又要写复合样式, 应该单一样式写在复合样式的后面,防止覆盖 */

        /* 上右下左 (顺时针) */

      /* padding: 20px 30px 40px 10px; */

     

      /* 上下20px 左右30px */

      /* padding:20px 30px; */

      /* 左右30px， 上20px， 下40px */

      /* padding:20px 30px 40px; */

      /* 4个方向都是40 */

       /* 4个方向外边距

      margin-left: 50px;

      margin-top: 50px;

      margin-bottom: 50px;

      margin-right: 50px; */

      /* 上右下左 */

      /* margin: 10px 20px 30px 40px; */

      /* 上下10px, 左右20px */

      /* margin: 10px 20px; */

      /* 上10px,下30px, 左右20px */

      /* margin: 10px 20px 30px; */

      /* 4个方向都是10px */

      /* margin: 10px; */

       <!-- 外边距 => 标签和标签之间的距离 => cellspacing -->

  <!-- 内边距 => 内容和标签的距离 => cellpadding-->

 

   <!-- 兄弟元素垂直方向的margin会发生重叠现象,最大的margin值生效 (不需要处理) -->

  <!-- 父子元素垂直方向的margin会发生重叠,去最大的值,然后加到父元素上. (需要处理) -->

  <!-- 如何解决父子重叠这个问题？ -->

  <!-- 偏方 -->

  <!-- 01: 给父元素加上边框 -->

  <!-- 02: 给父元素设置overflow:hidden -->

  <!-- 改变文档流(治本) -->

  <!-- 01: 浮动 -->

  <!-- 02: 弹性盒模型 -->

  <!-- 03: 定位 -->

   #wrap{

      width: 200px;

      height: 200px;

      background-color: red;

      /* border: 1px solid #fff; */

      /* overflow: hidden; */

      /* float: left; */

      /* display: flex; */

      /* position: absolute; */

    }

    #wrap > div{

      background-color: yellow;

      margin-top: 50px;

    }

块级元素 (div,h1-h6,p,所有的列表标签,所有的布局标签):

    默认占一行,宽是父元素的宽,高是内容的高,可以设置宽高.块级元素垂直方向的margin会重叠.

  行内元素 (a,span, img, strong, em, code, 所有的表单标签):

    不默认占一行,宽高默认是内容的宽高,不能设自定义宽高.设置垂直方向的padding和margin无效.

 <!-- 行内块 => 不独占一行,但是又可以设置宽高 -->

  <!-- 以下元素,是行内块元素 -->

  <img src="./img/2222.png" alt="" />

  <button>按钮</button>

  <input type="text" />

   transparent => 透明的黑色

     /* 设置圆角弧度对应的半径 */

      /* border-radius: 30px; */

      /* border-radius: 100px; */

      /* border-radius: 50%; */

      /* 左上 右上 右下 左下 */

      /* border-radius: 30px 40px 50px 60px; */

      /* 左上右下是30px, 右上和左下是40px */

      /* border-radius: 30px 40px; */

      /* 每个圆角的由两段圆弧组成,每个圆弧对应的半径不一样 */

      /* 左上角的两段圆弧对应的半径,分别是30px和10px */

      border-radius: 30px 40px 50px 60px/10px 20px 30px 40px;

  <!-- 文档 => html文档 => 标签 -->

  <!-- 流 => 队伍 -->

  <!-- 文档流 => 标签排列成的队伍 -->

  <!-- 不同的文档流,标签排列的方式不一样 -->

  文档流

  01: 标准文档流 (默认标签排列的方式)(块级元素,行内元素)

  02: 浮动文档流 (落伍, 淘汰了table布局)

  03: 弹性盒模型文档流 (淘汰了浮动文档流)

  04: 定位文档流

  脱标 => 脱离标准文档流

  <!-- 图片底部间隙 => 标准文档流下的现象 --

  如何解决:

  1: 把图片变成块级元素

  2: 字号设为0 -->

  <!-- 改变文档流 -->

  <!-- 行内元素和行内块元素,都可以当成一个文字来看待 -->

  /* 让块级元素水平居中 */

      margin: 0 auto;

 <!-- text-align样式可以作用到行内元素和行内块元素上的 -->

  <!-- text-align对块级元素不生效 -->