html css 日常学习记录---学习途径--渡一教育-袁老师#
元素包含关系
以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
元素的包含关系由元素的内容类别决定。
例如，查看h1元素中是否可以包含p元素
总结：
-
容器元素中可以包含任何元素
-
a元素中几乎可以包含任何元素
-
某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
-
标题元素和段落元素不能相互嵌套，并且不能包含容器元素
快速生成
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)
选择器
--选择器
选择器：选中元素
-
ID选择器：选中的是对应id值的元素
-
元素选择器
-
类选择器
--声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
--CSS代码书写位置
- 内部样式表： 书写在style元素中
- 内联样式表,元素样式表：直接书写在元素的style属性中
- 外部样式表[推荐]：将样式书写到独立的css文件中。
- 总结： 1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3). 有利于代码分离（HTML和CSS），更容易阅读和
--简单选择器
-
ID选择器
-
元素选择器
-
类选择器
css/* 类元素选择前面使用一个点 */ .new { color: red } -
通配符选择器*，选中所有元素
css/* *选择所有元素选择*/ * { color:red } -
属性选择器：根据属性名和属性值选中元素 ---参考连接
css/* 中括号，里面放属性值，要执行的操作放在大括号中*/ /* 选择所有具有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
html
<!-- 伪类选择器 -->
<link rel="stylesheet" href="./a.css">
<a>
<span>这是一个伪类选择器测试案例</span>
<a/>
css
/* 相当于在span后有重新生成了一个before元素，content表示包含的内容 */
/* colore:red 这个对应的也是 对应before元素的 */
/* span::before 这里只是选中span并且和before这个新生成的元素 */
span::before {
content:"《"
color:red
}
span::after {
content:"》"
color:red
} --选择器的组合
-
并且--就是多个选择器挨着一起写，例: a:hover; span::before; a.abc;
-
后代元素 ------ 空格 两个或多个选择器之间使用空格
-
子元素 ------ > 两个或多个元素之间用大于符号不能有空格且只能选择子元素
-
相邻兄弟元素 ------ + 两个元素之间用加号
-
后面出现的所有兄弟元素 ------ ~
--选择器的并列
多个选择器, 用逗号分隔 这可以称为 语法糖
常见样式声明
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 块就会居中
层叠
继承
盒模型
常规流
常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
-
常规流
-
浮动
-
定位
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（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..上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。
两个外边距取最大值。