CSS

基础 css
前端基础
发布日期:   2020-06-16
更新日期:   2021-07-06
文章字数:   5.8k
阅读时长:   23 分

# Css 基础用法

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
单行文本超出，显示省略号,前提是块元素

user-select:none 把双击选中取消

resize: none; 取消文本域之类的可拖拽变大小

appearance:none 相当于消失 input如果用了这个会不显示，但大小还在

background-attachment: fixed;
/* 滚动滚动条的时候，图片随着滚动条滚动 */

/* css中虚拟宽高 outline,在边框外(不算真正宽高，只是附在边框上，四周有线) */
/* input框获取焦点时，四周没有边框 */
outline: none;

input:focus{border:1px solid red}
/* input获取焦点时，边框改变颜色 */

li:hover,.default,.default:hover{color:red}
/* 默认选项 */

vertical-align: top/bottom/middle
/* 垂直对齐 定义行内元素的基线相对于该元素所在行的基线的垂直对齐 */

letter-spacing:字符间距
word-spacing:英文单词间距

font-style:Italic斜体 font-weight:Bold粗体

solid:实线 dashed:虚线 dotted:点线

hidden:超出部分不可见 scroll:显示滚动条 auto:如有超出部分，显示滚动条

text-overflow:clip/ellipsis:当对象内文本溢出时，裁剪/显示省略号

font-size:0 给父级元素添加，可以解决间隙，也可用在<img>上

浮动定位:浮动元素在排列时，只参考前一个元素位置即可
clear(清除浮动):both,left,right,none
.clearfix:before,.clearfix:after{
  content:"",
  display:block,
  clear:both
}
.clearfix{
  *zoom:1
  /* 设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。 */
}
在子元素浮动时，父级元素可能会出现高度不能自适应的情况，所以要清浮动，
页面乱一般都是由于加清浮动

定位:
position:fixed/relative/absolute/static(默认，无定位)
fixed:固定定位 相对于浏览器窗口(浏览器左右的广告)但必须要有宽度
relative:相对定位 直接父元素 原有位置不丢失
absolute:绝对定位 相对static定位以外的第一个父元素进行定位 (原有位置丢失,会摞在一起)
绝对定位要加 top: 0;  left: 0;

/* relative通常和absolute结合使用，父元素用relative,子元素用absolute */

/* 定位只能通过top,right,bottom,left来设置位置 */

解决绝对定位的方法:
设置第一个图片为显示(opacity:1或display:block),其他为隐藏(opacity:0或display:none)

z-index:谁的取值大谁就在上面

position:sticky
/* 可做导航粘连效果，用top:0 来设置 */

box-shadow:边框阴影: h(左) v(下) 模糊度，颜色，h(左) v(上) 模糊度，颜色，内阴影inset
其中为负值时为反方向，不用写outside 否则会出错
text-shadow:文本阴影: h v 阴影距离 模糊度 颜色

使用雪碧图时，background-position 要用负值，要量取左上角的位置

:first-child 与 :last-child 单独指定第一个子元素和最后一个子元素的样式
:nth-child(n) 与 :nth-last-child(n) 对指定序号的子元素使用样式 从1开始
这两种是：先定位位置，再匹配子元素(类型)
:nth-of-type(n) 与 :nth-last-of-type(n) 先定位类，再定位位置
odd:奇数 even:偶数

例：h1:nth-child() 和h1同一层次的其他父元素的子元素也全部参与计算
h1:nth-of-type() css筛选器首先会排除不是h1元素的影响，只专注h1元素

box-sizing:border-box 切换盒模型
/* 怪异盒模型 */
为元素指定的任何的内边距和边框都在已设定的宽度和高度内进行设置

.box1 span 后代，.box1下所有的span(不管是哪一个级别的)
.box1>span 父子，.box1下能看到的那一层span(不包括其他元素下的span)
.box1 li+li 相邻 (相邻的li) 一般用到底部的a加左/右小竖线
.box1 ol~li 兄弟 ol下边所有的li

min-height:内容不多时也会保持最小高度，超出规定高度时会自动扩大
max-height:内容不多时会自动缩小到内容宽度，超出规定高度时不延伸(扩大)
min-width:窗口缩小到规定宽度时，会出现滚动条，平时会自动扩大到窗口大小
max-width:窗口缩小时会跟随窗口一起缩小，直到不能缩小为止
以上四个用区间理解会好一点

background-position: right(h) 8px(v)
background-position: 背景位置(有三种写法) 水平(h) 垂直(v)
第一种：left,right,top,bottom,center
第二种：10%,50%
第三种：固定值

text-indent,text-align是块级元素，所以给行内元素会没有效果，要将行元素转为块元素

background-size:背景大小 cover:等比缩放，会全覆盖盒子，但背景图并不完全在盒子中
content:等比缩放，会显示全部，可能有留白，盖不住这个盒子，背景图最大会在盒子内

渐变：background-image: linear-gradient(to right,#xxx,#xxx);其中right是灵活的
图片的响应式：width:100% height:auto max-width:自己量的图片大小
height:inhert(继承)

# 盒模型

# 一、基本概念：标准模型 + IE 模型

什么是盒模型：盒模型又称框模型（Box Model）, 包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

由于 IE 盒模型的怪异模式，IE 模型和标准模型的内容计算方式不同。

# 二、标准模型和 IE 模型的区别

IE 模型和标准模型唯一的区别是内容计算方式的不同

IE 模型元素宽度 width=content+padding+border，高度计算相同
标准模型元素宽度 width=content，高度计算相同

# 三、css 如何设置获取这两种模型的宽和高

通过 css3 新增的属性 box-sizing: content-box | border-box 分别设置盒模型为标准模型（ content-box ）和 IE 模型（ border-box ）。

.content-box {
  box-sizing: content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box 设置为标准模型，它的元素宽度 width=100px。

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box 设置为 IE 模型，它的元素宽度 width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。

# 四、javascript 如何设置获取盒模型对应的宽和高

  • dom.style.width/height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。
  • dom.currentStyle.width/height 取到的是最终渲染后的宽和高，只有 IE 支持此属性。
  • window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9 以上支持。

# 五、外边距重叠

当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。

# Class 优先级

  • 常用选择器权重优先级：!important > id > class > tag
  • !important 可以提升样式优先级，但不建议使用。如果！important 被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上！important。 例如：background: blue !important;
  • 如果两条样式都使用！important，则权重值高的优先级更高
  • 在 css 样式表中，同一个 CSS 样式你写了两次，后面的会覆盖前面的
  • 样式指向同一元素，权重规则生效，权重大的被应用
  • 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用

# Css 性能优化

  • 合并 css 文件，如果页面加载 10 个 css 文件，每个文件 1k，那么也要比只加载一个 100k 的 css 文件慢。
  • 建立公共样式类，把相同样式提取出来作为公共类使用。
  • 减少 css 嵌套，最好不要嵌套三层以上。
  • 不要在 ID 选择器前面进行嵌套，ID 本来就是唯一的而且权限值大，嵌套完全是浪费性能。
  • 减少通配符 * 的使用，挨个查找所有… 这性能能好吗？
  • 巧妙运用 css 的继承机制，如果父节点定义了，子节点就无需定义。
  • 不用 css 表达式，表达式只是让你的代码显得更加酷炫，但是对性能的浪费可能是超乎你想象的。
  • cssSprite，合成所有 icon 图片，用宽高加上 background-position 的背景图方式显现 icon 图，这样很实用，减少了 http 请求。
  • 构建工具 webpack，(在线压缩工具 YUI Compressor)，压缩之后能够明显减少，可以大大降低浏览器的加载时间。

# CSS2D 转换

transform: translate(x, y) ➡沿着x轴和y轴移动元素 px translateX(n) translateY(n);
scale(x, y) ➡.8,.8(缩小) scaleX(n) scaleY(n) 改变元素的高度和宽度(缩放或扩大)
rotate(xx deg) 按规定度数旋转，不能添加给内联元素
skew(x,y) skewX(angle) skewY(angle) 扭曲，倾斜转换➡skew(x,y),沿着x和y轴 20deg,20deg

过渡：transition: width 2s;
既缩放又旋转：transition:scale(2,2) rotate(30deg) scale和rotate之间是空格
既移动又变色：transition:transform .4s,background-color .4s .2s(延迟) 中间用的是逗号
transform:效果写在效果盒子中 例如 :hover
transition:过渡，时间，应写在本身的盒子上

不透明的变化:opacity:0 透明度为0(整个元素及元素内的内容全部设为透明)
RGBA(0——1) 0:完全不透明 1:完全透明

# 3D 转换

x下是负，上是正 (大拇指朝右，横着放，上下转)
y左是正，右是负 (拇指朝下，竖着放，左右转)
z前(下)是正，后(上)是负

transform-origin:基点的位置
transform-style: 3D➡给内层
perspective 视距➡给最外层
backface-visibility:hidden 背面隐藏

自定义动画：@keyframes mymove {
  0% {
  }
  100% {
  }
}
animation(动画属性的简写属性):
动画名称
时间
速度曲线(贝塞尔曲线)
延迟时间
次数(infinite 无限次播放)
是否反向播放(alternate反向播放)
是否正在运行或暂停()
动画之外的状态(forwards动画完成后，保持最后一帧);

ease(逐渐慢下来) ease-in(加速) ease-out(减速) ease-in-out(先加速，后减速)

CSS3动画库：1.引入animate.min.css 2.给元素加类名 class="animated 动画名"
或不用之前的步骤，去css中找到对应样式，然后复制到当前css中，用animation调用动画
具体的看官方教程(https://www.dowebok.com/98.html)(https://animate.style/)

# 兼容

(版本高)大范围往前写，先写标准样式

属性兼容：
IE6以下用(下划线_) _color:red;
IE7以下用(星号*) *color:red;
用来区分IE和其他浏览器(\9) color:red\9   \0 ➡ IE8——11

选择器兼容
*+html p{}➡IE7
*html p{}➡IE6
其中p也可以改为类名
:root IE9以上及现代浏览器

图片底下的小空隙 img{display:block}
双倍浮动(IE6以下)：给浮动元素加 _display:inline 或给第一个浮动元素加 display:inline
IE6及以下部分块元素有默认高度(低于18px)给元素加overflow:hidden
IE6及以下表单元素行高不一致：float:left
百分比：IE6会按四舍五入方式计算从而导致50%加50%大于100%，而不是img，否则会出现阶梯列表
透明：filter:alpha(opacity:50) 50:值，范围是1——100

# 响应式

@media screen and (min-width: 768px) and (max-width: 992px){
       body{}
       nav{}
       ……
};
要将大范围的写在小范围的上边
更改样式(body,nav)在上边怎么用，在这就怎么用
最重要的就是媒体查询，在html中要有viewport那句话
@media screen and(max-width:768px)

样式在html文档中写，存在否 在css和断点中写

如果用自适应布局写，则需用相对单位或需将固定单位改为相对单位

max-width:可以给最大盒子在自适应布局中，在响应式中一般不用自适应布局
padding超过20一般是除以它父级的宽(同理还是归到了上面所说的%)
line-height转相对单位:line-height 本身数值/它本身的字号(px) 不加单位(字号的倍数)
手机：768 ipad：992 ipad横屏：1200 pc

bgi,bgp之间的属性用逗号隔开
background-origin:border-box 盒子区域 content-box 正文(内容)区域
background-origin: 背景图像的位置区域，得有padding值才能看出来

# 弹性盒 (flex)

禁止使用 float clear vertical-align

flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

# 写在父元素上的

display: flex
在浮动元素的父级身上(不浮动) ➡相当于浮动 + 没有高度塌陷;

flex-direction: row/row-reverse/column/column-reverse;
row:主轴横向(左右) row-reverse:(右左)
column:主轴纵向(上下) column-reverse: 下上(起点终点)

/* 设置弹性盒对象的子元素超出父容器时是否换行 */
flex-wrap:nowrap/wrap/wrap-reverse
nowrap:子元素溢出父容器时不换行，会将超出的部分删减，分到子元素上(子元素会缩小)
wrap:自动换行
wrap-reverse:反转wrap换行(第一行在下面，第二行在上面，不是按照顺序数)

/* 设置弹性盒子元素在侧轴方向上的对齐方式 */
align-items:flex-start/flex-end/center/baseline/stretch(默认值)
flex-start:起点 flex-end:终点 center:居中 baseline:将文字按基线位置对齐
stretch:如果子元素未设置高度，那么将子元素默认拉伸为父元素高度

/* 设置弹性盒子元素在主轴上的对齐方式 */
justify-content:flex-start/flex-end/center/space-between/space-around
flex-start:起点(左对齐) flex-end:终点(右对齐) center:居中
space-between:第1个元素贴在轴的起点，最后1个元素贴在轴的终点,中间元素平分空白区域的位置
space-around:自己计算并排列好(分散对齐)
每个项目两侧的间隔相等,所以,项目之间的间隔与项目两边的间隔大一倍

/* 用于修改flex-wrap(换行)的行为 */
align-content:flex-start/flex-end/center/space-between/space-around/stretch(默认值)
其中stretch:类似于每一行都有一个margin-bottom,如果有两行，则每一行高度拉伸为50%，
类似于justify-content，但它不是设置弹性子元素的对齐，而是设置各个行的对齐

align-items 指的是一行当中每一个子项的排列
align-content 指的是多行的对齐方式，对单行无效

# 写在子元素上的：

align-self 控制单独某一个 flex 子项的垂直对齐方式，可覆盖 align-items 属性

/* 设置或检索弹性盒的扩展比率(定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大) */
flex-grow <number>:
<number>:默认是 0(不分配)，不允许负值，将父元素多出来的部分按照<number>的比例来分配
重要：用来做左侧大小固定，右侧大小不固定的样式
(给外边的大盒 display:flex 然后左边固定大小 比如 width:200px,右边 flex-grow:1)
flex-grow:1 将剩下的空间全占满

flex-shrink:分配超出的空间 0 为不缩小，1 为缩小
flex:0/1/auto

order:<number> 设置弹性盒的子元素出现顺序
<number>数值大的排在后面，可以为负值,数值越小，排列越靠前，默认为 0。

flex-shrink: .box1:200px .box1:80px(flex-shrink:2 .box2:160px) 超出空间(80+160)-200:40
加权总和:80 _ 2 + 160 _ 1 = 320 box1 被移除的比例:80 _ (2 / 320) _ 40 = 20
box1 最终宽度为：80 - 20 = 60 box2 被移除比例：160 _ (1 / 320) _ 40 = 20
box2 最终宽度为：160 - 20 = 140

# grid 网格布局

# 写在父元素上的：

grid-template-columns/rows:对网格进行横纵划分，形成一个二维布局
单位可以是像素,百分比,自适应,以及 fr(网格剩余空间比例单位)
如果需要添加多个横纵网格时,可以利用 repeat()语法进行简化操作

grid-template-areas:给网格划分区域的，此时 grid 子项只要使用 grid-area 属性指定其隶属于哪个区

grid-column-gap 和 grid-row-gap 属性用来定义网格中网格间隙的尺寸，单位为 px

grid-gap 是 grid-row-gap 和 grid-column-gap 属性的缩写

justify-items 和 align-items 指定了网格元素的水平/垂直呈现方式，
是水平/垂直拉伸显示，还是左中右/上中下对齐 子元素中的内容在子元素中的位置
取值：stretch(默认)，start，end，center

place-items 是 align-items 和 justify-items 的缩写

justify-content 和 align-content 指定了网格元素的水平/垂直分布方式
取值：stretch(默认),start,end,center,space-between,space-around,space-evenly
space-around:享有独立不重叠的空白空间
space-evenly:平均分配空白空间

# 写在子元素上的：

grid-column-start/end 和 grid-row-start/end
垂直/水平方向上的起始/结束位置
上面的两个 end 都有 span 属性值，后跟个数

grid-column 是 grid-column-start 和 grid-column-end 的缩写

grid-row 是 grid-row-start 和 grid-row-end 的缩写，例：grid-row: 2(start)/3(end)

grid-area:表示网格所占用的区域，名字和位置两种表示方法
例：grid-area:3/2/4/4;
第一个表示水平的起始位置
第二个表示垂直的起始位置
第三个表示水平的结束位置
第四个表示垂直的结束位置

justify-self 和 align-self：单个网格元素的水平/垂直对齐方式
place-self 是 align-self 和 justify-self 的缩写

例：grid-template-columns:repeat(3,1fr) grid-templete-rows:repeat(4,1fr)
grid-templete-areas:"a1 a2 a2"
                    "a3 a2 a2"
                    "a4 a4 a5"
                    "a5 a7 a7"

# 单位

单位：em 是一个相对单位，1em 等于当前元素或父元素的 font-size 值
rem 是一个相对单位，1rem 等于根元素 (html) 的 font-size 值
vw/vh：把屏幕分成 100 份，1vw 等于屏幕宽的 1%
rem 布局可通过 js 和 vw 方式动态设置 font-size，但要给 body 重置 font-size:16px,
目的是为了防止影响到 body 中的 font-size, 根元素 (html) 的 font-size 只是为了动态的进行 rem 换算

按照一种设备进行布局，设置完之后去动态设置 font-size,
之后通过工具 (px to rem) 将工具的值设置成跟 html 中相对应的值，之后全部选中 alt+z (批量转换 rem)

# BFC

摘录自：https://segmentfault.com/a/1190000013069516

# 什么是 BFC

BFC (Block Formatting Context)：块级格式化上下文。
BFC 决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
当设计到可视化布局的时候，BFC 提供了一个环境，HTML 元素在这个环境中按照一定的规则进行布局。
一个环境中的元素不会影响到其他环境中的布局。

# BFC 原理（渲染规则）

  • BFC 元素垂直方向的边距会发生重叠。属于不同 BFC 外边距不会发生重叠
  • BFC 的区域不会与浮动元素的布局重叠。
  • BFC 元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
  • 计算 BFC 高度的时候，浮动元素也会参与计算 (清除浮动)

# 如何创建 BFC

  1. overflow 不为 visible;
  2. float 的值不为 none
  3. position 的值不为 static 或 relative；
  4. display 属性为 flex,inline-blocks,table,table-cell,table-caption,inline-flex;

# 案例一

<section id="margin">
  <p>1</p>
  <div style="overflow: hidden">
    <p>2</p>
  </div>
  <p>3</p>
  <p>4</p>
</section>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  #margin {
    background: pink;
    overflow: hidden;
  }
  p {
    margin: 15px auto 25px;
    background: red;
  }
</style>

请看这里的第二个 p 元素 <p>2</p> 他被一个父元素包裹，并且父元素有 overflow:hidden 样式，前面的如何创建 BFC 的第一条就说了 overflow:hidden 可以创建一个 BFC。

我们看这里的 2，它的上下外边距都没有与 1 和 3 发生重叠，但 3 与 4 外边距发生了重叠。这就解释了 BFC 创建了一个独立的环境，这个环境中的元素不会影响到其他环境中的布局，所以 BFC 内的外边距不与外部的外边距发生重叠。

# 案例二

<section id="layout">
  <div class="left"></div>
  <div class="right"></div>
</section>
<style media="screen">
  #layout {
    background: red;
  }
  #layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: pink;
  }
  #layout .right {
    height: 110px;
    background: #ccc;
  }
</style>

写过前端页面的我们肯定遇到过这种情况，这里其实是浮动元素叠在 .right 元素的上面，如果我们想让.right 元素不会延伸到 float 元素怎么办，其实我们在.right 元素上加 overflow:hidden（用其他的方式创建 BFC 也可以）创建 BFC 就可以解决。因为 BFC 不会与浮动元素发生重叠。

还有一种情况很常见，就是由于子元素浮动，导致父元素的高度不会把浮动元素算在内，那么我们在父元素创建 BFC 就可以让可以让浮动元素也参与高度计算。

# Div 水平居中几种方法

# 1. flex 布局实现 （元素已知宽度）

<!-- html代码 -->
<div class="box">
  <div class="a"></div>
</div>
<!-- css代码  -->
<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: #ccc;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }
  .box .a {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

# 2. position （元素已知宽度）

父元素设置为：position: relative; 子元素设置为：position: absolute; 距上 50%，据左 50%，然后减去元素自身宽度的一半距离就可以实现

<!-- HTML 代码： -->
<div class="box">
  <div class="a">love</div>
</div>
<!-- CSS代码： -->
<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
  }
  .box .a {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
  }
</style>

# 3. position transform （元素未知宽度）

如果元素未知宽度，只需将上面例子中的 margin: -50px 0 0 -50px; 替换为： transform: translate(-50%,-50%);

<!-- CSS 代码： -->
<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
  }
  .box .a {
    background-color: blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

# 4. position（元素已知宽度）

（left，right，top，bottom 为 0，maigin：auto ）

<!-- HTML 代码： -->
<div class="box">
  <div class="a">love</div>
</div>
<!-- CSS 代码： -->
<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
  }
  .box .a {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>
文章作者: Mrr-cxh
文章链接: https://mrr-cxh.github.io/2020/06/16/css/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Mrr-cxh !
基础 css
赏
 上一篇
HTML HTML
HTML 的全称为超文本标记语言，是一种标记语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
2020-07-15 前端基础
HTML 基础
本篇 
CSS CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2020-06-16 前端基础
基础 css
  目录