4 CSS的20/80个知识点
2024-08-27 16:12:09
1.css的基本构成
- 样式选择器
- id选择器
- 元素选择器
2.css的盒模型
- border
- padding
- margin
3.Atom快捷键
4.程序
（1）初始程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn css with blocks</title>
<link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="block-1">
猫
</div> <div class="block-2">
狗
</div> <div class="block-2">
哈
</div> </body>
</html>
.block-1{
}
.block-2{
}
.block-3{
}
（2）border外边框
.block-1{
border: solid 2px blue; #实体
}
.block-2{
border: dotted 2px blue; #锯齿
}
.block-3{
border: solid 2px blue;
}
（3）backgroud：背景颜色
.block-1{
border: solid 2px blue;
background: tomato
}
.block-2{
border: dotted 2px blue;
background: green
}
.block-3{
border: solid 2px blue;
background: rgb(115, 232, 165)
}
（4）margin 外攘.注意分号；
margin:20px;
margin-bottom: 20px;
（5）padding 内推
padding: 0 0 0 20px;
（6） 如何让主目录大小固定？
- box-sizing: border-box;
box-sizing: border-box;
width: 256px;
height: 64px;
5.完整程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn css with blocks</title>
<link rel="stylesheet" href="block.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="block-1">
猫
</div> <div class="block-2">
狗
</div> <div class="block-3">
哈
</div> </body>
</html>
.block-1{
border: solid 2px blue;
margin:20px;
padding: 0 0 0 20px;
background: tomato
}
.block-2{
border: dotted 2px blue;
margin:20px;
padding: 0 0 0 20px;
background: green
}
.block-3{
border: solid 2px blue;
margin:20px;
padding: 0 0 0 20px;
background: rgb(115, 232, 165)
}
最新文章
- 关于PB调用Microsoft Web Browser控件的一些问题
- 虚拟机启动linux系统报错，此主机支持 Intel VT-x，但 Intel VT-x 处于禁用状态
- 关于CSS reset
- 使用 SharedPreferences 实现数据的存储和读取
- Servlet课程0425（五） sendRedirect实现不同页面共享数据
- 用lsb_release -a 查看linux版本
- android： WheelView组件(滑轮组件)的应用！
- 转：JDK中的URLConnection参数详解
- Android - "cause failed to find target android-14" 问题
- ABP架构学习系列二：ABP中配置的注册和初始化
- [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)
- Mac上安装Appium简介
- Hbase各版本环境要求
- [luogu5004]专心OI - 跳房子【矩阵加速+动态规划】
- MybatisPlus使用介绍
- egret获取本周，上周，今天，昨天，明天，现在时间,今年，本月
- mybatis 转义
- Bagging-Adaboost-RF的粗糙理解
- react-native android打包
- 为在python中使用dotnet程序安装clr