CSS笔记——千锋Ghost老师_2019前端入门

CSS基础语法

1. 格式：选择器{属性1: 值1; 属性2: 值2; …}
   属性：
   • width、height：长度单位有两种表示：px、%
   • background-coclor：背景色
2. CSS注释：/* 注释的内容 */
   快捷键：Ctrl + /； Shift + Alt + a

CSS样式的引入方式

1. 内联（行内、行间）样式
   在html标签上添加style属性来实现

   <div style="width: 100px; height: 100px; background-color: aquamarine;">块1</div>
   

2. 内部样式
   在< style>标签内添加的样式，< style>< /style> 一般写在head部分
   优点：内部样式的代码可以复用，符合W3C的规范标准：尽量让结构和样式分开处理
   
   

3. 外部样式
   引入一个单独的CSS文件，name.css
   引入方法：
   1）通过< link>标签引入外部资源，rel属性指定资源和页面的关系，href属性指定资源的地址，< link> 标签只能存在于head部分，可以出现多次
   2）通过 @import 方式引入，这种方式有很多问题，不建议使用

   <!--方法一-->
   <style>
   	<link rel="stylesheet" href="***.css">
   </style>
   
   <!--方法二-->
   <style>
   	@import url('***.css');
   </style>
   

CSS中的颜色表示法

1. 单词表示法
2. 十六进制表示法：#十六进制
3. RGB三原色表示法：rgb(数1，数2，数3)
   html颜色代码

一个简单的获取颜色的方法：登录QQ，使用Ctrl + Alt + a截屏的时候会显示颜色的值

CSS背景样式

1. background-color：背景颜色
2. background-image：背景图片
   • 展示性的图片通常用< img>，装饰性的图片（比如做一个小图标、背景等）用background-image
   • 使用时要为该属性设置一个URL值：url(背景地址)
   • 默认会水平和垂直方向都铺满背景图
3. background-repeat：背景图片的平铺方式
   • repeat-x：x轴平铺
   • repeat-y：y轴平铺
   • repeat：x、y都进行平铺，默认值
   • no-repeat：都不平铺，不平铺时，若图片大小 < 背景大小，则图片默认会在背景的左上角
4. background-position：背景图片的位置
   支持的单位：
   • x、y：背景左上角坐标为（0px,0px），x和y的值可正可负
   • 单词：x轴有left、center、right；y轴有top、center、bottom
   • 百分比
5. background-attachment：背景图片随滚动条的移动方式，有两个可选值：
   a)scroll：默认值，默认情况下，背景会随滚动条滚动，当滚动到超过图像的位置时，图像就会消失。（采用默认值时，背景的位置background-position是按照当前元素进行偏移的）
   b)fixed：背景图片固定不动，但容器会随滚动条移动（背景的位置是按照浏览器进行偏移的）

CSS边框样式

1. border-style：边框样式
   取值：solid（实线） | dashed（虚线） | dotted（点线）
2. border-width：边框大小
3. border-color：边框颜色，可以设置透明颜色transparent。

也可以针对某一条边框进行单独设置：
例如border-right-style、border-top-color、border-left-width，即在中间加上一个表示方向的单词。

CSS文字样式

1. font-family：字体类型
   • 英文字体：Arial…
   • 中文字体：宋体、微软雅黑（默认）…

   <style>
   	#p1{font-family: 宋体 微软雅黑;}
      #p2{font-family: 'Courier New', Courier, monospace;}
   </style>
   

【注】

• 可以设置多个字体类型
  多个字体类型的设置目的：作为备选方案，即当用户计算机中没有第一种字体的时候，会显示为设置的第二个类型。
• 引号：
  当字体名中有一个或多个空格，或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

2. font-size：字体大小
   • 默认大小是16px
   • 写法：可以直接具体写**px（为了更好地实现对齐，字体大小一般设置为偶数），也可以通过单词的方式进行设置（但不建议）

3. font-weight：字体粗细
   只有两种显示效果，正常和加粗。有两种写法：
   1)normal（默认）、bold
   2)数字：100~ 900之间的成百的整数，100~ 500效果为normal，600~900效果为bold

4. font-style：字体样式
   normal（正常）、italic（斜体）
   【注】oblique也是表示斜体，用的比较少。
   两个斜体的区别：italic 带有倾斜属性的字体才可以设置倾斜操作；
   oblique 没有倾斜属性的字体也可以设置倾斜操作。
   所以italic比较符合规范。

5. color：字体颜色
   
   

CSS段落样式

1. text-decoration：文本装饰
   取值
   • 下划线：underline
   • 删除线：line-through
   • 上划线：overline
   • 不添加任何装饰：none
   可添加多个文本修饰，多个修饰之间用空格隔开。
2. text-transform：文本大小写（针对英文）
   • 小写：lowercase
   • 大写：uppercase
   • 只针对每个单词的首字母大写：capitalize
3. text-indent：文本缩进
   1)主要针对首行缩进
   2)em单位：是一个相对单位，1em永远都和字体大小（font-size）相同。但如果一段文字中出现了英文，字体仍然比较难对齐。
4. text-align：文本水平对齐方式
   left、right、center、justify（两端点对齐）
5. line-height：定义行高
   
   • 默认行高：不是固定值，而是根据当前字体的大小不断变化的
   • 取值：px（像素）；（比例值，和文字大小成比例）
6. letter-spacing：定义字间距
7. word-spacing：定义词间距（针对英文）
8. 强制折行（针对英文、阿拉伯数字）
   • word-break: break-all; 非常强烈的折行
   • word-wrap: break-word; 不是那么强烈的折行，可能会产生一些空白的区域

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

• 复合样式的写法是通过空格对多个属性进行分割，有些复合写法不需要关心顺序，例如background和border，有的需要关心顺序，例如font。
• 单一样式与复合样式尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式。因为在复合样式里没有写的样式会按照默认样式进行设置，所以要后写单一模式把之前复合里默认的样式覆盖掉。

1. background

   <style>
   	div{
         width: 500px;
        height: 200px;
        background: aquamarine no-repeat url(...) center center;
    	   }
   </style>
   

2. border

   <style>
   	div{
        width: 100px;
     	  height: 100px;
     	  border:  2px black solid;
     	  }
   </style>
   

3. font
   • 如果要写font，至少要保证有两个值：size family（并且按顺序放在最后）
   • color不属于font系列，不能添加到font的复合写法中。

   <style>
   	div{
          font: bold italic 30px/40px 宋体;
         /* weight  style  size/line-height  family */
        /* 其中 size 和 family 是必须的，且必须按照顺序放在最后 */
   	    }
   </style>
   

CSS选择器

1. id选择器
   css：#elem{}
   html：id=“elem”
   • 在一个页面中，id值是唯一的
   • 命名规范：字母 _ - 数字组合而成，并且第一位不能是数字
   • 命名方式：驼峰式（searchSmallButton）、下划线式（search_small_button）、短线式（search-small-button）
   CSS常用命名名称

2. class选择器
   css：.elem{}
   html：class=“elem”
   • class选择器是可以复用的
   • 可以添加多个class样式
   • 多个标签的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
   • 标签+类名的写法

3. 标签选择器（TAG选择器）
   css：div{ }
   html：< div>
   使用的场景：
   • 去掉某些标签的默认样式时
   • 复杂的选择器中，如层次选择器

4. 群组选择器（分组选择器）
   可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

   <style>
   	div,#text,.title{background: red}
   </style>
   

5. 通配选择器
   *{ }
   因为会给所有标签添加样式，所以要慎用。

6. 层次选择器
   • 后代选择器：M N { }
   • 子代选择器：M > N { }
   • 兄弟：M ~ N { }
   • 相邻：M + N { }

7. 属性选择器

选择器	说明
[attr]	用于选取带有指定属性的元素
[attr=value]	用于选取带有指定属性和值的元素
[attr~=value]	用于选取属性值中包含指定词汇的元素
[attr|= value]	用于选取带有以指定值开头的属性值的元素
[attr^=value]	匹配属性值以指定值开头的每个元素
[attr$=value]	匹配属性值以指定值结尾的每个元素
[attr*=value]	匹配属性值中包含指定值的每个元素

=：完全匹配         *=：部分匹配
^=：起始匹配         $=：结束匹配        [ ] [ ] [ ]：组合匹配

<style>
/* 为带有 target 属性的 <a> 元素设置样式 */
a[targe]{
	background-color: blue;
 }
 /*选择 lang 属性值以 "en" 开头的元素，并设置其样式：*/
[lang|=en]
{ 
background-color:yellow;
}
</style>

8. 伪类选择器
   同一个标签，根据其不同的种状态，有不同的样式，这就叫做“伪类”。伪类用冒号来表示。
   写法：M：伪类{ }
   • :link 访问前M的样式（只能添加给a标签）
   • :visited 访问后M的样式（只能添加给a标签）
   • :hover 鼠标移入时M的样式（可以添加给所有标签）
   • :active 鼠标按下时M的样式（可以添加给所有标签）
   如果4个伪类都生效，一定要注意顺序：L V H A
   一般的网站不会对a链接做4个操作，只会设置a{ }和a:hover{ }
   • :after、:before 通过伪类的方式给元素添加一个文本内容
   • :checked、:disable、:focus 都是针对表单元素的

9. 结构伪类选择器
   结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

   选择符	简介
   E:first-child	匹配父元素中的第一个子元素E
   E:last-child	匹配父元素中的最后一个E元素
   E:nth-child(n)	匹配父元素中的第n个子元素E
   E:first-of-type	指定类型E的第一个
   E:last-of-type	指定类型E的最后一个
   E:nth-of-type(n)	指定类型E的第n个

CSS样式继承

1. CSS 继承是指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。

2. 一般情况下，只有文字相关的样式可以被继承。
   常见应用场景：
   可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
   直接给body标签设置统一的font-size，从而统一不同浏览器默认的文字大小

3. 布局相关的样式默认不能被继承，但可以通过设置继承属性 inherit 来继承布局相关属性。

   /*设置继承边框样式*/
   p{border:inherit}
   

4. 拓展：继承失效的特殊情况
   如果元素有浏览器默认样式，此时继承性依然存在，但是会优先显示浏览器的默认样式。

   • a标签的color会继承失效
   • h系列标签的font-size会继承失效
   • div的高度不能继承，但是宽的有类似于继承的效果
     
     

CSS优先级

1. 相同样式优先级
   当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
2. 内部样式与外部样式
   内部样式（在< style>标签内添加的样式）与外部样式（通过link标签引入的样式）优先级相同，如果设置了相同样式，那么后写入的引入方式优先级高
3. 单一样式优先级
   行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承

样式	权重
style行间	1000
id	100
class	10
tag	1
*	0

4. !important
   提升样式优先级，非规范方式，不建议使用。另外，!important也不能提升继承的优先级。

5. 标签+类 >单类

   <style>
   	div.box{color:blue;}  /*标签+类优先级高于单类，div中的文字会显示为蓝色*/
   	.box{color:red;}
   </style>
   

6. 群组优先级
   群组选择器与单一选择器优先级相同，靠后写的优先级高

7. 权重叠加计算
   

层次选择器尽量写在三层以内。

CSS盒子模型

组成

content -> padding -> border -> margin

1. content：内容区域
   是由width和height组成的区域，增加内边距、边框和外边距不会影响内容区域元素框的总尺寸
2. padding：内边距（内填充）
   只写一个值：30px（上下左右）
   写两个值：30px 40px（上下、左右）
   写三个值：30px 40px 50px（上 左&右 下）
   写四个值：30px 40px 50px 60px（上、右、下、左）
   也可针对某一遍进行设置，此时只能写一个值：
   padding-left padding-right padding-top padding-bottom
3. border：边框。
   给盒子设置边框粗细（border-wieth）、边框样式（border-style）、边框颜色（border-color）等效果。
4. margin：外边距（外填充）
   margin控制元素与元素之间的距离。body的margin比较特殊，控制的是页面与浏览器窗口边距的距离。
   用法与padding一样

注意：
6. 背景颜色会填充到margin以内的区域
7. 文字在content区域添加
8. padding不能出现负值，margin可以出现负值（利用margin负值可以做一些复杂的布局效果）

box-sizing

box-sizing属性可以改变盒子模型的展示形态。
其语法为：box-sizing: content-box（默认值）| border-box
取值：

1. content-box（标准模式）
   盒子总宽度=width+padding+border+margin
2. border-box（怪异模式）
   盒子总宽度=width(包含padding+border)+margin
   指盒子设置的宽width高height由content、padding、border三者来分配。

若box-sizing的取值为content-box时，给盒子设置border或padding时，盒子会被撑大，如何不想盒子被撑大，可以采用两种方法：
- 手动内减：自己计算多余的大小，手动在content中减去
- 自动内减：给盒子设置属性box-sizing:border-box，浏览器会自动计算多余的大小，自动在内容中减去

margin叠加（合并现象）

1. 水平布局的盒子，左右margin正常，互不影响。
2. 垂直布局的块级元素，上下的margin会合并。最终两者间的距离为margin的最大值。
   

margin传递（塌陷现象）

1. 互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动。只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
2. 解决方案
   • 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
   • 给父元素设置overflow:hidden
   • 转换成行内块元素
   • 设置浮动

一些扩展

1. margin自适应
   margin可以左右自适应居中，但上下自适应（目前知识）是不行的
2. 不设置width和height的时候，对盒子模型的影响：
   不设置width时系统会自动去计算容器的大小，且不会超出父容器范围，省去了自己运算的步骤，也节省了代码。

标签分类

按类型

1. block：块
   例如div、p、ul、li、h1等都属于块，它们具有以下特性：
   a) 独占一行
   b) 支持CSS所有样式
   c) 不设置宽时，宽会和父元素的宽相同
   d) 所占区域是一个矩形
2. inline：内联（行内标签）
   例如span、a、em、strong等都属于内联，它们具有以下特性：
   a) 挨在一起（和其他元素在一行上）
   b) 对元素的高度、宽度及顶部和底部边距设置不生效；完全靠内容撑开宽高
   c) 所占区域不一定是矩形
   d) 内联标签之间会有空隙，是由写代码时换行产生的，但一般不需要解决这个空隙。

布局一般用块标签，修饰文本一般用内联标签。

3. inline-block：内联块（行内块标签）
   例如img、input、select等（一般是表单标签），特性如下：
   a) 挨在一起
   b) 元素的高度、宽度、行高以及顶和底边距都可设置

按内容

按显示

1. 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
2. 非替换元素：将内容直接告诉浏览器，将其显示出来

显示框类型（display）

1. display属性规定元素应该生成的框的类型
2. display: block / inline / inline-block / none
   a) inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。
   b) block：此元素将显示为块级元素，此元素前后会带有换行符。
   c) inline-block：行内块元素
   d) none：此元素不会被显示
3. display: none 表示不占空间的隐藏
   visibility: hidden 占空间的隐藏

在html文档中，不建议使用显示框类型，通常使用浮动 float 来实现相同的效果。

标签嵌套规范

1. 之前学过的：ul、li； dl、dt、dd； table、tr、td等
2. 块标签可以嵌套内联标签
3. 内联不能嵌套块（但a能嵌套div，好处在于可以给一个区域加链接）
4. 块标签不一定能嵌套块标签，如p标签内不能嵌套div标签
   
   

overflow溢出隐藏

overflow属性规定溢出部分的显示效果。
溢出部分：指的是盒子内容部分所超出盒子范围的区域。
常见属性值：

1. visible：默认值。内容不会被修剪，会呈现在元素框之外。
2. hidden：内容会被隐藏，其余内容是不可见的。
3. scroll：无论是否溢出，都将会同时显示水平和垂直两个滚动条。
4. auto：根据是否溢出，自动显示滚动条以查看其余的内容或隐藏滚动条。
5. overflow还有两个姐妹属性：overflow-x、overflow-y，但很少使用。
   
   

透明度与手势

透明度

1. opacity 透明度，是一个属性
   a) 取值为 0(透明) ~ 1(不透明)，例如0.5表示半透明
   注：当透明度为0时，也占空间
   b) 有opacity属性的所有后代元素都会继承 opacity 属性，所以其所有的子内容也会透明
2. rgba（r, g, b, a），是一个属性值
   其中a（alpha）控制透明度，取值同样为0~1，它可以让指定的样式透明，而不影响其他的样式。可用于制作透明的边框、透明背景图片等

手势：cursor

1. default：默认，通常是一个箭头。
2. hand/pointer：手形光标。就像通常用户将光标移到超链接上时那样。
3. move : 十字箭头光标。用于标示对象可被移动。
4. help : 带有问号标记的箭头。用于标示有帮助信息存在。
5. text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
6. 自定义光标：cursor: url(路径), auto。图片类型需要是.cur或.ani格式。

最大、最小宽高

1. min-width、min-height
2. max-width、max-height
3. 强化对 % 的理解：
   a) width和height
   它们的百分比计算是基于包裹它的父元素的宽和高来计算（一定是父元素，和它爷爷没关系）
   有一种特殊情况是，父元素没有明确的高度定义(指的是不定义height或者使用min/max-height这种，都属于不明确的高度定义)，并且子元素使用百分比并且不是绝对定位，那么这时候的百分比等同于auto。
   b) padding和margin
   padding和margin都可以使用百分比来定义大小，注意参考的百分比是宽度，而不是高度。（margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度，而是宽度 。）
   c) background-position
   d) font-size：参考值是它的父元素的font-size
   e) line-height：参考的是自身的font-size大小

CSS默认样式

有些标签没有默认样式，例如：div、span
有些标签有默认样式：

1. body：margin（8px）
2. h1：margin（上下21.440px）、font-weight（bold）
3. p：margin（上下16px）
4. ul：margin（上下16px）、padding（左40px）、默认点list-style（disc）
5. a：text-decoratio（underline）
   …

默认值有一些对我们后续开发是有益的，但是也有一些会影响到后续开发，得想办法把它们去掉

CSS reset（重置样式）

所有的 HTML 标签在没有设置样式时均被浏览器默认的样式列表所装饰 （不同浏览器默认样式有所不同）。CSS 的样式重置就是清除浏览器的默认样式 ，可以理解为对于全局的样式定义。 对于开发者而言，如不重置每一个浏览器特定的默认样式，则会在开发造成诸多的不便。

float浮动

文档流（标准流）

文档流：是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
常见标准流排版规则

1. 块级元素：从上到下，垂直布局，独占一行
2. 行内元素或行内块元素：从左到右，水平布局，空间不够时自动折行

float特性

加浮动的元素，会脱离标准文档流（脱标），会沿着父容器靠左或靠右排列（不能上下），如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框独占一行，而不论它本身是何种元素。

float取值

1. left：元素向左浮动
2. right：元素向右浮动
3. none（默认）：元素不浮动，并会显示在其在文本中出现的位置

float注意点

1. 只会影响后面的元素，对浮动之前的元素不造成任何影响
2. 内容默认提升半层：浮动的元素有“字围”的效果，可以做一些图文混排效果
3. 默认宽根据内容决定（收缩）：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）
4. 换行排列
5. 主要给块元素添加，但也可以给内联元素添加

清除浮动

1. 清除浮动的含义：清除浮动带来的影响
   影响：如果子元素浮动了，此时子元素不能撑开标准文档流的块级父元素
   原因：子元素浮动后脱标–>不占位置
   目的：需要父元素有高度，从而不影响其他网页元素的布局
2. 清除浮动的方法

   • 直接设置父元素的高度

   • 额外标签法：
     步骤：
     a)在父元素内容的最后添加一个块级元素
     b)给添加的块级元素设置 clear:both
     缺点是会在页面中添加额外的标签，会让页面中的HTML结构变得复杂

   • 伪元素清除法

   • 双伪元素清除法
     - 给父元素设置overflow:hidden属性

     <style>
     	#box1{width:200px; border:1px solid black;}
     	#box2{width:100px; height:200px; background:red; float:left;}
     	.clearfix:after{content: ''; clear: both; display:block;}
     	// 先转成块，才能支持clear操作 
     </style>
     

     <body>
     	<div id="box1" class="clearfix">
     		<div id="box2"></div>
     	</div>
     </body>
     

     

     
     

position定位

css position属性用于指定一个元素在文档中的定位方式。top、right、buttom、left属性则决定了该元素的最终位置。
position取值：static（默认）| relative | absolute | fixed | sticky

relative 相对定位

1. 如果没有定位偏移量（left、top、right、bottom），对元素本身没有任何影响
2. 不使元素脱离文档流
3. 不影响其他元素布局：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间
4. left、top、right、bottom是相对于当前元素自身进偏移的

absolute绝对定位

1. 使元素完全脱离文档流：元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样
2. 使内联元素支持宽高（让内联具备块特征）
3. 使块元素默认宽根据内容决定（让块具备内联特征）
4. 如果有定位（relative、absolute、fixed任意一种都可以）祖先元素，则相对于最近的、有定位的祖先元素发生偏移；
   如果没有定位祖先元素，则相对于整个文档发生偏移（绝对、相对、固定）
   

子绝父相

1. 场景：让子元素相对于父元素进行自由移动
2. 含义：
   子元素：绝对定位
   父元素：相对定位
3. 子绝父相好处：父元素是相对定位，则对网页布局影响很小
4. "子绝夫绝"的特殊场景：在使用“子绝父相”时，发现父元素已经有绝对定位了，此时直接子绝即可。

fixed固定定位

1. 使元素完全脱离文档流
2. 使内联元素支持宽高（让内联具备块特征）
3. 是块元素默认宽根据内容决定（让块具备内联特征）
4. 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响（利用这个可以制作“返回顶部”或广告、固定弹窗等功能）

sticky黏性定位

在指定的位置，进行粘性操作。
（可以做导航栏，类似于Excel中的固定表头）

z-index定位

默认层级为0
嵌套时候的层级问题

CSS添加省略号

基本要素：

1. width 必须有一个固定的宽
2. white-space：nowrap
   white-space属性是用来定义元素内的空白该如何处理。
   取值：
   • nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
   … …
3. overflow：hidden 隐藏溢出的内容
4. text-overflow：ellipsis
   text-overflow属性规定了当文本溢出包含元素时所发生的事情。
   取值：
   • clip：修剪文本
   • ellipsis：显示省略号来代替被修剪的文本
   • string：使用给定的字符串来代表被修剪的文本

例如：单行文本溢出处理

单行文本溢出处理与多行文本溢出处理

CSS圆角设置：border-radius

如果在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。
如果要在四个角上一一指定，遵循使用以下规则：

1. 四个值：左上 右上 右下 左下
2. 三个值：左上 右上&左下 右下
3. 两个值：左上&右下 右上&左下
4. 一个值： 四个圆角值相同