李洪强和你一起学习前端之(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 ...
随机推荐
- POSIX 线程详解
一种支持内存共享的简捷工具 POSIX(可移植操作系统接口)线程是提高代码响应和性能的有力手段.在本系列中,Daniel Robbins 向您精确地展示在编程中如何使用线程.其中还涉及大量幕后细节,读 ...
- spring boot 环境搭建
1.开发工具 https://spring.io/tools/sts/all 2.demo https://start.spring.io 3.下载maven https://maven.apache ...
- http 请求报文和响应报文
1.请求报文 示例: 2.响应报文 示例:
- CSS3 calc()函数使用
1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...
- sublime Text3 JsFormat
https://github.com/sprinng/JsFormat 下载解压 放到 首选项 --> 浏览插件目录 重启sublime ctrl+shift+p 安装 使用: 右键JsForm ...
- [Python]网络爬虫（五）：urllib2的使用细节与抓站技巧
转自:http://blog.csdn.net/pleasecallmewhy/article/details/8925978 前面说到了urllib2的简单入门,下面整理了一部分urllib2的使用 ...
- cocos2d-x项目101次相遇-安装和环境搭建 －xcode
cocos2d-x 101次相遇 / 文件夹 1 安装和环境搭建 -xcode 2 Scenes . Director, Layers, Sprites 3 建立图片菜单 4 在 ...
- TOMCAT清理
CreateTime--2017年7月10日08:54:00Author:Marydon 如何清理TOMCAT 方式一:通过tomcat的安装目录进行清理 找到TOMCAT的根目录,如图: 实质: ...
- Windows右键菜单设置与应用技巧
http://blog.163.com/lee_honleon/blog/static/555251522008014258896/ 需要修改注册表,挺麻烦的.最好还是把迅雷卸了重装,不会影响什么 ...
- java IO 入门例子
import java.io.File; /** * File类型基本操作 */ /** * @author Administrator * */ public class FileDemo { /* ...