HTML CSS学习

# html css  日常学习记录---学习途径--渡一教育-袁老师# 

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定。

例如，查看h1元素中是否可以包含p元素

总结：

1. 容器元素中可以包含任何元素

2. a元素中几乎可以包含任何元素

3. 某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）

4. 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

快速生成

ul*5>li*7>a>lorem8

解释: 生成5个ul且每个ul元素下面有7个li子元素且每个li字元素中还有a元素且a元素内容包含8个随机乱文8个单词

ul*5>(li>a>lorem8)+(li*6>a>lorem8)

解释: 生成5个ul且每个ul元素下面有7个li子元素且第一个li字元素中还有a元素且a元素内容包含8个随机乱文8个单词且是单独处理;后面6个li元素中还有a元素且a元素内容包含8个随机乱文8个单词

<!-- ul*5>(li>a>h2>lorem9)+(li*6>a>lorem10) 快速写内容的方法 如果按TAB无用，可以在内容处先退格到出现提示再按tab就可以了 -->

p.red.big.center

解释:p为元素，加点.就是生成元素对应的类样式，加几个点就同时生成几个类样式生成的例：

<p class="red big center"> 测试文字 <p/>

页面样式初始化

CSS Tools: Reset CSS (meyerweb.com)

选择器

  --选择器

选择器：选中元素

1. ID选择器：选中的是对应id值的元素

2. 元素选择器

3. 类选择器

  --声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

  --CSS代码书写位置

1. 内部样式表： 书写在style元素中
2. 内联样式表,元素样式表：直接书写在元素的style属性中
3. 外部样式表[推荐]：将样式书写到独立的css文件中。
4. 总结： 1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3). 有利于代码分离（HTML和CSS），更容易阅读和

  --简单选择器

1. ID选择器

2. 元素选择器   

3. 类选择器

   /* 类元素选择前面使用一个点 */
   
   .new {
       color: red
   }

4. 通配符选择器*，选中所有元素

   /* *选择所有元素选择*/
   * {
       color:red
   }

5. 属性选择器：根据属性名和属性值选中元素  ---参考连接

   
   /* 中括号，里面放属性值，要执行的操作放在大括号中*/
   
   /* 选择所有具有href连接的选择器 */
   [href] {
       color: red;
   }
   
   
   /* 选择所有具有href连接的属性且href值是具体某个值的 */
   /* */
   
   [href="https://www.baidu.com"] {
       color: red;
   }

     6.伪类选择器：  选中某些元素的某种状态

        1）:link: 超链接未访问时的状态  例 a:link {}

        2）:visited: 超链接访问过后的状态 例 a:visited {}

        3）:hover: 鼠标悬停状态 一般配合a元素一起用例 a:hover {} 如果不加a 就是选择所有

        4）:active：激活状态，鼠标按下状态 例 a:active {}

           上面伪类选择器又称为爱恨法则：love hate

        7.伪元素选择器

                ::before

                ::after

<!-- 伪类选择器 -->

<link rel="stylesheet" href="./a.css">
<a>
    <span>这是一个伪类选择器测试案例</span>
<a/>

/* 相当于在span后有重新生成了一个before元素，content表示包含的内容 */
/* colore:red 这个对应的也是 对应before元素的 */
/* span::before 这里只是选中span并且和before这个新生成的元素 */

span::before {
    content:"《"
    color:red
}  

span::after {
    content:"》"
    color:red
}    

  --选择器的组合

1. 并且--就是多个选择器挨着一起写，例:   a:hover;   span::before; a.abc;

2. 后代元素 —— 空格  两个或多个选择器之间使用空格

3. 子元素 ——  >  两个或多个元素之间用大于符号不能有空格且只能选择子元素

4. 相邻兄弟元素 —— + 两个元素之间用加号

5. 后面出现的所有兄弟元素 —— ~

  --选择器的并列

多个选择器, 用逗号分隔 这可以称为  语法糖

常见样式声明

• color

元素内部的文字颜色

预设值：定义好的单词

三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝

淘宝红：#ff4400, #f40 黑色：#000000，#000 白色：#ffffff, #fff 红：#ff0000, #f00 绿：#00ff00, #0f0 蓝：#0000ff, #00f 紫：#f0f 青：#0ff 黄：#ff0 灰色：#ccc

• background-color

元素背景颜色

• font-size

元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素 2）em：相对单位，相对于父元素的字体大小 每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

user agent，UA，用户代理（浏览器）

• font-weight

        文字粗细程度，可以取值数字，可以取值为预设值

strong，默认加粗。

• font-family

         文字类型

        必须用户计算机中存在的字体才会有效，可以使用多个字体，以匹配不同环境，sans-serif，非衬线字体

• font-style

        字体样式，通常用它设置斜体

i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）

• text-decoration

        文本修饰，给文本加线。a元素 del元素：错误的内容 s元素：过期的内容

• text-indent

         首行文本缩进

• line-height

        每行文本的高度，该值越大，每行文本的距离越大。

        设置行高为容器的高度，可以让单行文本垂直居中

        行高可以设置为纯数字，表示相对于当前元素的字体大小

• width

        宽度

• height

        高度

• letter-space

        文字间隙

• text-align

        元素内部文字的水平排列方式

盒子里面文字内容居中，center就可以了

不用考虑其它的

设定宽度后，左右margin auto 块就会居中

层叠

继承

盒模型

常规流

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中的多个盒子排列规则

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 常规流

2. 浮动

3. 定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素，默认情况下，都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒

A..每个块盒的总宽度，必须刚好等于包含块的宽度

宽度的默认值是auto

margin的取值也可以是auto，默认值0

auto：将剩余空间吸收掉

width吸收能力强于margin

若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收

在常规流中，块盒在其包含块中居中，可以定宽、然后左右margin设置为auto后会居中。

B..每个块盒垂直方向上的auto值

height:auto， 适应内容的高度

margin:auto， 表示0

C..百分比取值

padding、宽、margin可以取值为百分比

以上的所有百分比相对于包含块的宽度。

高度的百分比：

1）. 包含块的高度是否取决于子元素的高度，设置百分比无效 2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度

D..上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并。

两个外边距取最大值。

浮动

定位