这是前端中css的基础部分，后面还会陆续更新css3的新特性的东西，感谢各位耐心看完，也希望都能有所收获。
（每日一句正能量今天讲过啦，就等明天叭）
1.css的概念
css是层叠样式表
2.引入css样式表
2.1行内式（内联样式）
概念:是通过标签的style属性来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名> <div style="color: red; font-size: 24px;">升职，加薪，迎娶白富美，走上人生巅峰！</div>
2.2.内部样式表（内嵌样式表）
概念:是将css代码集中写在html文档的head头部标签中,并且用style标签定义
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
2.3外部样式表（外链式）
概念：是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，
通过link标签将外部样式表文件链接到HTML文档中
<head> <link rel="stylesheet" type="text/css" href="css文件路径"> </head>
2.4三种样式表总结（位置）
3.css选择器（重点）
3.1css基础选择器
<div id="nav">...</div>
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color： red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择一个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
4.css字体样式属性
4.1font字体
4.1.1 font-size：大小
4.1.2 font-family:字体
4.1.3 font-weight:字体粗细
4.1.4 font-style:字体风格
css文字外观
5.CSS综合样式
字体粗细 font-weight:bold是加粗 值是100-900
<400是变细 >400是加粗 bold是700
font综合样式：font,font-style,font-weight,font-size,font-family
(风粗大类，大类必写)
1.text-indent:首行缩进 取值用em
2.line-height：行高/行间距(上下的距离)，取值为px，设置每行的距离，单行取值和高一半，上下居中
3.text-align:文本水平对齐方式
center居中，left,right左右
4.图和文字对齐，给图片设置 vertical-align:middle
5.text-decoration:文本的装饰
none默认，underline:下划线，overline：上划线，line-through删除线
6.间距 letter-spacing：13px;
汉字之间的间距用letter-spacing
英文单词之间的间距用word-spacing
英文字母之间的间距用letter-spacing
background-image:url(路径)引背景图
7.加边框 bord:2px solid #000;
6.引背景图
1.先设置宽高生效，width: height:
2.用background-image：url（路径）;
3.用background-repeat：no-repeat;| repeat-x|repeat-y
让背景图不重复平铺
4.用background-position:0 px 0px;
水平位置，垂直位置，来调整背景图的位置
背景位置：
background-position：top/center/bottom, left/center/right;
<p style="margin: line-height: "
margin:30px 外边距 padding：内边距
7.三大特性，背景行高
7.1.三大特性
1.css层叠性 2.css继承性 3.css优先级（重点）
1.层叠性：多个选择器选到同一个标签，里面也相同的样式名，相同样式名的样式值最终用谁取决于优先级（后来居上，靠的近的优先级更高）
2.继承性：子级或后代没有的样式可能会继承父级，可以继承的样式：字体样式（颜色，大小...）文本样式（text-align:center...）
3.选择器优先级/权重
*，继承 0分///标签 1分 /// 类，伪类 10分///每个ID选择器（#）100分///行内样式 style=“” 1000分///！important 无限大
7.2、标签显示模式转换（display）
块转行内： display: inline;
行内转块： display：block;
块，行内元素转换为行内块：display:inline-block;
transparent:透明的
8.伪类选择器
a:hover{
}
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
9、盒子模型（css重点）
css三大重点：css盒子模型，浮动，定位
盒模型五样式：1.宽 2.高 3.边框（border） 4.内边框（padding） 5.外边框（margin）
9.1:border使用：
border:宽度，风格，颜色（border:1px solid red）
改上下左右边框： border-top/bottom/left/right :1px solid red;
分样式(全称，可以只写简写)：border-width:
border-style:solid实线/dashed虚线/dotted点线/double双线
border-color:
分样式 取值 1-4个，取1个4边都一样，取多个按上右下左的顺序一次取值，没有的和对边一样（左和右一样）
9.2内边距（padding）
内边距：内容到边框的距离
分样式：padding-left/right/top/bottom
简写：padding取值同上
padding:12px 10px 0px 25px;
标准盒（content-box）宽度=内容宽+左右padding+左右border
高度=内容高+上下padding+上下border
边框盒：（border-box） 宽度=width 高度=height
边框或padding撑开盒子的大小，解决办法：box-sizing：border-box;
9.3外边距（margin）：盒子和盒子之间的距离
分样式：margin-left/right/top/bottom
简写：margin,取值规律同上，margin可取负值
对兄弟盒子，margin可以设给任意的盒子
父子关系，子盒子离父盒子的距离可以给子盒子设margin，也可以给父盒子设padding
让盒子居中的条件1.块级 2.设宽 3.左右margin为auto（自动）
行内或行快标签水平居中：
方法1.满足上面三个条件，方法2：给父级设text-align:center
兄弟盒子外边距合并的条件：
1.垂直方向 2.无遮挡，距离为大值，解决方法：把外边距设给一个盒子
外边距合并父子关系，条件同上，子级的margin会影响父级，解决方法：
1.给父级加边框 2.给父级加padding 3.给父级加overflow：hidden
transparent 透明的
10、布局（做题思路）
整体布局：原则：不切割内容
步骤：1.先画最外的布局 2.写代码，实现最外层的布局，用背景色填充 3.给每个模块画布局，画一层写一层
11.列表
ul：块，双，无序列表
子级li：块，双，列表项，内部可再嵌套任意标签
ol：块，双，有序列表
子级同ul
dl：块，双，自定义列表
子级dt，dd
12、css布局机制
布局：用css拜访盒子的位置
css布局机制：1.标准文档流 2.浮动 3.定位
1.标准文档流
按照代码的书写顺序，块级从上往下，行内或行块从左往右依次排列
2.浮动
什么时候用浮动：（1）块级标签同行显示，且中间没有间隙
（2）左右同行对齐
浮动：样式名（float） 取值：none/left/right
特性：1.脱离标准文档流
2.标签变行块
3.左右参照父级
4.浮动后不能同行看宽度
多个子级要浮动，一般统一设左浮动
左青龙右白虎分别设左右浮动
（list-style：none; 去掉ul里面的·的样式）
清除浮动的方法：
（1）给父级加定高,适用于子级个数确定的时候
.parent{
height:100px;
}
（2）给父级加overflow：hidden，适用于子级个数不确定且无定位时使用
.parent{
overflow:hidden;
}
(3)在结束浮动的位置加空的div标签
<div class="clear"> </div>
加样式 clear：both; (1)(2)不能用时用它
溢出处理：样式名 overflow 取值：hidden隐藏/auto自动（这两个常用）scroll双滑滚动条
13.定位
定位：确定盒子的位置，模式（相对/绝对/固定）+偏移量（上下左右）
1.相对定位（relative）
参照自己原来的位置定位，原位置保留，不脱离标准文档流
2.绝对定位（absolute）子绝父相
参照父级来定位，原位置消失，脱离标准文档流
3.固定定位（fixed）
参照浏览器定位，原位置消失，脱离标准文档流
定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 | 使用场景 |
|---|---|---|---|---|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 | 覆盖别的定位模式 |
| 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 | 图字对其等细节调试 |
| 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 | 轮播图，二级菜单等 |
| 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 | 侧边导航，页面广告，顶部导航或搜索栏等 |
14.css高级样式
显示隐藏，建表格
opacity 单独样式名
取值0-1，0完全透明，1不透明，影响背景和内容
background取值Rgba，a取值0-1，只影响背景颜色
鼠标样式cursor取值，pointer是小手。
z-index
z-index 调整有定位的标签的上下关系，取值为整数，正负都可，默认值为0，值越大，越在上方
父级的z-index影响子级
15.表单
表单作用：用于收集用户信息，并发送给后台/服务器进行数据分析，是连接前端和后端的桥梁
form表单，双标签，块级，1.属性action=url 地址 发送到哪里 2.method：get/post（安全）发送方式，3.name类名 自定义名称，后台识别的标识。
input输入框，单标签，行块，属性：type=类型，value=值，placeholder占位提示，name 后台识别的标识
input的type属性的取值：
1隐 hidden隐藏
2填 text文本框 password密码框
3选 radio单选框 checkbox多选框 file文件框
4点 button普通按钮 image图片按钮 reset重置按钮 submit提交按钮
textarea 双 行块 多行文本域 ，空格换行都一样，在浏览器中生效，禁止拖拽，加样式：resize：none;
select 双 行块 下拉列表，子级option，块，双，选项默认选中给option加selected属性
readonly只读，给text框加
disable表示禁用，给2填3选加
标注label 双 行内
css的内容还是相当的多的，对于一些样式还是要在浏览器调试完成后再复制进代码进行修改，对比其中的差异，先练习代码再记录笔记效率会更高，有疑难杂症的地方要多练习两次，笔者基本笔记写了三份，只有不断学习巩固才能把基础打牢固。冰冻三尺非一日之寒，只有不断努力才能达到新的高度，加油！
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
