# 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个单词

p.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

这是一个伪类选择器测试案例
/* 相当于在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..上下外边距的合并

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

两个外边距取最大值。

浮动

定位