-
HTML:Hyper Text Markup Language 超文本标记语言;定义网页中有什么,结构。
-
CSS:Cascading Style Sheets 层叠样式表;定义网页中的东西长什么样子,样式。
-
文件名:名称.扩展名(后缀名)。
-
扩展名:决定了文件被什么应用程序打开。
-
元素展示到页面中的效果,应该由CSS决定。所有元素与展示效果无关。
-
语义化的作用:为了搜索引擎优化(SEO)。为了让浏览器理解网页,阅读模式、语音模式。
-
空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠为一个空格。(特例,在pre元素中的内容不会出现空白折叠,它有一个默认的css属性。)
-
实体字符:
< > © &
-
绝对路径:当跳转目标和当前页面的协议相同时,可以省略协议(例如:href=“//www.baidu.com”)。
-
相对路径 :以
./
开头,./
表示当前资源所在的目录,可以书写../
表示返回上一级目录,相对路径中./
可以省略。 -
布尔属性,在HTML5中,可以不用书写属性值。
-
video标签的兼容性写法(部分浏览器,只有静音情况下可以自动播放)。
<video controls autoplay muted loop style="width:500px;"> <source src="media/open.mp4"> <source src="media/open.webm"> <p> 对不起,你的浏览器不支持video元素,请点击这里下载最新版本的浏览器 </p> </video>
-
语义化容器元素
header: 通常用于表示页头,也可以用于表示文章的头部 footer: 通常用于表示页脚,也可以用于表示文章的尾部 article: 通常用于表示整篇文章 section: 通常用于表示文章的章节 aside: 通常用于表示侧边栏 nav: 通常用于表示导航
-
元素包含关系
版本一 1. 容器元素中可以包含任何元素 2. a元素中几乎可以包含任何元素 3. 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd) 4. 标题元素和段落元素不能相互嵌套,并且不能包含容器元素 版本二 块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外
-
外部样式表的优势:外部样式可以解决多页面样式重复的问题,便于复用。有利于浏览器缓存,从而提高页面响应速度。利于代码分离(HTML和CSS),更容易阅读和维护。
-
em:相对单位,相对于父元素的字体大小。rem:相对单位,相对于根元素的字体大小。
-
伪类选择器,选中某些元素的某种状态。
1)link: 超链接未访问时的状态 2)visited: 超链接访问过后的状态 3)hover: 鼠标悬停状态 4)active:激活状态,鼠标按下状态 爱恨法则:love hate
-
声明冲突:同一个样式,多次应用到同一个元素。
-
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)。
一、比较重要性(重要性从高到底) 1.作者样式表中的!important样式 2.作者样式表中的普通样式 3.浏览器默认样式表中的样式 二、比较特殊性 总体规则:选择器选中的范围越窄,越特殊 具体规则:通过选择器,计算出一个4位数(x x x x) 1. 千位:如果是内联样式,记1,否则记0 2. 百位:等于选择器中所有id选择器的数量 3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量 4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量 三、比较源次序 代码书写靠后的胜出
-
继承:子元素会继承父元素的某些CSS属性。通常,跟
文字内容
相关的属性都能被继承。 -
渲染某个元素的前提条件:该元素的所有CSS属性必须有值。
-
一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程。
-
特殊的两个CSS取值。
inherit:手动(强制)继承,将父元素的值取出应用到该元素 initial:初始值,将该属性设置为默认值 例:background: initial;
-
属性值计算过程:
一、确定声明值 参考样式表(作者样式表、浏览器默认样式表)中没有冲突的声明,作为CSS属性值 二、层叠冲突 对样式表有冲突的声明使用层叠规则(比较重要性、比较特殊性、比较源次序),确定CSS属性值 三、使用继承 对仍然没有值的属性,若可以继承,则继承父元素的值 四、使用默认值 对仍然没有值的属性,使用默认值
-
浏览器默认样式表
和css属性默认值
不是一回事。 -
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
1. 行盒,display等于inline的元素,行盒在页面中不换行。 2. 块盒,display等于block的元素,块盒独占一行。
-
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
-
浏览器默认样式表设置的行盒:span、a、img、video、audio
-
盒子的组成部分,无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
1.内容 content width、height,设置的是盒子内容的宽高 内容部分通常叫做整个盒子的内容盒(content-box) 2.填充(内边距) padding 盒子边框到盒子内容的距离 padding-left、padding-right、padding-top、padding-bottom padding: 简写属性 padding: 上 右 下 左 填充区 + 内容区 = 填充盒(padding-box) 3.边框 border 边框 = 边框样式 + 边框宽度 + 边框颜色 边框样式:border-style 边框宽度:border-width 边框颜色:border-color 边框 + 填充区 + 内容区 = 边框盒(border-box) 4.外边距 margin 边框到其他盒子的距离 margin-top、margin-left、margin-right、margin-bottom 速写属性margin
-
box-sizing: border-box;
-
行盒的盒模型显著特点
1.盒子沿着内容沿伸 2.行盒不能设置宽高 调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。 3.内边距(填充区) 水平方向有效,垂直方向不会实际占据空间。 4.边框 水平方向有效,垂直方向不会实际占据空间。 5.外边距 水平方向有效,垂直方向不会实际占据空间。 6.display:inline;
-
行块盒的盒模型显著特点
1.不独占一行 2.盒模型中所有尺寸都有效 3.display:inline-block;
-
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间。
-
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素 少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素(例,img、video、audio)。绝大部分为行盒。类似于行块盒,盒模型中所有尺寸都有效。CSS不能完全控制其中的样式。
-
包含块(containing block):每个盒子都有它的包含块,包含块决定了盒子的排列区域。绝大部分情况下,盒子的包含块,为其父元素的内容盒。
-
块盒常规流布局
1.每个块盒的总宽度,必须刚好等于包含块的宽度 宽度的默认值是auto margin的取值也可以是auto,默认值0 auto:将剩余空间吸收掉 width吸收能力强于margin 若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收 在常规流中,块盒在其包含快中居中,可以定宽、然后左右margin设置为auto 2.每个块盒垂直方向上的auto值 height:auto;适应内容的高度 margin:auto, 表示0 3.百分比取值 padding、宽、margin可以取值为百分比,以上的所有百分比相对于包含块的宽度 包含块的高度取决于子元素的高度,设置百分比无效 包含块的高度不取决于子元素的高度,百分比相对于父元素高度 4.上下外边距的合并 两个常规流块盒,上下外边距相邻,会进行合并,两个外边距取最大值 5.父子盒子嵌套,上外边距也会出现合并
-
浮动的应用场景:文字环绕、横向排列
-
浮动的基本特点
float属性值 left:左浮动,元素靠上靠左 right:右浮动,元素靠上靠右 默认值为none 当一个元素浮动后,元素必定为块盒(更改display属性为block) 浮动元素的包含块,和常规流一样,为父元素的内容盒 盒子尺寸 1.宽度为auto时,适应内容宽度 2.高度为auto时,与常规流一致,适应内容的高度 3.margin为auto,为0. 4.边框、内边距、百分比设置与常规流一样 盒子排列 1.左浮动的盒子靠上靠左排列 2.右浮动的盒子考上靠右排列 3.浮动盒子在包含块中排列时,会避开常规流块盒 4.常规流块盒在排列时,无视浮动盒子 5.行盒在排列时,会避开浮动盒子 6.外边距合并不会发生 高度坍塌 高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子 清除浮动,涉及css属性:clear clear样式 默认值:none left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方 right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方 both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
-
盒模型主要是CSS中的一个重要概念。
-
行盒块盒主要是CSS的概念
-
position属性
默认值:static,静态定位(不定位) relative:相对定位 absolute:绝对定位 fixed:固定定位
-
一个元素,只要position的取值不是static,则认为该元素是一个定位元素。定位元素会脱离文档流(相对定位除外)。
-
文档流中的元素摆放时,会忽略脱离了文档流的元素。文档流中元素计算自动高度时,会忽略脱离了文档流的元素。
-
相对定位,不会导致元素脱离文档流,盒子的偏移不会对其他盒子造成任何影响。
-
绝对定位,宽高为auto,适应内容。包含块变化,找祖先中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页。
-
固定定位,其他情况和绝对定位完全一样。包含块不同,固定为视口(浏览器的可视窗口)。
-
定位下的居中
某个方向居中(绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间): 1. 定宽(高) 2. 将左右(上下)距离设置为0 3. 将左右(上下)margin设置为auto
-
定位知识补充
绝对定位、固定定位元素一定是块盒 绝对定位、固定定位元素一定不是浮动 没有外边距合并
-
盒子隐藏
1. display:none,不生成盒子 2. visibility:hidden,生成盒子,只是从视觉上移除盒子,盒子仍然占据空间。
-
当图片属于网页内容时,必须使用img元素,当图片仅用于美化页面时,必须使用背景图。
-
自定义单选框组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .radio-item .radio { width: 12px; height: 12px; border: 1px solid #999; border-radius: 50%; cursor: pointer; display: inline-block; } .radio-item input:checked+.radio{ border-color: #008c8c; } .radio-item input:checked~span{ color:#008c8c; } .radio-item input:checked+.radio::after { content: ""; display: block; width: 5px; height: 5px; background: #008c8c; margin-left: 3.5px; margin-top: 3.5px; border-radius: 50%; } .radio-item input[type="radio"]{ display: none; } </style> </head> <body> <p> 请选择性别: <label class="radio-item"> <input name="gender" type="radio"> <span class="radio"></span> <span>男</span> </label> <label class="radio-item"> <input name="gender" type="radio"> <span class="radio"></span> <span>女</span> </label> </p> </body> </html>
-
@规则
@import "路径"; 导入另外一个css文件
-
常规流块盒的布局的特点
常规流块盒在水平方向上,必须撑满包含块 常规流块盒在包含块的垂直方向上依次摆放 常规流块盒若外边距无缝相邻,则进行外边距合并 常规流块盒的自动高度和摆放位置,无视浮动元素
-
块级格式化上下文(BFC),它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局
不同的BFC区域,它们进行渲染时互不干扰 创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染不会影响到外部 创建BFC的元素,它的自动高度需要计算浮动元素 创建BFC的元素,它的 边框盒 不会与浮动元素重叠 创建BFC的元素,不会和它的子元素进行外边距合并
-
创建BFC的方法
float的值不为none(但请注意,这会使元素脱离文档流)。 position的值为absolute或fixed。 display的值为table-cell、table-caption、inline-block、flex或inline-flex。 overflow的值不为visible(如auto、scroll、hidden等)。
-
BFC的应用场景
阻止外边距重叠 清除浮动 阻止文字环绕图片
-
浮动盒子的布局
左浮动的盒子向上向左排列 右浮动的盒子向上向右排列 浮动盒子的顶边不得高于上一个盒子的顶边 若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动
-
em
和rem
分别相对于父元素
和根元素
的字体大小。 -
vh
和vw
分别相对于视口的高度和宽度。 -
em是相对长度单位,这个单位表示元素的
font-size
的计算值。如果用在font-size
属性本身,它则表示元素继承
的font-size
值。 -
rem是相对长度单位,这个单位代表
根元素
(通常为html元素)的font-size
大小。当用在根元素的font-size
上面时,它代表了它的初始值。 -
line-height : 像素值 | 无单位的数字 | em单位 | 百分比 ;
-
当发生继承时,line-height有以下特点。
(1) em单位 | 百分比 先计算像素值,再继承 先根据"当前元素的字体大小"和"em单位|百分比",计算出具体的像素值,再将像素值继承给子元素。 (2) 无单位的数字(推荐) 先继承,再计算 先将"无单位的数字"继承给子元素,再根据"无单位的数字"和"当前元素的字体大小"计算出具体的像素值。
-
当发生继承时,line-height有以下例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { line-height: 2em; /* line-height: 2; */ } .p1 { font-size: 40px; } .p2 { font-size: 20px; } </style> </head> <body> <div class="container"> <p class="p1"> 段落一 </p> <p class="p2"> 段落二 </p> </div> </body> </html>
-
CSS属性的
初始值
是其默认值
,可以使用initial
关键词明确指定初始值。 -
body
复习--HTML、CSS
于 2024-08-11 21:30:56 首次发布