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知识补充 ●国际化 所谓的国际化,就是指软件在开发时就应该具备支持多种语言和地区的功能,也就是说开发的软件能同时应对不同国家和地区的用户访问,并针对不同国家和地区的用户,提供相应的.符合 ...
随机推荐
- 蚂蚁开源的 SOFABoot，和 Spring Boot 有啥关系？
一.SOFABoot 是什么鬼? 说到 SOFABoot,不得不先说下 SOFARPC 框架,SOFARPC 也是大名远扬,最早起源于阿里淘宝 HSF 框架,现在是蚂蚁金服开源的一款高性能.高可扩展性 ...
- Android OpenGL ES 开发
OpenGL(Open Graphics Library) 是开放图形库,是一个跨平台的图形 API.OpenGL ES(OpenGL for Embedded System)是专为移动端提供的一个子 ...
- django-mdeditor支持七牛云存储图片
由于django-mdeditor官方插件没有支持第三方存储,所以,我们只能进行修改源码的方式实现了. 本次改写即使替换了其文件,不使用七牛云也是无关紧要的,因为在存储时,去settings.py中判 ...
- Android驱动学习-Eclipse安装与配置
在ubuntu系统下安装配置Eclipse软件.并且让其支持编译java程序和内核驱动程序. 1. 下载Eclipse软件. 打开官网:http://www.eclipse.org/ 点击 DOWN ...
- Redis基础篇（六）数据同步：主从复制
Redis具有高可靠性,体现在两方面: 一是数据尽量少丢失,通过前面介绍的持久化方式AOF和RDB,在宕机时可以恢复数据. 二是服务尽量少中断,通过副本冗余来实现. 今天我们学习的就是通过主从复制实现 ...
- Java学习日报7.24
package tem; public class Tem { public static void main(String[] args) { // TODO 自动生成的方法存根 //每隔10摄氏度 ...
- 破解版IDM使用问题
正版的IDM一般下载安装后有30天的免费使用期,过了就需要买正版序列号才能使用,网上一般提供的破解版的IDM安装后又存在无法添加到chrome插件的问题 这里针对这个问题给出解决方案: 首先下载破解版 ...
- reactor模式：主从式reactor
前面两篇文章提到 reactor模式:单线程的reactor模式 reactor模式:多线程的reactor模式 NIO的server模式只有5个阶段,但是,NIO的selectionkey里确实有个 ...
- mysql8.0.x中datasource信息
driverClassName: com.mysql.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSourceurl: jdbc:mysql:// ...
- 数据仓库组件：Hive环境搭建和基础用法
本文源码:GitHub || GitEE 一.Hive基础简介 1.基础描述 Hive是基于Hadoop的一个数据仓库工具,用来进行数据提取.转化.加载,是一个可以对Hadoop中的大规模存储的数据进 ...