HTML和CSS前端教程05-CSS盒模型
1. CSS盒模型
元素的尺寸
1.1 元素的尺寸
属性 | 值 | 说明 |
---|---|---|
width | auto、长度值或百分比 | 元素的宽度 |
height | auto、长度值或百分比 | 元素的高度 |
min-width | auto、长度值或百分比 | 元素的最小宽度 |
min-height | auto、长度值或百分比 | 元素的最小高度 |
max-width | auto、长度值或百分比 | 元素的最大宽度 |
max-height | auto、长度值或百分比 | 元素的最大高度 |
用于可能动态产生元素尺寸变大变小的问题,来限制最大最小值
div{
background: silver;
width: 200px;
height: 200px;
min-width: 100px;
min-height: 100px;
}
<div>HTML5</dive>
1.2. 元素内边距 padding
div{
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
/*上下各空出10,20px*/
padding: 10px 20px;
/*上,右,下,左*/
padding: 10px, 20px,10px,10px;
}
1.3. 元素外边距 margin
1.4. 处理溢出overflow
溢出的参数值
值 | 说明 |
---|---|
auto | 浏览器自动处理溢出内容,用滚动条 |
hidden | 有溢出,直接剪掉 |
scroll | 不管是否溢出,都有滚动条 |
visible | 默认值,不管是否溢出,都显示 |
div{
overflow-y: auto;
}
1.5. 元素的可见性Visibility
属性值 | 说明 |
---|---|
visible | 默认值,元素在页面上可见 |
hidden | 元素不可见,但会占据空间 |
collapse | 元素不可见,隐藏表格的行列。如果不是表格,则和hidden一样 |
div{
background: silver;
width: 200px;
height: 200px;
visibility: visible;
}
2. CSS元素的盒类型
CSS盒模型中的display属性,可以更改元素本身盒类型,那么有哪些盒类型呢?
2.1. 块级元素(区块)
- 能够设置元素尺寸,隔离其他元素功能(有换行功能)的元素
<div>, <p>
2.2. 行内元素
- 不能设置元素尺寸,它只能自适应内容、无法隔离其他元素,其他元素会紧跟其后:
<span>, <d>
2.3. 行内-块元素
- 可以设置元素尺寸,但是无法隔离其他元素
<img>
2.4. 盒类型元素转换dispaly
值 | 说明 |
---|---|
block | 盒为块级元素 |
inline | 盒为行内元素 |
inline-block | 盒为行内-块元素 |
none | 盒子不可见,不占位 |
div{
background: silver;
width: 200px;
height: 200px;
/*转成了行内元素*/
display: inline;
/*转成了行内-块元素*/
display: inline-block
}
3. CSS盒元素的浮动float
值 | 说明 |
---|---|
left | 浮动元素靠左 |
right | 浮动元素靠右 |
none | 禁止浮动 |
#a{
background: maroon;
float: left;
}
#b{
background: green;
float: right;
}
#c{
background: blue;
float: left;
}
HTML和CSS前端教程05-CSS盒模型的更多相关文章
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- web前端教程:CSS 布局十八般武艺都在这里了
CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...
- HTML和CSS前端教程03-CSS选择器
目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...
- css学习の第三弹—盒模型的创建和使用
一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...
- CSS选择器、样式、盒模型
一.CSS基础选择器 # 1.*(通配选择器):html,body以及body下用于显示的标签 #html和body颜色会被改变,但是div标签不会发生改变,由于不同的选择器具有优先级 # 语法:* ...
- 第一章入门篇CSS样式的分类、盒模型
1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...
- CSS(二) 颜色 盒模型 文字相关 border
一.颜色 rgb(r,g,b) rgb取值 0-255 分别是 色光三元色 red green blue rgba(r,g,b,a) rgb同上 a 是 alpha 代表透明度 colot ...
- 笔记《精通css》第3章 盒模型,定位,浮动,清理
第3章 盒模型,定位,浮动,清理 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用 ...
- 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构
display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...
随机推荐
- 第三次作业(ABC类代码优化及感悟)
这次作业与林杰同学合作完成,不重复发布了. 可以直接去林杰同学的博客看.http://www.cnblogs.com/linlinlin/p/4836707.html
- Azure基础(一)云的概念 - 云计算的原理
Azure fundamentals - Cloud Concepts - Principles of cloud computing Explore the core concepts of clo ...
- Android单元测试之一:基本概念
Android单元测试之一:基本概念 简单介绍 单元测试是应用程序测试策略中的基本测试,通过对代码进行单元测试,一方面可以轻松地验证单个单元的逻辑是否正确,另一方面在每次构建之后运行单元测试,可以快读 ...
- [Swift]LeetCode187. 重复的DNA序列 | Repeated DNA Sequences
All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...
- MyBatis 处理关系运算符
MyBatis mapper文件是xml文件,使用关系运算符需要进行转义. 关系运算符 转义后字符 < < <= <= > > > >=
- 定时任务 winform开发
在项目中我们经常遇到与时间结合的无限或者有限轮回的任务.例如每月一号统计工作量,基本这种情况,都会是设置定时任务,定时执行.好了,下面就记录一下定时任务的开发吧. 首先描述一下开发思路: 建立一个wi ...
- Python内置函数(6)——bool
英文文档: class bool([x]) Return a Boolean value, i.e. one of True or False. x is converted using the st ...
- MVC的App_Code这个特殊文件夹
对于一个之前编译一点都没有问题的项目,突然间调试就出现了一个报错: 然而你会天真的认为,这个真的是using的问题吗!别傻了,我检查了一遍又一遍: 首先这个是有using的! 其实代码编写上也是没有报 ...
- Python爬虫入门教程 4-100 美空网未登录图片爬取
美空网未登录图片----简介 上一篇写的时间有点长了,接下来继续把美空网的爬虫写完,这套教程中编写的爬虫在实际的工作中可能并不能给你增加多少有价值的技术点,因为它只是一套入门的教程,老鸟你自动绕过就可 ...
- 用Maxima画出一些有趣的图
Maxima可以画出Chaos.Duffing .Fern.Lorenz.Rossler .Portraits .Mandelbrot.Staircase.Triangles等有趣的图... Chao ...