CSS核心样式

作者: 安掌门dear | 来源:发表于2020-10-24 15:05 被阅读0次

学前体会

本文收集自拉勾教育大前端就业班

从今天开始也算正式步入前端的课程了，我是一个不善于记笔记的人，但我知道笔记可以带来多大的帮助,因为我的小脑袋瓜真的记不住，说真的css样式笔记记起来是真的无聊，和流水账单一样，感觉更偏理论点，尤其在运用中如何把所学的东西串连起来，用创造性思维去理解才是这个工具的真谛，对于毫无审美的我来说，拜托以后碰到一个给力的UI小姐姐

CSS常用样式

1.font-weight

作用：设置文字是否加粗显示
单词类型：normal、bold、bolder、lighter

数字类型：100-900直接的整百数字。400等价于normal,700等价于bold

<p style="font-weight: normal;">默认值</p>
<p style="font-weight: bold;">定义粗体字符</p>
<p style="font-weight: bolder;">定义更粗的字体</p>
<p style="font-weight: lighter;">定义更细的字体</p>

2.font-style

作用：设置文字是否斜体显示

属性值：normal、italic、oblique

<p style="font-style: normal;">正规的字体</p>
<p style="font-style: italic;">斜体文字</p>
<p style="font-style: oblique;">倾斜的文字</p>

3.line-height

作用：设置一行文字的行高
行高是文字占有的高度，并垂直居中
```
<p style="line-height: 40px;">行高</p>
```

4.font综合属性

<p style="font: 14px "宋体";">字号 字体</p>
<p style="font: 14px/28px "宋体";">字号/行高 字体样式</p>
<p style="font: bold italic 14px/28px '宋体';">加粗 斜体 字体大小/行高 字体样式</p>

5.text-align 水平对齐

作用：设置文本水平方向对齐

属性：left、center、right

<p style="width: 200px; 
height: 100px;
background-color: aquamarine;
text-align: center;
">设置水平对齐方式</p>

6.text-decoration文本修饰属性

设置文本整体是否有线条的修饰效果

属性：none、overline、line-through、underline

<p style="text-decoration: none;">没有修饰</p>
<p style="text-decoration: overline;">上划线</p>
<p style="text-decoration: line-through;">中划线，删除线</p>
<p style="text-decoration: underline;">下划线</p>

7.text-indent文本缩进

作用：设置段落首行是否缩进
属性：px单位、em单位、百分比

盒模型

用来描述盒子位置、尺寸的属性，分别是width、height、padding、border、margin

1.width

作用：设置元素内容的区域宽度

2.height

作用：设置可以添加元素内容的区域高度

3.padding

作用：设置元素边框内部到宽高之间的距离

p{
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  }

4.border

作用：设置内边距外面的边界区域，作为盒子实体化的最外层
属性：分别设置线的宽度、线的形状、线的颜色
boder-style
- 定义边框样式
- 常用属性：none:无边框，solid:实线，dashed:虚线
boder-color
- 设置边框颜色

5.margin

作用：设置盒子与盒子之间的距离

p{
  margin-top:10px;
  margin-right:20px;
  margin-bottom:30px;
  margin-left:40px;
}

盒模型属性

清除默认样式

大部分标签都有浏览器加载的默认样式，会对布局造成一些影响。为避免默认样式影响，一定要清楚默认样式

*{margin: 0;padding: 0;}
p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ol,ul,li{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight: normal}

height应用

高度可以不设置，会根据内部内容高度自动撑开
如果设置了高度，后面同级元素过多，会溢出盒子区域

overflow属性

如果出现溢出现象，通过overflow进行溢出部分内容显示

overflow="visible" 默认值，显示溢出部分
overflow="hidden" 隐藏溢出部分，隐藏超过边框内容
overflow="scroll" 溢出部分出现滚动条，无论有没有溢出，水平和垂直都会出现滚动条
overflow="auto" 自动的，没有溢出正常显示，溢出就出现滚动条

居中

单行文本垂直居中：让文字行高line-height等于盒子高度height
多行文本垂直居中：让元素高度自适应设置元素内边距上下值相同‘
元素水平居中：子盒子宽度低于父盒子宽度，设置子盒子的margin值，水平方向的值设置auto

父子盒模型

子元素的宽度加在一起不能大于父元素的宽带
盒模型自动内减：不设置子元素的width，同时设置子元素其他属性，子元素的width会自动缩减

margin塌陷现象

同级元素塌陷：在垂直方向如果两个元素的外边距有相遇的，浏览器加载两个边距中值较大的那个
- 解决：两元素之间只设置一个方向的margin
父子元素塌陷：父元素和子元素设置了同方向的margin-top两属性之间相遇造成塌陷
能用padding属性就不用margin属性，水平间不存在margin塌陷现象

标准文档流

元素排版过程中，元素默认从左往右，从上往下，前面内容发生变化，后面的内容位置也会变化
HTML就是一种标准文档流文件

微观现象

空白折叠现象
文字类元素排在一行出现高低不齐，底边对齐效果
写满元素时，自动换行

元素等级、布局元素的分类

标准流中，元素区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素
块级元素：大部分容器级标签都是块级元素<div>、<h1>
- 块级元素可以设置宽高，在浏览器中正常加载本身属性为display:block;
- 独占一行，不能和其他标签并排,可以直接控制宽度、高度等其他相关css属性
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度
行内元素：大部分文本级标签<span>、<a>、<b>
- 行内元素不能正常加载宽高，本身属性为display:inline;
- 可以和其他行内块元素并排一行,不可以直接控制宽度、高度等其他相关css属性
- 无论设置宽高，都只被内容撑开，不能嵌套块级元素
行内块元素也叫内联块状元素：<img>、<input>
- 可以设置宽度和高度，本身属性为display:inline-block;
- 可以与其他并排一行显示
- 如果不设置宽高，以原始尺寸加载，或被内容撑开
- 具有标准流的微观性质

显示模式display

可以改变标签的显示模式

根据属性值的不同，可以加载对应元素等级的特点

display: block 元素以块级元素模式加载，具备块级特点
display: inline 元素以行内元素模式加载，具备行内特点
display: inline-block 元素以行内块元素加载，具备行内块特点
display: none 标签及内部内容直接隐藏，让出原有标准流位置

脱离标准流

标签元素脱离标准流的方法包括：浮动，绝对定位、固定定位

浮动float

作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示

浮动的性质

浮动的元素脱离标准流，具备行块二象性，不会有空白折叠现象

浮动元素依次贴边

浮动的属性值：left、right
父元素宽度足够，子元素会依次贴边
```
float: left
float: right
```

浮动元素没有margin塌陷

margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象

浮动的元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素

字围现象

同级元素前面元素浮动，后面元素不浮动，在不浮动的元素中设置文字，文字内容不会被覆盖，会围绕浮动元素进行加载

清除浮动

给标准流的父元素添加一个高度height，如果子元素高度发生变化，父元素不会自适应

给标准流父元素添加clear属性，父元素不受浮动影响

clear: left 清除前面左浮动带来的影响
clear: right 清除前面右浮动带来的影响
clear: both 清除前面所有浮动带来的影响

伪类

:after：表示选中的是某个标签内部的最后位置

content必须添加，内容允许为空

.clearfix:after{
  content: "1";   添加一个文字内容
  display: block; 将文字转换为块级元素
  height: 0;      高度设置0，避免影响父盒子高度
  clear: both;    清除浮动
  visibility: hidden; 将元素占位隐藏
}

溢出隐藏

设置overflow: hidden，将超过高度的部分直接隐藏
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸，无论子元素是标准还是浮动，都会将最高高度作为子高度加载
浮动影响后面的元素：父元素有了高度，可以管理内部所有浮动元素，不会延申到后面标签中影响贴边

CSS伪类选择器

不需要给标签添加任何属性，都是语法提前规定好的，也不一定立即加载到浏览器上

<a>标签的伪类

用户触发对应的行为，就可以加载对应的样式

a:link{color:gray;}       访问前状态
a:visited{color: cyan;}   访问后状态
a:hover{color: red;}      鼠标悬浮经过状态
a:active{color: yellow;}  鼠标点击状态

背景属性

background-color

在盒子区域添加背景颜色的修饰

background-image

给盒子添加图片的背景修饰
```
background-image: url(image/1.jpg);
```

background-repeat

背景重复，配合background-image一起使用

background-repeat: repeat     重复，默认属性
background-repeat: no-repeat  不重复，只加载一次
background-repeat: repeat-x   水平重复，垂直方向不重复
background-repeat: repeat-y   垂直重复,水平方向不重复

background-position

主要用于设置不重复的图片在背景区域加载开始位置
水平方向可选单词：left、center、right

垂直方向可选单词：top、center、borrom

background-position: center center  先水平再垂直

像素定位：正数表示向右向下移动，负数表示向左向上移动
```
background-position:100px; 100px; 以左上角为坐标开始移动
```

background-attachment

背景附着：设置背景图片是否随着页面或盒子的滚动而滚动

background-attachment: scroll   滚动的表示背景与盒子相对位置不变
background-attachment: fixed    固定的，页面滚动背景图片不变

综合写法

background: 图片地址  背景重复   背景定位   背景附着
background: url(image/i.jpg) no-repeat center top fixed #fff; 位置可以互换

文字隐藏方法

将字号设置为0，IE7以下兼容有问题
可以设置text-index,属性值为负的很大的值，文字会走出盒子外部，再设置溢出隐藏隐藏文字

text-index需要转化为块级元素才能设置缩进

CSS精灵

css精灵是一种处理网页背景图像的方式
将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
利用背景定位技术，将精灵图的每个小图片加载到对应标签

背景半透明

css3支持背景半透明的写法，颜色值增加了一种rgba模式
0-1之间，0表示完全透明，1表示完全不透明
```
background-color: rgba(255,0,0,0.4)
```

背景缩放background-size

通过background-size设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动web开发中做屏幕适配非常广泛

background-size: 100px; 调整宽度，长度等比缩放
background-size: cover; 把背景图拓展至足够大，使背景图覆盖背景区域，溢出部分会被隐藏
background-size: contain; 把图片扩展至最大尺寸，保证图片完全显示在背景区域

定位

定位属性position

设置定位的元素，它需要根据某个参考元素发生位置偏移

position: relative;   相对定位
position: absolute;   绝对定位
position: fixed;      固定定位

偏移量属性

定位元素药发生位置变化的移动，必须搭配偏移量属性进行设置

相对定位

相对定位的元素不脱离标准流，不会让出原来占有的位置
相对定位的参考元素是自身，left的正值等于right的负值
由于相对定位元素比较稳定，不会随意让出位置，可以作为绝对定位的参考元素
```
position:relative;   设置相对定位，配合top,right使用
```

绝对定位

元素脱离标准流，会让出标准流的位置，可以设置宽高，也可以随时定义位置，不设置宽高只能被内容撑开
在绝对定位中，参考点不同，left正值不再等价于right的负值
```
position:absolute;   设置绝对定位，配合top,right使用
```

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考<body>
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
如果绝对定位参考元素是某个祖先级，会忽视参考元素的padding区域

固定定位

参考元素：浏览器窗口
由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
```
position: fixed
```

定位应用

压盖效果

由于绝对定位的元素脱标，压盖效果更好，实际工作中，常见的是绝对定位制作的压盖

居中

在需要居中的方向使用偏移量属性比如：left:50%
在给绝对定位的子盒子设置一个同方向的margin,属性为负的自身宽度的一半

压盖

如果想要更改定位的元素压盖顺序，可以设置一个z-index属性
属性值大的会压盖属性值小的，设置z-index属性会压盖没有设置的
如果属性值相同，后写的压盖先写的
z-index只能给定位的元素设置才能生效
如果父级设置了z-index,那么子级也会跟随父级一起设置

轮播图实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    .lunbo{
      position: relative;
      width: 500px;
      height: 750px;
      border: 1px solid chartreuse;
      margin: 0 auto;
    }
    .lunbo .pic li{
      position: absolute;
      display: none;
      top: 0;
      left: 0;
    }
    .lunbo .pic li img{
      width: 500px;
    }
    .lunbo .pic .current{
      display: block;
    }
    .lunbo .btn a{
      text-decoration: none;
      position: absolute;
      top: 50%;
      margin-top: -20px;
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.3);
      font: 20px/40px "宋体";
      text-align: center;
      color: #000;
      font-weight: bold;
    }
    .lunbo .btn .leftbtn{
      left: 0;
      border-radius: 0 50% 50% 0;
    }
    .lunbo .btn .rightbtn{
      right: 0;
      border-radius: 50% 0 0 50%;
    }
    .lunbo .btn a:hover{
      background-color: rgba(0, 0, 0, 0.6);
    }
    .lunbo .sub{
      position: absolute;
      left: 100px;
      bottom: 50px;
      width: 300px;
    }
    .lunbo .sub li{
      float: left;
      width: 20px;
      height: 20px;
      margin-right: 20px;
      background-color:  rgba(0, 0, 0, 0.3);
      font: 12px/20px "微软雅黑";
      text-align: center;
      border-radius:50%;
      cursor: pointer;    /*光标变成小手*/
    }
    .lunbo .sub .current{
      border: 2px solid snow;
      display: block;
    }
    .lunbo .sub li:hover{
      border: 2px solid snow;
    }
  </style>
</head>
<body>
  <div class="lunbo">
    <ul class="pic" id="pic">
      <li class="current"><img src="lunbo/1.jpg" alt=""></li>
      <li><img src="lunbo/2.jpg" alt=""></li>
      <li><img src="lunbo/3.jpg" alt=""></li>
      <li><img src="lunbo/4.jpg" alt=""></li>
      <li><img src="lunbo/5.jpg" alt=""></li>
      <li><img src="lunbo/6.jpg" alt=""></li>
    </ul>
    <div class="btn">
      <a href="javascript:;" class="leftbtn">&lt;</a>
      <a href="javascript:;" class="rightbtn">&gt;</a>
    </div>
    <ol class="sub" id="sub">
      <li onclick="show(0)">1</li>
      <li onclick="show(1)">2</li>
      <li onclick="show(2)">3</li>
      <li onclick="show(3)">4</li>
      <li onclick="show(4)">5</li>
      <li onclick="show(5)">6</li>
    </ol>
  </div>
  <script>
    var lis=document.getElementById('sub').getElementsByTagName('li')
    var imgs=document.getElementById('pic').getElementsByTagName('li')
    function show(num){
      for(var i=0;i<imgs.length;i++){
        if(i==num){
          imgs[num].className="current"
          imgs[num].style.display="block"
        }else{
          imgs[i].className=""
          imgs[i].style.display=""
        }
      }
    }
  </script>
</body>
</html>

下一篇文章：CSS3新增内容 https://www.jianshu.com/p/99664ca751a9