CSS:
概念:
层叠样式表或者级联样式表 （Cascading Style Sheets）
CSS作用：
设置网页结构样式（改变html标签样式），通过CSS给html标签设置属性达到改变标签样式。
CSS书写位置介绍:
内嵌式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 内嵌： 将css放到html文件中设置 -->
<style type="text/css">
Css代码
</style>
<title>Document</title>
</head>
<body>
<!-- 概念：层叠样式表或者级联样式表（Cascading Style Sheets）
层叠： CSS的特性
CSS作用：
设置网页结构样式（改变html标签样式），通过CSS给html标签设置属性达到改变标签样式。
CSS书写位置介绍：
内嵌式写法
外链式写法
行内式写法 -->
</body>
</html> 外联式和行内式:
外部创建css文件，然后html引入css.
CSS例子:
div{
font-style::30px;
color: red;
}
.one{
widows: 300px;
height: 300px;
background-color: pink;
} HTML文件例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 使用link标签将外部的css文件引入页面中
注意：
一个页面中可以同时引用多个外部样式表 -->
<link rel="stylesheet" type="text/css" href="17外联式.css">
</head>
<body>
<div>123</div>
<p class="one">456</p>
<!-- 行内式写法:
在标签内部使用style属性设置样式 -->
<p style="color: red">789</p>
</body>
</html> 标签选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
/*html标签名 {属性: 值; }
常用的属性：
color 前景色（文字颜色）
background-color 背景色
font-size 设置文字大小
width 设置宽度
height 设置高度
text-align: left | center | right 内容（文字，图片）居中显示. 注意： 该属性只能给块级元素设置。
text-indet: 设置首行缩进*/
p{
color: red;
font-size: 50px;
background-color:pink;
width: 300px;
height: 300px;
/*px:像素
em:1em=一个文字大小*/
}
</style>
</head>
<body>
<p>段落文字</p>
<div>div中的文字</div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html> 颜色的表示方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#p1{
width: 300px;
height: 300px;
/*直接设置颜色的名称*/
background-color: pink;
}
#p2{
width: 300px;
height: 300px;
/*使用十六进制表示 #0-f*/
background-color: #0f0f0f;
}
#p3{
width: 300px;
height: 300px;
/*使用三原色表示
rgb()
r: red (0-255)
g: green （0-255)
b: blue （0-255)*/
background-color: rgb(234,12,12);
}
#p4{
width: 300px;
height: 300px;
/*半透明效果*/
/*rgba() a 0-1*/
background-color: rgba(0,0,0,.1);
}
#p5{
/*使用opacity实现半透明*/
width: 300px;
height: 300px;
background-color: red;
opacity: .1;
}
#p6{
/*解决ie低版本不支持*/
width: 300px;
height: 300px;
background-color: red;
opacity: .3;
filter:Alpha(opacity=50);
}
</style>
</head>
<body>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<p id="p6"></p>
</body>
</html> 类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*自定义类名 {属性: 值; }*/
/*使用：
通过.自定义类名 定义一个类样式
.p_red {}
标签通过class属性调用类样式
<p class=“p_red”></p>*/
.p1{
color: red;
}
.p2{
color: green;
}
/*一个类样式可以被多个标签同时调用*/
.c1{
color: blue;
}
/*一个标签可以同时调用多个类样式（人的名字）*/
.public{
font-size: 50px;
}
</style>
</head>
<body>
<p class="p1">文字1</p>
<p class="p2">文字2</p>
<div class="c1 public">div1</div>
<div class="c1">div2</div>
<span class="c1 public">span1</span>
<span class="c1">span2</span>
</body>
</html> 类选择器命名规范:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*不能使用纯数字或者以数字开头定义类名*/
/*.1a{
color: red;
}*/
/*不推荐使用汉字定义类名*/
/*.文字颜色{
color: red;
}*/
/*不能使用特殊字符或者以特殊字符开头定义类名*/
/*不推荐使用标签名定义类名*/
</style>
</head>
<body>
<p>见名知其意:</p>
<!-- 头：header
内容:content/container
尾:footer
导航:nav
侧栏:column
页面外围控制整体宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content -->
</body>
</html> Id选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*语法： #自定名称 {属性: 值; }*/
/*使用：
首先通过#自定义名称 定义一个id选择器样式
#p_color { color: red;}
标签通过id属性调用id样式
<p id=”p_color”></p>
id选择器与类选择器的区别:
1.页面中标签的id值必须唯一,不能重复
2.一个标签只能调用一个id样式*/
/*div{
color:red;
}*/
/*类选择器*/
/*.one{
color: red;
}*/
#color{
color:red;
}
#size{
font-size: 50px;
}
</style>
</head>
<body>
<p id="color size">Berts</p>
<!-- <div class="one" id="color">Abby</div>
<div class="two" id="color">Bert</div> -->
</body>
</html> 通配符选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 语法：
* {属性: 值; ...}
特点：该选择器会将页面中所有的标签都选中 -->
<style type="text/css">
/* 样式初始化的时候用 */
* {
color: red;
font-size: 16px;
font-family: 宋体;
}
</style>
</head>
<body>
<div class="one">123</div>
<p class="one">456</p>
<span>789</span>
<h6>标题</h6>
</body>
</html> 复合选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*复合选择器*/
/*标签指定式选择器
语法：
标签名.类名 {属性: 值; }
或者
标签名#id名 {属性: 值; }*/
/*关系:
既...又...*/
.one{
color: red;
}
div.one{
color: green;
}
div#two{
color: yellow;
}
</style>
</head>
<body>
<div class="one">div中的文字1</div>
<!-- <div class="two one">div中的文字2</div> -->
<div id="two">div中的文字2</div>
<p class="one">p中的文字</p>
</body>
</html> 后代选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 注意：
1.后代选择器标签之间必须是嵌套关系。
2.选择器与选择器之间必须使用空格隔开
3.后代选择器只能选中后代元素
语法：
选择器 选择器 {属性: 值;} -->
<style type="text/css">
div p{
color: blue;
}
</style>
</head>
<body>
<div class="one">
<span>文字1</span>
<p>
<span>文字2</span>
</p>
</div>
<p class="two">
没有父元素的p
</p>
</body>
</html> 并集选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 语法：
选择器,选择器 {属性： 值;}
注意：
1. 选择器与选择器之间必须使用逗号隔开
2. 选择器标签之间的结构可以是任意一种关系 -->
<style type="text/css">
div,p,span{
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<div class="one">123</div>
<p class="one">456</p>
<span>789</span>
<h2>Coco</h2>
</body>
</html> 子代选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*子代选择器
语法：选择器>选择器 {属性: 值;}
注意：
1. 子代选择器之间必须是嵌套结构
2. 子代选择器只能选中直接后代元素
3. 后代选择器可以选中所有的后代元素*/
/*后代选择器*/
/*div span{
color: red;
}*/
div>span{
color: red;
}
</style>
</head>
<body>
<div class="one">
<span>直接后代或者子代</span>
<p>
<span>后代元素</span>
</p>
</div>
</body>
</html> 属性选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 属性选择器 -->
<!-- 语法：[属性名] {属性: 值;}
属性选择器其它选择方式：
[属性=值] {}
[属性^=字母] { } 选中以字母开始的标签
[属性$=字母] { } 选中以字母介绍的标签
[属性*=字母] {} 选中包含字母的标签 -->
<style type="text/css">
.one{
color: red;
}
[class][id]{
color: green;
}
[name=user]{
font-size: 50px;
}
</style>
</head>
<body>
<div class="one">123</div>
<div class="one" id="two">456</div>
<div class="one" name="user">789</div>
</body>
</html> 伪类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 伪类选择器
结构伪类
语法：
选择器：first-child {属性: 值;}
选择器：last-child {属性: 值;}
选择器: nth-child(n) {属性: 值;}
选择器:nth-last-child(n) {属性: 值;}
选择器:nth-child(odd) {属性: 值;} 奇数
选择器:nth-child(even) {属性: 值;} 偶数 -->
<style type="text/css">
li:first-child{
color: red;
}
li:last-child{
color: red;
}
/* //选中第二个元素 : n可以取任何值*/
/* li:nth-child(1){
color: blue;
} */
/* li:nth-last-child(2) {
color: pink;
} */
/* 选择中奇数 odd*/
/* li:nth-child(odd) {
color: yellow;
} */
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
</ul>
</body>
</html> font属性介绍:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
/*font-size: ; 文字大小*/
/*文字加粗*/
/*font-weight: 700px;*/
/*加粗*/
/*font-weight: bold;*/
/*正常*/
/*font-weight: 400;*/
/*文字斜体显示*/
/*font-style: normal;*/
/*设置文字字体*/
/*font-family: 微软雅黑;*/
/*文字字体表示方式：
直接设置字体对应的名称 (宋体 黑体)
设置字体对应的英文方式*/
/*font-family: "microsoft yahei"*/
/*设置字体对应的unicode编码*/
font-family: "\5FAE\8F6F\96C5\9ED1";
/*line-height: 设置文字行高*/
}
</style>
</head>
<body>
<p>文字1</p>
<!-- 注意：
1. font-family 一次可以设置多个字体，字体与字体中间用逗号隔开。
2. 设置字体要设置常用的字体 -->
<!-- 浏览器控制台:
escape(宋体)显示Unicode编码 -->
</body>
</html> font属性联写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*p{
font-size: 30px;
font-weight: 700;
font-style: italic;
font-family: 微软雅黑;
/*行高*/
/*line-height: 100px;*/
/*font: font-weight font-style font-size/line-height font-family*/
p{
/*font:700 italic 30px/100px 微软雅黑;*/
font:30px 宋体;
}
/*注意：
1. 属性联写中必须设置font-size 和font-family
2. 在属性联写中font-size 必须放到font-family前面设置
3. 如果font属性联写中的属性都要设置，那么按照图片中的属性去设置。*/
</style>
</head>
<body>
<p>文字</p>
<p>文字</p>
</body>
</html> 元素显示方式
块级元素
代表：
div, p,ul,ol,dl,li,dd,dt,h1...h6....
特点：
☞ 块级元素独占一行显示
☞ 块级元素的默认宽度与其父元素的宽度一致
☞ 块级元素可以设置宽度和高度
行內元素
代表：
span， a , font, strong, i,s....
特点：
☞ 行内元素在一行上显示
☞ 行内元素不能设置宽度和高度
行内块元素
代表：
img, input....
特点：
☞ 元素可以在一行上显示
☞ 元素可以设置宽度和高度
元素模式转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
width: 300px;
height: 300px;
background-color: red;
/*转化为块级元素（以块级元素的方式去显示）*/
/*display: block;*/
/*转化为行内块元素*/
/*display: inline-block;*/
}
div{
background-color: red;
/*转化为行内元素*/
display: inline;
}
</style>
</head>
<body>
<!-- 注意：
1. 可以把行内元素，块级元素，转化为任何一种元素
2. 行内块元素转化行内元素没有效果
3. 一般情况下会将行内元素进行转化 -->
<div>块级元素</div>
<a href="#">行內元素</a>
<a href="#">行内元素</a>
</body>
</html>注意：
1. 可以把行内元素，块级元素，转化为任何一种元素
2. 行内块元素转化行内元素没有效果
3. 一般情况下会将行内元素进行转化
CSS特性
层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 层叠性：在权重相同的情况下，在同一个标签中样式发生冲突，后面定义样式会将前面定义的样式给覆盖掉。
注意：
样式与定义的顺序有关，与调用的顺序无关 -->
<style type="text/css">
.one{
color: red;
}
.two{
color: pink;
}
</style>
</head>
<body>
<div class="one two">文字</div>
</body>
</html>重叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*继承性: 在默认情况下，如果子元素没有设置样式，那么该子元素会受父元素的样式影响。*/
/*注意：
1. CSS继承性只能发生在标签嵌套结构中
2. 宽度和高度不能被继承
可继承的属性：
1. color 可以被继承
2. font-size 可以被继承
3. 与font属性相关的属性都可以被继承
4. 行高（line-height）可以被继承
5. text-align 可以被继承*/
/*继承性中特殊标签：
1： a标签不能直接受父元素中的文字颜色影响
2： 标题标签不能直接受父元素中的文字大小影响*/
div{
color: red;
font-size: 40px;
font-family: "微软雅黑";
font-weight: 700;
background-color: pink;
text-align: center;
width: 300px;
}
</style>
</head>
<body>
<div>
div文字
<p>
段落文字
</p>
</div>
</body>
</html>优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*优先级（权重）
标签选择器< 类选择器< ID选择器 <行内样式 < !Important
10 100 1000 10000 10000+
1.继承的权重为0*/
/*p{
color: green;
}
.one{
color: red;
}*/
/*权重可以叠加*/
div p{
color: green;
}
div.one p{
color: pink;
}
p{
color: red
}
/*总结：
1. 如果通过选择器指向的是同一个标签，如果权重不一样，那么只要考虑优先级。
2. 如果指向是同一标签并且权重一样，直接考虑层叠性。*/
</style>
</head>
<body>
<!-- <div class="one">
<p>文字</p>
</div> -->
<div class="one" id="two">
<p class="two">文字</p>
</div>
</body>
</html>伪类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.one{
color: red;
}
.one{
color: black;
}*/
a{
color: red;
}
/*a:link {属性: 值; } 设置a标签默认的样式
如果给a标签设置样式，推荐使用标签选择器或者其他选择器，不推荐使用a:link {} 方式*/
a:link{
color: red;
text-decoration: none;
}
/*a:visited {属性: 值;} 设置a标签访问过后的样式
注意：
1. :visited {} 该伪类中只能设置与颜色相关的属性。
2.该伪类具有缓存特性*/
a:visited{
color: pink;
}
/*a:hover {属性: 值;} 设置鼠标悬停到a标签上的样式*/
a:hover{
font-size: 50px;
color:blue;
/*显示下划线*/
text-decoration: underline;
}
/*a:active {属性: 值;} 设置a标签激活状态下的样式*/
a:active{
color: pink;
}
/*总结：
1. :hover{} 该伪类可以单独使用
2. 如果以上伪类都要设置需要按照顺序设置
L V H A*/
</style>
</head>
<body>
<a href="#">文字</a>
<!-- <div class="one">文字</div> -->
</body>
</html>目标伪类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*目标伪类
:target {属性: 值;}
注意：
该伪类要配合锚链接使用*/
.left{
width: 300px;
height: 1400px;
background-color: #E7E7E7;
float: left;
}
.right{
width:800px;
background-color: pink;
float: left;
}
#h6:target{
color:red;
}
#h10:target{
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
<ul>
<li><a href="#h2">标题2</a></li>
<li><a href="#h6">标题6</a></li>
<li><a href="#h10">标题10</a></li>
</ul>
</div>
<div class="right">
<h2 id="h2">标题1</h2>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<h2>标题2</h2>
<h2>标题3</h2>
<h2>标题4</h2>
<h2>标题5</h2>
<h2 id="h6">标题6</h2>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<h2>标题7</h2>
<h2>标题8</h2>
<h2>标题9</h2>
<h2 id="h10">标题10</h2>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
<p>baebratyss</p>
</div>
</body>
</html>其他伪类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*空伪类
:empty {属性: 值;}*/
/*div:empty{
width: 100px;
height: 100px;
background-color: red;
}*/
/*排除伪类
:not(选择器) {属性: 值;}*/
/*div:not(.two){
width: 200px;
height: 200px;
background-color: blue;
}*/
/*焦点伪类
input:focus {属性: 值;}*/
input{
background-color: red;
}
input:focus{
background-color: pink;
}
</style>
</head>
<body>
<input type="text">
<!-- <div class="one two">123123</div>
<div class="one">123</div> -->
<!-- <div class="box">123</div>
<div></div> -->
</body>
</html>背景:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*background-color 设置背景颜色
默认值： transparent 透明色*/
/*background-color: red;*/
/*background-image 设置背景图片*/
/*background-image: url("img/2.png");*/
/*background-repeat 背景平铺方式
repeat 默认值
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺*/
/*background-repeat: no-repeat;*/
/*background-position 设置背景图片位置*/
/*background-position: center bottom;*/
/*注意：
1.当背景图片位置设置一个值的时候，第二个默认值是center.
2.当设置背景图片位置出现具体数字，第一个值代表水平方向，第二个字代表垂直方向。*/
/*Background属性联写*/
background: red url(img/2.png) no-repeat right top;
/*注意：
1： 该属性联写中没有个数的限制
2： 该属性中没有顺序的限制*/
}
</style>
</head>
<body>
<div class="box">123</div>
<!-- <div class="box">123</div> -->
</body>
</html>行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*1.行高属于文字的属性
2.行高=文字大小+上间距+下间距 （默认行高18px）
3.行高作用:
1.设置文字垂直方向中有距离。
2.文字垂直居中 （行高=容器的高度）
4.影响行高因素：
1.文字大小可以改变行高
2.文字字体也可以改变行高*/
.box{
background-color: red;
font-family: 微软雅黑;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
</html>行高单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*px, em，百分比, 不带单位
如果给单独一个标签设置行高
px： 行高值就是设置的行高，与文字大小无关
em：行高值=设置的行高*文字大小
百分比： 行高值=设置的行高*文字大小
不带单位： 行高值=设置的行高*文字大小*/
.box{
background-color: red;
font-size: 20px;
/*line-height: 18px;*/
/*line-height: 2em;*/
/*line-height: 200%;*/
line-height: 2;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
</html>行高父容器特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*如果给父元素设置行高，子元素行高特点
父px： 子元素的行高=父元素的行高值。
父em： 子元素行高=父元素行高值*父元素文字大小（先计算后继承）
父百分比： 子元素行高=父元素行高值*父元素文字大小（先计算后继承）
父不带单位： 子元素的行高=父元素的行高*子元素的文字大小（先继承后计算）*/
.box{
background-color: red;
font-size: 30px;
/*line-height: 18px;*/
/*line-height: 2em;*/
/*line-height: 200%;*/
line-height: 2;
}
.one{
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="one">
文字
</div>
</div>
</body>
</html>盒子模型
☞ 作用：
实现网页布局（在网页画盒子）
☞ 组成：
◇ 边框 border
◇ 内边距 padding
盒子中的内容与盒子边框的距离
◇ 外边距 margin
盒子与盒子之间的距离
边框（border）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*设置边框颜色*/
/*border-color: red;*/
/*设置边框宽度*/
/*border-width: 2px;*/
/*设置边框样式*/
/*border-style: none ; 默认没有边框
solid 实线
dotted 点线
dashed 虚线*/
/*border-style: dashed;*/
/*border属性联写*/
/*1.必须设置border-style
2.没有顺序的限制*/
border: 1px solid red;
border-left: 2px dotted green;
border-left-color: pink;
border-left-style: dotted;
border-left-width: 5px;
}
input{
/* 去掉边框 */
border:0 none;
/* 去掉轮廓线 */
outline-style: none;
line-height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box"></div>
<br />
<input type="text" value="123">
</body>
</html>边框合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{
width: 300px;
height: 300px;
}
table,tr,td{
border: 1px solid red;
/* 边框合并 */
/* 注意该属性只适用于表格。 */
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>内边距（padding）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*内边距： 内容与边框之间的距离
注意：
padding值只能移动盒子中的内容,不能移动盒子。
属性联写：
padding: 10px； 上，右，下，左四个方向10px
padding: 10px 20px; 上下10px 左右20px
padding:10px 20px 30px; 上10px 左右20px 下30px
padding:10px 20px 30px 40px; 上10 右 20 下 30 左 40*/
.box{
width: 300px;
height: 300px;
border: 1px solid red;
/*padding-left: 20px;
padding-bottom: 50px;*/
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/2.png">
</div>
</body>
</html>盒子大小计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*盒子大小问题：
边框和内边距可以改变盒子大小。
盒子大小（宽度）=内容的宽度+左右内边距+左右边框*/
.box{
width: 200px;
height: 188px;
background-color: red;
border: 1px solid green;
padding: 5px;
}
/*版心:有固定宽度,并且居中显示的盒子*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>嵌套盒子大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*嵌套盒子padding值对盒子大小的影响
“继承”的盒子，默认不设置宽度的情况下，给子盒子设置padding值在父盒子宽度范围内，不会影响子盒子大小。*/
.box{
width: 400px;
height: 200px;
background-color: green;
}
.one{
height: 100px;
background-color: red;
/*padding-left: 50px;*/
padding-left: 390px;
}
</style>
</head>
<body>
<div class="box">
<div class="one">one中的文字</div>
</div>
</body>
</html>外边距（margin）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*外边距：
盒子与盒子之间的距离。移动盒子。
属性联写：
与内边距一样。
注意：
外边距不会改变盒子大小。*/
div{
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
.one{
background-image: pink;
margin: 50px 50px 50px 50px;
}
</style>
</head>
<body>
<div class="one">div</div>
</body>
</html>外边距特点
由于overflow：hideen 触发了元素的bfc（格式化上下文）
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*特点：
垂直外边距合并 （以最大外边距的值为准）
垂直外边距塌陷
给父元素设置边框
给父元素设overflow：hidden;
由于overflow：hideen 触发了元素的 bfc（格式化上下文）
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
*/
.box{
width: 200px;
/*width: 150px;*/
height: 200px;
background-color: red;
/*padding-left: 50px;*/
overflow: hidden;
}
.one{
width: 50px;
height: 50px;
background-color: pink;
/*margin-left: 50px;*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
</body>
</html>