李洪强和你一起学习前端之(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 ...
随机推荐
- 亲自己主动手从源代码 构建 Groovy 2.3.8 公布包
今天为了学习 怎样使用 Groovy 写 Groovy 的測试代码, 所以到 http://groovy.codehaus.org/Download 下载了 Groovy 2.3.8 的源码包. Gr ...
- ConcurrentHashMap并不是绝对线程安全的
import java.util.HashMap; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; publi ...
- 监测CentOS下TCP断线
TCP正常的断开,通信双方(服务端和客户端)都是能知道的.但是非正常的断开,比如直接拔掉了网线,就只能靠如下两种方法,实现短时间内的检测. 一.心跳包机制 心跳包机制,是网游设计中的常用机制.从用户层 ...
- eclipse手动指定启动的jdk版本
在eclipse.ini中添加 -vm D:/wwjDocument/JDK6/jre/bin/client/jvm.dll -vmargs -Dosgi.requiredJavaVersion=1. ...
- git的color configura
git color的配置 Git多颜色输出 Git默认的输出是单一颜色的,不仅不够美观,也不容易阅读.实际上,Git本身就支持用多种颜色来显示其输出的信息,只需在命令行中运行以下命令来修改git的设置 ...
- 解决ListView中Item的子控件与Item点击事件冲突
常常会碰到在ListView中点击当中一个Item.会一并触发其子控件的点击事件.比如Item中的Button.ImageButton等.导致了点击Item中Button以外区域也会触发Button点 ...
- Struts中的常量
以下是Struts中常量的一些经常使用配置,保存下来留作积累吧. <?xml version="1.0" encoding="UTF-8"?> &l ...
- struts2 中请求转发与请求重定向方法
本文转自:http://blog.csdn.net/a327736051/article/details/50240491 一.Chain Result:这个result调用另外的一个action,连 ...
- 测试化工具XCTestCase
layout: post title: "Xcode 7智能测试化工具XCTest学习" subtitle: "Xcode 7智能测试化工具XCTest学习" ...
- php 内存管理
内存是计算机⾮常关键的部件之⼀,是暂时存储程序以及数据的空间,CPU只有有限的寄存器可以⽤于存储计算数据,⽽⼤部分的数据都是存储在内存中的,程序运⾏都是在内存中进⾏的.和CPU计算能⼒⼀样, 内存也是 ...