前端学习之CSS---盒子模型、溢出属性、元素显示类型

盒子模型、溢出属性、元素显示类型

一、盒子模型常见特性和问题

1、内边距

• 在给div设置了padding以后，div的高度和宽度会计算content本身加上padding的大小
• padding : 30px 一个值的时候四周全部设置，两个值先上下后左右，三个值就是上 左右 下，四个值上 右 下 左
• padding:top right bottom left
• 不支持负值
   

2、边框

• 设置了边框以后，div的高度和宽度计算也会加上边框的大小
• border:10px solid red粗细-样式-颜色
• 样式：solid double dashed dotted
• border-width boder-color border-style可分别给上下左右设置不同的值

 

3、外边距

• margin也有四个方向，同padding
• 不计算在div的大小内，属于外边距
• *{margin:0 ; padding:0}
• 支持负值
• 屏幕横向居中marging: 0 auto

外边距特性：

• 兄弟关系：两个盒子垂直外边距取最大值，水平外边距取计算和

• 父子关系：给子盒子加外边距，会体现在父盒子身上

  • 解决方案：
  1. 将子盒子的margin-top改为父盒子的padding-top，需要注意父盒子的高度计算
  2. 给父盒子设置边框，因为边框计算大小，同样需要注意父盒子的高度计算
  3. 给子盒子或父盒子加浮动
  4. overflow:hidden构建一个块级格式化上下文（BFC），不会对外界产生影响，也不会受到外界干扰，推荐

 

---

二、溢出属性—overflow

1、容器的溢出属性overflow

overflow: visible/ hidden/ scroll/ auto/ inherit;
visible : 默认值，溢出内容会显示在元素之外
hidden : 溢出内容隐藏
scroll : 滚动，溢出内容以滚动方式显示（没有溢出时也会显示滚动条）
auto : 如果有溢出会添加滚动条，没有则不显示
inherit : 继承父元素的overflow属性

overflow-x X轴溢出 ; overflow-y Y轴溢出

 

2、空余空间white-space

white-space: normal/ nowrap/ pre/ pre-wrap/ pre-line/ inherit
noramal : 默认值，空白会被浏览器忽略
nowrap : 文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止
pre : 有一个html标签<pre></pre>，预格式化文本-保留空格，Tab，回车
	  在css中设置为pre就可以实现pre标签的作用
pre-wrap : 显示回车，空格，换行，预格式化的文本中如果没有回车等换行符时用这个，进行自动换行
pre-line : 显示回车，不显示空格，换行


单行文本，溢出省略号
white-space : nowrap;
overflow : hidden；
text-overflow : ellipsis;

 

3、溢出省略号显示

text-overflow: clip/ ellipsis;
clip : 默认值，不显示省略号
ellipsis : 显示省略标记；

单行文本溢出显示省略号时需要同时设置以下声明

1. 容器要设置宽度
2. 强制文本在一行显示white-space: nowrap
3. 溢出内容隐藏overflow: hidden
4. 溢出文本显示省略号text-overflow: ellipsis

 

---

三、元素显示类型

1、块元素类型—display : block

默认占满一行，自上而下排列，可以定义宽度和高度，一般作为其他元素的容器，盒子

如 div p ul li ol li dl dt dd h1-h6 等
display : block
display : list-item

p标签内只能放文本，不能放块级元素

 

2、行内元素（内联元素）—display : inline

在一行内横向排列，无法定义宽度和高度，只能根据所包含内容的高度和宽度来确定

如 a b em i span strong 等
padding margin 支持左右边距，不支持上下边距

 

3、行内块元素—display : inline-block

同时具备块元素和行内元素的特点

如 img input 等

 

4、隐藏—display : none

 

---

将行内元素转为块元素的方式：

1. display : block
2. position : absolute
3. float : left