欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS应知应会

程序员文章站 2022-07-12 22:32:28
...

css的作用

添加页面样式，美化页面

css的引入方式

行间样式、内嵌样式、外链样式

css选择器

基础选择器

ID选择器：# 权重：100

类选择器：. 权重：10

元素选择器：div 权重：1

通配符选择器：* 权重：0

css复合选择器

后代选择器 ul li

子元素选择器 ul>li

交集选择器 li.red 选中即是li元素，又带有red类名的元素

并集选择器 div, ul, .red 同时选中这三个元素

伪类选择器 :hover

链接伪类选择器

a:link 未访问的链接

a:visited 已访问的链接

a:hover 鼠标移动到链接上

a:active 选定的链接

css字体样式属性

font-size 字体大小

font-family 字体类型

font-weight 字体粗细

font-style 字体风格

font 复合属性，以上属性可以同时写入

css外观属性

属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none

标签显示模式 display

块级元素：display: black; 独占一行，可指定宽高，默认宽度等于父级

行级元素：display: inline; 同行排列，宽高由内容撑开，不可直接指定

行级块元素：display: inline-black; 同行排列且可以指定宽高

元素的隐藏：display：none； 可以用display: black;显示元素

块级元素可以包含行内元素，行内元素不可包含块级元素

块级标签：div h1-h6 ul ol li

行级标签：span a strong em del

元素的显示模式可以通过 display 属性相互转换

行高样式 line-height

应用较多的是单行文本居中 line-height: 容器的高度;

背景样式 background

background-color: 颜色值; 默认是透明色：transparent

属性 作用 值
background-color 背景颜色 预定义的颜色值/十六进制/RGB代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y
background-position 背景位置 length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment 背景固定还是滚动 scroll/fixed
背景简写 更简单 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序
背景透明 让盒子半透明 background: rgba(0,0,0,0.3); 后面必须是 4个值

CSS三大特性

css成叠性

  • 概念：

    所谓层叠性是指多种CSS样式的叠加。

    是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

  • 原则：

    • 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
    • 样式不冲突，不会层叠

css继承性

  • 概念：

    子标签会继承父标签的某些样式，如文本颜色和字号。

    想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

  • 注意：
    • 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
    • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

css优先级（权重）

行内样式>内嵌样式>外链样式

!important 权重：无穷大
ID选择器：# 权重：100
类选择器、伪类选择器：. : 权重：10
元素选择器：div 权重：1
通配符选择器、继承：* 权重：0

权重可叠加

css注释 

/*  需要注释的内容  */

盒子模型

组成部分: 内容content 内边距 padding 边框 border 外边距 margin

边框：border: 1px solid red;

属性 作用
border-width 定义边框粗细，单位是px
border-style 边框的样式
border-color 边框颜色

标准盒模型：设置的width/height = 内容区域的宽高

怪异盒模型：设置的width/height = 内容区域+内边距+边框

块级盒子水平居中

  1. 盒子必须指定宽度
  2. 设置 margin: 0 auto;

文字水平居中和盒子水平居中的区别 

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

img图片和背景图片的区别

  1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
  2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

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

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

解决方案：

​ 尽量给只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的合并（塌陷）

  • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
  • 父元素的上外边距会与子元素的上外边距发生合并
  • 合并后的外边距为两者中的较大者

解决方案：

  1. 可以为父元素定义上边框。
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加 overflow:hidden
  4. 开启 bfc (浮动、固定、绝对定位等)

圆角边框 

border-radius: 50%;

盒子阴影 

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

浮动 float

三种布局机制：标准流、浮动流、定位流

标准流：利用标签元素自身的特性，块级元素、行级元素进行排版（可以让盒子上下排列 或者 左右排列的）

浮动流：会脱离标准流移动到指定的位置 float: left/right; （浮动的盒子就是按照顺序左右排列 ）

浮动核心价值让多个块级元素在一行显示

清除浮动 clear： both;

方法一：额外标签，受到浮动塌陷影响的元素添加一个空标签

方法二：受到浮动塌陷影响的元素添加 overflow：hidden

方法三：使用after伪元素清除浮动 (推荐使用)

 /* clearfix是需要清除浮动的元素 */
.clearfix:after {  
 			content: ""; 
 			display: block; 
 			height: 0; 	
 			clear: both; 
 			visibility: hidden;  
 			}   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 优点： 符合闭合浮动思想 结构语义化正确
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

方法四：使用双伪元素清除浮动

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

.clearfix {
  *zoom:1;
}

  • 优点： 代码更简洁

  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

清除浮动是为了解决父级因为子元素浮动，高度为0的问题

定位 position

定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

选择器 { position: 属性值; }
值 语义
static 静态定位（不用）
relative 相对定位
absolute 绝对定位
fixed 固定定位

相对定位是元素相对于它原来在标准流中的位置 来说的。

  • 相对于 自己原来在标准流中位置来移动的
  • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位是元素以带有定位的父级元素来移动位置

  1. 完全脱标 —— 完全不占位置；
  2. 父元素没有定位，则以浏览器为准定位（Document 文档）
  3. 父元素要有定位 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
  • 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
  • 不保留原来的位置，完全是脱标的。

子绝父相：一般把相对定位写在父级，绝对定位写在要做定位的子级

  • 子级通过 top right bottom left 进行精准定位
  • 定位是子级相对于最近的有定位的父级来定位的

固定定位

固定定位是绝对定位的一种特殊形式

  1. 完全脱标 —— 完全不占位置；
  2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
    • 跟父元素没有任何关系；单独使用的
    • 不随滚动条滚动。

定位的扩展

绝对定位的盒子居中

水平居中：left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；margin-left: -100px;：让盒子向左移动自身宽度的一半。

堆叠顺序（z-index）

z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  2. 如果属性值相同，则按照书写顺序，后来居上；
  3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
  • 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

其他拓展

visibility 可见性

  • 设置或检索是否显示对象。

    visibility：visible ; 　对象可视

visibility：hidden; 　  对象隐藏

  • 特点： 隐藏之后，继续保留原有位置。

overflow 溢出(重点)

  • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
属性 区别 用途
display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
visibility 隐藏对象，保留位置 使用较少
overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

轮廓线 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的

最直接的写法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

实际开发中，我们文本域右下角是不可以拖拽：

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

  • 有宽度的块级元素居中对齐，是margin: 0 auto;
  • 让文字居中对齐，是 text-align: center;

vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，

vertical-align : baseline |top |middle |bottom

单行文字溢出隐藏打点 

/*1. 先强制一行内显示文本*/
      white-space: nowrap;
/*2. 超出的部分隐藏*/
      overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

css精灵图 （背景图片）

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，css精灵技术主要针对于背景图片

我们需要使用CSS的

  • background-image
  • background-repeat
  • background-position属性进行背景定位
  • 其中最关键的是使用background-position 属性精确地定位。

css三角形

利用元素的边框属性绘制三角形，想要哪个边的三角形就把其他边设置为透明色

div {
 	width: 0; 
    height: 0;
    line-height:0；
    font-size: 0;
	border-top: 10px solid red;

	border-right: 10px solid green;

	border-bottom: 10px solid blue;

	border-left: 10px solid #000; 

 }
  1. 用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

PS切图神器Cutterman

下载地址：http://www.cutterman.cn/zh/cutterman

使用方法：

  1. 窗口调出插件，选中要导出的图层，导出即可
  2. 导出图层的局部使用矩形选框工具选中要导出的部分，导出即可

CSS属性书写顺序

建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
相关标签： 从零开始的前端程序员 初级前端应知应会 css

上一篇： jQuery应知应会

下一篇： vue3.0响应式数据是如何实现的？相比vue2.0中Object.defineProperty()有什么优势？

推荐阅读