资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/HTML和CSS前端教程05-CSS盒模型

HTML和CSS前端教程05-CSS盒模型

oujie / 2642人阅读

摘要：目录盒模型元素的尺寸元素内边距元素外边距处理溢出元素的可见性元素的盒类型块级元素区块行内元素行内块元素盒类型元素转换盒元素的浮动盒模型盒模型元素的尺寸元素的尺寸元素的尺寸属性值说明长度值或百分比元素的宽度长度值或百分比元素的高度长度值

目录

  • 1. CSS盒模型
    • 1.1 元素的尺寸
    • 1.2. 元素内边距 padding
    • 1.3. 元素外边距 margin
    • 1.4. 处理溢出overflow
    • 1.5. 元素的可见性Visibility
  • 2. CSS元素的盒类型
    • 2.1. 块级元素(区块)
    • 2.2. 行内元素
    • 2.3. 行内-块元素
    • 2.4. 盒类型元素转换dispaly
  • 3. CSS盒元素的浮动float

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;
}

HTML5

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. 块级元素(区块)

  • 能够设置元素尺寸，隔离其他元素功能（有换行功能）的元素
    ,

2.2. 行内元素

  • 不能设置元素尺寸，它只能自适应内容、无法隔离其他元素，其他元素会紧跟其后:,

2.3. 行内-块元素

  • 可以设置元素尺寸，但是无法隔离其他元素

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吗 简述html盒模型 盒模型 html.css教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1274.html

相关文章

  • 前端技术 博客文章、书籍 积累

    摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

    LiangJ 评论0 收藏0

  • 前端技术 博客文章、书籍 积累

    摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

    codercao 评论0 收藏0

  • 前端技术 博客文章、书籍 积累

    摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

    huayeluoliuhen 评论0 收藏0

  • 【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时...

    binta 评论0 收藏0

发表评论

登陆后可评论

0条评论

oujie

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<