文章目录
一、块级元素盒子模型
1.1 组成
-
content
内容 -
padding
内边距 -
margin
外边距 -
border
边框
1.2 边框
-
border-width
顺时针方向一次设置４条边 -
border-style
边框风格 -
brder-color
边框颜色 -
border-top，border-bottom，border-right，border-left
依次指定边框的上下右左边的属性
1.3 内边距
- padding-top
- paddig-bottom
- padding-right
- padding-left
会在原内容区基础上增添新的区域
1.4 盒子大小
内容区＋内边距＋边框
扫描二维码关注公众号，回复：
13464692 查看本文章
1.5 外边距
当前盒子与其他盒子之间的距离
- 设置左上边距是移动自己，设置右下边距是挤别人
- margin-left: auto
将距离最左边设置为最大值 - margin-right: auto
将距离最右边设置为最大值 - margin-right和margin-left都设置为居中。
则水平居中
1.6 垂直外边距重叠
- 兄弟元素之间的相邻外边距是取垂直方向的最大值
- 父子元素的外边界相邻了，子元素的外边距设置会传给父元素。
1.7 去除浏览器默认样式
*{
margin: 0;
padding: 0;
}
二、内联元素盒子模型
2.1 内敛元素的特性
- 不能设置width和height
- 可以设置水平方向内间距
- 可以设置垂直方向的内边距
不会影响布局 - 可以设置平方向外边距
是求和的方式体现 - 不能设置垂直方向上的外边距
三、
3.1 display
- block
- inline-block
行内块元素 - none
不显示元素，也不占空间
3.2 visibility
- visibile
- hidden
隐藏元素，但是还占空间
3.2 overflow
处理溢出的子元素
- visible
- hidden
- scroll
多出来的部分会增加滚动条，水平，垂直都回加滚动条 - auto
智能添加滚动条
3.3 文档流
当元素的宽度为auto,指定内边距不会影响可见框的大小，而是自动修改宽度，以适应内边距。
- 文档流是一切元素的基础
3.4 float
- 会使元素脱离文档流
- 如果是未浮动的块元素会占据所属的一行，下面的元素不能浮动上去。也即不能浮动到上两级块元素的区域。
- 浮动的元素不会盖住文字
- 块元素脱离文档流，高度和宽度被内容撑开。
- 内联元素脱离文档流会变成块级元素。
3.4 bfc
- 开启方式
overflow:auto/hidden
或者
zoom:1
为了兼容浏览器，两个都写
- 作用
开启bfc的元素可以包含浮动的子元素
父元素的垂直外边距不会和子元素重叠
元素不会被其他浮动的子元素覆盖
3.5 去掉标签的点
ul,li
list-style:none
3.6 clear
清楚a浮动对b产生的影响，需要在b上设置clear:left
clear:both 清楚对他影响最大的
3.7 清除高度塌陷问题
.clear:after{
display:block;
content:"";
clear:both;
}
.clear{
zoom:1;
}
四、定位
4.1 定位
- static
left,padding,margin没用 - relative
相对于元素原来的位置进行定位，不会脱离文档流
不会改变元素的性质 - absolute
会使元素脱离文档流
不设置偏移量，元素位置不变
离他最近的开启了定位的父元素进行定位
使元素提升一个曾层级
内联元素变成块元素
- fixed
固定定位
相对于浏览器进行定位
和absolute差不多
不随着页面的滚动而滚动
4.2 元素的层级
- z-index
未开启定位设置层级不起作用
父元素层级再高，也不会盖住子元素
下边会盖住上面的
4.3 设置元素的透明度
- opacity
取值0~1
IE8以下不支持
- filter:alpha(opacty=50)
4.4 图片背景
- 背景图片大于元素，会从左上角开始显示
- 背景图片小于元素，则图片会平铺
- 同时设置背景颜色和背景图片，则背景颜色会作为背景图片的底色
- background-rrepeat
- backgorund-position：center center
调整背景图片位置
4.5 按钮
- 三张图片整合成一张图片，切换时往左移
- 作用提高了用户的体验
4.6 表格
- tr,td,th
th表头专用 - cospan
横向的合并单元格 - rowspan
纵向的合并表格 - border-spacing
设置边框的距离 - border-collapse
设置边框的合并
4.7 表格分成三部分
- thead
头部 - tbody
表格主体，不写tabody,会默认加上tbody - tfoot
表格尾部
4.8 高度塌陷
一个元素ａ包含元素b,b浮动，则a就会塌陷
解决方法:
a:afer{
content:"";
display:block;
clear:both;
}
4.9 父子元素外边距重叠
移动子元素，父元素跟着一起动
father:befor{
content:"";
display:table;
}
4.10 整合
clearflex:after,clearflex:befor{
content:"";
display:table;
clear:both;
}
4.11 表单
- form
- 下拉表单
<select>
<optgroup label="男明星"></optgroup>
<option> </option>
<option> </option>
* checked
默认属性
- 重置
<input type="reset"></input>
- label标签
<label for="id"></label>
<input id="id"></input>
- fieldset
给表单项分组
五、其他属性
5.1 frameset
引入其他页面，不能有自己的东西
5.2 hack属性
- IE6及一下可以识别
_background-color:yellow
- IE７及一下可以识别
*background-color:yellow