css知识补充
盒子模型的介绍：
在网页中基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型
盒子模型的五个属性：
width，height，border(边框)，padding(内边距)，margin(外边距)
width: 指的是内容的宽度，而不是整个盒子真实的宽度
height: 指的是内容的高度，而不是整个盒子真实的高度
设计一个宽度402*402的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*div{*/
/*width: 400px;*/
/*height: 400px;*/
/*border:1px solid red;*/
/*}*/
/*div{*/
/*width: 50px;*/
/*height: 50px;*/
/*padding: 175px;*/
/*border:1px solid red;*/
/*}*/
/*div{*/
/*width: 200px;*/
/*height: 200px;*/
/*padding: 100px;*/
/*border:1px solid red;*/
/*}*/
div{
width: 0;
height: 0;
border: 1px solid red;
padding: 200px;
}
</style>
</head>
<body>
<div>小不点</div>
</body>
</html>
padding：内边距
padding的区域是有背景颜色，并且背景颜色和内容区域颜色一样。
即background-color这个属性将填充所有的border以内的区域;就是边框到内容之间的距离。
padding有四个方向：padding-top，padding-right，padding-bottom，padding-left；所以说我们能分别描述4个方向的padding
方法有两种：1.写小属性 2.写综合属性 用空格隔开 /*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/ /*上 左右 下*/
/*padding: 20px 30px 40px;*/ /* 上下 左右*/
/*padding: 20px 30px;*/ /*上下左右*/
padding: 20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
div.box{
width: 300px;
height: 300px;
background-color: red;
border: 5px solid yellow; /*小属性设置*/
/*padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;*/ /*综合属性设置，用空格隔开*/
/*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/ /*上 左右 下*/
/*padding: 20px 30px 40px;*/ /* 上下 左右*/
/*padding: 20px 30px;*/ /*上下左右*/
padding: 20px; }
</style>
</head>
<body>
<div class="box">
可爱多
</div>
</body>
</html>
清除默认的padding，margin
要清除默认的padding，margin 用* 效率不高，使用并集选择器来选中页面中应有的标签(reset.css查找)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除padding</title>
<style type="text/css">
/**{*/
/*padding: 0px;*/
/*margin: 0px;*/
/*}*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
code, form, fieldset, legend, input, button, textarea, p,
blockquote, th, td {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="box">
<ul type="circle">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</body>
</html>
border：边框
边框有三个要素： 粗细 线性 颜色
如果颜色不写，默认是黑色的
如果 粗细不写 不显示
线性样式值：none:无边框 solid：实线边框 dashed：虚线边框 double：双线边框 dotted:点状边框 hidden：与none相同，应用于表解决边框冲突
只写线性样式，默认的有上下左右 3px的宽度 solid 默认的黑色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
/*border: 5px solid red;*/ /*按照3要素*/
/*border-width: 5px;
border-style: solid;
border-color: red;*/
/*border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/ /* 按照方向分*/ /*border-top-width: 10px;
border-top-color: red;
border-top-style: solid; border-right-width: 10px;
border-right-color: red;
border-right-style: solid; border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid; border-left-width: 10px;
border-left-color: red;
border-left-style:solid;*/ /*border: none;*/ /*设置border没有样式*/
/*border-left: none;*/ /*border-top: 0;*/
border-left: 10px solid red; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
使用border制作小三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> /*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
margin: 外边距 指的是边框到外部的距离
什么是标准文档流
宏观的将，我们的web页面和ps等设计软件有本质的区别
web 网页的制作 是个“流” 从上而下 ，像 “织毛衣”
而设计软件 ，想往哪里画东西 就去哪里画
标准文档流下 有哪些微观现象？
1.空白折叠现象
2.高矮不齐，底边对齐
3.自动换行，一行写不满，换行写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档流</title>
<style type="text/css">
span{
font-size: 50px;
}
</style>
</head>
<body>
<div>
前端开发<span>接口</span>后端开发
<img src="./1.png" alt="">
<img src="./2.png" alt="">
<img src="./3.png" alt="">
</div>
</body>
</html>
display属性
控制元素的显示和隐藏
块级元素与行内元素的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style type="text/css">
.box1{
/*将块元素转化成行内元素*/
display: inline-block;
width: 200px;
height: 40px;
border: 1px solid red;
}
.box2{
margin-top: 20px;
width: 200px;
height: 40px;
font-size: 40px;
border: 1px solid green;
}
span{
background-color: yellow;
width: 100px;
height: 40px;
/*将行内元素转化成块级元素*/
display: block; /*隐藏当前的标签 不占位置*/
/*display: none;*/ /*隐藏当前的标签，占位置*/
visibility: hidden;
}
img{
width: 300px;
height：200px;
/*隐藏当前的标签*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="box1">内容</div>
<div class="box1">内容</div>
<div class="box2">内容</div> <span>alex</span>
<span>alex</span> <!-- form表单中 input textarea select -->
<img src="./1.png" alt="">
<img src="./2.png" alt="">
</body>
</html>
css知识补充的更多相关文章
- CRM中QueryDict和模型表知识补充
CRM中QueryDict和模型表知识补充 1.QueryDict的用法 request.GET的用法:1.在页面上输入:http://127.0.0.1:8000/index/print(reque ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- 第八十五节，css布局补充一
css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin: ...
- css杂项补充
css杂项补充 一.块与内联 1.块 独行显示 支持宽高,宽度默认适应父级,高度默认由子级或内容撑开 设置宽高后,采用设置的宽高 2.内联 同行显示 不支持宽高 margin上下无效果,左右会起作用, ...
- Redis基础知识补充及持久化、备份介绍(二)--技术流ken
Redis知识补充 在上一篇博客<Redis基础认识及常用命令使用(一)--技术流ken>中已经介绍了redis的一些基础知识,以及常用命令的使用,本篇博客将补充一些基础知识以及redis ...
- WEBBASE篇： 第五篇， CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- WEBBASE篇： 第四篇， CSS知识2
CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素 (2)% (3) in 英寸 lin = 2.54cm (4)pt 磅 1pt = 1/72in ppi ...
- Android知识补充(Android学习笔记)
Android知识补充 ●国际化 所谓的国际化,就是指软件在开发时就应该具备支持多种语言和地区的功能,也就是说开发的软件能同时应对不同国家和地区的用户访问,并针对不同国家和地区的用户,提供相应的.符合 ...
随机推荐
- 使用 transmittable-thread-local 组件解决 ThreadLocal 父子线程数据传递问题
在某个项目中,需要使用mybatis-plus多租户功能以便数据隔离,前端将租户id传到后端,后端通过拦截器将该租户id设置到ThreadLocal以便后续使用,代码大体上如下所示: ThreadLo ...
- 创建txt文件，并且写入内容
使用fopen的w方式就可以创建一个新的txt文件,如果文件名存在该文件内容会消失. 1. fopen的函数原型:FILE * fopen(const char * path,const char * ...
- GraduateDesign-初试APP编写（去除虚拟按键和禁止状态栏下拉）
为了毕设的要求,需要在Android系统上运行一个app来控制硬件,今天开始这个app的编写. 首先,我们的系统将只运行这个app,也就是我们不需要状态栏,虚拟按键等. 故这里将app设置为全屏模式. ...
- 使用 dotnet-monitor 分析.NET 应用程序
dotnet-monitor 是 .NET Core 命令行接口 (CLI) 工具, 可以很方便的在dotnet环境中分析我们的应用程序,需要注意的是,目前它还只是一个实验性的工具 在这之前,我们使用 ...
- Scanner详解
java.util.Scanner 是 Java5 的新特征,我们可以通过 Scanner 类来获取用户的输入 1)public static void main(String[] args) { S ...
- 图解HTTP权威指南（四）| 代理
作者简介 李先生(Lemon),高级运维工程师(自称),SRE专家(目标),梦想在35岁买一辆保时捷.喜欢钻研底层技术,认为底层基础才是王道.一切新技术都离不开操作系统(CPU.内存.磁盘).网络等. ...
- Azure Cost alerts 花费警报
一,引言 2020已完结,迎来了2021年新的开始.Allen 在新的一年中继续分享自己所学习到的 Azure 技术.本篇文章的内容也不多,也是一个网友遇到的一个问题----- Azure 上有没有花 ...
- 使用IDEA构建Spring Boot项目简单实例
一.介绍 它的目标是简化Spring应用和服务的创建.开发与部署,简化了配置文件,使用嵌入式web服务器,含有诸多开箱即用的微服务功能,可以和spring cloud联合部署. Spring Boot ...
- 洛谷 P4396 [AHOI2013]作业
题目描述 题目传送门 分析 因为询问是关于区间的,并且没有强制在线,所以能用莫队解决 但是还要支持查询区间内大于等于 \(a\),小于等于 \(b\) 的数的个数和数值的个数 所以还要套一个数据结构 ...
- 【JDBC核心】获取数据库连接
获取数据库连接 要素一:Driver 接口实现类 Driver 接口: java.sql.Driver 接口是所有 JDBC 驱动程序需要实现的接口.这个接口是提供给数据库厂商使用的,不同数据库厂商提 ...