HTML CSS
#CSS样式插入方式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
外部样式表，定义在head 部分
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
内部样式表，定义在head 部分
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
h1 {color: red}
p {margin-left: 20px}
</style>
</head>
内联样式，在相关的标签中使用样式属性。
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
标签 描述
<style> 定义样式定义。
<link> 定义资源引用。
<div> 定义文档中的节或区域（块级）。
<span> 定义文档中的行内的小块或区域。
水平居中 text-align: center
垂直居中 line-height: 20px
#CSS选择器
CSS规则 = 选择器 + 声明块
选择器，用于选择元素
1、 ID选择器
2、 元素选择器
3 、类选择器 常用
.className{
color：red；
}
<p class="class1 class2"> </p>
声明块：中包含很多声明: 颜色 背景 对齐方式 字体
css样式书写位置
内部样式
内联样式
外部样式：html中用link链接样式表 <link rel="stylesheet" href="index.css">
有利于避免多页面样式重复
有利于浏览器缓冲，提高反映速度
有利于分离html和css，更容易阅读和维护
选择器
1、简单选择器
通配符选择器
* 选择所有元素
属性选择器
根据属性名 和属性值选中元素
[href]{
color:red
}
[href="https://www.baidu.com"]{
color:red
}
伪类选择器
hover :鼠标悬停状态
:hover{
color:red
}
a:hover{
color:red
}
active:鼠标状态时状态
a:active{
color:red
}
link:超链接未访问时状态(只能a元素使用)
a:link{
color:red
}
visited:超链接访问过的状态(只能a元素使用)
a:visited{
color:green
}
四类伪类选择器书写顺序
1、link超链接未访问时状态
2、visited超链接访问过的状态
3、hover 鼠标悬停状态
4、active鼠标状态时状态
伪元素选择器：通常生产并选中某个元素内部的第一个子元素或最后一个子元素
before
span::befroe{
content:"《"
}
after
span::after{
content:"》"
}
2、组合选择器
1、 并且：选中p并且类名为 .class名 的
p.class名{
color：red
}
2 、后代元素 空格：选中“.class名” 后代元素中的 li元素
.className li{
color：red
}
3、 子元素 >：选中类 “.abc”的子元素“.bcd”
.abc>.bcd{
color:red
}
4 、相邻兄弟元素 + ：选中元素的下个元素
.abc{
color:red
}
.abc + li{
color:green
}
5 、兄弟元素 ~：后面出现的所有兄弟元素
.abc{
color:red
}
.abc ~ li{
color:green
}
6 、多个选择器，用逗号分割
.abc, p{
color:green
}
CSS选择器中逗号、空格分隔和连写的区别
连写：就是需要同时具备才会出现效果
逗号分隔：就是只需要具备其中之一即可出现效果，二者是并列关系
空格分隔：就是二者是父子关系，是当前的元素子元素才会出现效果
#层叠样式
声明冲突：多个样式，多次应用的同一个元素
层叠（权重计算）：解决声明冲突的过程，此过程浏览器自动处理，处理过程如下：
1、 比较重要性
重要性从高到低
作者样式表中的 !important 样式
作者样式表中的普通样式
浏览器中的默认样式
2 、比较特殊性
总体规则：选择器选择的范围越窄，越特殊
具体计算规则：通过选择器计算出不同选择器的一个四位数（XXXX），再比较四位数的大小
1 千位：如果是内联样式，记1 否则记0
2 百位：等于选择器中所有id选择器的数量
3 十位： 等于类选择器 属性选择器 伪类选择器的数量
4 个位： 等于选择器中所有元素的选择器、伪元素选择器的数量
3 、比较源次序
代码顺序靠后的胜出
应用
1 重置样式表覆盖浏览器默认样式表，网络常用重置样式表 normalize.css reset.css meyer.css
#继承
子元素会继承父元素的某些CSS样式，通常跟文字相关的都能继承，如字体 颜色
属性值的计算过程
浏览器一个一个元素一次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件，该元素的所有CSS属性必须有值
一个元素从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性计算过程
计算过程顺序;
1 确定声明值：没有冲突的确定下来
2 重叠冲突：根据重叠计算确定属性值
3 使用继承：继承于父元素
4 使用默认值：使用默认值
特殊的两个CSS取值
inherit：手动（强制）继承，将父元素的值取出应用到该元素
initial：初始值，将该属性值设置为默认值
#盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
1 行盒：display等于inline的元素
2 块盒：display等于block的元素
行盒在页面中不换行，块盒换行
display默认为inline
浏览器默认样式设置的块盒：容器元素 h1-h6 p
常见行盒 span a img video audio
盒子的组成部分
由内岛外分别是
内容 content
width height 设置的是盒子内容的宽高
填充 padding 盒子边框到内容的距离
padding-left pandding-right panding-top pandding-bottom
速写panding：上 右 下 左
填充区 + 内容盒 = 填充区
边框 border
边框样式border-style：solid
边框宽度border-width
边框颜色border-color
如果边框样式 宽度 颜色都一样可以使用速写属性 border：4px dashed red；
外边框 margin 边框到其他盒子的距离
margin-left margin-right margin-top margin-bottom
简写margin：1em 0; 代表上下都是1个距离，左右距离为0。
#行盒的盒模型
常见行盒盒模型：span strong em i img video a
## 显著特点
1 盒子沿着内容延伸
2 行盒不能设置宽高
行盒宽高是依据字体大小的，不能单独调整行盒宽高，通过调整字体大小行高字体类型间接调整
3 内边距（paddig填充区）
水平有效 垂直方向只会影响背景 不会实际占据空间（垂直方向上内容不会随着padding 大小变化调整）
4 边框 border
水平有效 垂直方向只会影响背景 不会实际占据空间（垂直方向上内容不会随着padding 大小变化调整）
5 外边框 margin
水平有效 垂直方向只会影响背景 不会实际占据空间（垂直方向上内容不会随着padding 大小变化调整）
## 行块盒
display：inline-block 的盒子，可以使行盒具有块盒的性质，包括边框等
## 空白折叠
发生在行盒（行块盒）内部 或行盒（行块盒）之间
行块盒之间有有空格，是因为空白折叠，两个行块盒之间有空格
## 可替换元素和非可替换元素
大部分元素 在页面上显示的结果 取决于元素内容 称为“非可替换元素”
少部分元素 在页面上显示的结果 取决于元素属性 称为“可替换元素”，如 img video audio
绝大部分可替换元素为行盒
可替换元素类似于行块盒 盒模型中所有尺寸都有效；
object-fit:contain/fit 元素适应
<style>
li{
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
margin: 1em 0;
width: 200px;
<!-- 下面三行代码只能控制单行文本溢出时显示点，多行文本需要使用js -->
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
# 视觉格式化模型
盒模型：规定单个盒子的规则
视觉格式化模型：页面中的多个盒子多个排序规则
大体上将页面上盒子的排列分为三种方式
常规流
浮动
定位
#1常规流布局
所有元素默认情况下都属于常规流布局
总体规则
块盒独占一行 行盒水平一次排列
包含块（containing block）每个盒子都有它的包含块，包含块决定了盒子了活动排列区域
绝大情况下盒子的包含块，为其父元素的内容
<div class="parent">
<p class="child">
</p>
</div>块盒
1 每个块盒的总宽度，必须刚好等于包含块的宽度
width 的默认值为 auto，auto将默认空间吸收掉
margin 也可以设为 auto
width 吸收能力强于margin
当盒子定宽厚，若宽度 边框 内边距 外边距计算后 仍然有剩余空间 该剩余空间被margin-right全部吸收
在常规流中，块盒在包含块中居中可以定宽，然后左右margin设置为auto；另外一种写法margin：0 auto；
2 每个块盒垂直方向上的auto值
height: auto; 适应内容的高度
margin: auto; 表示0
3 百分比取值
padding 宽高 margin可以取值为百分比
以上所有的百分比相对于包含块的宽度
特殊情况，高度百分比
1 包含块的高度取决于子元素的高度，设置百分比无效。（例如：父元素的高度没有设置，此时子元素多高父元素多高，此时设置百分比无效。）
2 包含块的高度不取决于子元素的高度，设置的百分比相对于父元素的高。（例如：父元素的高度写死，此时设置的百分比相对于父元素的高。）
4上下外边距的合并
两个常规流块盒，上下外边距（margin）相邻，会进行合并。（两个margin取最大值）
对于父子元素，也存在margin合并情况，如果不想合并，可以在父元素样式内设置样式将父子元素外边框不相邻，例如在父元素样式内设置padding-top:10px或border:1px solid;
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
background: lemonchiffon;
width: 1000px;
}
.item {
width: 100px;
height: 100px;
background: lightblue;
margin: 10px;
float: left;
}
/* 解决高度坍塌方法1 */
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Lorem, ipsum dolor.</div>
<div class="item">Dignissimos, quo rem.</div>
<div class="clearfix"></div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
background: lemonchiffon;
width: 1000px;
}
.item {
width: 100px;
height: 100px;
background: lightblue;
margin: 10px;
float: left;
}
/* 解决高度坍塌方法2 */
.clearfix::after {
/* 必须设置content */
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="item">Lorem, ipsum dolor.</div>
<div class="item">Dignissimos, quo rem.</div>
</div>
</body>
</html>
# 定位
手动控制元素在包含块中的精准位置
涉及css position属性
默认值 static 静态定位即不定位
relative相对定位
absolute绝对定位
fixed 固定定位
一个元素只要position不是static 即表示是个定位元素，定位元素会脱离文档流（相对定位除外）
一个脱离文档流的元素特定：
1 文档流中的元素摆放时，会忽略脱离了文档流的元素
2 文档流中元素计算自动高度时，会忽略脱离文档流的元素
## 相对定位 不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个css属性，设置位置
left 向左偏移量 left:50px;
right 向右
bottom
top
盒子的偏移不会对其他盒子造成任何影响
## absolute
宽高为auto，适应内容
包含块变化找祖先元素第一个定位元素，该元素的填充盒为其包含块；若找不到，则它的包含块为整个网页（初始包含块）
## 固定定位
为 position:fixed;
其他情况和绝对定位完全一样
不同地方
包含块不同：固定定位的包含块，固定为视口（浏览器的可视窗口）
代码写在body任何地方都行
## 定位下的居中
某个方向居中
1 定宽或高
2 将左右（ 上下）距离设置为0
3 将左右（上下）margin设置为auto （绝对定位和固定定位中，margin设为0，会自动吸收剩余空间）
## 多个定位元素重叠时（谁在前谁在后的问题）
涉及 堆叠上下文 概念 细节太多
简单设置方式：设置z-index,通常情况下，值越大越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，如遇到常规流、浮动元素，常规流元素或浮动元素会覆盖z-index为负数的元素
## 补充
绝对定位 固定定位元素一定是块盒，
绝对定位 固定定位元素一定不是浮动，
没有外边距合并
相对定位不会该变盒子特征，之前是行盒还是行盒
posted on 2021-09-14 16:50 PerfectData 阅读(86) 评论(0) 收藏 举报
浙公网安备 33010602011771号