前端基础回顾
三、CSS选择器、盒模型
01选择器和继承
02选择器优先级
03px、em和五种颜色表示
04文档流
05盒模型
06盒模型之水平垂直方向的布局
07外边距的折叠
08行内元素盒模型
09浏览器默认样式
10盒子大小
11轮廓、阴影和圆角
正文：
01选择器和继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
一、常见选择器
元素选择器（标签）
id选择器（#）
类选择器（.一个标签可以指定多个类）
通配选择器（*）
二、复合选择器
1.交集选择器
格式：选择器1选择器2选择器n
注意：如果有元素选择器的话，元素选择器写最前面
2.并集选择器
格式：选择器1,选择器2,选择器n（用“,”分隔）
eg:#a,p1,div.red
三、关系选择器
父元素、子元素：必须只隔一辈
祖先元素，后代元素：直接或间接
兄弟元素：父元素一样的元素
1.子元素选择器
格式：父元素>子元素1>子元素2（用“>”分隔）
2.后代元素选择器
格式：祖先 后代（用空格分隔）
3.兄弟元素选择器
格式：前一个A+下一个B（紧挨着A的下一个兄弟，注意是紧挨着）
4.选择下一个兄弟
格式：兄A~弟B（选A后面所有的兄弟，注意是后面）
四、属性选择器
1.[属性名] ：选择含有指定属性的元素
2.[属性名=属性值] ：含有指定属性和属性值的元素
3.[属性名^=属性值] ：含有指定属性,并且属性值以指定值开头的元素
4.[属性名$=属性值] ：含有指定属性,并且属性值以指定值结尾的元素
5.[属性名*=属性值] ：含有指定属性,并且属性值含有指定值的元素
五、伪类选择器（不存在的类，描述一个元素的特殊状态）
1.：first-child
2.：last-child
3.:nth-child()
()里写
常数k：代表第k个，
n：代表0到正无穷，
2n或even：代表偶数位元素，
2n+1或odd:代表奇数位元素
注意：这些伪类都是根据所有的子元素
4.：first-of-type
5.：last-of-type
6.：nth-of-type
与1 2 3不同的是，4 5 6是在同类型元素中进行排序
7.：not() 除了指定元素
eg:ul>li:not(:nth-child(3))与ul>li:not(:nth-of-type(3))区别
六、超链接的伪类
1.a:link{}（只有超链接能用）
link用来表示没访问过的连接，正常连接
2.a:visited{}（只有超链接能用）
visited用来表示访问过的连接
由于隐私原因，所以visited这个伪类只能修改 连接的颜色属性color
3.:hover 表示鼠标移入的状态（所有元素都有）
4.:active 表示鼠标点击（所有元素都有）
七、伪元素选择器（页面中特殊并不存在的元素，表示特殊位置）
1.::fist-letter 第一个字 eg：p::fist-letter
2.::fist-line 第一行
3.::fist-selection 用户鼠标选中的内容
4.::before 必须结合content属性来使用
5.::after 必须结合content属性来使用
eg:div::before {content:'abc' color:red }
注意：content的内容无法显示
补：q标签就是通过before和after加的引号
八、继承
为一个元素设置样式的同时也会应用到它的后代元素上。
但是并不是所有样式都会被继承，比如：背景相关的、布局相关的 。
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
一、优先级由高到低
!important（可以在某一个样式后面添加!important，内联样式不能加此属性，此属性最好别用，不容易修改）
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承选择器 没有优先级
二、注意
1.比较优先级时需要将选择器的优先级进行加减，最后优先级越高，就优先显示（分组选择器是单独计算的）
2.选择器的累加不会超过其最大的数量级
3.如果优先级计算后相同，此时优先级使用靠下的样式
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
一、长度单位
1.像素：小方块
2.百分比：相对于其父元素属性的百分比。
3.em
1em就是一个字的大小（1font-size），一般一个字大小是16px，em会根据字体大小的改变而改变。
如果1font-size:20px，那么1em=1font-size=20px
4.rem
相对于根元素html的字体大小，需要修改根元素html中的font-size值，它才会改变。
二、颜色表示
1.英文单词
2.RGB
格式：rgb(,,) ，每位数的范围：0-255
3.RGBA
R:red
G:green
B:blue
A:不透明度
1：完全不透明
0：完全透明
.5：半透明
4.十六进制的RGB值
格式：#红色绿色蓝色 ，每个颜色取值范围：00-ff
如果两两重复可以简写：#aabbcc=>#abc
5.HSL值 HSLA值
H:色相 ：（0-360）0和360都是红色
S：饱和度 ：颜色的浓度（0%-100%）100最深
L:亮度 ：颜色的亮度（0%-100%）100最亮（白色）
A:不透明度
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
文档流（normal flow）
1.网页是一个多层结构，一层摞着一层
2.通过css可以为每一层来设置样式
3.作为用户来讲只能看到最顶上一层
4.这些层中，最底下的一层成为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
5.对于我们来说，元素主要有两个状态：
在文档流中
不在文档流中（脱离文档流）
6.元素在文档流中有什么特点
块元素
块元素在页面中独占一行（自上向下垂直排列）
默认宽度是父元素的全部（会把父元素撑满）
默认高度是被内容撑开（子元素）
行内元素
不会独占页面一行，只占自身大小（自左向右排列，如果一行放不下，会换到下一行继续自左向右排列）
行内元素默认宽度和高度都是被内容撑开
注意：块元素和行内元素脱离文档流就不会有以上特点。
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
总：盒模型、盒子模型、框模型（box modle）
1.css将页面中的所有元素都设置为了一个矩形盒子
2.将元素设置为矩形的盒子后，对页面的布局就变成将不同盒子摆放到不同的位置
3.每一个盒子都由以下几个部分组成
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
盒子可见框大小由内容区 内边框 边框共同决定
一、内容区
1.元素中所有子元素和内容都在内容区中排列
2.内容区的大小由width和height两个属性来设置
二、内边距
1.内容区和边框之间的距离
2.一共有四个方向的内边距
padding-top
padding-bottom
padding-left
padding-right
3.内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
这时，要想区分内容区和内边距有两个方法：
a.给内容区填充文字
b.把内容区用一个盒子包起来并设置此盒子的背景颜色以区分
4.简写
padding：10px 20px 30px 40px
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
三、边框
1.属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子外部。边框大小会影响到整个盒子的大小。
2.要设置边框，需要最少设置三个样式，缺一不可
（1）边框宽度 border-width（默认值一般是3个像素）
border-width值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
border-XXX-width:
XXX:top bottom left right
（2）边框颜色 border-color
省略不写，默认使用color的默认值black
指定规则和border-width一样
border-XXX-color:
XXX:top bottom left right
（3）边框样式 border-style
默认值是none
属性值：
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
border-XXX-style:
XXX:top bottom left right
3.简写
（1）border：1px solid red
（2）三者没有顺序要求
（3）还有四个
border-top:1px solid red
border-bottom:1px solid red
border-left:1px solid red
border-right:1px solid red
四、外边距
1.不会影响盒子可见框大小，会影响盒子位置，影响盒子实际占用空间
2.一共有四个方向的外边距
（1）margin-top
上外边距，设置一个正值，元素会向下移动
（2）margin-left
左外边距，设置一个正值，元素会向右移动
（3）margin-bottom
下外边距，设置一个正值，其下面的元素会向下移动
（4）margin-right
默认情况下设置margin-right不会产生任何效果
3.margin可以设置负值，如果是负值元素会向相反的方向移动。
4.元素在页面中是自左向右的顺序排列的
所以，默认情况下如果我们设置的左和上边距会移动元素自身，
而设置下和右会移动其他元素
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
background-color: #bfa;
width: 300px;
height: 200px;
overflow: auto;
/*overflow-x: auto;*/
/*overflow-y: hidden;*/
}
.inner{
width: 400px;
height: 500px;
background-color: yellow;
margin-bottom: 100px;
}
</style>
</head>
<body>
<!--
一、元素的水平方向的布局
1.元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
2.一个元素在其父元素中，水平布局必须要满足以下的等式:
（1）margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
（2）这七个值中有三个值可以设置为auto
width
margin-left
margin-right
（3）过度约束时，调整的方式有：
如果这七个值中没有auto的情况，浏览器会自动调整margin-right值以使等式满足
如果某一个值为auto，则会自动调整auto的那个值使等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以，我们经常利用这个特点来使一个元素在其父元素中水平居中
实例：
width:xxxpx;
margin:0 auto;
二、元素的垂直方向的布局
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
父元素使用overflow属性来设置父元素如何处理溢出的子元素
overflow可选值：
visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden：溢出的内容会被裁减不会显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：根据需要生成滚动条
还有两个属性，属性值同上：overflow-x overflow-y
-->
<div class="outer">
<div class="inner"></div>
<!--<div class="inner"></div>-->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*.box3{
width: 200px;
height: 200px;
background-color: #BBFFAA;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}*/
/*解决父子元素重叠方案一：*/
/*.box3{
width: 200px;
height: 100px;
background-color: #BBFFAA;
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
}*/
/*解决父子元素重叠方案二：*/
.box3{
width: 200px;
height: 199px;
background-color: #BBFFAA;
border-top: 1px solid #BBFFAA;
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 99px;
}
</style>
</head>
<body>
<!--
垂直外边距的折叠（重叠）
相邻的垂直方向外边距会发生重叠现象
兄弟元素
兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者之和
如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠对开发有利，我们不需要处理
父子元素
父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须进行处理
处理方式有：
不用外边距，用内边距
通过给父元素设置border，将父元素和子元素隔开，使其不相邻
-->
<div class="box3">
<div class="box4">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.s1{
background-color: yellow;
padding: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #BBFFAA;
}
</style>
</head>
<body>
<!--
行内元素的盒模型：
1.行内元素不支持设置宽高
2.行内元素可以设置padding border margin，但是：垂直方向不会影响到页面的布局，水平方向也不存在合并重叠问题！！！
3.
display用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块特点：即可以设置宽高，又不会独占一行 ，类似于img元素（标签）
table 将元素设置为一个表格
none 元素不在页面中显示，隐藏元素
visiblity 用来设置元素的显示状态
可选值:
visible 默认值
hidden 元素在页面中隐藏，不显示，和display:none不同的是，visiblity:hidden依然占据页面位置
-->
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/reset.css"></link>
<style>
/*body{
margin: 0;
}
p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}*/
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<!--
默认样式：
1.通常情况下，浏览器都会为样式设置一些默认样式
2.默认样式的存在会影响到页面的布局
通常情况下编写网页时必须要去除浏览器的默认样式（PC端）
3.去除默认样式方法
（1）简单页面：
*{
margin: 0;
padding: 0;
}
（2）引入样式表：专门用来对浏览器的样式进行重置的
reset.css 直接去除浏览器的默认样式
normalize.css 对默认样式进行了统一
-->
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width height的作用）
可选值：
content-box 默认值，width和height指的是内容区的大小
border-box width和height指的是整个盒子可见框的大小
即：width和height指的是内容区和内边距和边框的总大小
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*outline: 10px solid red;*/
box-shadow: 0px 0px 50px rgba(0,0,0,.5);
border-top-left-radius:10px;
}
</style>
</head>
<body>
<!--
1.轮廓outline：
用来设置元素的轮廓线，用法和border一模一样。
和边框不同的是，就是轮廓不会影响到可见框的大小，不会影响布局，只是在盒子外面加了个轮廓。
2.阴影box-shadow：
用来设置元素的阴影效果，阴影不会影响页面布局
属性有四个值：
第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动
第三个值：阴影的模糊半径
第四个值：阴影的颜色
3.圆角:
用来设置圆的半径大小：
border-top-left-radius
border-top-right-radius
border-bootom-left-radius
border-bootom-right-radius
以上四个属性的属性值情况：
属性值只有一个：代表x轴和y轴都截取指定值
属性值有两个：前面代表x轴截取指定值，后面代表y轴截取指定值（两个值可以达到椭圆效果）
border-radius属性的属性值情况：
四个值：左上 右上 右下 左下
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
一个值：四个角半径一样，x和y轴方向截取的长度一样，所以是圆
两个值以斜杠分隔：四个角都一样，但是不一定是圆，斜杠前面是x轴方向截取的长度，斜杠后面是y轴方向截取的长度
将元素设置为一个圆形：
border-radius：50%
-->
<div class="box1"></div>
<span>abcd</span>
</body>
</html>
扫一扫
822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
