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基本样式
Tips
　　格式化 alt + shift + F
　　css注释 ctrl + ？

1 color 字体颜色
2 background-color 背景颜色
3 font-size 文字大小
4 px 像素 简单理解文字高度
   em 相对单位，相对父元素的字体大小像素
    没有父元素的话，依据浏览器基准字号
    user agent（ua）用户代理指浏览器
 
5 font-size 文字粗细程度，可以取值数字，可以取值预设值（normal：400，bold：700）
 
6 font-family 文字字体，必须用户计算机中存在中的字体才有效，可以使用多个字体以匹配 已匹配不同环境
    最后一个字体可以写 sans-serif 非衬线字体，一种字体种类，以供浏览器自主选择
 
7 font-style 字体样式（倾斜italic，）
    i元素、em元素（强调的内容） 等默认为倾斜字体 
    weight元素（表示重要的，不能忽略的内容） 默认加粗
 
8 text-decoration 文本修饰，下划线 中划线 上划线 
   del元素：错误的内容，在文字中间加条横线
   s元素，表示过期的内容，在文字中间加条横线

9 text-indent 首行文本缩进

10 line-height  行高，表示文本高度 ，xxpx，xxem 
   可以让单行文字居中
   行高可以设置为纯数字，表示相对于当前元素的字体大小

11 width 文字宽
12 weight 文字高
13 letter-space 文字间隙
14 text-align 元素内部文字水平排列方式
 

　　#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 元素适应

 

　　# 盒模型应用
## 改变宽高范围
width height 默认设置的是内容盒，可以通过box-sizing改变
 box-sizing：border-box  宽高设置成与边框相同，改变padding-left尺寸时，边框大小不改变
## 改变背景覆盖范围
默认背景覆盖边框盒
可以通过background-clip进行修改
background-clip:border-box/content-box/padding-box
## 溢出处理
overflow控制内容溢出边框后的范围
overflow:scrool   溢出后出现滚动条
oveerflow可以控制X或y，两个方向是否出现滚动条，通过overflow-x或overflow-y单独控制x或y方向
overflow:hidden 溢出隐藏
## 断词规则
 word-break，影像文字在什么位置背截断换行
 word-break：normal  普通，cjk文字在文字位置截断，非cjk字符单词位置截断
 word-break:all 所有文字都在文字处截断
 word-break:keep-all 都在单词处截断
## 空白处理
内容盒放不下内容时，溢出部分显示为 ...
white-space:nowap  不换行
    <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;

　　# 2浮动
## 应用场景
1 文字环绕
2 横向排列

## 浮动的基本特定
修改float的属性值为：
　　left：左浮动，元素靠上靠左
　　right：右浮动，元素考上靠右
　　默认值为none

## 特点
　　1 当一个元素浮动后，必定为块盒（display:block）
　　2 浮动元素的包含块，和常规流一样，为父元素的内容盒

## 盒子尺寸
　　1 宽度为auto时，表示适应内容宽
　　2 高度为auto时，和常规流一致，适应内容的高度
　　3 margin:auto时，结果为0

## 盒子排列
　　1 左浮动盒子靠上靠左排列
　　2 右浮动盒子考上靠右排列
　　3 浮动盒子在包含块中排列时，会避开常规流盒子
　　4 常规流盒子在排列时，无视浮动盒子
　　5 行盒在排列时，会避开浮动盒子
 　　 注意：如果文字没有在行盒中（如文字直接在p元素内），浏览器会自动生产一个行盒包裹文字，该行盒叫匿名行盒
　　6 浮动盒子不会出现外边距合并

## 高度坍塌
　　高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
　　解决方法1：在浮动盒子下方添加一个常规流盒子，使用clear css属性，清除浮动，撑开父元素高度。
　　默认值 clear:none;
　　清除左浮动：clear:left; 该元素必须出现在前面所有左浮动盒子的下方
　　清除右浮动：clear:right; 该元素必须出现在前面所有右浮动盒子的下方
　　清除左右浮动：clear:both; 该元素必须出现在前面所有浮动盒子的下方
    
<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>
 
解决高度坍塌方法2：在高度坍塌的块盒css样式中使用伪元素选择器" ::after " 并设置clear属性
<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  阅读(51)  评论(0)  编辑  收藏  举报

导航