第七十三节,css盒模型
css盒模型
学习要点:
1.元素尺寸
2.元素内边距
3.元素外边距
4.处理溢出
本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局。
一.元素尺寸
CSS盒模型中最基础的就是设置一个元素的尺寸大小。有三组样式来配置一个元素的尺寸大小,样式表如下:
属性 值 说明 CSS版本
width auto、长度值或百分比 设置元素的宽度 1
height auto、长度值或百分比 设置元素的高度 1
min-width auto、长度值或百分比 设置元素最小宽度 2
min-height auto、长度值或百分比 设置元素最小高度 2
max-width auto、长度值或百分比 设置元素最大宽度 2
max-height auto、长度值或百分比 设置元素最大高度 2
width,height设置元素尺寸,元素的宽度和高度
值 说明
auto 自适应
像素px 设置元素尺寸
百分比 设置元素百分比尺寸,相对于父元素来衡定的
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
} <div>
<p>你好</p>
</div>
min-width,min-height设置元素最小宽度和最小高度
值 说明
auto 自适应
像素px 设置元素尺寸
百分比 设置元素百分比尺寸,相对于父元素来衡定的
div{
background-color: #ff1c19;
min-width: 400px;
min-height: 200px;
width: 200px;
height: 100px;
} <div>
<p>你好</p>
</div>
max-width,max-height设置元素最大宽度和最大高度
值 说明
auto 自适应
像素px 设置元素尺寸
百分比 设置元素百分比尺寸,相对于父元素来衡定的
div{
background-color: #ff1c19;
max-width: 200px;
max-height: 100px;
width: 400px;
height: 200px;
} <div>
<p>你好</p>
</div>
二.元素内边距
CSS盒模型中可以设置元素内部边缘填充空白的大小,我们成为内边距。样式表如下:
属性 值 说明 CSS版本
padding-top 长度值或百分比 设置顶部内边距 1
padding-bottom 长度值或百分比 设置底部内边距 1
padding-left 长度值或百分比 设置左边内边距 1
padding-right 长度值或百分比 设置右边内边距 1
padding 1~ 4个长度值或百分比 简写属性 1
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
padding-top: 20px;
padding-bottom: 40px;
padding-left: 60px;
} <div>
<p>你好</p>
</div>
内边距简写格式,上右下左
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
padding: 10px 20px 10px 20px;
} <div>
<p>你好</p>
</div>
三.元素外边距
CSS盒模型中可以设置元素外部边缘填充空白的大小,我们成为外边距。样式表如下:
属性 值 说明 SS版本
margin-top 长度值或百分比 设置顶部内边距 1
margin-bottom 长度值或百分比 设置底部内边距 1
margin-left 长度值或百分比 设置左边内边距 1
margin-right 长度值或百分比 设置右边内边距 1
margin 1 ~ 4长度值或百分比 简写属性 1
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
width: 200px;
height: 100px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
} <div>
<p>你好</p>
</div>
外边距简写格式,上右下左
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
width: 200px;
height: 100px;
margin: 10px 20px 30px 40px;
} <div>
<p>你好</p>
</div>
四.处理溢出
当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。溢出主要朝两个方向:右侧和底部。我们可以通过overflow系列样式来控制它。
属性 值 说明 CSS版本
overflow-x 溢出值 设置水平方向的溢出 3
overflow-y 溢出值 设置垂直方向的溢出 3
overflow 溢出值 简写属性 2
以上溢出处理主要有四种处理值:
值 说明
auto 浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条,否则就不显示滚动条。
hidden 如果有溢出的内容,直接剪掉。
scroll 不管是否溢出,都会出现滚动条。但不同平台和浏览器显示方式不同。
visible 默认值,不管是否溢出,都显示内容。
div{
background-color: #ff1c19;
width: 400px;
height: 200px;
}
div > p{
background-color: #36ff1d;
width: 200px;
height: 100px;
overflow-y: hidden;
} <div>
<p>简介:当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候,他的父亲,也是酒店董事长的梁泽,以及总经理梁宇青,正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行,就这样被压回了酒店准备亮相。但宇方仍不甘示弱,仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱,向天微义不容辞同行来帮忙,两人仓皇找着</p>
</div>
元素可见性
使用visibility属性可以实现元素的可见性,这种样式一般可以配合JavaScript 来实现效果。样式表如下:
属性 值 说明 CSS版本
visibility visible 默认值,元素在页面上可见。 2
hidden 元素不可见,但会占据空间。 2
collapse 元素不可见,隐藏表格的行与列,如果不是表格,则和hidden一样。 2
table .a{
visibility: collapse;
} <div>
<table border="1">
<tr class="a">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
元素盒类型
CSS盒模型中的display属性,可以更改元素本身盒类型。那么元素有哪些盒类型呢? 主要有:1.块级元素(区块);2行内元素(内联);3行内 块级元素(内联块);4.隐 藏元素。
1.块级元素 (区块)
所谓块级元素,就是能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p>等文档元素。
2.行内元素 (内联)
所谓行内元素,不能够设置元素尺寸,它只能自适应内容、无法隔离其他元素,其它元素会紧跟其后。比如:<span>、<b>等文本元素。
3.行内-块元素 (内联块)
所谓行内 块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>。
属性 值 说明 CSS版本
display block 盒子为块级元素 1
inline 盒子为行内元素 1
inline-block 盒子为行内 块元素 2
none 盒子不可见,不占位 1
将内联转换成区块
span{
background-color: #ff1d30;
display: block;
} <span>这是内联</span>
将区块转换成内联
p {
background-color: #ff1d30;
display: inline;
} <p>这是区块</p>
将块级元素转化成行内块元素(内联块)
p{
background-color: #ff1d30;
display: inline-block;
} <p>这是区块</p>
将盒子元素隐藏,不占位
p{
background-color: #ff1d30;
display: none;
} <p>这是区块</p>文本
display属性还有非常多的值,有些后面部分讲解,而有些支持度不好或者尚不支持,从而省略。有兴趣的,可以参考CSS3手册。
元素的浮动
CSS盒模型有一种叫浮动盒,就是通过float属性建立盒子的浮动方向,样式表如下:
属性 值 说明 CSS版本
float left 浮动元素靠左 1
right 浮动元素靠右 1
none 禁用浮动 1
div {
width: 200px;
height: 200px;
}
.a{
background-color: #ff1d30;
float: right;
}
.b{
background-color: #ffcf2c;
float: right;
}
.c{
background-color: #3eff51;
float: left;
} <div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>
清除浮动
刚才的浮动有一个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致元素不可见或部分不可见。我们可以使用clear属性来处理。
属性 值 说明 CSS版本
clear none 允许两边均可浮动 1
left 左边界不得浮动 1
right 右边界不得浮动 1
both 两边都不得浮动 【推荐】 1
div {
width: 200px;
height: 200px;
}
.a{
background-color: #ff1d30;
float: left;
}
.b{
background-color: #ffcf2c;
clear: left;
}
.c{
background-color: #3eff51;
} <div class="a">我是1</div>
<div class="b">我是2</div>
<div class="c">我是3</div>
position定位CSS中定位的使用
属性名称 属性值 说明
position relative 设置区块基准点为左上角(相对定位)
absolute 设置网页的为基准点左上角(绝对定位)
static 无设置
left auto 以基准点定位在左边
像素/百分比 定位在左边
top auto 以基准点定位在上边
像素/百分比 定位在上边
right auto 以基准点定位在右边
像素/百分比 定位在右边
bottom auto 以基准点定位在下边
像素/百分比 定位在下边
z-index auto 自动调整高度
数字 数字越大越往上层
使用技巧,有时候会把父亲级元素设置为相对定位,只设置一个相对定位不设置定位值,然后将子级元素设置绝对定位
vertical-align内联元素垂直位置设置
解释:负值往下,正值往上。如果默认基线在上面,用负数。如果默认基线在下面,用正值。
值 说明 CSS版本
长度值 设置上下的偏移量,可以是负值 1
百分比 同上 1
@charset "utf-8";
div{
width: 132px;
height: 42px;
background-color: #4af5ff;
}
samp{
background-color: #ff4e37;
vertical-align: -10px;
} <div>
<samp>加入购物车</samp>
</div>
第七十三节,css盒模型的更多相关文章
- 十分钟复习CSS盒模型与BFC
css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padd ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- 7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
- 第三百七十三节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表、验证码表、轮播图表
第三百七十三节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表.验证码表.轮播图表 创建Django项目 项目 settings.py ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
- 第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素可见性 使用 vis ...
- 第 16 章 CSS 盒模型[上]
学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一.元素尺寸 C ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
随机推荐
- 双色球机选算法java实现
双色球机选算法java实现 一.代码 package com.hdwang; import java.util.Random; /** * Created by admin on 2017/1/10. ...
- picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小
polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...
- C语言:json库使用学习
Json基础 一.Json的概念 Json(Javascript Object Notation)全称为JavaScript对象表示法,是一种轻量级的数据交换格式,采用完全独立于语言的文本格式.JSO ...
- 问题: 在使用thinkphp自带分页类时,在设置尾页显示的最后一页时,用setConfig(“last”,”尾页”)来设置样式,发现无效。
分析: 在分页类(/ThinkPHP/Library/Think/Page.class.PHP)里面有一个共有属性: public $lastSuffix = true; // 最后一页是否显示总页数 ...
- xml动态修改 dom4j修改
xml的动态修改需要传入的参数 xml的位置(tomcat中的发布位置).修改后的xml需要保存的位置(因为动态修改,所以建议和xml未修改前的位置相同).添加的节点的信息.或者修改的节点的信息 SA ...
- ViewPager和View的事件响应规则
案例背景: 当我们实现viewpager的自动切换界面操作的时候,如果需要增加点击图片viewpager停止自动切换,松开手指viewpager自动切换又继续执行的逻辑,正常思维下实现代码如下所示: ...
- hdu 3669 Cross the Wall(斜率优化DP)
题目连接:hdu 3669 Cross the Wall 题意: 现在有一面无限大的墙,现在有n个人,每个人都能看成一个矩形,宽是w,高是h,现在这n个人要通过这面墙,现在只能让你挖k个洞,每个洞不能 ...
- ElasticSearch(8)-分布式搜索
分布式搜索的执行方式 在继续之前,我们将绕道讲一下搜索是如何在分布式环境中执行的. 它比我们之前讲的基础的增删改查(create-read-update-delete ,CRUD)请求要复杂一些. 注 ...
- 【IE6的疯狂之三】IE6 3像素BUG的实例
问题:2列布局.左列固定,右列液态我需要做一个布局.2列,左边列固定宽度.右边列使用剩余宽度.整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度.但是我写 ...
- 小例子解释wait与notify的区别
系统慢可能有很多种原因,硬件资源不足,语句不优化,结构设计不合理,缺少必要的运维方式.所有的这些问题都可以在阻塞与等待中看出端倪,发现并解决问题. 首先是下载开发工具,磨刀不误砍材工.点此下载 这是一 ...