html css学习第一周
注释
<!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>
<body>
</body>
元素决定含义，与展示效果无关，所有页面展示效果与CSS有关
浏览器带有默认CSS样式
重要：选择什么元素，取决于内容含义而不是显示效果
h1*<{文本}+tapchuang’jian’biao’ti
$递增字符
lorem按tab 随机生成字符
空白折叠：空白字符只会被折叠成一个空格
例外：在pre有默认css属性元素中的内容会按源代码显示内容，在网页中显示代码，不会出现空白折叠，
显示代码时，外面套code元素表示代码区显示给页面
html实体
实体字符 Html Entily,通常用于页面显示一些特殊符号
1.&单词；
2.&#数字；
小于符号<
大于符号>
空格字符
版权符号©
&符号&
a元素
href 属性，
1表示跳转地址
2 跳转到当前页面的不同位置，锚点
id属性：全局属性，表示元素正在文档中的唯一标号
3.功能链接
点击后触发某个功能
-执行js代码
-发送邮件 mailto:(要求安装exchange软件)
-拨号 tel或者移动端
(（h2[id="xxx"]>{章节$})+p>lorem100)*6
a[href="chapter$"]*6>{章节} 按tab键
生成6个，在按tab键生成，+表示兄弟级元素，
lorem后可以跟数字
可将1改为美元符号
href="#"回到顶部
title属性 鼠标放置显示信息
target属性
表示跳转窗口位置
取值 _self当且页面打开默认
_blank在新窗口打开
元素的包含关系由元素内容决定
选择器：精准选中想要的元素
简单选择器
-
ID选择器id选择器
#+id的名字 -
元素选择器
-
类选择器
-
通配符选择器
*表示选中所有元素
*{
color :red
} -
属性选择器
根据属性名和属性值选中元素
[href]{ }表示选中所有具有href的元素
[href=" "]{ }表示选中href这个值的元素
attr是属性名
[attr=value]表示带有以attr命名的属性元素，属性值为value
[attr~=value]并且该属性是一个以空格作为分隔的值列表，其中至少一个值匹配value
[attr|=value] 属性值为value或者value-为前缀开头，典型的应用场景是用来应用匹配语言见写代码
-
伪类选择器
选中某些元素的某种状态
3. a:hover{
选中a元素鼠标悬停时的a 元素
}
4. a:active{
鼠标按下时的a元素
}- link:超链接未被访问时的状态
- visited：超链接访问过后的状态
lvha
-
伪元素选择器
span::before/befer{
content:"《"
}
生成并选中某个元素内部的第一个子元素或最后一个子元素
##选择器组合
1.并且（连着写后面不加任何符号）
2.后代元素 空格
3.子元素>
4. 相邻兄弟元素+
5. 后面会出现的所有兄弟元素~
选择器的并列
多个选择器用逗号分隔
语法糖
1.id选择器
#+id的名字
2.元素选择器
3.类选择器
属性class
.+名字{
}
对元素使用class=“名字 名字 名字”
eg:
.big-center{
font
}
内部样式表
写在style元素的属性中
外部样式表
html页面外部
在head元素中使用link元素
1.外部样式表可以解决多页面样式重复
2.有利于浏览器缓存，从而提高页面响应速度
3.有利于页面分离，HTML和CSS，易于维护和阅读
常见样式声明
- color元素内部文字颜色
预设值定义好的单词
三颜色，色值：光学三原色（RGB）每个颜色可用数值0~255之间的数字来表达，0表示无色，255表示最大
rgb表示法(0,0,0)
hex十六进制 #008c8c绿色
淘宝红#ff4400 ,#f40 - background-color
元素背景颜色 - font-size
元素内部文字尺寸大小
- px像素，绝对单位，简单理解文字高度占多少个像素
2）em:相对单位，相对于父元素的大小
每个元素必须与字体大小，若没有声明直接使用父元素大小，如果无父元素使用基准字号（浏览器自默认设置的）
user agent ,UA,用户代理（浏览器）
-
font-weight
文字粗细程度，可以取预设值默认norm400px bold加粗 700px
strong ,em元素加粗，强调内容 -
font-family;
必须用户计算机中存在的字体才有效
默认非衬线字体sans-serif字体的边缘还没有经过修饰 -
font-style
字体样式用于设置倾斜i元素默认样式是倾斜字体,
-
text-decoration
文本修饰，给文本加线废弃元素
s元素表示过期的 -
text-ident
缩进 可写像素10px或者
写2em表示缩进两个中文字符 -
line-helight
每行文本的高度，该值越大，每行文本占的像素，调整文本的距离高度
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字表示相对于当前元素字体大小
line-height：1.5 -
width宽度 heigt高度
-
text-align
元素内部文字的水平排列方式 -
letter-space
文字间隙
css层叠样式表
层叠(权重计算)：结局生命冲突的过程，浏览器自动处理
- 声明冲突：同一个样式，多次应用到同一个元素
1.比较重要性
重要性从高到低
1）作者样式表（开发者）中的！important样式
2)作者样式表中的普通样式
3）浏览器默认样式表中的样式
.类选择器 #id选择器 a<>元素选择器
2.比较特殊性
总体规则：选择器选中的范围越窄越特殊
具体规则：通过选择器计算一个四位数XXXX
- 先看千位，如果是内联样式（写在某个元素内部的样式） 记1 否则记0
- 看百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器，属性选择器，伪类选择器的数量
- 等于选择器中所有元素选择器，伪元素选择器的数量
3.比较源次序
代码书写靠后的胜出
应用
- 重置样式表，书写一些作者样式表，覆盖浏览器默认样式
重置样式表——》覆盖浏览器的默认样式
常见的重置样式表：normlize.css,reset.css, meyer.css
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
meta
head->
title
html->
body->h3 p a img
渲染每个元素的前提条件：该元素的所有CSS属性必须有值
- 一个元素从所有属性都没有值到所有属性都有值，这个计算过程，叫做属性值计算过程
两个特殊css取值
-inherit:手动（强制）继承，将父元素的值去除应用到该元素
-initial: 初始值，将该元素设置为默认值
属性值计算顺序 - 无属性值->1.确定无层叠冲突声明值->2.层叠冲突->3.使用继承->4.使用默认值->每个属性都有值 *
盒模型
box:每个元素在页面中都会形成一个矩形区域（盒子）
盒子类型：
行盒：display等于inine的元素
块盒，display等于block的元素
行盒在页面中不换行，块盒独占一行
span在行内定义一个区域或者一行被划分为好几个区域 display默认inline
浏览器默认样式表设置的
块盒：容器元素h1~h6 div p
常见的行盒：span a img video audio
盒子的组成部分
块盒
无论是行盒还是块盒都有下面几个部分组成，从内到外分别是：
1.内容content width height设置的盒子内容的宽高
内容部分通常叫做整个盒子的 内容盒 content-box
2.填充padding（内边距） 盒子内容和边框的距离
padding-left padding-right padding-top padding-bottom
简写属性padding: 50px 30px 50px 30px上右下左
直接写每个像素或者只写两个表示上下和左右
填充区＋内容区=填充盒padding-box
3.边框border
如果四边都是对称的可以用速写属性border:宽度 样式 颜色
边框=边框样式+边框宽度+边框颜色
速写属性或者简写属性：边框颜色border-width 也可以写四个表示上右下左或者写两个表示上下左右
速写属性或者简写属性：边框样式border-style默认none 实线solid 也能写四个
速写属性或者简写属性：边框颜色border-color默认字体颜色
边框＋填充区+内容区=边框盒border-box
4.外边距marign 盒子与盒子的距离
边框到其他盒子的距离
marign-top//bottom//left//right
盒模型的应用
默认情况下，width和height设置的时内容盒宽高
box-sizing: border-box改变宽高的影响范围
页面重构师
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow，控制内容溢出边框盒的处理方式
默认情况下 可见的visible 隐藏hidden
生成滚动条 scroll
##断词规则
work-break，会影响文字在什么位置被截断换行
norml:普通。CJK字符（中日韩在文字位置截断），非CJK在单词处截断
wod-break:break-all截断所有，所有字符都在文字
处截断
keep-all保持所有，所有文字都在单词之间截断(中文就一直显示）
空白处理
white-space: nowrap;空白处理，仍然会空白折叠，字符不换行
white-space: pre;不会空白折叠
nowrap
overflow: hidden;溢出隐藏
text-overflow: ellipsis;溢出显示…
如果不溢出则这三个不生效只能用于单行文本
行盒模型:宽高无效
常见的行盒：包含具体内容的元素
span、strong、em、i，img，audio，
显著特点
- 行盒跟着内容延伸，宽高取决于内容大小，不能设置宽高
- 调整行盒宽高使用调整字体大小，行高，字体类型来间接调整
- 内边距padding
水平方向有效，垂直方向只会影响背景，不会影响文字实际占据空间。 - border边框
水平方向有效，垂直方向只会影响背景，不会影响文字实际占据空间。 - 外边距marign
水平方向有效，垂直方向只会影响背景，不会影响文字实际占据空间。
行块盒
display:inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠发生在行（块）盒内部和行（块）盒之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img,video,audio
绝大部分可替换元素均为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中多个盒子排列规则
视觉格式化模型大体上将页面中的盒子排列分为三种方式：
1.常规流
2.浮动
3.定位
常规流
常规流布局
常规流，文档流，普通文档流，常规文档流
所有元素在默认情况下都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块(containing block)：每个盒子都有它的包含块，包含块决定了盒子的排列区域
绝大部分情况下：盒子的包含块为其父元素的内容盒
块盒
-
每个块盒的必须总宽度刚好等于包含块的宽度，宽度的默认值时auto
auto:将剩余空间吸收
width的吸收能力强于marign
若宽度，边框，内边距，外边距计算后仍有剩余空间，该剩余空间被marign-right全部吸收
在常规流中，块盒在其包含块中居中，可以定宽，然后左右marign设置为auto -
每个块盒 垂直方向 上 的auto值
height: auto，适应内容高度
mairign: auto表示0 -
百分比取值
padding,宽，marigna可以取值为百分比
以上所有百分比相对于包含块的宽度
高度的百分比：
1）. 当包含块的高度取决于子元素的高度时，设置百分比无效
2）. 包含块的高度不取决于子元素的高度时，百分比相对于父元素的高度 -
上下外边距合并
上和下外边距相邻就合并了
两外边距取最大值
浮动
应用场景
- 文字环绕
图片里面加一个浮动 - 横向排列
浮动的基本特点
修改float属性值：
-left：左浮动，元素靠上靠左
-right:右浮动，元素靠上靠右
默认值是none常规流
- 当一个元素浮动后，一定为块盒（更改display属性为block）
- 浮动元素的包含块，为父元素的内容盒
盒子尺寸
- 宽度为auto时，适应内容宽度
- 高度为autO时适应内容高度
- marign为auto为0 ，不吸收
- 边框内边距百分比设置与常规流一样
盒子排列
- 左浮动盒子靠上靠左排列
- 右浮动盒子考上靠右排列
- 浮动盒子在包含块中排列时会避开常规流盒子
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时会避开浮动盒子
- 如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
- 外边距合并不会发生
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时不会考虑浮动盒子
清除浮动，涉及css属性：clear
-默认值none
-left:清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
-right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
-both：清楚左右浮动，该元素必须出现在所右浮动盒子的下方
解决高度坍塌：
.clear-fix::after{
conten:"";
display:block;
clear:both;
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
