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

复习昨天的知识

1.1css书写位置:

内嵌式写法

外联式写法

实现了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>

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>

邮箱:<input type = "text" class="email">

<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不会影响盒子大小

表格

table{

width: 300px;

height: 300px;

border: 1px solid red;

/*边框合并*/

border-collapse: collapse;

}

td{

border: 1px solid blue;

}

</style>

内边距:

.one{

width: 300px;

height: 300px;

border: 1px solid red;

/*上左下右*/

padding: 10px 50px 100px;

}

</style>

盒子大小

div{

width: 300px;

height: 300px;

background-color: red;

border: 1px solid yellow;

padding-left: 10px;

padding-right: 10px;

}

</style>

李洪强和你一起学习前端之(6)css行高,盒模型,外边距的更多相关文章

李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
李洪强和你一起学习前端之(5)css书写位置优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
李洪强和你一起学习前端之(8)CSS复习
今天是2017年3月24日周五每一天都是余生当中最好的一天,珍惜当下. CSS基础复习 1 复习 1.1Css第一天 css层叠样式表基础选择器标签选择器 p{属性: 值;} 类选择器 .自定义 ...
李洪强和你一起学习前端之(1)Html基础
1 快捷键的认识(虽然我用的是MAC,但是这里以windows快捷键来讲,但是MAC电脑可以把Ctrl换成command试试) Ctrl + c 复制 Ctrl + v 粘贴 Ctrl + a ...
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
李洪强和你一起学习前端之(7)定位盒子 css可见性滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
李洪强和你一起学习前端之(4)HTML5介绍
1.1认识HTML5 html的版本: html4 Xhtml1.0 目前: html5是最高的版本再怎么变化,无非是多了一些标签而已,但是不单单是提供了一些标签比如: 开发网页游戏我们可以开发 ...
（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

随机推荐

Linux系统Domino704升级为901 64位的步骤及注意事项
[背景] 随便系统业务量的不断增大,应用数据库越来越多.与第三方接口的需求越来越多.文档量越来越多,32位的domino对server的利用率已无法满足系统需求的日益增长,低版本号的domino ...
hadoop的namenode无法启动的解决的方法
安装hadoop集群时,启动集群,发现master节点的namenode没有启动成功.这一般都是没有格式格式化namenode的缘故.格式化一下就可以,格式化namenode的命令:在hadoop安装 ...
Cocos2d-x新建模板编译问题总汇
0:关于使用VC模板创建模板时候脚本错误.改动..\cocos2d-x-2.2.2\template\msvc\CCAppWiz.win32\HTML\1033中文件属性中:安全->解除锁定. ...
如何解决Cydia提示错误
删除/etc/apt/sources.list.d该目录下的cydia.list进入var/lib/apt/lists删掉此文件夹下的所有文件,以及partial下的文件,但须保留这个空文件夹.进入/ ...
Design Pattern Bridge 桥设计模式
桥设计模式事实上就是一个简单的has a relationship.就是一个类拥有还有一个类,并使用还有一个类实现须要的功能. 比方遥控器和电视之间能够使用桥设计模式达到能够使用同一个遥控器控制多台电 ...
xml 及其语法
先说一些关于框架,开发中的框架,主要是用反射技术来封装数据. 先指定规范写出xml,然后通过读写流技术封装好一些API用来映射xml文件,方便取得xml中的配置信息.取得xml内容就可以通过取得的内容 ...
openGL 坐标系的互相转换
openGL坐标系包括旋转,平移,缩放被塞在一个矩阵里面. 坐标系之间的转换基础是矩阵的运算. 每个矩阵代表的坐标系,就是是原点坐标系通过旋转.平移,缩放得到的坐标系. 当一个矩阵右乘一个向量或是还有 ...
PHP-VC9/VC6 TS/NTS等版本之间的区别
PHP的更新升级是越来越快了,PHP 5.2 版本已经更新到5.2.17不再更新, 5.3版本的更新到了5.3.8,PHP 5.4马上就要发布,甚至PHP6.0也在开发中.有这么多版本供我们选择,真是 ...
javascript书籍推荐
本文转自:http://blog.csdn.net/yangnihaozan/article/details/48294545 在当下,极多的程序员是通过自学来完成入门以及提升的.对于JavaScri ...
HDUOJ 1099——Lottery
Lottery Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...

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

李洪强和你一起学习前端之(6)css行高,盒模型,外边距的更多相关文章

随机推荐

热门专题