前端开发学习笔记–CSS 盒模型

发布于 2018-04-16  126 次阅读


CSS 盒模型可以给元素设置元素的尺寸大小

例:

p {
   width: 100px;
   height: 50px;
}
//释:设置元素的固定尺寸
p {
   min-width: 1px;
   min-height: 10px;
   max-width: 100px;
   max-height: 100px;
}
//释:因动态影响元素尺寸大小,所以可以用这组代码限制最大和最小尺寸
#a {
    background: red;
    width: 50px;
    height: 50px;
}
#b {
   background: gray;
   width: 50%;
   height: 50%;
}
<div id="a">
<div id="b">我是盒模型</div>
</div>
//释:百分比相对于父元素长度来衡定子元素的尺寸大小
p {
   width: auto;
   height: auto;
}
//释:auto 是默认值,width 在 auto 下是 100%的值;height 在 auto 下是自适应。

CSS 盒模型可以设置元素内部边缘填充空白的大小,即内边距

例:

p {
   padding-top: 10px;
   padding-bottom: 20px;
   padding-left: 30px;
   padding-right: 40px;
}
//释,即上内边距 10px、右内边距 20px、下内边距 30px、左内边距 40px

也可简写形式
p {
   padding: 10px;
}
//释上下左右内边距均 10px

CSS 盒模型可以设置元素外部边缘填充空白的大小,即外边距

例:

p{
  margin-top: 10px;
  margin-bottom: 200px;
  margin-left: 30px;
  margin-right: 40px;
}
//释,即上外边距 10px、右外边距 20px、下外边距 30px、左外边距 40px

也可简写形式
p {
  margin: 10px;
}
//释上下左右外边距均 10px

overflow 控制元素的溢出

例:

p {
   overflow: auto;
}
//释,设置溢出值,即有溢出成滚动条,无溢出则不显示滚动条;visible 为默认值

overflow-x 表设置水平方向的溢出

overflow-y 表设置垂直方向的溢出

属性值:

hidden 表有溢出的内容,直接剪掉

scroll 表是否溢出,都会出现滚动条,收浏览器影响显示效果

visible 表默认值,不管是否溢出,都显示内容,既不裁剪也不出现滚动条,即超出元素范围仍显示

使用 display 属性更改元素本身盒类型,元素盒模型类型如下:

1:行内元素即不能设置元素尺寸,只能自适应内容、无法隔离其他元素,其它元素紧跟其后。如:<span>、<b>等文本元素。

2:块级元素即能够设置元素尺寸、隔离其他元素功能的元素。比如:<div>、<p>等文档元素。

3:行内块元素,可以设置元素尺寸,但无法隔离其他元素的元素。比如<img>

display 属性值常见有如下几种:

例:

span {
      display: block;
}
//将行内元素转成块级元素
div {
     display: inline;
}
//将块级元素转换成行内元素
div {
     display: inline-block;
}
//将块级元素转化成行内-块元素
div {
     display: none;
}
//将元素隐藏且不占位

使用 visibility 属性可以使元素的可见性,可以配合 JavaScript 来实现

visibility 有三个属性,①visible 默认值,元素在页面上可见;②hidden 元素不可见,会占据空间;③collapse 元素不可见,隐藏表格的行与列,如果不是表格,则和 hidden 一样。

例:

div {
     visibility: hidden;
}
//设置元素隐藏,但占位

使用 float 属性建立盒子的浮动方向

float 属性有三个属性值,即①left 浮动元素靠左;②right 浮动元素靠右;③none 禁用浮动

例:

#abc {
      background: red;
      float: none;
}
//取消元素的浮动

使用 clear 属性可以处理因一个元素盒子被浮动后,其他元素会自动堆叠处理,导致元素不可见或部分不可见问题

clear 属性有四个属性值,即①none 允许两边均可浮动;②left 左边界不得浮动;③right 右边界不得浮动;④both 两边都不得浮动

例:

#abc {
      background: green;
      clear: left;
}
//左边界不得浮动