常用的长度单位
- px(像素)
- em(相对于当前元素或其父(祖)元素的font-size的倍数)
- rep(相对于根元素的font-size的倍数)
- %(相对其父元素的百分比)
元素的显示模式
块元素(block)
又称:块级元素 特点:
- 在页面中独占一行,不会与任何元素共用一行,是从上到下排列
- 默认宽度:撑满父元素
- 默认高度:由内容撑开
- 可以通过CSS设置宽高
名称:
- 主题结构标签:
<html>,<body> - 排版标签:
<h(n)>,<hr>,<p>,<pre>,<div> - 列表标签:
<ul>,<ol>,<li>,<dl>,<dt>,<dd> - 列表相关标签:
<table>,<tbody>,<thead>,<tfoot>,<tr>,<caption>
行内元素(inline)
又称:内联元素 特点:
- 在页面中不独占一行,一个中不能容纳下的行内元素,会在下一个继续从左到右排列
- 默认宽度:由内容撑开
- 默认高中:由内容撑开
- 无法通过CSS设置宽高
名称:
- 文本标签:“,
<em>,<strong>,<sup></sup>,<del></del> <a>与<label>
行内块元素(line-block)
又称:内联元素(line-block) 特点:
- 在页面中不独占一行,一行不能容纳下的内元素,会在下一行继续从左到右
- 默认宽度:由内容撑开
- 默认高度:由内容撑开
- 可以通过CSS设置
名称:
- 图片:
<img> - 单元格:
<td>,<th> - 表单控件:
<input>,<textarea>,<select>,<button> - 框架标签:
<ifeame>
改变元素显示效果
属性名:display 属性值:
- none:元素会被隐藏
- block:作为块元素显示
- inline:作为内联元素显示
- inline-block:元素作为行内块元素显示
盒子模型的组成
- margin(外边距):盒子与外界的距离
- border(边框):盒子的边框
- padding(内容边):紧贴内容的补白区域 4.content(内容):元素的文本或后代元素都是他的内容
默认宽度
总宽度:父的content-自身的margin 内容区的宽度:父的content-自身的左右margin-自身的左右的border-自身的左右padding
盒子内边距(padding)
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| padding-top | 上内边距离 | 长度 |
| padding-right | 右内边距离 | |
| padding-bottom | 下内边距离 | |
| padding-left | 左内边距离 | |
| padding | 复合属性 | 长度,可以设置4个值 |
padding复合属性使用规则
- 设置1个值,四个边距
- 设置2个值,上下,左右
- 设置3个值,上,左右,下
- 设置4个值,上,右,下,左
注意点
- 值不能为负数
- 行内元素的左右边距没问题,上下边距不能完美设置
- 块级元素,行块级元素,四个方向的内边距都可以完美设置
盒子的边框
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| border-width | 宽度复合了四个方向的边框宽度 | 长度,默认3px |
| border-color | 边框线颜色复合了四个方向的边框颜色 | 颜色,默认为黑色 |
| boder-left | ||
| boder-left-style | ||
| boder-left-width | 分别设置各个方向的边框 | 同上 |
| boder-left-color | ||
| right/top/bottom |
盒子的外边距
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | 长度 |
| margin-right | 右外边距 | 长度 |
| margin-top | 上外边距 | 长度 |
| margin-bottom | 下外边距 | 长度 |
| margin | 复合属性,可以写4个值 | 长度 |
规则
- 子元素的margin,是参考父元素的content计算的
- 行内只能设置左右
- 可以是负值
塌陷问题
- 什么是塌陷 第一个子元素和最后一个子元素的margin会作用在父元素上的
- 如何解决margin塌陷?
- 给父元素设置不为0的padding
- 给父元素设置不为0的border
- 给父元素设置css样式
overflow:hidden
合并问题 什么是margin合并? 上面兄弟元素的下外边界的下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加 如何解决margin塌陷? 无需解决,布局时上下的兄弟元素,只设置一个上下外边距就行
处理内容溢出
| CSS属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 溢出内容处理方式 | visible:显示,默认值hidden:隐藏scroll:显示滚动条,无论是否溢出auto:自动显示滚动条.内容不溢出不显示 |
| overflow-x | 水平方向溢出内容的处理方式 | 同overflow |
| overflow-y | 纵向方向溢出内容的处理方式 | 同overflow |
元素隐藏的两种方式
方式一:visibility属性
默认为show,设置hidden会隐藏,会占位
方式二:display属性
设置none,会隐藏，也不会占位
布局小技巧
- 行内元素,行内块元素都可以被父元素当作文本处理
- 如何让子元素,在父元素中水平居中
- 若子元素为块元素,给父元素加上:
margin:0 auto - 若子元素为行内元素,行内块元素,给父元素加上:
text-align:center
- 若子元素为块元素,给父元素加上:
- 如何让子元素,在父元素中垂直居中
- 若子元素为块元素,给子元素加上:
margin-top,值为:(父元素content-子元素盒子总高)/2 - 若子元素为行内元素,行内块元素
让父元素的
height=line-height,每个子元素都加上:verticall-align:middle补充:若想决定垂直居中,父元素font-size设置为0
- 若子元素为块元素,给子元素加上:
元素之间的空白问题
产生的元素: 行内元素,行内块元素,彼此之间的换行会被浏览器解析为一个空白字符 解决方案:
- 去掉换行和空格
- 给父元素设置
font-size:0,再给需要显示的文字,程序设置字体大小
行内块的幽灵空白元素
产生原因: 行内块元素与文本的基线对齐,而文本的基线与文本最低端是由一定的间距 解决方案
- 给行内块设置
vertical,值不为baseline即可,设置为middel,bottom,top均可 - 若父元素中只有一张图片,设置图片为
display:block - 给父元素设置
font-size:0,如果该元素有文本,则需要单独给该文本设置大小