李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(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>
李洪强和你一起学习前端之(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 ...
随机推荐
- 通过Shell命令与JavaAPI读取ElasticSearch数据 (能力工场小马哥)
主要内容: 通过JavaAPI和Shell命令两种方式操作ES集群 集群环境: 两个 1,未配置集群名称的单节点(模拟学习测试环境); 2,两个节点的集群(模拟正常生产环境). JDK8+Elasti ...
- Windows10关闭SearchUI.exe进程的方法
目前唯一的方法只能通过修改Cortana目录的方法来禁止Cortana 路径:C:\Windows\SystemApps\Microsoft.Windows.Cortana_***
- win10开启IE11企业模式
.右击任务栏开始按钮,选择“运行”,打开运行框(或使用组合键Win+R打开运行) .输入gpedit.msc,进入“本地组策略编辑器”(注:该功能不支持Win8/Win8.1核心版.需要Win8/Wi ...
- “error: command 'x86_64-linux-gnu-gcc' failed with exit status 1” in virtualenv
Most of the time these are dependency-issues. Following the stack-trace of the gcc compiler one ca ...
- 新浪微博api出现认证失败问题 （获取code字段值的问题）
出现该提示的原因:`` - 说: (2015-10-30 18:06:14)回调地址不一致,`` - 说: (2015-10-30 18:07:38)请在编辑开发者信息中将网站地址和应用信息--高级信 ...
- OpenWrt中wifidog的配置及各节点页面参数
修改/etc/wifidog.conf, 只需要修改文件的前半部分, 其他都保持默认 GatewayID default GatewayInterface br-lan GatewayAddress ...
- 执行存储过程报错——ora-01031:权限不足
1. 执行DDL报错 在oracle存储过程中,默认是可以直接执行DML和DQL的,但是执行CREATE这种的DDL则需要借助EXECUTE IMMEDIATE ···了,如下备份表语句 --抄表表备 ...
- .NET的多种事务处理
Oracle 的事务操作,有时候想在批量操作数据集合的时候,执行一次失败,即为了避免数据异常,将所有的操作回滚..NET给我们提供了良好的事务操作,Oracle端也有事务操作,可以灵活使用,此处介绍. ...
- 越狱iphone在cydia下插件后出现exit safe mode肿么办小教程
http://bbs.app111.com/thread-318898-1-1.html 从简单的开始..最简单的点击状态栏会弹出来一个窗口,那窗口有三个选择请选择第二个,然后等待它重启,重启后还没消 ...
- MFC异常处理的问题
参考文献:http://technet.microsoft.com/zh-cn/library/t078xe4f(v=vs.85).aspx MFC中异常处理的语法和语义构建在标准C++异常处理语法和 ...