文章目录
前言
一个专业的前端开发工程师，开发过程中，相当一部分精力要来处理浏览器的兼容性问题，期望一份代码在不同浏览器上效果是一致的。
在PC端，最常使用的Chrome，Edge浏览器都是基于chrome内核的，兼容效果较好。
在手机端，Android和IOS内置浏览器的内核都和chrome是一样的。
CSS主要学习各种属性，实现不同的组合效果（相比于后端开发，这个更依赖于记忆）。
CSS是什么？
层叠样式表 (Cascading Style Sheets)，能够对网页中元素位置的排版进行像素级精确控制， 实现美化页面的效果；能够做到页面的样式和结构分离。
基本语法规范
选择器+{一条/N条声明}
选择器表示针对谁进行修改；声明决定修改什么；声明的属性是键值对，使用分号隔开，使用冒号区分键和值。
style 标签可以放到页面任意位置，一般放到 head 标签内。同时CSS不区分大小写，一般使用小写字母。
<style>
p {
/* 设置字体颜色 */
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>
引入方式
1.内部样式表
写在 style 标签中，嵌入到 html 内部。类似上述代码。这样可以让样式和页面结构分离，但是在css内容多的时候分离不彻底。（开发阶段，建议写这种样式）
2.行内样式表
通过 style 属性, 来指定某个标签的样式，只适用于写简单样式，只针对某个标签生效。这种写法优先级较高，会覆盖其他样式。
注：一个元素的最终样式是“多方叠加”的结果；多个地方设置的相同样式，会按照优先级保留一个样式显示。
部署阶段，一般采用这种风格，减少不必要的空格/换行/缩进，达到节省带宽的效果。同时样式和结构彻底分离。但是受到浏览器缓存的影响，修改之后不一定立刻生效。
<style>
div {
color: red;
}
</style>
<div style="color:green">想要生活过的去, 头上总得带点绿</div>
3.外部样式
当CSS比较复杂时，可以把CSS代码单独放在一个文件中，然后在HTML中单独引用！
实际开发过程中，主要使用外部样式！
①创建一个css文件
②使用link标签引入css
<link rel="stylesheet" href="[CSS文件路径]">
选择器种类
1.基础选择器
①标签选择器
能快速为同一类型的标签都选择出来，但是不能差异化选择。
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>hello</p>
<div>world</div>
②类选择器
类名**.**开头，下方的标签使用 class 属性来调用，多个类名要使用空格分割，
<style>
.box {
width: 200px;
height: 150px;
}
.blue {
color: blue;
}
</style>
<div class="box blue">蓝盒子</div>
③id 选择器
**#**开头，id 选择器的值和 html 中某个元素的 id 值相同。id 是唯一的，不能被多个标签使用。
<style>
#ha {
color: red;
}
</style>
<div id="ha">哈哈哈</div>
④通配符选择器
使用 * 的定义，选取所有的标签，一般是清空内外边距。
* {
<!--页面的所有内容都会被改成 红色 -->
color: red;
<!-- 修改浏览器的默认样式-->
marign: 0;
padding: 0;
<!--通过box-sizing属性可以修改浏览器的行为，使边距不再撑大盒子 -->
box-sizing: border-box;
}
2.复合选择器
①后代选择器
选择父元素中的某个子元素（也可以是孙子）， 可以是任意基础选择器的组合(包括类选择器, id 选择器)。
<!--把 ol 中的 li 修改颜色, 不影响 ul-->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
<!--这里的li特指ol中的所有li-->
ol li {
color: red;
}
②子选择器
只能选择子标签。使用大于号分割，只选亲儿子, 不选孙子元素。
<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>
.two>a {
color: red;
}
③并集选择器
用于选择多组标签。这多种标签同时被设置为同一种样式。
使用逗号分割多个元素，任何基础选择器都可以使用并集选择器，也可以和复合选择器一起使用。
<div>苹果</div>
<h3>香蕉</h3>
<ul>
<li>鸭梨</li>
<li>橙子</li>
</ul>
<!--把苹果和香蕉颜色改成红色 -->
div, h3 {
color: red;
}
<!--把苹果、鸭梨和橙子改成绿色 -->
div, ul>li {
color: green;
}
④伪类选择器
a. 链接伪类选择器 (和a标签搭配使用，根据a标签的状态来选择）
| 状态 | 表示 |
|---|---|
| a:link | 选择未被访问过的链接 |
| a:visited | 选择已经被访问过的链接 |
| a:hover❤ | 选择鼠标指针悬停上的链接 |
| a:active❤ | 鼠标按下但是还没弹起 |
<a href="#">小猫</a>
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
b. force伪类选择器 （选取获取焦点的 input 表单元素）
<div class="three">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<!--此时被选中的表单的字体就会变成红色 -->
.three>input:focus {
color: red;
}
常见元素属性
字体属性
**font相关CSS属性是可以被继承的，子元素会自动继承父元素的相关属性。**如果在某个元素使用不同的字体，就可以针对这个元素单独设置字体，此时设置的字体样式会自动覆盖原来的字体样式。
设置字体：font-family
大小：font-size (chrome 默认是 16px，单位px不要忘记哦)
粗细：font-weight （700=bold, 400 是不变粗, =normal），取值范围是 100 -> 900
文字样式：font-style (斜体italic，不倾斜normal)
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
font-size: 20px;
font-weight: bold;
font-style: italic;
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
文本属性
颜色：color ①预定义的颜色值(直接是单词) ②[最常用] 十六进制形式 ③RGB 方式 ； RGBA（Alpha表示透明度[0,1]）
对齐：text-align （center/left/right）控制文字水平方向的对齐
装饰：text-decoration (underline下划线/none啥都没有/overline上划线/line-through删除线)， none常用于给a标签去掉下划线。
缩进：text-indent 根据字体大小来设置缩进的像素数量~em是以当前字体大小为基准，eg:1em表示和当前字体大小一样(20px)，是一个相对数值，也可以设置为小数，0.8em, 0.2em。
行高：line-height 行高指的是上下文本行之间的基线距离，控制文字垂直方向对齐（chrome 上 normal 为 21 px）
行高等与元素高度, 就可以实现文字居中对齐。
<style>
.color {
color: red;
/* color: rgb(255, 0, 0); */
/* color: #ff0000; */
}
.one {
text-align: left;
text-decoration: overline; /*上划线*/
text-indent:2em;
}
.line-height .two {
height: 100px;
line-height: 100px;
}
</style>
<div class="color">这是一段话</div>
<div class="one">哈哈哈</div>
<div class="line-height">
<div class="two">
文本垂直居中
</div>
</div>
背景属性
背景颜色：background-color 默认transparent透明的
背景图片：background-image 后加url()
背景平铺：background-repeat (repeat/no-repeat/repeat-x/repeat-y)
背景位置：background-position ①方位名词(top, left, right, bottom) ②坐标 ③混合单位
- 如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
- 如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
- 如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
- 如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中。
- 如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)
背景尺寸：background-size （length/percentage/cover/contain）
注意：cover和contain的区别（cover图片填充内容，contain图片适应内容）
<style>
.bgi .one {
background-color: red;
background-image: url(star.jpg);
height: 300px;
background-color: red;
background-position: center;
background-size: contain;
}
</style>
<div class="bgi">
<div class="one"></div>
</div>
圆角矩形
基本用法：通过 border-radius 使边框带圆角效果。
<!--length 是内切圆的半径. 数值越大, 弧线越强烈-->
div {
width: 200px;
height: 100px;
border: 2px solid green; /**/
border-radius: 10px;
}
生成圆形：让 border-radius 的值为矩形高度的一半即可。
border-radius: 10px 20px 30px 40px; 也可以这样设置，以坐标原点作为左上，顺时针设置。
元素的显示模式
块级元素 block
常见的元素：h1-h6, p, div, ul, ol, li…
特点：①独占一行 ②高宽，内外边距，行高都可控 ③宽度默认和父元素一样宽 ④是一个容器，里面可以放行内和块级元素
<style>
.demo1 .parent {
width: 500px;
height: 500px;
background-color: green;
}
.demo1 .child {
/* 不写 width, 默认和父元素一样宽 */
/* 不写 height, 默认为 0 (看不到了) */
height: 200px;
background-color: red;
}
</style>
<div class="demo1">
<div class="parent">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
</div>
</div>
行内元素/内联元素 inline
常见的元素：a, strong, b, em, i, del, s, ins, u, span…
特点：在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。
默认宽度就是本身的内容；并且行内元素只能容纳文本和其他行内元素，不能放块级元素。
<style>
.demo2 span {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="demo2">
<span>child1</span>
<span>child2</span>
<span>child3</span>
</div>
可以使用 display 属性可以修改元素的显示模式.
注：这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。
行内元素和块级元素的区别（常见面试题）
块级元素独占一行，行内元素不独占一行。
块级元素可以设置宽高，行内元素不能设置宽高。
块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置。
块级元素默认的宽度和父元素一致，行内元素默认的宽度就是和本身内容相关（如果没有内容，宽度就为0）。
块级元素内部可以容纳其他块级元素和行内元素，而行内元素内部只能包含行内元素。
盒模型
每一个 HTML 元素就相当于是一个矩形的 “盒子”,由内容 content、内边距 padding、边框 border、外边距 margin由内而外组成。
- 边框
粗细: border-width
样式: border-style 默认没边框，solid 实线边框， dashed 虚线边框， dotted 点线边框
颜色: border-color
可以改四个方向的任意边框（border-top/bottom/left/right）
边框会撑大盒子，实际大小要加上边框大小。通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子。 - 内边距
padding 设置内容和边框之间的距离。默认是顶着边框来放置的。
可以通过padding-top，padding-bottom，padding-left，padding-right给四个方向都加上边距。内边距也会影响盒子大小，使用box-sizing:border-box属性也可以使内边距不再撑大盒子。
复合写法：
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针) - 外边距
控制盒子和盒子之间的距离。类似的，通过margin-top, margin-bottom, margin-left, margin-right给四个方向加边距。复合写法同padding一样。 - 块级元素水平居中
前提：指定宽度(如果不指定宽度, 默认和父元素一致)，把水平 margin 设为 auto
<!--三种写法均可-->
margin-left: auto; margin-right: auto; /*只能设置水平居中，用top和bottom不能设置垂直居中 */
margin: auto;
margin: 0 auto;
margin:auto是给块级元素用到的
text-align:center是让行内元素/行内块元素居中的（元素里的文字水平居中）
弹性布局
flex布局
flex 是 flexible box 的缩写. 意思为 “弹性盒子”。任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局。
flex 布局的本质是给父盒子添加 display:flex 属性，来控制子盒子的位置和排列方式。
常用属性
①justify-content：设置主轴上的子元素排列方式。
| 值 | 描述 |
|---|---|
| flex-start | 默认值，项目位于容器的开头 |
| flex-end | 项目位于容器的结尾 |
| center | 项目位于容器的中央 |
| space-between | 项目在行与行之间留有间隙 |
| space-around | 项目在行之前，行之间和行之后留有空间 |
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
display: flex;
justify-content: flex-end;
}
div span {
width: 100px;
height: 100px;
background-color: green;
}
</style>
②align-items：设置侧轴上的元素排列方式。（默认情况下，水平方向为主轴，垂直方向是侧轴）
取值与justify-content类似（stretch/scenter/flex-start/flex-end/space-between/space-around）
※ stretch是 align-content 的默认值. 意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度。
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: space-around;
align-items: center; /*注意:align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents */
}
div span {
width: 150px;
height: 100px;
background-color: red;
}
</style>
使用align-items:center实现垂直居中，这是推荐做法！
通过弹性布局中的这两个属性再加上盒模型中的一些相关边距，基本上就能实现大多数的页面布局效果。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
