小张前端学习（二）：CSS基础
文章目录
- CSS引入
- CSS基本语法
- CSS特性
- CSS选择器
- 通配符选择器
- 元素/标签选择器
- id选择器
- 类选择器
- 属性选择器
- 伪类选择器
- 派生选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 选择器权重
- CSS常用属性
- 字体
- 文本
- 尺寸
- 列表
- 背景
- CSS盒模型
- 内边距
- 边框
- 外边距margin
- display属性
- CSS浮动
- 浮动
- 清楚浮动
- 内容塌陷
- 内容塌陷解决办法1
- 内容塌陷解决办法二
- 内容塌陷解决办法三
- 双飞翼布局
- CSS定位
- 相对定位
- 绝对定位
1.最新版本：CSS3.0
CSS引入
举例：
1.内联样式
<h1 style="color: red;">CSS学习h1>
2.内部样式
<head>
<style>
h1 {
color: green;
}
style>
head>
<body>
<h1>CSS学习h1>
body>
3.引入外部样式
<head>
<link rel="stylesheet" href="demo.css">
head>
<body>
<h1>CSS学习h1>
body>
demo.css:
h1 {
color: pink;
}
4.导入外部样式
<head>
<style>
@import "demo.css"
style>
head>
CSS基本语法
1.基本结构：选择器{样式名：样式值;}
2.分号的作用是用于分割每条样式，所以大括号内最后一条样式的分号可加可不加，不过最好加上。
3.CSS对大小写不敏感。
4.当有多个并列的选择器时，可以用逗号连接，让这几个并列的选择器都应用相同的样式。
CSS特性
1.层叠特性
当有相同样式属性时，后面的值会覆盖掉前面值。（不同属性之间则不会覆盖）
分析：根据代码可知，我们共先后设置了三种颜色：绿色、红色、黄色。但是开发者工具显示，绿色和红色被划上了一条线，表示作废，是因为被后面的黄色覆盖了。
2.继承性
子标签会继承父标签的部分属性值（如字体大小、颜色等）
分析：从代码可知，我们只写了p标签的样式，但是p标签内包含的span标签也有样式。因为span标签继承了p标签的样式。
CSS选择器
通配符选择器
PS：还可用于定义一些浏览器默认缺省参数，去减少因为浏览器不同而造成页面显示差异。（不同的缺省参数，不同浏览器会赋不同的默认初始值，从而造成显示差异）
元素/标签选择器
用于选中同一类型的标签。
id选择器
- id值不能以数字开头，中间不能有空格
类选择器
- 可以选择某一类（class）下的所有某一种标签。格式为:标签名.类名即可选中
属性选择器
- attribute~=value中说的指定值是指多个并列属性值中的一个完整的一个，如title=“value value1”，我们要去匹配value，而不是说属性值单词包括哪些特定字母组合。
- attribute|=value用于匹配属性值为以value作为前缀的单词，但是只有两种情况能匹配：①形如value-abc（必须要有一条杠作为分隔）②属性值仅有value这个完整的单词，无并列属性。
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
h1[title]{color: red;}/*选中h1标签中具有title属性的元素 */
h1[title="text1"]{color: green;} /*选中title属性值中仅为text1（单词完全匹配，无并列属性值）的元素。*/
h1[title~="text2"]{color: yellow;}/*选中title属性值中包含text2的元素。*/
h1[title|="pre"]{color: pink;} /*选中title属性值中前缀为pre的单词。（形如pre-abc和pre的单词）*/
style>
head>
<body>
<h1 title="text">文字有title属性h1>
<h1 >文字无titleh1>
<h1 title="text1">文字有title属性，值为text1h1>
<h1 title="text1 text">文字有title属性，值为text1和texth1>
<h1 title="text2 text">文字有title属性，且属性有两个并列的属性值，分别为text2和texth1>
<h1 title="pre">文字有title属性，无并列属性值h1>
<h1 title="pre hehe">文字有title属性，有并列属性值h1>
<h1 title="pre-hehe">文字有title属性，有前缀preh1>
body>
html>
伪类选择器
- 顺序很重要。因为同一时刻某一超链接标签可能会同时处于多个状态，如鼠标悬停在超链接上时，a标签同时处于hover状态和link/visited状态，根据CSS覆盖特性，所以hover状态要定义在link/visited之后。avtive写在最后也是同理。但link和visited顺序可调。
- 助记：LoVe HAte （link o visited e hover active t e）爱与恨
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
a:link{color: red;}
a:visited{color: blue;}
a:hover{color: grey;}
a:active{color: hotpink;}
style>
head>
<body>
<a href="https://www.baidu.com/">百度一下a>
body>
html>
派生选择器
后代选择器
子元素选择器
示例：
分析：p span（后代选择器）是选中p标签的所有span后代标签（包括多级的标签），而p>span（子元素选择器）只会选择第一级span标签，第二级以上的则不会被选择。
相邻兄弟选择器
示例：
分析：前后两个p标签互为兄弟关系，故可以选中第二个p标签
选择器权重
大厂面试必考知识点
*派生选择器的权重由组成它的各个选择器的权重加和即可。
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{color: red }/*通配符选择器*/
div{color: grey;} /*标签选择器*/
.hello{color: pink;}/*类选择器*/
#hi{color: blue;}/*id选择器*/
/* *{color: red !important;}/*通配符选择器*/
div#hi{color: orange;} /*选中id为hi的div标签，权重为1（div)+100（id）*/
style>
head>
<body>
大家好div>
body>
html>
CSS常用属性
字体
衬线字体
非衬线字体
等宽字体
解释
字体比较花哨
比较中规中矩
每个字符宽度相等
英文字体
serif
sans-serif
monospace
中文字体
宋体
黑体（微软雅黑、苹方）
文本
- line-height设置每一行的高度，font-size设置每一个字的大小。
示例：
<head>
<style>
div{
color: #ff0000;
color: rgb(155,0,0);
line-height: 100px;
text-align: center;
text-indent: 2em;/*首行缩进两个字符 */
text-decoration: underline;/*下划线 */
letter-spacing:10px;
text-shadow: 3px 3px 3px yellow;
}
style>
head>
<body>
<div>蚂蚁集团宣布上市,估值为何高达万亿?谁是大BOSS?div>
body>
尺寸
列表
控制每一个列表项前面的图标样式
示例：
<head>
<style>
.list{
list-style-type: square;/*当定义了list-style-image以后，这一个属性就不起作用了,但是为了兼容那些不支持list-style-image的浏览器，需要写上，留作备用显示方案*/
list-style-image: url(https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/forum/pic/item/faedab64034f78f092cbd59f6e310a55b2191c9d.jpg);
list-style-position: inside;
}
style>
head>
<body>
<ul class="list">
<li>大学英语li>
<li>大学物理li>
<li>高等数学li>
<li>大学德语li>
ul>
body>
背景
CSS盒模型
内边距
- 形如padding: 5px;，表示上下左右内边距均为5px
- 形如padding: 5px 20px，表示上下为5px，左右为20px
- 形如padding: 5px 20px 30px;表示先按上右下赋值，最后左内边距=右内边距（20px）
- 形如padding: 5px 20px 30px 1px;表示上右下左（顺时针方向）赋值
边框
外边距margin
大厂面试知识点：
- 对于块级元素之间（如div和div之间），两元素的距离（两元素边框的距离）取决于两者margin的最大值。如一个div的margin为20px，另一个div的margin为40px，且这两者上下相邻，则两元素距离为40px
- 对于内联元素之间（如span和span之间），两元素的距离为两元素外边距之和，如一个span标签外边距为20px，另一span标签外边距为40px，且两者左右相邻，则两元素距离为20+40=60px
display属性
- 块级元素的宽度取决于父元素的宽度，内联元素的宽度取决于元素内容的宽度。
- display设置为block或inline，可以将内联元素变为块级元素，将块级元素变为内联元素。
- 当两个标签同时设置为inline-block时，内联元素的性质体现在两个标签可以处在同一行，块级元素的性质体现在可以设置宽度和高度（内联元素宽高度只取决于元素内容的大小）
- 当两个内联元素并列显示时，中间会有一点缝隙。(好像是代码中的回车换行引起的）
这是内联元素自身特性决定的。解决办法如下：
①将两个标签写在同一行
②将body元素的font-size设置为0px，再在两个标签中重新定义正常的font-size。
<head>
<style>
div{
border: 1px solid red;
display: inline-block;
font-size: 14px;
}
body{
font-size: 0px;
}
style>
head>
<body>
<div>我是div1div><div>我是div2div>
body>
CSS浮动
浮动
清楚浮动
内容塌陷
上图显示，有一个div包含了两个div子标签，但是父div却的边框却只有一根线，这说明父div由于两个子div均脱离了文档流，不再是父div标签的内容，从而使得父div的高度变为0，即内容塌陷。
大厂面试常考：
内容塌陷解决办法1
- 在所有浮动元素的最后加一个div标签，并且这个div标签激活了clear属性
<head>
<style>
.box1{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
.box2{
height: 100px;
width: 100px;
background-color: green;
float: right;
}
.box{
border: 1px solid red;
}
.clear{
clear: both;
}
style>
head>
<body>
<div class="box">
<div class="box1">我是div1div>
<div class="box2">我是div1div>
<div class="clear">div>
div>
body>
内容塌陷解决办法二
- 设置父元素overflow属性
<head>
<style>
.box1{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
.box2{
height: 100px;
width: 100px;
background-color: green;
float: right;
}
.box{
border: 1px solid red;
overflow: auto;
}
style>
head>
<body>
<div class="box">
<div class="box1">我是div1div>
<div class="box2">我是div1div>
div>
body>
内容塌陷解决办法三
父元素添加一个clearfix的类，类的样式如图
双飞翼布局
CSS定位
- fixed定位方式意味着标签不会随着页面滚动而滚动，就是固定在屏幕某一位置
相对定位
绝对定位
