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 内 ...
随机推荐
- CASE WHEN 高阶用法?
两个表做关联时,以左表为准,若左表某列不为空,则与右表对应列进行关联匹配,为空则不做匹配. 以上做法,有一种说不出来的感觉,不管怎样,问题是解决了. 如有更好的解决思路,请留言告知,不甚感激!
- 1 小时 SQL 极速入门(二)
上篇我们说了 SQL 的基本语法,掌握了这些基本语法后,我们可以对单表进行查询及计算分析.但是一个大的系统,往往会有数十上百张表,而业务关系又错综复杂.我们要查的数据往往在好几张表中,而要从多张表中来 ...
- [Swift]LeetCode721. 账户合并 | Accounts Merge
Given a list accounts, each element accounts[i] is a list of strings, where the first element accoun ...
- Python档案袋( Json、pickle、加密与解密)
Json是各程序通用的数据格式:pickle是Python特有的,可以存储很多Python特有的数据,如函数地址等 Json的简单使用: import json jsondata={ "us ...
- 关于 redis.properties配置文件及rule
当你配置的 FinanceRlue 的path为/count/users时,redis.properties中就必须也配置一个/users=redis://localhost:6379/2?keyle ...
- Spark中SQL列和并为一行
在使用数据库的时候,需要将查询出来的一列按照逗号合并成一行. 原表名字为 TABLE ,表中的部分原始数据为: +---------+------------------------+ | BASIC ...
- Python内置函数(14)——delattr
英文文档: delattr(object, name) This is a relative of setattr(). The arguments are an object and a strin ...
- nodejs应用:文件上传
功能:上传文件到服务器,图片支持客户端本地预览. 服务端 //server.js 'use strict';const http = require('http');const url = requi ...
- 双飞翼布局的改造 box-sizing和margin负值的应用
box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100p ...
- Android模拟器Genymotion使用详解
介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...