李洪强和你一起学习前端之(6)css行高,盒模型,外边距
复习昨天的知识
1.1css书写位置:
内嵌式写法
外联式写法
<link href = "1.css" rel = "stylesheet>
实现了css与html的分离
行内式写法
1.2Html标签的分类
按照显示模式进行分类
1.2.1块级元素
元素自己独占一行(默认有宽度)
可以设置宽度和高度
子元素的宽度与父元素的宽度一样
1.2.2行内元素
所有元素在一行上显示
不能直接设置宽度和高度
1.2.3行内块元素
所有元素在一行上显示
可以设置宽度和高度
1.3元素模式之间的相互转换
display: block 转化为块级元素
Display: inline-block 转化为行内快元素
Display: inline 转化为行内元素
1.4 伪类的介绍
//这是设置默认状态下的样式
a:link{
}
//超链接访问过后的样式
a:visited{
}
//鼠标移动到超链接上的样式
a:hover{
}
//超链接激活状态下的状态
a:active{
}
//获取焦点的样式
a:focus{
}
1.5背景(background)
1.5.1background-color 设置背景颜色
1.5.2 background-image 设置背景图片
1.5.3 Background-repeat:
repeat
no-repeat
repeat-x
repeat-y
1.5.4 Background-position
具体的方位名称 (center,left,right,top,bottom)
第一个值代表水平方向,第二个值代表垂直方向
1.5.5 Background-attachment
scroll
fixed(背景固定)
新知识介绍
2.1浏览器默认文字大小
行高 = 文字大小 + 2间距
行高 = 两条基线之间的距离(顶线 底线 中线 基线)
行高的作用: 让文字垂直显示
line-height: 100px
行高的单位:
| 行高单位 | 赋值 | 文字大小 | 行高值 |
| px | 20px | 20px | 20px |
| em | 20px | 20px | 40px |
| % | 120% | 20px | 24px |
| 不带单位 | 2 | 20px | 40px |
行高跟文字大小没有关系
3em: 3个文字的大小
总结:
当给一个独立的元素设置行高值的时候,除了以px为单位的行高值与文字大小无关,其他都与文字大小有关(与文字大小的积)
盒子嵌套,给父元素设置行高值,子元素的行高问题
| 行高单位 | 设置行高 | 父文字 | 子文字 | 行高 |
| px | 20px | 20px | 30px | 20px |
| em | 2em | 20px | 30px | 20px |
| % | 120% | 20px | 30px | 24px |
| 不带单位 | 2 | 20px | 30px | 60px |
行高可以实现继承
总结:
当父元素设置的行高值除了不带单位的情况下,都是先于父元素的文字大小先相乘,最后的结果,被子元素继承
1.3盒子模型(box)
3.1作用
进行网页布局
3.2网页中盒子的组成
border (边框)
border-style 设置边框样式
solid 边框为实线
dotted 点线
dashed 虚线
border-width 设置边框宽度
border-color 设置边框颜色
padding (内边距)
margin (外边距)
border属性连写的时候,顺序都可以
边框宽度可以不写,边框颜色可以不写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
input{
/*//去掉边框*/
border: none;
/*去掉轮廓线*/
outline-style: none;
}
.username{
border: 1px dashed red;
background: blue;
}
.username:focus{
/*设置光标点上去的颜色*/
background-color: yellowgreen;
}
.email{
/*设置下划线*/
border-bottom: 1px dotted red;
}
.serch{
border: 1px solid black;
background-image: url("search.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
用户名:<input type = "text" class="username">
<br>
<br>
邮箱:<input type = "text" class="email">
<br>
<br>
搜索:<input type="text" name="" id="" value="" class="serch"/>
</body>
</html>
盒模型
border
border: solid 1px red;
border-top-width:
padding
margin
<!--//点击汉字改变样式-->
<label for="username">用户名:</label><input type = "text"
class="username" id="username">
制作细线表格
padding内边距
盒子大小计算
边框可以影响盒子大小
内边距也会影响盒子大小
宽度 = 内容宽度 + 左右边框 + 左右内边距
注意: 以后进行页面盒子布局的时候,如果给盒子设置了内边距,对应的
要将内容的宽度或者高度
取消表单边框: blrder : 0 none
快速生成表格:
table>tr*3>td*3 + "tab"键
3.4 Padding 内边距离:
内边距是给盒子内部设置的
Padding-left 左边距
Padding-right 右边距
盒模型: 上右下左
Padding: 10px 代表: 上右下左的距离为10px
Padding: 10px, 20px 代表: 上下 10 左右20
Padding: 10px 20px 30px 代表 : 上 10 下 30 左右 20
Padding: 10px 20px,30px,40px 上右下左
3.5盒子大小计算
边框可以影响盒子大小
内边距影响盒子大小
宽度 = 内容的宽度 + 左右边框 + 左右内边距
注意: 以后,进行页面盒子布局的时候,如果给盒子设置了
内边距,对应的要将内容的宽度或者高度,减去相应的值,
3.6盒子大小影响特殊地方
继承的盒子在父盒子,设置Padding值一般不影响宽度
4 外边距:
margin影响的是盒子和盒子之间的距离
Margin-left:
Margin-right:
Margin-top:
Margin-bottom:
当两个盒子垂直显示的时候,外边距以设置最大值为准,(外边距合并的第一种情况)
外边距塌陷
给父盒子设置边框
给父盒子设置overflow: hidden
Bfc "格式化上下文"
给父盒子设置了overflow
属性连写
margin: 10 px 上右下左
margin 10 px 20px 上下 10 左右20 px
margin : 10 20 30 上10 下 30 左右 20
margin不会影响盒子大小
表格
<style type="text/css">
table{
width: 300px;
height: 300px;
border: 1px solid red;
/*边框合并*/
border-collapse: collapse;
}
td{
border: 1px solid blue;
}
</style>
内边距:
<style type="text/css">
.one{
width: 300px;
height: 300px;
border: 1px solid red;
/*上 左 下 右*/
padding: 10px 50px 100px;
}
</style>
盒子大小
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: red;
border: 1px solid yellow;
padding-left: 10px;
padding-right: 10px;
}
</style>