框模型、盒子模型(标准盒模型)
组成:内容(width和height)、内边距、边框、外边距
元素占地宽度:左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
外边距margin
- 单方向外边距设置:
上外边距margin-top:10px;
下外边距margin-bottom:10px;
左外边距margin-left:10px;
右外边距margin-right:10px;
-margin的简写形式:
margin:10px;四个方向10px
margin:10px 20px;第一个值代表上下10、第二个值代表左右20
margin:10px 20px 30px;上10、左右20px、下30px
margin:10px 20px 30px 40px;上10、右20、下30、左40
- 块级元素的水平居中
元素左右方向的margin值为auto即可
- 在使用margin时遇到的问题
1.垂直方向外边距合并,以大值为准(子元素没有浮动)
2.不能设置尺寸的元素,行内元素中b,strong,i,em,u,s,del,span,a垂直方向外边距不生效
3.外边距传递问题
内外嵌套的两个元素,如果给子元素设置margin-top会传递给父元素(父元素没有边框、子元素父元素没有浮动)
内边距padding
- 单方向内边距的设置
上内边距padding-top:10px;
- 四个方向内边距的设置
同margin的使用方法
padding:10px 20px;
- 在使用padding时遇到的问题
1.padding是强制塞一个间距进去,所以尺寸要对应减掉,否则元素会被撑大
2.不能设置尺寸的元素,行内元素中b,strong,i,em,u,s,del,span,a垂直方向内边距不生效(元素的位置不会变化)
溢出属性
overflow:visible默认值,溢出可见、hidden溢出隐藏、scroll滚动条、auto自动添加;控制水平和垂直两个方向 overflow-x:;控制水平方向溢出 overflow-y:;控制垂直方向溢出
元素的显示类型display
***1.display:none;元素消失,空间不再占据
***2.display:block;转为块级元素
3.display:inline;转为行内元素
4.display:inline-block;转为行内块(既具备块级元素能设置宽高的特点,还具备行内元素不换行的特点)
5.display:list-item;
鼠标移入父元素控制子元素效果
父元素:hover 子元素{
样式
}
定位position
1.相对定位position:relative;
- 参考物:元素本身位置
- 是否脱离文档流:否
- 偏移距离:
top自己的顶部距离自己顶部的距离
bottom自己的底部距离里自己底部的距离
left
right
- 用处:实现元素位置的微调,而且保留了元素的初始位置
2.绝对定位position:absolute;
- 参考物:外层具有position属性的元素,如果都没有找到则参考浏览器空白文档区域
- 是否脱离文档流:是
- 偏移距离:
top自己的顶部距离参考物顶部的距离
bottom自己的底部距离参考物底部的距离
left自己的左侧距离参考物左侧的距离
right
- 用处:相互叠加效果,而且元素初始位置空间不再占据
2.1 z-index定位元素的层叠顺序
z-index:4;值越大越靠前,没有单位 默认值为0,可以为负值
3.固定定位position:fixed;
- 参考物:浏览器空白文档区域
- 是否脱离文档流:是
- 偏移距离
- 用处:不随滚动条滚动
4.粘性定位position:sticky;
- 参考物:浏览器空白文档区域的顶部
- 是否脱离文档流:否
- 偏移距离top
- 用处:吸顶效果
透明度
1.background:rgba(255,255,255,0-1之间的小数)
数值越小越透明
没有继承性
2.opacity:0-1之间的小数;
background:rgb();
opacity:0.4;
有继承性
3.问题:IE6/7/8浏览器不支持以上两种透明度写法
filter:alpha(opacity=40);
锚点
1.点击的位置
<a href="#anchor"></a>
<a href="页面路径#anchor"></a>
2.跳转到的位置
<div id="anchor"></div>
3.<a href="#">点我返回顶部</a>
返回页面顶部的空链接
伪元素选择器、伪对象选择器
:first-letter第一个字符
:first-line第一行
:before在元素前面追加文字、图片或者元素
.box:before{
content: "小红:"; 追加文字
}
.box:before{
content: url(img/zuiku_71.png); 追加图片
}
.wrap:after{ 追加元素
content: "";
display: block; 默认元素为行内
width: 100px;
height: 100px;
background: green;
}
:after在元素后面追加文字、图片或者元素
表单元素补充
1.单选按钮
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female" checked>女
- 相同的name,不同的value
- 默认被选中checked="checked"可以简写为一个checked
2.复选框
<input type="checkbox" name="city" value="bj">北京
<input type="checkbox" name="city" value="sh">上海
<input type="checkbox" name="city" value="sz">深圳
- 相同的name,不同的value
- 默认被选中checked="checked"可以简写为一个checked
3.下拉菜单
<select name="age" size="5">
<option value="a">0-12岁</option>
<option value="b">13-18岁</option>
<option value="c">19-30岁</option>
<option value="d">30以上</option>
</select>
- size显示的条数,不规定的话只显示1条
- 默认被选中selected="selected"可以简写为一个selected
4.多行文本域
<textarea name="intro" rows="4" cols="40"></textarea>
- rows显示的行数
- cols一行显示的字符数(一个汉字是两个字符)
更建议使用width和height来更改文本域的尺寸
- resize: none;禁止更改元素的尺寸
5.文件上传
<input type="file">
6.表单字段集
<fieldset>
<legend>百度</legend>
<p>
百度一下你就知道
</p>
</fieldset>
7.关联文本
方法一:
<label>
<input type="checkbox" name="tiaokuan" value="agree"/>我同意此条款
</label>
方法二:
<input type="checkbox" name="tiaokuan" value="agree" id="agree"/>
<label for="agree">我同意此条款</label>
for要和id属性相关联
表格补充
1.表格行分组
thead表头、tbody表主体、tfoot表尾
tr行,th表头单元格(文本加粗并居中)
2.表格标题
<caption></caption>
3.表格边框
td,th{
border: 1px solid #000;
}
4.单元格间距
table{border-spacing:20px;}
5.单元格合并
table{border-collapse:collapse;}
6.表格标题位置
table{caption-side: bottom;}
7.无内容单元格隐藏
td{empty-cells: hide;}
- 生效的前提是单元格不能合并
8.固定表格布局
table{table-layout:fixed;}
不仅要固定每一列的宽度,也要固定表格宽度