伪元素选择器
在已完成的段落前增加内容或样式：
元素名：：befro（之前）{content（“输入需要增加的内容 ”）,color：red}
<p>
asjlfsjdalfksadjflsajdfljsadlfjasdlfjsfsjsadjf
</p>
p::before {
content: "在之前";
color: rgb(63, 32, 134);
}
在已完成的段落后增加内容或样式：
元素名：：after（之后）{content（“输入需要增加的内容 ”）,color：red}
<p>
asjlfsjdalfksadjflsajdfljsadlfjasdlfjsfsjsadjf
</p>
p::after {
content: "在之后";
color: aquamarine;
}
设置首字母样式:
元素名::first-letter
<p>
asjlfsjdalfksadjflsajdfljsadlfjasdlfjsfsjsadjf
</p>
p::first-letter {
background-color: blue;
color: chocolate;
font-size: 20px;
}
设置第一行样式：
元素名::first-line
<p>
asjlfsjdalfksadjflsajdfljsadlfjasdlfjsfsjsadjf
</p>
p::first-line {
background-color: darkslategrey;
}
设置用户选中的内容
元素名::selection
属性选择器
【targe="_self"】{声明块}:注：target属性必须使用中括号在html里面target需要加引号
<a href="" target="_one">链接1</a>
<a href="" target="_self">链接2</a>
<a href="" target="_one">链接3</a>
<a href="" target="_four">链接4</a>
<a href="" target="_self">链接5</a>
[target="_self"] {
color: darkgreen;
font-size: 30px;
}
盒子分类
元素如何显示：
块级元素
1:占据可用宽度以换行开始
2:通常用与较大的内容块
行内元素
1:只占据内容所需宽度，在同一行内一个接一个摆放
2:通常用于较小的内容块
盒模型概述
盒子分类：一个元素产生什么样的盒子与他display有关
盒子组成：由margin、padding、border、content组成
边框盒组成：由border、padding、content组成
填充和组成：由content盒padding组成
内容盒组成：由content组成
overflow的使用
Overflow:visible:超出部分可见
<div class="tow">
<p class="er">超过超过超过超过超过超过超过超过超过超过超过超过超过超过</p>
</div>
.tow {
width: 50px;
height: 50px;
padding: 50px;
background-color: darkturquoise;
overflow: visible;
}
.er {
width: 50px;
}
Overflow:hidden：超出部分隐藏
<div class="tow">
<p class="er">超过超过超过超过超过超过超过超过超过超过超过超过超过超过</p>
</div>
.tow {
width: 50px;
height: 50px;
padding: 50px;
background-color: darkturquoise;
overflow: hidden;
}
.er {
width: 50px;
}
Overflow:scrolt：滚动 Border-width:统一设置border距离
border-style：统一设置border样式
Box-sizing:border-box: 自动计算分配宽高
格式化模型
1、常规流：又称文档流、普通文档流，统称为流式布局
折叠：垂直向上若两个外边距相邻，则折叠
合并：均为正常数时取最大，均为负数是取最小值，一正一负则相加
外边距相邻：指没有border、padding、content
2、浮动
Font:none 不浮动
Font:left. 左浮动
Font;right 右浮动
浮动盒子若放不下则换行
常规流遇上浮动流时的问题
常规流盒子和浮动流盒子混合摆放
1:浮动盒子在摆放时要避开常规流盒子（直接在常规流盒子下面浮动）
2:常规流盒子在摆放时无视浮动盒子（常规流盒子会无视掉之前的浮动盒子，形成重叠）
3:常规流盒子的自动高度计算时，无视浮动流盒子（高度坍塌）
清除浮动
清楚浮动设置给最后一个常规流盒子
使用：clear:both（全部清除） ,可以解决高度坍塌，使内容不会重叠在一起
right（清除右边）
left（清除左边）
<body>
<div class="hezi">
<div class="qingchu1"></div>
<div class="qingchu2"></div>
<div class="qingchu3"></div>
<div class="qingchu4"></div>
</div>
</body>
.hezi{
background-color: dimgray;
height: 500px;
width: 1200px;
}
.qingchu1{
background-color: darkcyan;
height: 20px;
width: 1000px;
}
.qingchu2{
background-color: darkorange;
height: 20px;
width: 100px;
float: left;
}
.qingchu3{background-color: darkorchid;
height: 20px;
width: 1000px;
}
.qingchu4{
background-color: gold;
height: 50px;
width: 800px;
float: right;
}
.qingchu3{
clear: both;
}
定位体系-绝对定位
position:static 默认值
position:relative 相对定位
div{
width: 100px;
height: 100px;
background-color: brown;
/* 相对定位 */
position: relative;
left: 50px;
top: 50px;
}
1、相对定位相对于盒子原来的位置偏移，原本所占空间不变。
2、没有脱离文档流。
3、一般会用来做绝对定位的父元素。
position:absolute 绝对位置
1、当浮动元素被设置为绝对定位时，元素的float属性会被强制更改为none（float属性失效）
2、相对于设置了定位属性（static）的父元素偏移，如果没有就相对于html的元素便宜
3、脱离了文档流
4、子绝父相 子元素使用绝对定位 父元素使用相对定位
<section>
<section class="box1"></section>
<section class="box2"></section>
<section class="box3"></section>
</section>
/* 子绝父相 子元素使用绝对定位 父元素使用相对定位*/
section{
width: 500px;
height: 500px;
background-color: burlywood;
position: relative;
}
/* 使用z-index改变层叠的顺序 */
.box1{
width: 100px;
height: 100px;
background-color: cadetblue;
position: absolute;
left: 50px;
top: 50px;
z-index: 3;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(14, 27, 27);
position: absolute;
left: 40px;
top: 40px;
z-index: 2;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(25, 234, 241);
position: absolute;
left: 30px;
top: 30px;
z-index: 1;
}
5、使用z-index改变层叠的顺序
<section>
<section class="box1"></section>
<section class="box2"></section>
<section class="box3"></section>
</section>
.box1{
width: 100px;
height: 100px;
background-color: cadetblue;
position: absolute;
left: 50px;
top: 50px;
z-index: 3;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(14, 27, 27);
position: absolute;
left: 40px;
top: 40px;
z-index: 2;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(25, 234, 241);
position: absolute;
left: 30px;
top: 30px;
z-index: 1;
}
position：fixed 固定位置
相对于浏览器窗口的固定位置，不会随着用户去变化
<aside></aside>
aside{
height: 500px;
width: 300px;
background-color: springgreen;
position: fixed;
right: 10px;
top: 200px;
}
position：sticky 粘性定位
依赖与用户的滚动，在position:relative;与position：flexd；需指定top\left\right\bottom四个值其中之一才能产生效果
<article>
<div class="box1"></div>
<div class="box2"></div>
</article>
/* 粘性定位 */
article{
width: 500px;
height: 500px;
border: 2px solid black;
}
.box1{
width: 500px;
height: 100px;
background-color: blue;
position: sticky;
top: 20px;
}
.box2{
width: 500px;
height: 100px;
background-color: crimson;
}
如何创建bfc（block formatting context 块级格式化上下文）
创建的方法：
1、float的值不是none（可以是left、right）
2、position的值不是static或者relative
3、display的值时inline-block，table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
bfc的作用
他是一个独立渲染区域，这个区域与外部毫不相干
块级格式化能解决的问题
避免上下相邻连个元素margin的重叠
清除浮动，解决父级高度塌陷的问题
自适应两栏布局
有序列表
<ol>
<li>打开冰箱</li>
<li>打开冰箱</li>
<li>打开冰箱</li>
</ol>
无序列表
<ul>
<li>打开冰箱</li>
<li>打开冰箱</li>
<li>打开冰箱</li>
</ul>
定义列表
-
和
- 元素里面会有
- ，
-
会缩进一点点
list-style的用法
| 属性值 | 含义 |
|---|---|
| none | 取消类表样式 |
| disc | 默认、标记时是实心圆 |
| circle | 标记是空心圆 |
| square | 标记是实心方块 |
| decimal | 标记是数字 |
| lower-alpha、upper-alpha | 大小写是英文字母 |
