一个月从0转战前端 - 2 - CSS

铁头娃wawa
95 阅读6分钟

学习四部曲：
1.HTML是结构骨架。
2.CSS是装饰。
3.JS是交互、逻辑。
4.vue前端常用框架。

只梳理个人认为常用的可以快速上手写项目的知识。不含介绍历史、弃用、废话

参考资料：github.com/qianguyihao…

工具

webstorm (idea的web版)； 用惯了AS/idea界面一样，直接可以上手
常规：vscode
必装插件：Chinese、auto remake tag、open in browser(右键预览)、live service、easy less

CSS基础

单位

  1. px像素（一般用于定义页面元素的大小和边框大小）
  2. pt
  3. %百分比
.image {
 width: 70%;
}
  1. em相对于父布局的几倍
文字相对于父布局的1.2倍
.container p {
  font-size: 1.2em;
}

5.rem相对于根布局的倍数

font字体

font-size: 14px; /字体大小/
line-height: 30px; /行高/（每一行高度。2行的话总的高度就是60px）
（行高也可以写成字体大小的百分之多少，如：font:12px/200% “宋体”或font:12px/24px “宋体”）
font-family: 幼圆，宋体; /字体，没有就显示第二个/
font-weight: bold;/粗体/
color：red//字体颜色
text-align: center;//居中方式

overflow超出宽高部分怎么处理

auto/visible/hidden

image.png

background

background-color:#ff99ff;设置背景颜色
background-image:url(images/2.gif); 设置图片
background-repeat:no-repeat;设置背景图片不平铺（默认平铺）
background-position：100px 200px背景偏移量。（距左上，可以设置负数，也可以设置left、center...）
background-attachment:fixed;背景固定或者滚动
background-size背景大小，可以设置宽高100px 100px || % || cover填满 || contain长宽等比放大 1692520123201.jpg
background-image: linear-gradient(to right(方向),yellow（开始颜色）,green（结束颜色）);渐变色

CSS语法

1.CSS写在<style>中
2.语法一般是

选择器{
key:value;
key:value;
key:value;
}

3.选择器获取方式有3种。
1系统标签直接命名
2class用. 一个标签可以声明多个class，用空格相隔
3id用#，一般不用id，用class。因为id留给js来使用

image.png

4.CSS引用方式

image.png

image.png

5.选择器高级写法

image.png

6.CSS3新增的选择器

image.png

继承性

文字样式属性具有继承性，别的没有

image.png

层叠性

当有多个声明时，根据id > class > 标签的方式比较。也跟写的地方有关 行级样式 > 内嵌样式表 > 外部样式表。
先数id的数量，一样 比较class，一样 比较标签
如果完全一样，那就最后声明的

浮动

性质1：拖离标准

image.png
可以给本来会换行的盒子标签，设置一下让他不换行
也可以给<span>等标签，本来不会换行的，设置一下让他换行，可以设置宽高。

性质2浮动的元素互相贴靠
多个浮动元素会相互紧靠

性质3不遮挡，浮动的div不会p中的遮挡文字

性质4收缩（没啥用）
一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度

定位

定位分为：相对定位，绝对定位，固定定位

相对定位
position: relative; 效果类似于margin，距离左上角进行偏移。
div占用的范围变大了。

image.png

绝对定位（重要！！！）
position: absolute;
绝对定位脱离了标准文档流的限制，top定点是从页面的左上角开始计算的。
但是bottom是从浏览器首屏的坐下角开始计算的

image.png

当多个定位一起使用时。子div会根据父div的框来当基础定位。
如：父用相对定位，子用绝对定位。

image.png

固定定位（没啥用，除了回到顶部）

z-index z轴高度，代表谁在上面

版心
页面主要显示的中心宽度，叫版心。需要定义版心的宽度。

image.png

圆角

圆角：border-radius: 10px; 可以上左下右的圆角值border-radius: 10px 10px 10px 10px;

image.png

动画 - 略 - 需要用的时候再看就行

弹性盒子 flex

弹性容器display: flex可以让子View：水平（默认 主轴）或者垂直（侧轴）排列。

flex-direction: row属性用于指定父容器中的子元素排列方向

  • row：默认值，子元素水平排列。
  • row-reverse：子元素反向水平排列。
  • column：子元素垂直排列。
  • column-reverse：子元素反向垂直排列。
    image.png
    image.png

justify-content属性用于指定父容器中的子元素在！主轴的（水平）！对齐方式

  • flex-start：子元素在主轴上起始位置对齐。
  • flex-end：子元素在主轴上结束位置对齐。
  • center：子元素在主轴上居中对齐。
  • space-between：子元素在主轴上平均分布，首尾不留空白。
  • space-around：子元素在主轴上平均分布，首尾留有空白。

align-items属性，用于指定父容器中的子元素在交叉轴（侧轴，垂直）上的对齐方式。

  • flex-start：子元素在交叉轴上起始位置对齐。
  • flex-end：子元素在交叉轴上结束位置对齐。
  • center：子元素在交叉轴上居中对齐。
  • baseline：子元素在交叉轴上以其基线对齐。
  • stretch：子元素将会被拉伸以填充父容器在交叉轴上的剩余空间。

设置weight权重
flex:1;
image.png

布局总结

（1）display指定元素的显示行为（显示的类型）

  • block：元素将被显示为块级元素，会占据一整行。
  • inline：元素将被显示为内联元素，只占据自身的宽度。
  • inline-block：元素将被显示为内联块级元素，可以设置宽度和高度，且会换行。
  • flex：元素将被显示为一个弹性盒子（flex container）。
  • grid：元素将被显示为一个网格容器（grid container）。
  • none：元素将不被显示，相当于隐藏元素。

（2）position元素定位（上面有介绍）

  • static：元素使用正常的文档流进行定位，这是默认值。
  • relative：元素相对于其正常位置进行定位，通过设置 top、right、bottom、left 等属性可以进行微调。
  • absolute：元素基于其最近的非 static 定位的父元素进行定位，或者基于整个文档进行定位。
  • fixed：元素相对于视窗进行定位，即始终保持在视窗的固定位置，不会随滚动而改变位置。
  • sticky：元素在滚动到特定位置时变为固定定位，可以通过设置 top、right、bottom、left 等属性来指定停留的位置。

常用布局：float（不考虑兼容性不常用，难用）、table（不常用）、inline-block相当于横向+自适应宽高、flex（常用）

居中

行内元素
水平居中：text-align: center;
垂直居中 高度等于框的高度 line-height: 100px;

image.png

块级元素！！！
水平居中：margin: auto =margin: auto auto auto auto
常用写法：margin: 0 auto

水平垂直居中：
方法1：top:50%,top方向上，向下平移50%父容器的高度

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

image.png

方法2：父元素display: flex;+子元素margin: auto

image.png

方法3：

    display: flex;
    justify-content: center; // 子元素在横轴的对齐方式 （左右居中）
    align-items: center;  // 子元素在竖轴的对齐方式（上下居中）

常用

文字只显示n行，超出...

display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1（n行数）;
	overflow: hidden;
	text-overflow: ellipsis;

图片宽度固定，高度自适应
用img元素，并且高度设置auto

扩大点击热区
.button { position: relative; /* [其余样式] */ }

.button::before {
	content: '';
	position: absolute;
	top: -10px;
	right: -10px;
	bottom: -10px;
	left: -10px;
}

设置宽高铺满

.app {
	width: 100vw;
	min-height: 100vh;
}

隐藏与显示
display: none; = GONE
display: hindden; = INVISIBLE
display: visible; = visible

超链接<a>的href跳转

href=""                    //刷新页面

	href="#"                   //跳转到当前页面的顶部（不会刷新）

	href="javascript:void(0)"  // 什么都不做

	href="javascript:;"        // 什么都不做
avatar
文章
阅读
粉丝