CSS基础
CSS简介
含义：
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。 是一种标记语言.用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS 代码风格
1. 样式格式书写
- 样式大小写
➢属性值关键字全部使用小写字母，特殊情况除外。
3. 空格规范
➢属性值前面，冒号后面，保留一个空格
➢选择器（标签）和大括号中间保留空格
CSS 引入方式
行内样式表（行内式）
➢是在元素标签内部的 style 属性中设定 CSS 样式
内部样式表（嵌入式）
➢是写到html页面内部，单独放到一个 <style> 标签中
➢但一般会放在文档的<head>标签中
外部样式表（链接式）
➢样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.
➢ 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
➢在 HTML 页面中，使用<link> 标签引入这个文件。
<link rel="stylesheet" href="CSS文件路径">
CSS选择器
作用：
➢找到选择的标签。 选择器（选对人）。
➢设置这些标签的样式，比如颜色为红色（做对事）。
分类：
➢选择器分为基础选择器和复合选择器两个大类。
基础选择器
➢基础选择器是由单个选择器组成的
➢基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器等等
标签选择器
➢标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类。
类选择器（重点）
➢类选择器在 HTML 中以 class 属性表示.
➢在 CSS 中类选择器以一个点“.”进行标识,后面紧跟类名（自定义，我们自己命名的）。
➢长名称或词组可以使用连字号（-）和下划线（_）来为选择器命名。
➢不要使用纯数字、中文等命名，尽量使用英文字母来表示。
➢命名要有意义，尽量使别人一眼就知道这个类名的目的。
➢标签class 属性中写多个类名，多个类名中间必须用空格分开
id 选择器
➢HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
➢样式#定义,结构id调用, 只能调用一次（只能被一个元素所拥有）, 别人切勿使用.
通配符选择器
➢通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
复合选择器
➢复合选择器是建立在基础选择器之上，由两个或多个基础选择器，通过不同的方式组合而成的。
➢常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。
后代选择器
➢后代选择器又称为包含选择器，可以选择父元素里面子元素，元素1 和 元素2 中间用空格隔开，可越级
子选择器
➢元素1 > 元素2 { 样式声明 }
➢元素1 和 元素2 中间用 大于号 隔开，最终选择的元素是元素2
➢子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，不可越级
并集选择器
➢元素1,元素2 { 样式声明 }
➢并集选择器可以选择多组标签, 同时为他们定义相同的样式，中间用逗号隔开
➢逗号可以理解为和的意思
➢并集选择器通常用于集体声明
交集选择器
➢交集选择器是为了找两个或多个选择器的交集，用法就是把两个选择器放在一起，形式如“选择器A选择器B”，中间不需要加空格或者其他符号。
➢交集选择器 是 并且的意思。 即…又…的意思
伪类选择器
➢伪类选择器是用来向某些选择器来添加效果。
属性值：:link, :visited, :hover, :active
伪元素选择器
➢伪元素选择器则是用来将特殊的效果添加在选择器上。
属性值：
结构伪类选择器
nth-child 和 nth-of-type 的区别：
➢nth-child： 会把所有的盒子都排列序号
➢nth-of-type: 会把指定的盒子排列序号
E:nth-child(n)：
E:nth-child(
属性选择器
CSS三大特性
层叠性
➢相同的选择器给设置相同的样式
➢样式不冲突，遵循的原则是就近原则
➢样式不冲突，不会层叠
继承性
子标签继承父标签的某种样式
优先级（权重）
注意：类选择器、属性选择器、伪类选择器，权重为 10
CSS元素显示模式
块级元素
块级元素特点：
➢独占一行
➢高度、宽度、外边距以及内边距都可以控制
➢宽度默认是容器（父级宽度）的100%
➢是一个容器盒子，里面可以放行内或者块级元素
➢文字类的元素内不能使用块级元素
➢典范：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
行内元素
特点：
➢相邻行内元素在一行上，一行可以显示多个
➢高、宽直接设置是无效的
➢默认宽度就是它本身内容的宽度
➢行内元素只能容纳文本或其他行内元素
➢链接里面不能再放链接，a可以放块级元素
➢典范：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等
行内块元素
特点：
➢同时具有块元素和行内元素的特点
➢一行显示多个，但之间会有缝隙
➢默认宽度就是它本身内容的宽度
➢高度、行高、外边距以及内边距都可以控制（块级元素的特点）
➢ 典范：<img />、<input />、<td>等
元素显示模式的转换
➢display: none;——隐藏元素
➢display: block; ——行砖块，显示元素（重点)
➢display：inline;——块转行
➢display： inline-block——转换行内块(重点)
CSS属性
字体属性fonts
font-family文本的字体
➢各种字体之间必须使用英文状态下的逗号隔开
➢一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
➢尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
➢最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
font-size字体大小
➢px（像素）大小是我们网页的最常用的单位
➢谷歌浏览器默认的文字大小为16px
font-weight字体的粗细
➢normal:默认值，不加粗的。
➢bold:粗体，加粗的。
➢可以是数值100-900：400等于normal，700等于bold。
font-style文本的风格
➢normal：默认值，标准的字体样式（不倾斜）
➢italic：使文字倾斜
字体复合属性
font: font-style font-weight font-size/line-height font-family;
➢不能更换顺序，并且各个属性间以空格隔开
➢不需要设置的属性可以省略，但必须保留 font-size 和 font-family 属性
Text文本属性
color文本的颜色
属性值：
➢预定义颜色：red，green等,颜色的英文。
➢十六进制：#FF0000,#EE1121
➢rgb代码：rgb(250,250,250)或 rgb(%250,%121,%121)
text-align文本内容的水平对齐方式
属性值：
➢left：左对齐（默认值）
➢right：右对齐
➢center：居中对齐
text-decoration装饰文本
属性值：
➢none：默认值，没有装饰线（最常用）
➢underline：下划线(常用）
➢overline：上划线(几乎不用)
➢line-through：删除线（不常用）
text-indent首行缩进
➢text-indent 属性用来指定文本的第一行的缩进，单位：em
➢em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小
line-height行间距（行高）
➢以控制文字行与行之间的距离.
Background 背景属性
background-color 背景颜色
background-color 属性定义了元素的背景颜色。
➢background-color:颜色值;
transparent（透明）
一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。
➢background-color:transparent;
background: rgba(0, 0, 0, .3);背景色半透明
➢最后一个参数是 alpha 透明度，取值范围在 0~1之间
background-image 背景图片
➢设置元素的背景图像
语法：
➢background-image : url (背景图路径)；
适用范围：
实际开发常见于 logo 或者一些装饰性的小图片或者是超
大的背景图片
background-repeat 背景平铺
语法：
➢background-repeat：值；
属性值：
background-position 背景位置
语法：
background-position：X Y；
➢参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
注：
1. 参数是方位名词
➢如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
➢如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位
➢如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
➢如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是混合单位
➢如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
background-size背景图片大小
语法：
➢background-size: length|percentage|cover|contain;
属性：
background-attachment背景图像固定（背景附着）
语法
➢background-attachment : scroll | fixed ；
➢background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
属性
复合写法
➢background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
➢background: transparent url(image.jpg) repeat-y fixed top ;
➢没有特定的书写顺序
总结
盒子模型
➢盒子模型包括：border边框、外边距 margin、padding内边距、和 content 内容
border边框
语法：
➢border : border-width || border-style || border-color
➢ border-left|right|top|bottom：属性值； 让某一边的边框展示出来
➢border-collapse: collapse; 表示相邻边框合并在一起
➢边框会影响盒子实际大小
border属性：
border-style属性：
圆角边框：border-radius
语法：
border-radius:length;
➢参数值可以为数值或百分比的形式
➢如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
➢该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
边框图片border-image
➢border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式
属性：
1、border-image-source：
➢其中，none 为 border-image-source 属性的默认值，表示不使用图像来替换边框的默认样式；<image> 为使用 url() 函数指定的图像路径或者使用 linear-gradient() 函数定义的渐变色，用来替换默认的边框样式。
➢border-image-source：用来定义边框要使用的图像，通过该属性可以指定一个图像来替换边框的默认样式
2、border-image-slice
➢border-image-slice：用来分割通过 border-image-source 属性加载的图像
➢border-image-slice 属性可以指定上、下、左、右四个方位来分割图像，并将图像分 成 4 个角、4条边和中间区域等 9 个部份，中间区域始终是透明的（即没图像填充），除非加上关键字 fill，如下图所示：
3、border-image-width：
➢border-image-width 属性用来设置通过 border-image-source 属性加载的图像厚度（宽度）
4、 border-image-repeat
➢border-image-repeat 属性用来设置如何填充使用 border-image-slice 属性分割的图像边框，例如平铺、拉伸等等
padding 内边距
➢内容和边框之间的距离
➢内边距会影响盒子实际大小
margin 外边距
➢margin 属性用于设置外边距，即控制盒子和盒子之间的距离
➢外边距可以让块级盒子水平居中，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子左右的外边距都设置为 auto 。
➢行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可
相邻块元素垂直外边距的合并：
➢当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
嵌套块元素垂直外边距的塌陷：
➢对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
box-size如何计算一个元素的总宽度和总高度
➢ box-sizing 属性定义了如何计算一个元素的总宽度和总高度
清除内外边距
➢网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距
方法：
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
盒子阴影 box-shadow
文字阴影text-shadow
浮动
浮动float
➢float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法：
➢选择器 { float: 属性值; }
属性值：
浮动元素的特性：
1. 浮动元素会脱离标准流(脱标) ，浮动的盒子不再保留原先的位置
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性.
清除浮动
为什么需要清除浮动？
➢由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。
清除浮动的方法：
- 额外标签法也称为隔墙法
➢额外标签法会在浮动元素末尾添加一个空的标签
- 父级添加 overflow 属性
➢可以给父级添加 overflow：hidden；
3、父级添加after伪元素
4、父级添加双伪元素
定位
➢定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
➢后来者居上
静态定位 static（了解）
➢静态定位是元素的默认定位方式，无定位的意思。
语法：
➢选择器 { position: static; }
➢静态定位按照标准流特性摆放位置，它没有边偏移
➢静态定位在布局时很少用到
相对定位 relative（重要）
➢相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：
➢选择器 { position: relative; }
相对定位的特点：
➢它是相对于自己原来的位置来移动的。
➢继续占有原来的位置
➢对盒子影响小
绝对定位 absolute（重要）
➢绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
语法：
➢选择器 { position: absolute; }
绝对定位的特点：
➢如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
➢如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
➢绝对定位不再占有原先的位置。（脱标）
子绝父相
➢子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
➢父盒子需要加定位限制子盒子在父盒子内显示。
➢父盒子布局时，需要占有位置，因此父亲只能是相对定位
绝对定位的盒子居中
➢加了绝对定位的盒子不能通过 margin:0 auto 水平居中
➢left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
➢margin-left: -100px;：让盒子向左移动自身宽度的一半。
固定定位 fixed （重要）
➢固定定位是元素固定于浏览器可视区的位置。主要使用场景：
可以在浏览器页面滚动时元素的位置不会改变。
语法：
➢选择器 { position: fixed; }
固定定位的特点：
- 以浏览器的可视窗口为参照点移动元素。
➢跟父元素没有任何关系
➢不随滚动条滚动。
- 固定定位不在占有原先的位置（脱标）
固定定位小技巧： 固定在版心右侧位置。
1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）
的一半位置。
- 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了。
粘性定位 sticky（了解）
➢粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
语法：
选择器 { position: sticky; top: 10px; }
粘性定位的特点：
1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top 、left、right、bottom 其中一个才有效
定位叠放次序 z-index
➢在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)
语法：
选择器 { z-index: 1; }
➢数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
➢如果属性值相同，则按照书写顺序，后来居上
➢数字后面不能加单位
➢只有定位的盒子才有 z-index 属性
总结
绝对定位和固定定位也和浮动类似。
1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
网页布局总结 ：
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
1. 标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2. 浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3. 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就 用定位布局。
元素的显示与隐藏
显示隐藏 display
➢display 属性用于设置一个元素应如何显示。
➢display 隐藏元素后，不再占有原来的位置
➢display: none : 隐藏对象
➢display：block :除了转换为块级元素之外，同时 还有显示元素的意思
应用：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
显示隐藏 visibility
➢visibility 属性用于指定一个元素应可见还是藏。
➢visibility：visible ：元素可视
➢ visibility：hidden: 元素隐藏
➢visibility 隐藏元素后，继续占有原来的位置
overflow 溢出显示隐藏
➢overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）
时，会发生什么。
CSS提高知识点
去掉 li 前面的 项目符号(小圆点)
➢list-style: none;
精灵图
1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。（核心）
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。（核心）
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。（核心）
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
三角制作
1、我们用css 边框可以模拟三角效果
2宽度、高度都为0
3、我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改
为 transparent 透明就好了
4、为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
鼠标样式 cursor
语法：
➢cursor: 属性值;
轮廓线 outline（去掉表单元素默认的蓝色边框）
➢给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
移除input和按钮中间的缝隙
问题1：input和button中间有缝隙
1.在父级元素上设置属性：font-size:0px;
将input父级字体(font-size)设为0px，可以消除间隔，但是得重新设置内联元素(input)的字体大小;
2.去掉input，button标签之间的空格
3. input和button中间加注释
问题2： input和button 水平对不齐
1.给input和button设置vertical-align: ; 属性，即可对齐
防止拖拽文本域 resize
语法：
➢resize: none;
vertical-align 表单/图片和文字对齐方式
➢使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。只针对于行内元素或者行内块元素有效
语法：
vertical-align : baseline | top | middle | bottom
解决图片底部默认空白缝隙问题
主要解决方法有两种：
1.给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2.把图片转换为块级元素 display: block;
溢出文字省略号显示
单行文本溢出显示省略号：
多行文本溢出显示省略号：
filter滤镜
语法：
filter：blur（5px）；
blur模糊处理 数值越大越模糊
opacity 不透明度
语法：
➢opacity：0-1；
➢opacity 属性指定了一个元素的不透明度
属性指定了一个元素后面的背景的被覆盖程度。
CSS3 calc函数
➢calc()此CSS函数让你让你在声明CSS属性值时执行一些计算。
➢括号里边可以使用+ - * / 来进行计算。
➢值和运算符之间用空格隔开
子元素不会影响叔叔级别的元素
➢子元素不会影响叔叔级别的元素
网站 TDK 三大标签 SEO 优化
常用类名
HTML快捷书写方式
56
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
