html学习笔记-01

1.单元格

单元格合并
1)合并原则：

**只有同一个结构的标签中的单元格才能合并，不能跨结构合并（不能跨thead、tbody、tfoot）
2)

属性名	属性值	说明
rowspan	单元格个数合并	跨行合并，将多行的单元格垂直合并
clospan	单元格个数合并	跨列合并，将多列的单元格水平合并

2.语义化标签

html5中新增加的标签,显示特点和div一致，但是比div多了不同的语义

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

3.字体样式

font 的样式连写 style weight size family ,省略可以省略前两个
1）粗细 font-weight normal正常 bold加粗
2）倾斜 font-style notmal正常 italic倾斜 100-900的数字也可以
3）字体 font-family 多个字体引号包裹逗号分割，从左往右按顺序查找有那个字体显示那个字体，如果都不支持会默认显示字体系列的默认字体

4.文本样式

1）文本缩进 text-indent

• 取值：
  • 数字px
  • 数字em (1em=当前标签1个字的大小)

2）文本居中 text-align

• 取值：
  • left 左对齐
  • center 居中
  • right 右对齐
• 可以居中的标签（属性需要给父元素）
  • 文本
  • span \a\input\img

3）文本修饰 text-decoration

• 取值
  • underline 下划线
  • line-through 删除线
  • ovreline 上划线
  • none 无装饰线
• 开发中常用 text-decoration:none清除a标签的下划线

4）水平居中 margin:0 auto

• 如果需要让div、p、h(大盒子）水平居中，直接给当前元素本身设置即可
• margin:0 auto 一般针对固定宽度的盒子，如果大盒子没有设置宽度，此时会默认沾满父元素的宽度

5）行高 line-height

• 取值
  • 数字px
  • 倍数（当前font-size的倍数）
• 让单行文本垂直居中可以设置line-height:文字父元素的高度
• 网页精准布局是会设置1可以取消上下间距
• 行高和font同时书写时，需要写在font下面 因为font连接写size和line-height同一个位置

5.选择器

1）复合选择器

后代选择器（中间有空格）：选择器1 选择器2{ }
子代选择器（中间大于号）：选择器1>选择器2{ }

2）并集选择器 逗号分割

选择器1, 选择器2{ }

3）交集选择器 紧挨着

选择器1选择器2{ }

4）Emmet语法

5）hover伪类选择器

• 作用：选中鼠标悬停在元素上的状态，设置样式
• 语法：选择器:hover{css}
• 注意：选中的是元素的状态

6.背景

1）背景平铺 background-repeat

属性

取值	效果
repeat	默认值 水平和垂直都平铺
no-repeat	不平铺
repeat-x	x轴平铺
repeat-y	y轴平铺

2）背景位置 background-position:水平位置 垂直位置

3）属性连写

background: color image repeat position

7. 元素显示模式

1）块级元素

• 属性：dispaly:block
• 特点
  • 独占一行（父级的一行）
  • 宽度默认是父元素的宽度，高度默认由内容撑开
  • 可以设置高度
• 代表标签：div、p、h、ul、li …

2）行内元素

• 属性：dispaly:inline
• 特点
  • 一行可以显示多个
  • 宽高由内容撑开
  • 不能设置高度
• 代表标签：a、span、b、i…

3）行内块元素

• 属性：dispaly:inline-block
• 特点
  • 一行可以显示多个
  • 可以设置高度
• 代表标签：input、textarea、button、select…

4）元素显示模式转换

属性	效果
dispaly:block	转换成块级元素
dispaly:inline-block	转换成行内块元素
dispaly:inline	转换成行内元素

8. css特性

1. ul 列表设置 list-style:none属性 ，去除列表的小圆点
2. body设置统一的font-size,统一不用浏览器默认文字大小

9.盒子模型

1）介绍

• 概念：
  1.页面中的每个标签都可以看做一个盒子，通过盒子的视角更方便的布局。
  2. 浏览器进行渲染的时候会将网页中的元素看做一个个的矩形区域，我们称之为盒子
• 盒子模型：
  CSS规定每个盒子由 内容区(content) 内边距区域(padding) 边框区域(border) 外边距(margin) 构成

2）内容区

• 通过width和height设置内容区的宽高

3）边框

• 作用：设置粗细、样式、颜色，设置边框的会影响盒子大小
  
• 边框单方向
  border-top border-bottom border-left border-right
• 连写
  border: width style color

4）内边距（padding）

设置内边距会影响盒子大小

5）盒子实际大小计算（手动）

6）盒子实际大小计算（自动内减 CSS3盒子模型）

属性名：box-sizing
属性值：border-box
浏览器会自动计算多余大小，自动在内容中减去

7) 外边距的单方向打的使用

8）清除内外边距

 *{
   margin:0;
   padding:0;
  }

9）外边距合并现象

10）外边距折叠现象-塌陷现象

• overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。
  • overflow:hidden超出部分隐藏。
  • overflow:hidden清除浮动。
  • overflow:hidden解决外边距塌陷。

11）行内元素的 margin和padding的无效情况

• 水平方向的margin和padding布局中有效
• 垂直方向的margin和padding布局中无效

12）不会撑大盒子的情况（块元素）

• 如果子盒子没有设置宽度，此时默认是父盒子的宽度，此时给子盒子设置左右的padding或者border不会撑大盒子

10. CSS布局

1）结构伪类选择器

• 作用：根据元素在HTML中的结构关系查找元素
• 优势：减少对HTML中类的依赖，有利于保持代码整洁
• 场景：常用于查找某父级选择器中的子元素

2）伪元素

• 一般页面中的非主体内容可以使用伪元素
• 区别
  • 元素 HTML设置的标签
  • 伪元素 由CSS模拟出得标签效果
• 种类

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

• 注意
  • 必须设置content属性才能生效
  • 伪元素默认是行内元素，如果需要宽高转换为块元素

3）标准流

• 又称文档流，是浏览器在渲染和显示网页内容时默认采用的一种排版规则，规定了应该以何种方式排列元素
• 常见的标准流排版规则：
  • 块级元素：从上往下，垂直布局，独占一行
  • 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

4）浮动 float

• 图文环绕、网页布局

属性	作用
left	靠左浮动
right	靠右浮动

• 浮动元素会脱离标准流，在标准流中不占位置
• 浮动元素比标准流高半个级别，可以覆盖标准流中得元素
• 浮动找浮动，下一个浮动会在上一个浮动元素的后面左右浮动
• 浮动元素会受到上面边界元素的影响
• 浮动元素特殊效果
  • 一行可以显示多个
  • 可以设置宽高
• 注意：
  • 浮动的元素不能通过text-aligin:center或者margin:0 auto设置元素本身水平居中

5）清除浮动

• 浮动的介绍
  • 清除浮动带来的影响，如：如果子元素浮动了，此时子元素不撑开标准流的块级父元素；因为子元素浮动后脱标了不占位置
  • 目的：需要父元素有高度，从而不影响其他网页元素的布局
• 方法
  • 1.直接设置父元素的高度
    • 优点：简单粗暴
    • 缺点：有些布局中不能固定父元素的高度，如新闻列表
  • 2.额外标签
    • 在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear:both
    • 缺点：会在页面中添加额外 的标签，网页变得复杂
  • 3.单伪元素清除法

 	  /* 普通 */
    .clear::after{
         content: "";
         display: block;
         clear: both;
    }
    /* 优化 */
    .clear::after{
         content: "";
         display: block;
         clear: both;
         /*隐藏 伪元素在网页中看不到*/
         height: 0;
         visibility: hidden;
    }

1. 4.双伪元素清除法(项目中，直接给标签加类即可清除浮动)

也可以解决margin的塌陷

 .clearfix::before,.clearfix::after{
        content: "";
        display: table;
    }
    .clearfix::after{
        clear: both;
    }

2. 5 overflow:hidden
   父元素添加属性和属性值

3. 6 创建BFC盒子
   

6）定位

• 网页的常见布局

• 2 基本使用

1. 介绍：
   1.1 可以解决盒子与盒子之间的层叠问题, 定位之后的元素层级最高，可以层叠在其他盒子上面
   1.2 可以让盒子始终固定在屏幕中
2. 基本使用
   

• 3 静态定位 position:static;

  • 介绍：静态定位是默认值，
  • 注意：静态定位就 是标准流，不能通过方位属性进行移动

• 4 相对定位 position:relative;

  • 相对于自己之前的位置进行移动
  • 特点：
    • 需要配合方位属性实现移动
    • 相对于自己原来的位置进行移动
    • 在页面中占据位置 没有脱标

• 5 绝对定位 position:absolute;

  • 拼爹型定位，相对于非静态定位的父元素进行定位移动
  • 特点
    • 需要配合方位属性实现移动
    • 默认相对于浏览器可视区域进行移动
    • 页面中不占位置已经脱标
  • 相对定位的对象
    • 祖先元素中没有定位 相对于浏览器进行移动
    • 祖先元素中有定位，相对于最近的有定位的祖先元素进行移动

• 6 子绝父相

  • 让子元素相对于父元素进行自由的移动
  • 含义：
    • 子元素：绝对定位
    • 父元素：相对定位
  • 好处：父元素是相对定位，对网页布局影响小

• 7 子绝父绝

  • 在使用子绝父相的时候，如果父元素已经绝对定位了，那么子元素也是用绝对定位即可。因为父元素已经定位好了，此时去修改可能会影响父级布局

• 8 子绝父相水平居中

  • 步骤：
    1）布局子绝父相
    2）子盒子往右移动父盒子的一半, left:50%
    3）再让子盒子往左移动自己的一半
    （1）方法一：margin-left :负的子盒子宽度一半，缺点子盒子宽度变化时需要手动修改
    （2）方法二：transform:translateX(-50%)

• 9 子绝父相垂直居中

  • 步骤：
    1）布局子绝父相
    2）子盒子往右移动父盒子的一半, left:50%
    3）子盒子往下移动父盒子的一半 top:50%
    3）再让子盒子往左往上各移动50%
    transfrom:translate(-50%, -50%)

• 10 固定定位

  • 相对于浏览器进行定位
  • position:fixed
  • 特点
    1）需要配合方位属性实现移动
    2）相对于浏览器可视区域进行移动
    3）不占据页面位置 已经脱标

• 11 元素的层级

  • 不同布局方式元素的层级关系
    标准流 < 浮动 < 定位
  • 不同定位之间的层级关系
    相对、绝对、固定默认层级相同
    HTML写在下面的元素层级更高

• 12 更改定位元素的层级
  z-index:数字
  数字越大层级越高

  7）装饰

  • 1 垂直对其方式（vertical-aligin）

    • 基线：在浏览器中文字元素排版中存在对齐的基线（baseline）

    • 解决行内、行内块元素垂直对其问题,当图片和文字在一行中显示时，底部是不对齐的
      

    • 可以解决的问题
      1）文本框和表单按钮无法对齐问题
      2）input和img无法对齐的问题
      3）div中的文本框，文本框无法贴顶
      4）div不设置高度，由img撑开，此时的img标签下面会有
      5）使用line-height让img标签垂直居中问题。图片和文字一样都可以使用line-height 垂直居中，但是图片默认的对其方式是底部和文字的基线对其的，需要设置vertical-aligin:middle可以垂直居中
      注意：
      1）行内块元素优先使用浮动完成效果
      2）vertical-align:middle这个属性必须和line-height一起使用，就是说它的什么top、middle、bottom这三个属性值都是相对于line-height的，分别的含义是，行高上，行高居中，行高底。
      而且还要注意的是vertical-align这个属性是加在子元素上的，并不是加在父元素上的。而且这个子元素必须是行内块元素才有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main{
        width: 500px;
        height: 500px;
        line-height: 500px;
        background-color: rebeccapurple;
    }
    .sun{
        
        display: inline-block;
        vertical-align: middle;
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="main">
        <div class="sun">
            
        </div>
        哈哈哈
    </div>

</body>
</html>

• 2 光标类型（cursor）：鼠标在元素上的样式
  

• 3 边框圆角 (border-radius)
  

• 4 overflow 溢出部分显示效果
  

• 5元素本身隐藏

• 6 元素透明（opacity）
  

8) 选择器扩展

• 连接伪类选择器
  

css绘制三角形

• 焦点伪类选择器

• 属性选择器

9)背景图处理

10 ）过渡

11）文字阴影（text-shadow）

12）盒子阴影（box-shadow）

11 问题总结

1）行内块元素去除缝隙

给行内块元素的父级设置font-size:0px 在单独给子元素设置字体大小