提桶跑路后写了一年前端 找新家发现几乎所有基础都没看过 随手整理下最近充电的东西.
让自己进入心流（Mental flow）状态
本篇文章就用‘土言土语’讲述人与css的爱恨情仇
- [ css‘写法’ ]
样式 - [ css‘画个区域’ ]
div - [ css‘背景’ ]
background - [ css‘边框’]
border - [ css‘只改一个’]
选择器 - [ css‘div变一行’]
浮动float
样式× 写法√
css常用的三种写法
行内样式 最直接的表示方法 在html标签内使用style 将css写在其中
<div style="color: red;"></div>
内嵌样式
<div>怎么肥肆？</div>
在入口页header标签中添加以下
<style type="text/css">
div{
color:red;
}
</style>
链接样式
<div>又怎么肥肆？</div>
新建css文件style.css 并在入口页header标签中添加以下
<link href="style.css" type="text/css" rel="stylesheet"/>
三种样式都有不同的应用场景 有些课程说明必须用链接样式 个人理解 样式都有不同的应用场景 变通...变通 | | 优 |劣 | | |--- | --- | --- | | 行内样式| 简单 | 维护难 需求大时 可读性不高 | | 内嵌样式| 单个页面实现方便 | 多页面复用麻烦 | | 链接样式| 门槛微高 | 全局布局通用 简洁 复用性高 |
div 画方块
画一个小方格
先来个小坑 目前看不懂的属性后面会一一讲解 拉个页面 开搞
<head>
<style>
main{
border: coral; /* 边框颜色随便设 */
border-style: dotted; /* 边框为虚线 */
}
div{
height: 200px; /* 小方块的长 */
width: 400px; /* 小方块的宽 */
position: relative; /* 小方块采用相对定位 */
left: 100px; /* 小方块从父容器左上角位置开始 向右偏移100px */
top: 20px; /* 小方块从父容器左上角位置开始 向下偏移20px */
z-index: 1; /* 小方块的层级为1 */
background-color: rgb(81, 202, 218); /* 小方块背景颜色随便设 */
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
得到如下效果
好的 我们从父容器的样式开始依次salute
border 边框
废话少说 直接上效果图
position 定位
position包含4个属性值 static fixed relative absolute
其中fixed已有部分浏览器不兼容 慎用
static为position的默认值 即不设置position时 为static
relative相对定位: 与absolute一样都是从原位置基础上，向右（left） 向下（top） 向左（right）平移
不同的是relative定位 在平移后 保留原位置的空间 而absolute原位置的空间被删除
可以看出右侧absolute定位 父容器已经收缩 原小方块的位置空间被删除
左侧的relative定位 父容器的原空间仍然保留
background× 背景√
background-color
很简单直观的一个属性
<div style="background-color: red;">
//背景颜色设为红色
background-image
<div style="background-image: url('1.jpg');">
//背景图片引用1.jpg
background-repeat
<div style="background-repeat: no-repeat;">//背景图片不平铺
background-position
该属性表示背景的位置 常用属性值有
属性值为两个时 第一个代表水平方向 第二个代表竖直方向
属性值为一个时 其他未声明默认center
x% y%代表从容器左上角未坐标轴原点向右下角方向平移x%(水平),y%(竖直)
background: cadetblue url("1.jpg") no-repeat left top fixed;
这句冗长的样式我们解构来看
cadeblue 背景颜色
url("1.jpg") 背景图片路径
no-repeat 是否平铺，这里是不平铺
left top 起始位置
fixed 背景是否跟随屏幕滚动 这里是固定
background-size
设置背景图像的尺寸
background-size:auto/length/cover/contain/percentage
percentage 百分比设定背景尺寸
auto 显示图片的真实尺寸
length 按你想要的px长度设置图片尺寸
cover 背景最短边铺满容器最短边 背景的长宽等比缩放 可能超出容器
contain 背景最长边铺满容器最长边 背景的长宽等比缩放 可能有留白
