CSS学习笔记

CSS学习笔记

https://www.yuque.com/docs/share/2075da37-a514-47ef-badd-f833b9d34a76?# 《CSS学习笔记》

基础

CSS三种引入方式

• 行内样式：<p style="font-size:14px;color:white;">xx</p>
• 内部样式：在head中声明一个<style></style>标签
• 外部样式：创建一个index.css文件，在head中使用link标签引入css文件

<link rel="stylesheet" type="text/css" href=".css路径" />

常见字体相关CSS

• 大小：font-size: 14px;
• 粗细：font-weight: 100,200,..,900(或normal, lighter, bold, bolder)
• 颜色：color: black / #D5E8D4 / rgb(0, 0, 0) / rgba(2, 2, 2, 0.4) a表示透明度
• 文字对齐：text-align: center(left / right);


• 行高：line-height: 20px; 作用：改变行间距；使文字上下居中。
• 字间距：letter-spacing: 5px;
• 字体：font-family: sans-serif;

常用选择器

• 类选择器

<p class="item"> .item{}

• id选择器

<p id="p-item"> #p-item{} id在文档中只能出现一次，一个标签只能定义一个id

高级选择器

• 后代选择器（空格）p span{}
• 交集选择器。a.special{} 指所有a标签内类名为special的标签
• 子选择器。p>span{} 与后代选择器类似。不同的是一个为所有后代，一个为子一代。
• 并集选择器。.box,p,h3{} 给不同的标签或不同类名的标签添加相同的样式。
• 选择器优先级。 id选择器 > 类选择器 > 标签选择器。

盒模型

盒模型–content

• div默认没有高度，宽度与父标签宽度一致。
• width/height、background-color

盒模型–padding

• padding标签添加内边距。top/right/bottom/left
• box-sizing。有两个值content-box（默认），border-box。

content-box: width = 内容的宽度，height = 内容的宽度
border-box: width = border + padding + 内容，height = border + padding + 内容

盒模型–border

• 边框线。border-width, border-color, border-style(solid/dashed)

可简写：border: 2px blue solid;(无顺序要求)

• 分别设置边框。border-top(right/bottom/left): 2px blue solid;

  只有一条边不同等类似情况：利用层叠性设置

• 无边框。border-bottom: none;

• 圆角。border-radius: 12px;

• 阴影。box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);

  x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色

• p、h、ul、li等标签有自己默认的padding、margin，用选择器将默认的值设置为0后再进行布局，如果用的是div标签则不需要这一步。

盒模型–margin

• 两盒子水平margin = 左盒子margin-right + 右盒子margin-left； 垂直margin = Max(bottom，top)
• 左右居中。margin: 0 auto; 使盒子在父盒子中左右居中（前提：必须有宽度）

盒模型–display:block/none

• display:block; 块元素性质：独占一行；可设置宽高；
• display:none; 隐藏标签

盒模型–display:inline/inline-block

• display:inline; 行内元素性质：不能设置宽高；可以设置padding；可以设置左右margin，不能设置上下margin；
• display:inline-block; 可以在同一行显示的块元素。将div从block转为inline-block后，两盒子中间会出现空白，即空白折叠。出现原因：两个div间多了一个回车，回车被当作是一个文字。解决办法：
  - 父元素添加word-spacing: -50px; 一般写小于-20px的值。
  - 父元素添加font-size: 0;

定位

static

• 遵循默认文档流布局，top、right、bottom、left属性无效。

relative

• relative对位置的调整是针对当前元素static布局位置进行的，被称为相对定位。

absolute

• 不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。

fixed

• 固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。
• 元素的位置在屏幕滚动时不会改变。
• z-index决定图层优先级。
  • 默认非static元素的z-index都为0
  • z-index越大，则越在最上面，离观察者越近
  • 相同z-index，在HTML中元素越靠后，则越在最上面，离观察者越近

sticky

• 向下滚动页面时固定在网页顶部，回到顶部时其恢复到本来位置

float

• <nav></nav>用于表示此区块是导航区
• <main></main>表示此区块是网页主体区域
• float两个最基本属性：left、right
• 使用场景：一组元素同时靠左靠右对齐；文字围绕图片

其它

• vertical-align 用于指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式

可被用于两种环境：

• 使行内元素盒模型与其行内元素容器垂直对齐。如垂直对齐一行文本内的图片：


• 垂直对齐表格单元内容：


背景

背景颜色

• background: linear-gradent(to right, 开始颜色， 结束颜色); 线性渐变
• 渐变方向：to right/left/bottom/top/right bottom/right top/left bottom/left top / xxx deg xxx(0到360)
• 每个色值后可以跟一个百分比或 px 来约定变色起止位置
• 除此之外，还支持多颜色渐变，弧形渐变。https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients

背景图片

• background-image: url(...); (url里地址不需要用引号包裹)
• 当背景图片长宽任意一项小于容器的长宽，默认CSS会让图片重复，直到铺满整个容器

可以使用background-repeat: no-repeat; 禁止图片重复
background-repeat: repeat/repeat-x/repeat-y/no-repeat;

• 默认情况下，背景图片是从容器左上角开始布局。

为使背景图水平居中，可使用background-position: center;解决
background-position的值：

• top center等两个元素一组，分别代表垂直和水平布局。如果只写一个，另一个默认是center
• x% y% 第一个是水平，第二个是垂直。如果只写一个，另一个默认50%
• xpx ypx 第一个水平，第二个垂直。只有一个，另一个默认50%
• 背景图片撑满整个容器。background-size 值：cover/ contain/ xpx ypx/ x% y%

cover:满足长宽中较小的一方撑满容器
contain:满足长宽中较大的一方撑满容器

背景简便书写方式

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-positon] / [background-size] [background-clip];

去除默认格式

html,body {margin: 0;padding: 0;}
ul,li {margin: 0; padding: 0;}
ul {list-style: none;}
h1,h2 {margin: 0;}
p {margin: 0; padding: 0;}
a {text-decoration: none;}

进阶

HTML5/CSS3介绍

• 在HTML5中，每一个区块都有对应的语义化标签。仅通过阅读代码就可以确定页面结构
• 常用语义化标签：

<!--头部-->
<header>header<header>
<!--主体-->
<main>
  <!--导航-->
  <nav>nav</nav>
  <!--区块-->
  <section>section</section>
</main>
<!--侧边栏-->
<aside>aside</aside>
<!--底部-->
<footer>footer</footer>

伪类

::before / ::after

/* before */
选择器::before{
  /* 使用空白符号占位 */
  content: '';
}

/* after */
选择器::after{
  /* 使用空白符号占位 */
  content: '';
}

清除浮动

• 让父元素包住浮动的子元素
• 哪个盒子的子元素有浮动，就在哪个盒子上添加清除浮动
• 方法：在父盒子上添加clearfix类名。css代码如下：

.clearfix::after{
	content: '';
  display: block;
  clear: both;
}

事件伪类

• 鼠标移动上去，对应状态发生改变

li:hover{
  /*变化之后的状态*/
  background: #FFFFFF;
  color: white;
}

• 鼠标点击效果

li:active{
	/*要改变的效果*/
  color: black;
}

• hover 一定要在active之前，否则不会生效
• 获取焦点。一般用于具有焦点的元素，比如可让input获取焦点后改变边框颜色

input:focus{
	border: 1px solid salmon;
}

列表伪类

• 功能更像使一个选择器，选择某个元素的子元素。使用条件：同一级别，相同元素
• 匹配父元素的第一个子元素 :first-child (ul>li选择器选择的是子元素而不是父元素)

ul>li:first-child{
    background-color: #3687FC;
    color: #FFFFFF;
}

• 匹配父元素的最后一个子元素:last-child
• 匹配第n个子元素:nth-child()括号中添加任意数字(从1开始) 或 odd(奇数) / even(偶数)

装饰

cursor

• cursor: pointer / default / text / move / grab / zoom-in / zoom-out;

box-shadow / text-shadow

• 使用阴影制作缝合效果
• 使用阴影制作多页效果

Flex布局

Flex

• 最显著的效果就是将原本上下排列的块状元素变成水平排列
• 设为Flex布局后，子元素的float、clear和vertica-align属性将失效
• 采用Flex布局的元素，成为Flex容器（简称容器），它的所有子元素成为Flex项目（简称项目）

justify-content和align-items

• justify-content定义了项目在水平方向的排列方式（是容器的属性，定义在容器上）

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

• align-items控制垂直方向分布

align-items: flex-start | flex-end | center | baseline | stretch;

flex-wrap

• 设置是否换行以及如何换行
• flex-wrap: nowrap | wrap | wrap-reverse;
• 默认情况项目宽度超过容器宽度不换行，而是压缩宽度

flex: none & flex: 1

• flex: none; 不允许项目压缩或放大(设置在flex项目上,而非容器上)
• flex: 1; 项目自动充满剩余空间(平分一行空间)

flex-direction

• 改变容器中主轴和交叉轴的方向
• flex-direction: row | row-reverse | column | column-reverse;

文本超出省略

单行文本超出省略

• 强制不换行:white-space: nowrap;
• 隐藏超出部分:overflow: hidden;
• 用省略号代替剩余内容:text-overflow: ellipsis;

多行文本超出省略

/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

Sass

变量

• $width: 10px; $animals: puppy, kitty, chick;
• Sass支持在使用变量的时候进行简单的加减乘除运算(可用来定义固定宽高比的元素)
• 插值. #{}几乎可以在Sass样式表任何地方使用

嵌套

• Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
• 可用 & 代表嵌套规则外层的父选择器

复用: mixin / include

• @mixin定义可复用的样式 @include应用可复用的样式

@mixin square($size: 100px) {
  width: $size;
  height: $size;
}

// 不传参数就会使用默认的值 100px
.avatar {
  @include square;
}

// 传入参数就会使用传入的值 200px
.avatar-200 {
  @include square($size: 200px);
}

响应式

响应式布局

• 规定特定的宽度范围使用特定的布局来实现不同设备上应用不同的布局

媒体查询

• 仅当满足特定条件时,才使用对应的CSS属性块

@media screen and (max-width: 900px){...}

断点


• 媒体查询用max-width时,大的断点放上面;反之,用min-width时,小的断点放上面.(防止冲突)

移动Web前端

meta基础设置

• <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

viewport属性

• width：viewport宽度
• height：viewport高度（很少用）
• initial-scale：初始的缩放比例
• minimum-scale：允许用户缩放到的最小比例
• maximum-scale：允许用户缩放到的最大比例
• user-scalable：用户是否可以手动缩放

rem / em

• rem是一个相对长度单位，1rem = 根元素字体大小（一般字体默认为16px）
• em根据父元素字体大小转换（font-size根据父元素计算，其他属性根据自身font-size计算）

vw / vh

• 1 vw = 1/100视口宽度 1 vh = 1/100视口高度

尺寸处理

@media screen and (max-width: 768px) {
  html {
    font-size: 20px;
  }
}
@media screen and (max-width: 320px) {
  html {
    font-size: 20px / 375 * 320;
  }
}
@function px2rem($px) {
  @return #{$px / 40}rem;
}