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盒模型的更多相关文章

  1. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  2. web前端教程:CSS 布局十八般武艺都在这里了

      CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式(包括传统的盒模型布局和比较新的flex布局实现), ...

  3. HTML和CSS前端教程03-CSS选择器

    目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...

  4. css学习の第三弹—盒模型的创建和使用

    一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...

  5. CSS选择器、样式、盒模型

    一.CSS基础选择器 # 1.*(通配选择器):html,body以及body下用于显示的标签 #html和body颜色会被改变,但是div标签不会发生改变,由于不同的选择器具有优先级 # 语法:* ...

  6. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

  7. CSS(二) 颜色 盒模型 文字相关 border

    一.颜色 rgb(r,g,b)  rgb取值 0-255   分别是 色光三元色  red green blue rgba(r,g,b,a) rgb同上  a 是 alpha  代表透明度 colot ...

  8. 笔记《精通css》第3章 盒模型,定位,浮动,清理

    第3章    盒模型,定位,浮动,清理 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用 ...

  9. 前端(七)—— 盒模型之display、overflow、隐藏、border、margin、样式支持,层级结构

    display.overflow.隐藏.border.margin.样式支持,层级结构 一.盒模型之display 1.三种样式 block 块 inline 内联/行内 inline-block 内 ...

随机推荐

  1. CASE WHEN 高阶用法?

    两个表做关联时,以左表为准,若左表某列不为空,则与右表对应列进行关联匹配,为空则不做匹配. 以上做法,有一种说不出来的感觉,不管怎样,问题是解决了. 如有更好的解决思路,请留言告知,不甚感激!

  2. 1 小时 SQL 极速入门(二)

    上篇我们说了 SQL 的基本语法,掌握了这些基本语法后,我们可以对单表进行查询及计算分析.但是一个大的系统,往往会有数十上百张表,而业务关系又错综复杂.我们要查的数据往往在好几张表中,而要从多张表中来 ...

  3. [Swift]LeetCode721. 账户合并 | Accounts Merge

    Given a list accounts, each element accounts[i] is a list of strings, where the first element accoun ...

  4. Python档案袋( Json、pickle、加密与解密)

    Json是各程序通用的数据格式:pickle是Python特有的,可以存储很多Python特有的数据,如函数地址等 Json的简单使用: import json jsondata={ "us ...

  5. 关于 redis.properties配置文件及rule

    当你配置的 FinanceRlue 的path为/count/users时,redis.properties中就必须也配置一个/users=redis://localhost:6379/2?keyle ...

  6. Spark中SQL列和并为一行

    在使用数据库的时候,需要将查询出来的一列按照逗号合并成一行. 原表名字为 TABLE ,表中的部分原始数据为: +---------+------------------------+ | BASIC ...

  7. Python内置函数(14)——delattr

    英文文档: delattr(object, name) This is a relative of setattr(). The arguments are an object and a strin ...

  8. nodejs应用:文件上传

    功能:上传文件到服务器,图片支持客户端本地预览. 服务端 //server.js 'use strict';const http = require('http');const url = requi ...

  9. 双飞翼布局的改造 box-sizing和margin负值的应用

    box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100p ...

  10. Android模拟器Genymotion使用详解

    介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...