CSS基础
2022/8/25 23:23:03
本文主要是介绍CSS基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
1.概念
- 概念：层叠样式表(英文全称：Cascading Style Sheets)。层叠的意思是多个样式表可以作用在同一个HTML的元素上，使其生效。
- 好处：
1. 功能强大 2. 将内容展示和样式控制分离，降低耦合度，解耦。 3. 可以让分工协作更容易，提高开发效率。
2.CSS的使用（CSS与html的结合方式）
1. 内联样式
- 在标签内使用style属性指定CSS代码 。例如
<div style = "color:red;">Hello,CSS</div>将使得div元素中的文字变红。
note:不推荐使用，因为内容的展示和样式的控制耦合在一起
2. 内部样式
- 在head标签内，定义style标签，在style标签内通过CSS的选择器来选中元素并为其设置各种样式，style标签的标签体内容就是CSS代码。note:内部样式表只能对一个网页起作用,它里边的样式不能跨页面进行复用
// 在body标签内有一个p标签
<p>HelloWorld</p>
// 在head标签下定义CSS代码将其颜色设置为蓝色
<style>
p {
color:blue;
}
</style>
3. 外部样式
- 定义CSS资源文件
- 在head标签内，定义link标签，引入外部的资源文件
1. 定义一个CSS资源文件test.css
div {
color:green;
}
2. 在head标签内定义link标签将其引入或者通过style标签导入
<!--href属性指定样式表的路径-->
<link rel="stylesheet" href="test.css"></link>
或者
<style>
@import "test.css"
</style>
3. body标签中的div标签中的内容的样式就会生效
<div>Hello,CSS</div>
注意：
- 123三种方式，CSS作用范围越来越大
- 1方式不常用，常用的方式为23
3.CSS语法
- 语法格式：
选择器 {
属性名1：属性值1;
属性名2：属性值2;
...
...
}
选择器：筛选具有相似特征的元素
注意：每一对属性需要使用分号隔开，最后一对属性可以不加
4.选择器
1.基础选择器
- id选择器：选择具体的id属性值的元素，建议在一个HTML页面中id值唯一
语法：
#id属性值 {
}
// 在head标签下定义一个id选择器
<style>
#black {
color: black;
font-size: 100px;
}
</style>
//body标签中的div标签
<div id="black">id选择器示例</div>
- 元素选择器:选择具有相同标签名称的元素
语法：
标签名称 {
}
<style>
h1 {
color:red;
font-size: 20px;
}
</style>
<h1>一级标题</h1>
注意：id选择器优先级高于元素选择器
3. 类选择器：选择具有相同class属性值的一组元素。（class属性可以为元素分组，它和id属性不同，class属性可以在多个元素中重复使用而且可以为一个元素指定多个class属性）
语法：
.class属性值 {
}
.red {
color: red;
}
.size {
font-size: 30px;
}
<p class="red size">你在吗？</p>
<p class="red">我在！</p>
<p class="red size">玩游戏吗？</p>
注意：类选择器优先级高于元素选择器
2.扩展选择器
- *：表示选择所有元素 （通配选择器）
语法：
* {
}
- 并集选择器:同时选择多个选择器对应的元素
选择器1，选择器2 {
}
- 后代元素选择器：选中指定元素内的指定后代元素
祖先 后代 {
}
// 该选择器作用在div内的所有span元素
div span{
color: skyblue
}
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<div></div>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
- 子元素选择器：选中指定父元素的指定子元素
父元素 > 子元素 {
}
// 该选择器只作用在div内的所有子span元素
div.box > span{
color: orange;
}
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<div></div>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
- 属性选择器：选择元素名称，属性名=属性值的元素
语法：
元素名称[属性名= "属性值"] {
}
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
// head标签中的style标签定义：
<style>
input[type = "text"] {
border: 10px solid;
}
</style>
<body>
属性选择器示例：<input type = "text"/>
</body>
- 伪类选择器：选择一些元素具有的状态。伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素，鼠标移入的元素...伪类一般情况下都是使用:开头
- 子元素名:first-child 第一个子元素
- 子元素名:last-child 最后一个子元素
- 子元素名:nth-child()选中第n个子元素。以上三个伪类都是根据所有的子元素进行排序
// n的特殊值： n 第n个 n的范围0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或odd 表示选中奇数位的元素 -n + 2表示前两个
- :link：表示超链接的未被访问的样式
- :hover：对象在鼠标移入时的样式
- :active：对象被用户点击及被点击释放之间的样式
- :visited：设置超链接被访问后的样式
- :focus：对象成为输入焦点时的样式
- :first-of-type
- :last-of-type
- :nth-of-type()。以上三个伪类元素在同类型元素中进行排序
- :not()：否定伪类，将符合条件的元素从选择器中去除
语法： 元素：状态 { } <head> <style> /* ul > li:first-child{ color: red; } ul > li:first-of-type{ color: red; } ul > li:nth-child(2n+1){ color: red; } */ ul > li:not(:nth-of-type(3)){ color: yellowgreen; } </style> </head> <body> <ul> <span>我是一个span</span> <li>第〇个</li> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul> </body> 比如a标签有Link，visited，active，hover等状态- 超链接的伪类。
- :link：用来表示没访问过的链接（正常的链接）
- :visited：用来表示访问过的链接，由于隐私的原因，所以visited这个伪类只能修改链接的颜色
- :hover 用来表示鼠标移入的状态
- :active 用来表示鼠标点击
<style> /* :link 用来表示没访问过的链接（正常的链接） */ a:link{ color: red; } /* :visited 用来表示访问过的链接 由于隐私的原因，所以visited这个伪类只能修改链接的颜色 */ a:visited{ color: orange; /* font-size: 50px; */ } /* :hover 用来表示鼠标移入的状态 */ a:hover{ color: aqua; font-size: 50px; } /* :active 用来表示鼠标点击 */ a:active{ color: yellowgreen; } </style> <a href="https://www.baidu.com">访问过的链接</a> <br><br> <a href="https://www.baidu123.com">没访问过的链接</a> - 交集选择器：选中同时符合多个条件的元素(交集选择器中如果有元素选择器，必须使用元素选择器开头)
选择器1选择器2选择器3选择器n{
}
// 示例
div.red {
color:red;
}
<div class="red"></div>
- 伪元素选择器：伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）。伪元素使用::开头
- ::first-letter 表示第一个字母
- ::first-line 表示第一行
- ::selection 表示鼠标选中的内容
- ::before 元素的开始
- ::after 元素的最后
- before 和after必须结合content属性来使用
<style> p{ font-size: 20px; } p::first-letter{ font-size: 100px; } p::first-line{ background-color: red; } p::selection{ background-color: yellow; } /*在div元素内的最开头添加『*/ div::before{ content: '『'; color:red } div::after{ content: '』'; color:yellow } </style> <!-- <q>hello</q> --> <div>Hello Hello How are you</div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro. </p> - 选择下一个兄弟：使用+
/*选择p的下一个兄弟元素span*/
p + span {
color:red;
}
- 选择下边所有兄弟：使用~
/*选择p的后面所有的兄弟元素span*/
p ~ span {
color:red;
}
3.选择器的优先级
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
- 选择器的权重（优先级）如下：
从高到低：
1. 内联样式
2. id选择器
3. 类和伪类选择器
4. 元素选择器
5. 通配选择器
6. 继承的样式（没有优先级）
比较优先级时，需要将所有的选择器的优先级进行相加计算，
最后优先级越高，则越优先显示（分组选择器单独计算）
可以在某一个样式的后边添加!important，
则此时该样式会获取到最高的优先级，甚至超过内联样式
<!--以下样式优先级最高，背景将为紫色 -->
.d1{
background-color: purple !important;
}
5.属性
1.字体
- font-size:字体大小
2.文本
- color：文本颜色
- text-align：文本对齐方式
- line-height:行高
//给p标签中的内容设置样式
p {
color:#FF0000;
font-size: 30px;
text-align: center;
line-height: 100px;
}
- text-transform属性：控制文本的大小写。其可选值如下：
- capitalize： 表示对单词的首字母大写
- text-indent属性：设置文本块中首行文本的缩进
3.边框
- border：设置边框，复合属性
4.尺寸
- width：宽度
- height：高度
5.背景
background:一个复合属性，可以设置背景颜色，图片等
6.样式的继承
样式的继承：为一个元素设置的样式同时也会应用到它的后代元素上。继承是发生在祖先元素和后代元素之间的 继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承。
<style>
p{
color: red;
background-color: orange;
}
div{
color: yellowgreen
}
body{
font-size: 30px;
}
</style>
<p>
我是一个p元素<br/>
<span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>
<div>
我是div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
7.单位
1.长度单位
- 像素
- 百分比:可以将属性值设置为相对于其父元素属性的百分比.设置百分比可以使子元素跟随父元素的改变而改变
- em：相对于元素的字体大小来计算的，1em=1font-size。根据字体大小的改变而改变，它的值不是固定的，如果当前元素没有设置字体大小，则会继承其父元素的字体大小。
- rem：相对于根元素HTML的字体大小来计算。
- vw（view width）：相对于视口窗口的单位，1vw等于视口宽度的1%
- vh（view height）：相对于视口窗口的单位，1vh等于视口高度的1%
<style>
/* 根元素选择器 */
html{
font-size: 10px;
}
.box1{
width:300px;
height: 300px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color:aqua;
}
.box3{
font-size: 50px;
width: 6em;
height: 6em;
/* width: 10rem;
height: 10rem; */
background-color: greenyellow;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
2.颜色单位
- 在CSS中可以直接使用颜色名来设置各种颜色。比如：red、orange、yellow、blue、green等，但是在css中直接使用颜色名是非常的不方便。
- RGB值:RGB通过三种颜色的不同浓度来调配出不同的颜色。R red，G green ，B blue,每一种颜色的范围在 0 - 255 (0% - 100%)之间。语法：RGB(红色,绿色,蓝色)
- 十六进制的RGB值。语法：#红色绿色蓝色，每一种颜色浓度通过00-ff表示，如果颜色两位两位重复可以进行简写#aabbcc --> #abc
- RGBA：就是在rgb的基础上增加了一个a表示不透明度
，需要四个值，前三个和rgb一样，第四个表示不透明度，1表示完全不透明，完全透明啥也看不见。 0表示完全透明 .5半透明 - HSL值:H 色相(0 - 360),S 饱和度，颜色的浓度 0% - 100%,L 亮度，颜色的亮度 0% - 100%
- HSLA值
8.盒子模型（box model）：控制布局
参考盒子模型
CSS将页面中的所有元素都设置为了一个矩形的盒子。每一个盒子都由一下几个部分组成：
- 内容区（content）:内容区的宽高由width和height两个属性来设置。元素中的所有的子元素和文本内容都在内容区中排列。
- 内边距（padding）：盒子中内容区域外部的空白区域。即内容区和边框之间的距离。
- 边框（border）：边框包括内容和内边距。边框属于盒子边缘。设置边框得宽度，颜色，样式分别通过border-width,border-color,border-style属性设置。
- 外边距（margin）：这是最外面的区域，是盒子和其他元素之间的空白区域。
1.边框（border）
- 边框的宽度：border-width用来指定上右下左四个方向的边框的宽度，不指定的话有默认值，一般都是 3个像素。
- 指定某一边的宽度：border-top-width,border-right-width,border-bottom-width,border-left-width.（上右下左）
- 边框的颜色：border-color用来指定上右下左四个方向的边框的颜色，不指定的话则自动使用color属性的颜色值。
- 边框的样式：border-style指定上右下左四条边框的样式。该属性的默认值是none，表示没有边框。
- solid 表示实线
- dotted 点状虚线
- dashed 虚线
- double 双线
- border的简写属性：通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。示例：
border:solid 10px orange;
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
color: red;
border-color: orange red yellow green;
/* border-color: orange; */
border-style: solid dotted dashed double;
border-style: solid;
border-width: 10px;
border: solid 10px orange;
/* border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red; */
/* border: 10px red solid;
border-right: none; */
}
</style>
<div class="box1"></div>
2.内边距（padding）
- padding-top:上方的内边距
- padding-right：右方的内边距
- padding-bottom：下方的内边距
- padding-left：左方的内边距
- 一个盒子的可见框的大小：由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。
- padding内边距的简写属性：可以同时指定四个方向的内边距,用法和border一样。例如：
padding: 10px 20px 30px 40px;
<style>
.box1{
/* 内容区:200 * 200 */
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px;
/* padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ; */
}
/* 子元素将内容区撑满 */
.inner{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
<div class="box1">
<div class="inner"></div>
</div>
3.外边距(margin)
外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置，会影响到盒子实际占用空间。
- margin-top:上外边距，设置一个正值，元素会向下移动。
- margin-right：默认情况下设置margin-right不会产生任何效果
- margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动。元素在页面中是按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动元素自身而设置下和右外边距会移动其他元素。
- margin-left：左外边距，设置一个正值，元素会向右移动。note:margin-xxx也可以设置负值，如果是负值则元素会向相反的方向移动
- margin的简写属性：margin可以同时设置四个方向的外边距 ，用法和padding一样。
示例：margin: 100px;
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
/* margin-right: 0px; */
margin: 100px;
}
.box2{
width: 220px;
height: 220px;
background-color: yellow
}
</style>
<div class="box1"></div>
<div class="box2"></div>
4.盒子模型的水平方向的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer{
width: 800px;
height: 200px;
border: 10px red solid;
}
.inner{
/* width: auto; width的值默认就是auto*/
width: 200px;
height: 200px;
background-color: #bfa;
margin-right: auto;
margin-left: auto;
/* margin-left: 100px;
margin-right: 400px */
/*
元素的水平方向的布局：
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）
0 + 0 + 0 + 200 + 0 + 0 + 0 != 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
- 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式浏览器会自动调整
- 调整的情况：
- 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
- 这七个值中有三个值可以设置为auto
width
margin-left
maring-right
- 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 如果将三个值都设置为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使一个元素在其父元素中水平居中
示例：
/* 元素在父元素中水平居中 */
width:xxxpx;
/*上下为0*/
margin:0 auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
5.盒子模型的垂直方向的布局
<style>
.outer{
background-color: #bfa;
height: 600px;
/*
默认情况下父元素的高度被内容撑开
*/
}
.inner{
width: 100px;
background-color: yellow;
height: 100px;
margin-bottom: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
子元素是在父元素的内容区中排列的，
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置父元素如何处理溢出的子元素
可选值：
visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪不会显示,内容只显示在其容器元素的显示区域里
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成水平或者垂直滚动条
属性overflow-x: 单独处理水平方向的溢出
属性overflow-y:单独处理垂直方向的溢出
*/
overflow: auto;
}
</style>
<!-- <div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div> -->
<div class="box1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。
</div>
6.外边距的折叠
- 垂直外边距的重叠
7.行内元素的盒模型
- 行内元素的盒模型：
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
- 行内元素可以设置border，垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
- display属性：
- 可选的属性值：inline值将元素设置为行内元素
- block 将元素设置为块元素
- inline-block，将元素设置为行内块元素。行内块，既可以设置宽度和高度又不会独占一行
- table-cell 将元素设置为一个表格的一个单元格td
- none 元素不在页面中显示
- visibility属性：用来设置元素的显示状态
- visible默认值，元素在页面中正常显示
- hidden元素在页面中隐藏不显示，但是依然占据页面的位置
<style>
.s1{
background-color: yellow;
width: 100px;
height: 100px;
padding: 2px;
/* border: 100px solid red; */
margin: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
a{
display: block;
/* visibility: hidden; */
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<a href="javascript:;">超链接</a>
<a href="javascript:;">超链接</a>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<div class="box1"></div>
8.元素的默认样式
- 默认样式：通常情况，浏览器都会为元素设置一些默认样式。默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式。（PC端的页面）
- 去除默认样式的方式：
- 使用统配选择器去除所有元素的默认样式
<style> /* 去除body元素的外边距 */ /* body{ margin: 0; } /* 去除p元素的外边距 */ p{ margin: 0; } /* 去除外边距和padding */ ul{ margin: 0; padding: 0; /* 去除项目符号小黑点*/ list-style:none; } .box1{ width: 100px; height: 100px; border: 1px solid black; } <!--统配选择器去除所有元素的默认样式--> *{ margin: 0; padding: 0; } </style> <div class="box1"></div> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>- 使用第三方别人写好的CSS文件
9.盒子的大小
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。
- box-sizing属性：用来设置盒子尺寸的计算方式（设置width和height的作用）
- 可选的属性值：content-box 默认值，宽度和高度用来设置内容区的大小
- border-box：宽度和高度用来设置整个盒子可见框的大小，即width 和 height指的是内容区 和 内边距 和 边框的总大小。
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/* box-sizing: border-box; */
box-sizing: content-box;
}
</style>
<div class="box1"></div>
10.轮廓，阴影，圆角
- outline属性：用来设置元素的轮廓线，用法和border一模一样。轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
<style>
.box1:hover{
outline: 10px red solid;
}
</style>
<div class="box1"></div>
<span>Hello</span>
- box-shadow属性：用来设置元素的阴影效果，阴影不会影响页面布局 。
- 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
- 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
- 第三个值 阴影的模糊半径
- 第四个值 阴影的颜色
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;
}
<style>
<div class="box1"></div>
- border-radius属性：用来设置左上，右上，右下，左下四个角的圆角设置的圆的半径大小。
<style>
.box2{
width: 200px;
height: 200px;
background-color: orange;
/* 将元素设置为一个圆形 */
/* border-radius: 50%; */
border-radius: 10px;
}
</style>
<div class="box2"></div>
9.浮动
- 通过浮动可以使一个元素向其父元素的左侧或右侧移动，使用 float 属性来设置元素的浮动。可选值：
- none 默认值 ，元素不浮动
- left 元素向左浮动
- right 元素向右浮动
注意，元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文档流中的元素会自动向上移动
- 浮动的特点
- 浮动的元素会完全脱离文档流，不再占据文档流中的位置。浮动元素的层级比不浮动的元素的层级高。
- 设置浮动以后元素会向父元素的左侧或右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。
- 简单总结：浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。
- 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。脱离文档流以后，不需要再区分块元素和行内元素了
- 脱离文档流的特点：
- 块元素：
- 块元素不在独占页面的一行
2.脱离文档流以后，块元素的宽度和高度默认都被内容撑开
- 块元素不在独占页面的一行
- 行内元素：行内元素脱离文档流以后会变成块元素，特点和块元素一样。
- 块元素：
- 元素在文档流中的特点：
- 块元素：
- 块元素在页面中独占一行，默认宽度是父元素的全部，默认高度被内容撑开（子元素）
- 行内元素：行内元素不会独占页面的一行，只占自身的大小。行内元素的默认宽度和高度都是被内容撑开。
- 块元素：
- 脱离文档流的特点：
10.网页的布局
<style>
header, main, footer{
width: 1000px;
margin: 0 auto;
}
/* 设置头部 */
header{
height: 150px;
background-color: silver;
}
/* 设置主体 */
main{
height: 500px;
background-color: #bfa;
margin: 10px auto;
}
nav, article, aside{
float: left;
height: 100%;
}
/* 设置左侧的导航 */
nav{
width: 200px;
background-color: yellow;
}
/* 设置中间的内容 */
article{
width: 580px;
background-color: orange;
margin: 0 10px;
}
/* 设置右侧的内容 */
aside{
width: 200px;
background-color: pink;
}
/* 设置底部 */
footer{
height: 150px;
background-color: tomato;
}
</style>
<!-- 创建头部 -->
<header></header>
<!-- 创建网页的主体 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间的内容 -->
<article></article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!-- 网页的底部 -->
<footer></footer>
11.定位
子绝父相
1.定位概念
- 定位是一种更加高级的布局方式，通过定位可以将元素摆放在页面的任意位置。使用position属性设置定位，其可选值如下所示：
- static：默认值，元素是静止的，没有开启定位
- relative：开启元素的相对定位
- absolute：开启元素的绝对定位
- fixed：开启元素的固定定位
- sticky：开启元素的粘滞定位
2.相对定位
- 将元素的position属性值设置为relative时，则开启了元素的相对定位。相对定位的特点如下：
- 元素开启相对定位以后，如果不通过top、bottom、left、right等属性设置偏移量，则元素不会发生任何变化。
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位和绝对定位不一样，他不会脱离文档流
- 相对定位和绝对定位不一样，他不会改变元素的性质，块元素还是块元素，行内元素还是行内元素。
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 100px;
top: -100px;
}
.box3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<!-- 相对定位不会脱离文档流，不会改变元素的性质，块还是块 -->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
3.绝对定位
- 绝对定位：当元素的position属性值设置为absolute时，则开启了元素的绝对定位。绝对定位的特点如下：
- 开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变化。
- 开启绝对定位后，元素会从文档流中脱离。
- 绝对定位会改变元素的性质，行内变成块。块的宽高被内容撑开。
- 绝对定位会使得元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的
包含块：在正常情况下，包含块就是离当前元素最近的祖先块元素。 在开启绝对定位以后，包含块就是离当前元素最近的开启了定位的祖先元素。 如果所有的祖先元素都没有开启定位，则根元素html就是它的包含块
<style>
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
.box3 {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top: 0;
}
</style>
<!-- 绝对定位元素是相对于其包含块进行定位的，包含块就是离他最近的开启了定位的祖先元素 -->
<!-- 只要position属性的值不是static就开启了定位 -->
<div class="box1"> 1
<div class="box2"> 2
<div class="box3"> 3</div>
</div>
</div>
4.固定定位
- 固定定位：将元素的position属性设置为fixed则开启了元素的固定定位。固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。唯一不同的是固定定位永远参照于浏览器的视口进行定位，所以固定定位的元素不会随网页的滚动条滚动。
<style>
body {
height: 1080px;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
.box3 {
width: 50px;
height: 50px;
background-color: blue;
position: fixed;
top: 0;
left: 0;
}
</style>
<!-- 固定定位参照于浏览器的视口(浏览器的可视窗口)进行定位 -->
<div class="box1"> 1
<div class="box2"> 2
<div class="box3"> 3</div>
</div>
</div>
5.粘滞定位
- 粘滞定位：当元素的position属性设置为sticky时，则开启了元素的粘滞定位。粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定。
6.使用定位进行网页布局的示例
<style>
body {
width: 100%;
height: 100%;
background-color: pink;
/* 开启相对定位 */
position: relative;
top: 0px;
left: 0px;
margin: 0 4px;
}
header {
width: 100%;
height: 150px;
background-color: royalblue;
position: absolute;
top: 0px;
}
aside {
width: 200px;
height: 500px;
background-color: red;
position: absolute;
top: 150px;
}
section {
width: 100%;
height: 500px;
background-color: springgreen;
position: absolute;
top: 150px;
left: 200px;
}
footer {
width: 100%;
height: 100px;
position: absolute;
top: 650px;
background-color: steelblue;
}
</style>
<!-- 网页头部 -->
<header>头部</header>
<!-- 网页侧边栏 -->
<aside>侧边</aside>
<!-- 网页主体 -->
<section>主体</section>
<!-- 网页页脚 -->
<footer>页脚</footer>
元素的层级
- 对开启了定位的元素，可以使用z-index属性来指定元素的层级。z-index属性值为整数，值越大，元素的层级越高，元素的层级越高越优先显示。如果元素的层级一样，则优先显示靠下的元素。祖先的元素的层级再高也盖不住后代元素。
<style>
/* 祖先元素的层级再高，盖不住子元素 */
.box3 {
background-color: green;
width: 100px;
height: 100px;
z-index: 3;
position: absolute;
}
.box4 {
background-color: brown;
width: 50px;
height: 50px;
}
</style>
<div class="box3">
3<div class="box4">4</div>
</div>
字体族
- 字体相关的样式
- color：用来设置字体颜色
- font-size：字体的大小
- em：相当于当前元素的一个font-size
- rem：相当于根元素的一个font-size
- font-family：字体族，指定字体的格式。可以指定多个字体，多个字体间使用逗号分隔，字体生效时优先使用第一个。可选值有很多
- serif：衬线字体
- sans-serif：非衬线字体
- font-face：可以将服务器中的字体直接提供用户去使用
@font-face {
/*指定字体的名称*/
font-family:'xxx';
/*服务器中字体相关文件的路径*/
src:url('xxx')
}
- 图标字体iconfont：在使用图标时，可以将图标设置为字体，然后通过font-face的形式对字体进行引入。然后就可以通过使用字体的形式来使用图标，图标的大小和颜色可以灵活调整
- fontawesome的使用：
- 下载
- 将解压后的css和webfonts移动到项目中
- 将all.css引入到网页中
<link rel="stylesheet" href="../fa/css/all.css"></link>
- 使用图标字体：
- 直接通过类名来使用图标字体
<i class="fas 图标字体类名"></i> <!--可能如下形式，以fab开头--> <i class="fab 图标字体类名"></i>
- 通过伪元素来设置图标字体
- 在要设置图标的元素使用before或者after伪类元素
- 在content属性中设置字体的编码
- 在font-family属性中设置字体的样式
- fontawesome的使用：
- 行高line-height：指的是文字占有的实际高度。行高可以指定一个以px或者em为单位的大小,也可以设置一个整数，表示行高将是字体的指定的倍数。line-height - font-size等于行间距
div {
font-size: 50px;
/* 设置行高为字体的大小 */
/* line-height：1 */
/* 使单行文字在一个元素div中垂直居中 */
line-height: 200px;
height: 200px;
border: 1px red solid;
}
<div>test</div>
- 字体的简写属性font：font属性可以设置字体相关的所有属性。
语法： font：字体大小/行高 字体族 行高可以省略不写，不写则使用默认值
- font-weight属性：字重，设置字体的加粗效果；可选值如下：
- normal：不加粗
- bold：加粗
- font-style属性：可选值如下
- normal：正常
- italic：斜体
文本的样式
- text-align属性：设置文本的对齐方式。可选值如下：
- left：左侧对齐
- right：右侧对齐
- center：居中对齐
- justify：两端对齐
- vertical-align：设置元素的垂直对齐方式。可选值如下：
1.baseline：默认值，基线对齐
2. top：子元素的顶部和父元素的顶部对齐
3. bottom：子元素的底部和父元素的底部对齐
4. middle：居中对齐 - text-decoration：设置文本修饰。可选值如下：
- underline：下划线
- none：默认值，什么都没有修饰
- line-through：删除线
- overline：上划线
- white-space属性：设置网页如何处理空白
- 可选值normal：正常情况
- nowrap：不换行
- pre：保留空白。在网页中一般多个空格解析成一个，设置pre属性值后所有空白都显示。
- text-overflow：ellipsis,设置省略号
背景
- background-color：设置背景颜色
- background-image：设置背景图片。
- 可以同时设置背景图片和背景颜色，背景颜色将成为图片的背景色。
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满。
- 如果背景的图片大于元素，将会有一部分背景无法完全显示。
- 如果背景图片和元素一样大，则会直接正常显示
background-image: url("./img/xxx.png")
- background-repeat：用来设置背景的重复方式，可选值如下：
- repeat：默认值，背景会沿着x轴，y轴双方向重复
- repeate-x：沿着x轴方向重复
- repeate-y：沿着y轴方向重复
- no-repeate：背景图片不重复
- background-position：设置背景图片的位置。设置方式如下：
- 通过top、bottom、left、right、center几个表示方位的词来设置背景颜色。使用方位词必须同时指定两个位置，如果只写一个，则默认第二个为center
- 通过偏移量设置背景图片的位置，例如
background-position:水平方向的偏移量 垂直方向的偏移量
/*位置在元素的正中间*/ background-position:center center;
- background-clip：设置背景的范围，可选值如下：
- border-box：默认值，背景会出现在边框的下边。
- padding-box：背景不会出现在边框，只出现在内容区和内边距
- content-box：背景只出现在内容区。
- background-origin：背景图片的偏移量计算的原点。可选值如下：
- padding-box:默认值,background-position从内边距开始计算
- content-box：背景图片的偏移量从内容区开始计算
- border-box：背景图片的偏移量从边框处开始计算
- background-size：设置背景图片的大小。设置值的方式如下：
- 第一个值表示宽度，第二个值默认是auto。如果只写一个，则第二个值默认是auto。
- cover：图片的比例不变，将元素铺满
- contain：图片比例不变，将图片在元素中完整显示
- background-attachment：背景图片是否跟随元素一起移动。可选值如下：
- scroll：默认值，背景图片跟随元素一起移动
- fixed：背景会固定在页面中，不会随元素移动
- 背景相关的简写属性background：所有背景相关的样式都可以通过该样式来设置。
- background-size必须写在background-position的后边，并且使用/隔开
- background-origin、background-clip两个样式，origin要在clip的前边
<!--示例：a标签link、hover、active的状态，缺点是a标签被激活时和悬浮时
向服务器发送两次请求，发送请求会出现图片闪烁的问题-->
<style>
/* 设置a标签在未访问前的样式 */
a:link {
display: block;
width: 93px;
height: 29px;
background-image: url("images/link.png");
}
/*设置a标签被激活的样式*/
a:active {
background-image: url("images/active.png");
}
/*设置a标签悬浮的样式*/
a:hover {
background-image: url("images/hover.png");
}
</style>
<body>
<a href="javascript:;"></a>
</body>
- 雪碧图：多个背景图片集成在一张雪碧图中，减少向后台请求的次数，避免出现图片闪烁的问题。使用雪碧图时通过调整background-position属性的值来显示响应的图片。
- 雪碧图的使用步骤：
- 确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置偏移量以正确显示背景图片
- 雪碧图的使用步骤：
<style>
/* 设置a标签在未访问前的样式 */
a:link {
display: block;
width: 93px;
height: 29px;
background-image: url("images/btn.png");
}
a:active {
background-position: -186px 0;
}
a:hover {
/* 水平方向向左移动93px */
background-position: -93px 0;
}
</style>
<body>
<a href="javascript:;"></a>
</body>
- 渐变：通过渐变可以设置一些复杂的背景颜色，可以实现一个颜色向其他颜色过渡的效果。渐变是图片，需要通过background-image来设置
- 线性渐变：颜色沿着一条直线发生变化。
linear-gradient(渐变的方向，颜色，颜色，...) 渐变的方向有：to left:从右往左 to right:从左往右 to bottom：从上到下 to top:从下往上 deg:指定度数 turn:指定圈数 渐变的颜色：渐变可以指定多个颜色，多个颜色默认情况下平均分布
- 径向渐变：放射性的效果。默认情况下径向渐变的形状根据元素的形状来计算的，如果元素是正方形，则径向渐变的形状是圆形；如果元素的形状是长方形，则径向渐变的形状是椭圆形。
- 可以指定渐变的大小，也可以指定渐变的位置。
// 语法： radial-gradient(大小 at 位置， 颜色 位置，颜色 位置) 大小： 1. circle：圆形 2. ellipse：椭圆 3. closet-side：近边 4. closet-Corder：近角 5. farthest-side：远边 6. farthest-Corder：远角 位置：center、top、bottom等
<style> .box1 { width: 200px; height: 200px; background-image: radial-gradient(blue, red); } .box2 { width: 300px; height: 300px; /* 手动指定径向渐变的大小 */ background-image: radial-gradient(100px 100px, green, yellow); } </style> <body> <div class="box1"></div> <div class="box2">1</div> </body>
动画Animation
1.过渡
- 通过过度可以指定一个属性发生变化时的切换方式。
- 通过过度可以创建一些非常好的效果，提升用户的体验。
- transition-property属性：指定要执行过度的属性。大部分属性都支持过渡效果，过度是从一个有效数值向另外一个有效数值进行过渡。
<!--多个属性使用逗号分隔，如果所有属性需要过渡， 则使用all关键字--> transition-property: width, height
- transition-duration属性：指定过渡效果的持续时间
<!--单位秒和毫秒--> transition-duration: 2s
- transition-delay属性：过渡效果的延迟，等待相应的时候后再执行过渡
- transition-timing-function：过渡的时序函数。可选值如下：
- ease：默认值为ease，慢速开始，先加速，再减速
- liner：匀速运动
- ease-in：加速运动
- ease-out：减速运动
- ease-in-out：先加速后减速
- 通过cubic-bezier()来指定时序函数
- steps()：分布执行过渡效果。可以设置一个第二个值。
- end：再时间结束时执行过度（默认值）
- start：再时间开始时执行过渡
- 简写属性transition：可以同时设置过度相关的所有属性。note：如果同时设置延迟时间和持续时间，则第一个是持续时间
<style>
.box {
width: 132px;
height: 271px;
background-image: url("images/bigtap-mitu-queue-big.png");
margin: 0 auto;
background-position: 0 0;
transition: background-position, 0.3s steps(3);
}
.box:hover {
background-position: -396px 0;
}
</style>
<div class="box">
</div>
2.动画
- 动画和过度类似，都可以实现动态的效果。不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果。
- 设置动画效果，必须要设置一个关键帧。关键帧设置了动画执行每一个步骤。
- animation-name：指定对当前元素生效的关键帧的名字
- animation-duration：动画的执行时间
- animation-delay：动画的延时，指定时间后执行动画
- animation-timing-function：
- animation-iteration-count：动画执行的次数。属性值如下：
- 整数值：表示具体执行的次数
- ifinite：无限执行
- animation-direction：指定动画运行的方向。可选值如下：
- normal：从from到to运行，每次都这样
- reverse：从to到from运行，每次都这样
- alternate：从from到to执行，重复执行动画时反向执行。
- alternate-reverse：从to到from执行，重复执行动画时反向执行。
- animation-play-state：设置动画的执行状态。可选值如下：
- running：默认值，表示动画执行
- paused：动画暂停
- animation-fill-mode：动画的填充模式。可选值如下：
- none：默认值，动画执行完毕，元素回到初始位置
- forwards：动画执行完毕元素会停止在动画结束的位置
- backwards：动画延时等待时元素就会处于开始位置
- both：结合forwards和backwards
- 简写属性animation：note：如果同时设置延迟时间和持续时间，则第一个是持续时间
<style>
.box1 {
width: 1080px;
height: 100px;
background-color: bisque;
}
.box2 {
width: 100px;
height: 100px;
background-color: chartreuse;
/* animation-name: test; */
/* 动画的执行时间 */
/* animation-duration: 4s; */
/* 动画的执行次数 */
/* animation-iteration-count: 2; */
/* 简写属性 */
animation: test 4s 2;
}
/* 关键帧 */
@keyframes test {
/* 动画开始的位置 */
from {
margin-left: 0px;
}
to {
margin-left: 1080px;
}
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
3.变形
- 变形就是通过CSS来改变元素的形状或者位置。
- 变形不会影响到页面的布局。
- 变形效果通过transform属性来设置。可选值如下：
- translateX()：沿着x轴方向平移
- translateY()：沿着y轴方向平移
- translateZ()：沿着z轴方向平移。xyz轴方向参考左手法则。 z轴方向平移就是调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离。距离越大，元素距离人越近。z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看见效果必须要设置网页的视距。
<!--设置网页的视距示例--> html { /*设置当前网页的视距为800px,人眼距离网页的距离*/ perspective:800px }- rotateZ(xxxdeg)
- rotate(xxxdeg)
- 示例1
<!--例如-->
/*表示沿着x轴方向平移100px*/
transform:translateX(100);
/*百分比是相对自身计算的*/
transform:translateX(50%)
<!--利用平移实现一个元素在另一个初始包含块元素中水平垂直都居中-->
<style>
.box {
background-color: aqua;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
top: 50%;
}
</style>
<div class="box">
测试居中效果
</div>
- 示例2：元素的浮出效果，例如鼠标移入元素上移的效果，使用平移实现不会影响到页面的布局
<style>
body {
background-color: silver;
}
.box1,
.box2 {
width: 220px;
height: 300px;
background-color: #fff;
float: left;
margin: 0 10px;
/* 过渡的效果 */
transition: all .3s;
}
.box1:hover,
.box2:hover {
transform: translateY(-5px);
/* 加上阴影的效果 */
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
</style>
<div class="box1"></div>
<div class="box2"></div>
- transform-origin属性： 设置旋转元素的基点位置。语法如下
transform-origin:x-axis y-axis z-axis;
像素
- 在前端开发中像素分为css像素和物理像素。
- CSS像素：在编写网页时，使用的像素就是css像素。浏览器在显示网页时需要将css像素转为物理像素然后再呈现。一个CSS像素最终由几个物理像素显示，由浏览器决定；默认情况下在PC端，一个CSS像素等于一个物理像素。
- 视口（viewpoint）：视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小，来观察CSS像素和物理像素的比值。
- 默认情况下：视口宽度 CSS像素为1920px,物理像素为1920px。此时CSS像素和物理像素的比值为1：1.
- 放大两倍的情况下：视口宽度960px(CSS像素)，1920px(物理像素)，此时CSS像素和物理像素的比值为1：2.可以通过改变视口的大小（缩放浏览器）来改变CSS像素和物理像素的比值。
- 手机像素：在不同的屏幕下，单位像素的大小是不同的，像素越小屏幕越清晰。默认情况下，移动端的网页都会将视口设置为980px，以确保PC端网页可以在移动端正常访问。
- 完美视口：默认情况下，移动端的视口大小为980px(CSS像素),可以通过meta标签设置视口大小。每一款移动设备设计时，都会有一个最佳的设计比。一般我们只需要将像素比设置为该值即可得到一个最佳效果。将像素比设置为最佳像素比的视口大小称为完美视口。最佳像素比查询material.io/resources/devices
<!--不同的设备完美视口大小不一样，例如iPhone6的为375px--> <!--将网页的视口设置为完美视口即device-width--> <meta name="viewport" content="width=device-width, initial-scale=1.0">
VW单位
- 在移动端开发时，不能再使用px来进行布局了。而是使用vw作为单位。vw表示的是视口的宽度（viewpoint width）。100vw就是一个视口的宽度。1vw等于1%视口宽度。VW单位相对于视口宽度进行计算。
- vw适配：根元素html设置好font-size，以vw为单位。页面中的其他元素以rem为单位，相对于根元素设置宽高。
媒体查询
- 响应式布局：网页可以根据不同的设备或者窗口大小呈现出不同的效果。使用响应式布局，可以使得一个网页适用于所有设备。响应式布局的关键：媒体查询
- 媒体查询：通过媒体查询，可以为不同的设备或者设备不同的状态来分别设置样式。
- 媒体查询的使用
- 语法：
@media 查询规则{ }- 媒体类型：可选值如下。可以使用逗号连接多个媒体类型，这样他们之间就是一个或的关系。
- all：所有设备
- print：打印设备
- screen：带屏幕的设备
- speech：屏幕阅读器
- 媒体特性：
- width：视口的宽度
- height：视口的高度
<!--视口宽度为500的时候样式生效--> @media (width:500px) { body { background-color:#bfa; } }- min-width：视口的最小宽度，视口大于指定宽度时生效
- max-width：视口的最大宽度，视口小于指定宽度时样式生效
@media (min-width:500px) { body { background-color:#bfa; } } - 断点：样式切换的分界点，也就是网页的样式在这个点发生变化。一般比较常用的断点如下：
小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕min-width=992px 大于1200 大屏幕 min-width=1200px <!--大于500px并且小于700px样式才生效--> @media only screen and(min-width:500px) and (max-width:700px) { body { background-color:#bfa; } }
这篇关于CSS基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-14CSS-Module学习：轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解：初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料：初学者必备指南
- 2024-11-11CSS项目实战：从入门到上手
- 2024-11-11CSS定位项目实战：新手指南
- 2024-11-11CSS浮动项目实战：初学者指南
- 2024-11-11CSS选择器项目实战：从入门到上手
- 2024-11-11CSS样式项目实战：新手入门指南
