探索CSS：从入门到精通Web开发（二）
前言
当我们谈论网页设计和开发时，CSS（层叠样式表）无疑是其中的重要一环。作为HTML的伴侣，CSS赋予网页以丰富的样式和布局，使得网站看起来更加吸引人并且具备更好的可读性。本书将通过一系列深入浅出的方式，带你从入门到精通CSS，探索Web开发的奥秘。
你将学到：
CSS基础知识： 我们会从CSS的基础语法和常用属性开始，让你了解如何使用CSS来设置网页的样式，包括文字样式、颜色、布局等方面。
响应式设计： 随着移动设备的普及，响应式设计已经成为Web开发的标配。我们将介绍如何利用CSS媒体查询和弹性布局来创建适应不同屏幕尺寸的网页。
CSS动画和过渡效果： 通过CSS的动画和过渡效果，可以让网页元素变得更加生动和吸引人。我们将教你如何运用这些技术来增强用户体验。
CSS预处理器： 介绍CSS预处理器（如Sass和Less）的使用，以及它们如何帮助你更高效地编写和管理CSS代码。
现代CSS技术： 探索一些现代的CSS技术，如Flexbox布局、Grid布局以及CSS变量，让你的网页开发更加高效和便捷。
无论你是初学者还是有一定经验的开发者，本书都将提供有关CSS的全面指导，帮助你更好地理解和运用CSS来打造精美的网页。让我们一起开始这段关于CSS探索之旅吧！
<style>
/*css的注释*/
/* 选择器 {css属性} 选择器是查找标签的*/
p {
/*字体的颜色*/
color: aqua;
/*字体大小，px是像素的意思*/
font-size: 30px;
/*背景颜色*/
background-color: antiquewhite;
/*宽高尺寸大小width height*/
width: 400px;
height: 400px;
}
style>
head>
<body>
这是一个p标签
css 的引入方式
3种：
内嵌式：
css写在style标签中
提示：style标签可以写在页面的任意位置，但是通常约定写在head标签中
作用范围 当前页面
适用于 小案例
外联式：
css写在一个单独的.css文件中
提示：需要通过link标签在网页中引入
作用范围 多个页面
适用于 项目
<link rel="stylesheet" href="./my.css">
行内式：
css写在标签style属性中
作用范围 当前标签
配合js使用
基础选择器：
标签选择器： 就是以标签来命名的选择器
选中的这个标签，所有的这个标签都生效
字体
属性名 font-family
常见取值：具体字体1/2*/3、
css具有层叠性
一个属性冒号后面跟书写多个值叫做复合属性
font: style weight size 字体 简写方式
文本样式：
缩进：属性名：text-indent
取值：数字+px 或者 数字+em（1em等于当前标签的font的字号值）
文字对齐：
text-align :center 居中
text-align :left 左对齐
要想给图片居中
给图所在的标签的父标签加上text-align :center注意不是img标签
文本修饰
属性名：text-decoration
取值：
属性值 underline 下划线（常用）
line-through 删除线
overline上划线
none无常用线
行高
=上间距+下间距+文本高度·
控制一行的上下行间距
属性名：line-height
取值：
数字+px 或者 倍数（当前标签font-size的大小）
拓展颜色
属性名 ：文字颜色color
背景颜色：background-color
属性值
关键词：预定义的颜色名 red green…
rgb ：红绿蓝三原色：取值范围0-255，rab（0,0,0）
rgba表示法：红绿蓝三原色+a表示透明度取值0-1；
十六进制表示法：#开头，将数字转换成十六进制表示 #000000，简写#000
标签居中：
在想居中的标签里加margin ：0 auto
选择标签进阶
后代选择器：空格，儿子孙子都会选中
选择器 选择器 {…}
儿子选择器：>，只儿子选中
选择器>选择器 {…}
并集选择器：
选择器，选择器{…}
hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{css}
背景颜色
background-color: ;
背景图片
background-image: url();
背景平铺
background-repeat（bgr）
取值：no-repeat 不平铺 repeat-x 沿着水平方向x轴平铺 repeat-y亚y轴
背景位置
background-position（bgp）
取值：方位名词（水平方向） 方位名词（垂直方向）
或者写数字 50px 220px等等 （这个表示向右移50，向下走220）
连写：
单个属性的合写，取值之间空格隔开
元素显示模式：
块级元素：显示特点 独占一行，一行显示同一个，宽度默认是父元素的宽度，高度默认是由内容撑开
可以设置宽高 代表：div p h ul dl dd from nav footer
行内元素：显示特点在同一行显示，不可以设置宽高，宽高由内容默认撑开
代表：a span b u i s strong ins em del
行内块元素：显示特点： 一行显示多个可以设置宽高
代表 input textarea，button select
元素显示模式转换：
目的：改变元素默认的显示特点，让元素符合布局要求
属性：display：block 转换成块级元素，
display：inline-block转换成行内块元素
display：inline 转化成行内元素
特殊注意：p标签中不要嵌套div p h等块级元素
a标签内部不能嵌套a标签
盒子模型：
页面中的每一个标签多可以称为盒子
盒子分别由：内容区域，内边距区域padding，边框区域border，外边距区域margin构成。
border：粗细 线条样式 颜色
solid 实线
border：1px solid #000；
dashed：虚线dotted：点线
、border：5px dashed/dotted #000；
盒子模型自动内减（不用手动计算盒子大小）：给border设置属性box-sizing ： border-box
清除默认内外边距：比如body标签有margib： 8px
p标签有上下的margin
ul标签有由上下的margin padding-left
*{margin：0； padding：0；}
版心居中：
margin： 0 auto；
外边距的折叠现象-
合并现象
垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
塌陷现象：
互相嵌套的块级元素，子元素语句作用在父元素上 结果导致父元素一起改变
解决方法：
一：给父元素设置overflow：hidden
二：给父元素设置border-top 或者padding-top
三：转换成行内元素
四：设置浮动
结构伪类选择器：
选择器：E:first-child{} 匹配父元素第一个子元素
E:last-child{}匹配父元素最后一个选择器
E:nth-child（n）{}匹配父元素第n个元素
E:nth-last-child（n）匹配父元素倒数第n个元素
n可以取值2n 4n等even（偶数） odd（奇数）
伪元素：一般页面的非主体内容可以使用伪元素
由css模拟出的标签效果
：：before 在父元素内容最前面添加一个微元素
：：after 在父元素内容最后面添加一个微元素
必须设置content属性才能生效
浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个间隙
浮动：
float之后的标签具有行内块特点
float 使盒子在同一行
浮动元素会脱离标准流，在标准流中的不占原来位置
浮动元素比标准流高半个级别，可以覆盖标准流中的原素
清除浮动·：
清除浮动带来的影响、
父子级标签，子集浮动，父级没有高度，后面的标准流会受到影响
放法：
额外标签法
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear：both（清除左右浮动）
缺点： 会在页面额外添加标签，会让结构复杂
单伪元素清除法：
写法：.clearfix：：after{
content：“；
display：block；
clear：both；
}
给父元素设置overflow：hidden
定位：
可以让元素自由的摆放在网页是任意位置
一般用于盒子之间的层叠
设置定位方式：
position 属性值：static静态定位
relative相对定位 absolute绝对定位
static再设置偏移值：水平 left 数字+px 距离左边距的 距离
垂直 top 数字+px 距离上边距的距离
子级绝对定位，父级相对定位
位移 ：transform（-50%，-50%）
移到自己盒子的中间
固定定位：
position：fixed；
