前端CSS基础笔记

外联样式

在head中通过link标签来引入外部的css样式文件
语法

注意

• link 是个单标签
• 该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

font简写时候的注意事项

• 在font简写的时候，font-size和font-family一定要写，其他两个可选
• font-size和font-family的顺序不能调换，一定要在最后面，font-size要在font-family的前面

文本水平位置 text-align（left/right/center）

• 对于独占一行的元素，设置里面的文本水平位置，只需要给这个元素本身设置text-align属性；
• 对于一行可以显示多个的元素，如果需要设置其水平位置，那么需要给其父元素设置text-align属性

类和id的命名规则

规则

• 命名中可以包含字母、数字、下划线、短横线
• 命名不能以数字开头
• 命名不能以使用单个短横线，单个下划线可以
• 命名不能使用短横线加数字开头

建议

• 类和id的命名尽可能有意义
• 如果是多个单词组成的词，尽可能使用驼峰命名法
  （驼峰命名法：当多个单词组成一个词的时候，第一个单词的首字母小写，后面每个单词的首字母大写）

复合选择器

• 后代选择器
  语法：
  选择器1 选择器2 选择器3 …{
  属性: 属性值
  }
  用选择器与选择器之间空格隔开
• 子代选择器
  语法：
  选择器1>选择器2>选择器3>+…{
  属性: 属性值
  }
  用选择器与选择器之间>隔开
• 交集选择器
  语法
  选择器1选择器2选择器3 …{
  属性: 属性值
  }
  注意：选择器连在一起
  如果交际选择器有标签选择器，那么标签选择器一定写在前面
• 并集选择器
  语法：
  选择器1,选择器2,选择器,3 …{
  属性: 属性值
  }
  注意：用,隔开
  一般在css初始化的时候，或者是给不同的元素设置相同的样式的时候使用最多
• 兄弟选择器
  只能选择相邻的下一个兄弟元素
  语法
  选择器1+选择器2+选择器3+ +…{
  属性:属性值;
  }

常见的元素的三种显示方式

• 行内元素
  display: inline;

特点
1.一行可以显示多个
2.大小由内容决定
3.不能设置有效宽高

常见行内元素 span a em ins del strong img(可设宽高)
水平居中 给父元素的块级元素设置text-align:center

• 块级元素
  display:block

特点
1.独占一行
2.可以设置有效宽高

常见块级元素 h1~h6 div ul li ol dd dt dl p div
文本居中，直接设置

• 行内块级元素
  display: inline-block

特点
1.一行可以显示多个
2.能设置有效宽高

常见的行内块级元素 input select textarea
水平居中 给父元素的块级元素设置text-align:center

• 空元素
  
  

  ---

  
  鲜为人知的是：
  

css三大特性

• 层叠性
  对于同一个元素的同一个属性后面的样式会覆盖前面的样式，优先级高的会覆盖优先级低的
  （长江后浪推前浪）
• 继承性
  后代元素能获得父辈元素的某一些样式（龙生龙，凤生凤，生下老鼠会打洞）
  继承的特殊情况
  1.a标签的颜色不能继承
  2.h系列标签不能继承字体粗细 ，字体大小也不能继承
• 优先级
  优先级顺序
  继承<通配符选择器<标签选择器<类选择器 important只能提高单个属性的优先级，不能提高整个选择器的优先级

复合选择器的权重计算

复合选择器的权重计算：4个n算法（n n n n）
第一个n表示的是！important的个数
第二个n表示的是id选择器的个数
第三个n表示的是类选择器的个数
第四个n表示的是标签选择器的个数

110>20
#1比较的时候从左边的第一个n开始比较，如果比较的哪一个n大，那么就是这个选择器的权重大，后面的n不需要在比较，如果第一个n相等，那么继续比较第二个n，以此类推。
#2如果遇到的了!important的时候，一定要特别小心，因为!important只对一个属性有效，而不是整个选择器
#3如果父元素中有!important，而子元素是继承元素的样式，那么这个!important对子元素是无效的

background（css背景）

• background-color
  背景颜色

• background-image
  背景图片地址

• background-repeat
  是否平铺

• background-position
  背景位置
  参数
  length 百分数 由浮点数字和单位标识符组成的长度值
  position （top center right left bottom）

• 背景图片的位置设置
  background-position: center center; 水平垂直居中
  说明

  • 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。

  • 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%（默认居中）。第二个值将用于纵坐标。（如果只设置一个值，另一个方向默认居中）

  • 如果设置两个值，那么设置 的值就是表示相对应的方向

    背景图片位置设置 使用具体的数字

  • 如果设置一个值，这个值表示水平方向，垂直方向默认居中

  • 如果设置两个值，第一个值表示水平方向，第二个值表示垂直方向
    (正值为向下向右移动，负值为向上向左移动）

  注意：

  • 我们可以使用方位名词， 如果只写一个方位名词， 那么另外一个默认居中对齐。 他们不分顺序 top left 和 left top是一样

  • position 后面是x坐标和y坐标。 也可使用 精确单位。但是他们有顺序 10px 50px 和 50px 10px 不一样的

  • 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则
    15px 一定是 x坐标 top是 y坐标。

• background-attachment
  背景固定还是滚动
  参数
  scroll 背景图像是随对象内容滚动
  fixed 背景图像固定

• backgorund-size
  设置背景图片的大小由两种设置方法
  一种是自定义px或者%（注意是否等比例，尽量不要修改原始图片的比例值），%参照父容器的大小
  如 background-size:100px 100px
  另一种是是系统提供的值

  • cover 等比放大到容器大小（将素材图片全部的包含在容器中等比例），直到最短边触底
  • contain 等比放大到容器大小（将素材图片覆盖整个容器，但是只需要其中一个方向，全部包含就行），直到最长边触底（会留白）

• backgrund-origin
  设置背景图片从哪里开始显示 我们把一个元素分为三个部分 border padding content-width 这个属性就是用来设置背景图片 三个部分开始显示的
  设置背景图片的平铺原点（左上角）

  • border-box 从边框部分开始显示
  • padding-box 从padding部分开始显示 默认值
  • content-box 从内容部分开始显示

• backgorund-clip
  背景裁剪， 一个元素分为三个部分 border padding content-width（设置的是裁切，控制的是显示）
  设置背景图片的显示范围，增大元素的响应区域
  该属性控制背景从哪个部分 开始 向外裁剪

  • border-box 从边框部分开始显示 默认值
  • padding-box 从padding部分开始显示
  • content-box 从内容部分开始显示

背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

盒子水平垂直居中

水平居中

 div {
 	width:200px;
 	margin:0 auto;
    } 

水平居中

   div {
 	position: absolute;
 	width: 300px;
 	height: 300px;
 	margin: auto;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	background-color: pink;	/* 方便看效果 */
 }

水平垂直居中

 div {
 	position: relative;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外边距为自身宽高的一半 */
 	background-color: pink;	 	/* 方便看效果 */

  }

水平垂直居中

  div {
 	position: absolute;		/* 相对定位或绝对定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */

 }

水平垂直居中

  .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */

 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }

外边距合并（margin塌陷）

• 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

• 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方法

1. 可以为父元素定义1像素的上边框或内边距
2. 可以为父元素添加overflow: hidden; （触发了css中的bfc，会给一个父元素的盒子形成一个闭封的区域块）

去除图片标签的基线的方法

• 将图片设为块状元素，display: block
• 将文本的字体大小设为0，font-size: 0
• 设为底部/顶线/中线对齐，vertical-align: bottom | top | middle;

设置或检索对象内容的垂直对其方式

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

文本溢出处理

保证文本在一行显示
white-space:nowrap
隐藏溢出文本
overflow:hidden;
使用省略号替代
text-overflow : ellipsis;

浮动特点

• 脱标，不占标准流位置
• 浮动元素改变元素的显示方式（特别针对行内元素），块级元素显示方式不变，但是呈现行内块级元素的特点
• 浮动元素是以元素的顶部对齐，跟元素的高度无关，不会以底部对齐
• 如果元素有包含关系，子元素浮动不会占据父元素的border和padding的位置
• 如果一个标准流的盒子下面很一个浮动的盒子，那么这个浮动的盒子只能在标准流的下面左右浮动，不会和标准流的盒子同一行显示

清除浮动的方法

• 额外标签法
  通过在浮动元素末尾添加一个空的标签
  
  
  后面的元素能消除前面元素的影响，清除元素只能使用块级元素
• 父级元素添加overflow属性的方法
  可以通过触发BFC的方式，实现清除浮动效果
  可以给父级添加overflow为hidden|auto|scroll都可以实现
• 使用after伪元素清除浮动

 .clearfix::after {
            content: "";
            /*伪元素必须配合content使用*/
            display: block;
            /*清除浮动需要使用块级元素*/
            clear: both;
            /*清除浮动的方法*/
            height: 0;
            /*将伪元素中的内容撑出来的高度去除*/
            line-height: 0;
            /*为了浏览器更好的兼容*/
            visibility: hidden;
            /*隐藏content里面的内容*/
        }

        .clearfix {
            *zoom: 1;
            /*IE6,7专有*/
        }

• 使用before和after双伪元素清除浮动

     .clearfix::before,.clearfix::after{
            content: "";
            display: table
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }

• 给父元素设置高度

初始化框架

• nec框架
• Normalize.css

定位模式

• 静态定位
  position:static（默认）
• 绝对定位
  position:absolute
  特点
  绝对定位的元素脱标，不占标准流位置
  觉得定位的元素能改变行内元素的显示方式
  如果元素有包含关系
  子元素绝对定位，父辈元素都是静态定位，那么这个绝对定位的子元素参照浏览器来移动位置
  子元素绝对定位，父辈元素中有非静态定位，那么这个绝对定位的子元素参照这个非静态定位的父辈元素
  （有奶便是娘）
  子元素绝对定位，父辈元素中有多个非静态定位的元素，那么这个绝对定位的子元素参照离自身最近的一个父辈元素来移动位置
• 相对定位
  position:relative
  特点
  相对定位可以设置有效的偏移值
  相对定位元素没有脱标，还在标准流里面
  相对定位不能改变元素的显示方式
  相对定位元素参照元素本身原来的位置移动（参照自己本身移动）
• 绝对定位
  position:fixed
  特点
  脱标，不占位置
  能改变元素的显示方式（行内元素）
  始终都是参照浏览器做位置移动

引入ico图标

vscodel快捷输入link:favicon
她(它)不是iconfont字体哦 也不是图片。
位置是放到 head 标签中间。
后面的type=“image/x-icon” 属性可以省略。
为了兼容性，请将favicon.ico 这个图标放到根目录下。

logo优化

• logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要
• h1里面在放一个连接，给连接一个 大小 和 logo 的背景图片
• 连接 里面要放文字， 但是文字不要显示出来， 要用 text-indent 移到盒子外面text-indent: -9999px 然后overflow:hidden或者font-size:0
• 最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了

三角形的制作

.box{
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-top-color: #000;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }