您的位置：首页 > Web前端 > CSS

李洪强和你一起学习前端之(6)css行高,盒模型,外边距

2017-06-06 09:42 736 查看
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #000000 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #000000; min-height: 21.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #000000 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #0435ff }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #1e9421 }
span.s1 { }
span.s2 { font: 18.0px Menlo }
span.s3 { font: 18.0px Menlo; color: #0435ff }
span.s4 { color: #0435ff }
span.s5 { font: 18.0px "PingFang SC" }
span.s6 { color: #c81b13 }
span.s7 { font: 18.0px "PingFang SC"; color: #000000 }
span.s8 { color: #c42275 }
李洪强和你一起学习前端之(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

行高的单位:

行高单位赋值文字大小行高值
px20px20px20px
em20px20px40px
%120%20px24px
不带单位220px40px
行高跟文字大小没有关系

3em: 3个文字的大小

总结:

当给一个独立的元素设置行高值的时候,除了以px为单位的行高值与文字大小无关,其他都与文字大小有关(与文字大小的积)

盒子嵌套,给父元素设置行高值,子元素的行高问题

行高单位设置行高父文字子文字行高
px20px20px30px20px
em2em20px30px20px
%120%20px30px24px
不带单位220px30px60px
行高可以实现继承

总结:

当父元素设置的行高值除了不带单位的情况下,都是先于父元素的文字大小先相乘,最后的结果,被子元素继承

1.3盒子模型(box)

3.1作用

进行网页布局

3.2网页中盒子的组成

border (边框)

　　border-style 设置边框样式

　　　　solid 边框为实线

　　　　dotted 点线

　　　　dashed 虚线

　　border-width 设置边框宽度

　　border-color 设置边框颜色

padding (内边距)

margin (外边距)

border属性连写的时候,顺序都可以

边框宽度可以不写,边框颜色可以不写

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972; min-height: 23.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606; min-height: 23.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #000000 }
span.s5 { color: #929151 }
span.s6 { color: #060606 }
span.s7 { color: #ff7900 }
span.s8 { color: #3c7400 }
span.s9 { color: #ad5cff }
span.s10 { color: #97a700 }
span.s11 { color: #ff2c73 }
span.s12 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }
<!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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
span.s1 { color: #596972 }
span.s2 { color: #d76019 }
span.s3 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }
<!--//点击汉字改变样式-->

<label for="username">用户名:</label><input type = "text"

class="username" id="username">

制作细线表格

padding内边距

盒子大小计算

边框可以影响盒子大小

内边距也会影响盒子大小

宽度 = 内容宽度 + 左右边框 + 左右内边距

注意: 以后进行页面盒子布局的时候,如果给盒子设置了内边距,对应的

要将内容的宽度或者高度

取消表单边框: blrder : 0 none

快速生成表格:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #596972 }
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:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #000000 }
span.s1 { }
span.s2 { font: 18.0px Menlo }
当两个盒子垂直显示的时候,外边距以设置最大值为准,(外边距合并的第一种情况)

外边距塌陷

给父盒子设置边框

给父盒子设置overflow: hidden

Bfc "格式化上下文"

给父盒子设置了overflow

属性连写

margin: 10 px 上右下左

margin 10 px 20px 上下 10 左右20 px

margin : 10 20 30 上10 下 30 左右 20

margin不会影响盒子大小

表格

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #000000 }
span.s5 { color: #929151 }
span.s6 { color: #3c7400 }
span.s7 { color: #ad5cff }
span.s8 { color: #97a700 }
span.s9 { color: #060606 }
span.s10 { color: #ff7900 }
span.Apple-tab-span { white-space: pre }
<style type="text/css">

table{

width: 300px;

height: 300px;

border: 1px solid red;

/*边框合并*/

border-collapse: collapse;

}

td{

border: 1px solid blue;

}

</style>

内边距:

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #d76019 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #a5b2b9 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606; min-height: 23.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #000000 }
span.s5 { color: #929151 }
span.s6 { color: #3c7400 }
span.s7 { color: #ad5cff }
span.s8 { color: #97a700 }
span.s9 { color: #060606 }
span.s10 { color: #ff7900 }
span.Apple-tab-span { white-space: pre }
<style type="text/css">

.one{

width: 300px;

height: 300px;

border: 1px solid red;

/*上 左 下 右*/

padding: 10px 50px 100px;

}

</style>

盒子大小

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2eafa9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #060606 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #3c7400 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #929151; min-height: 23.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Consolas; color: #2b9edb }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #929151 }
span.s5 { color: #3c7400 }
span.s6 { color: #ad5cff }
span.s7 { color: #97a700 }
span.s8 { color: #060606 }
span.s9 { color: #ff7900 }
span.s10 { color: #000000 }
span.Apple-tab-span { white-space: pre }
<style type="text/css">

div{

width: 300px;

height: 300px;

background-color: red;

border: 1px solid yellow;

padding-left: 10px;

padding-right: 10px;

}

</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航