欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-20 23:19:35
[TOC] 1. CSS盒模型 元素的尺寸 1.1 元素的尺寸 | 属性 | 值 | 说明 | | | | | | width | auto、长度值或百分比 | 元素的宽度 | | height | auto、长度值或百分比 | 元素的高度 | | min width | auto、长度值或百分比 ......

目录

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