1.内联元素和块元素
<doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
</head>
<body>
<!--
块元素和内联元素
div就是一个块元素
所谓的块元素就是会独占一行的元素
p h1 h2 h3.....
div这个标签没有任何语义，就是一个纯粹的块元素
并且不会为它里边的元素设置任何的默认样式
div元素主要用来对页面进行布局
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素的包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了它本身
p元素不可以包含任何其他的块元素
-->
<div style="background-color:red; width:200px;">
我是一个div
</div>
<span style="color:red;">我是一个span</span>
</body>
</html>
2.内联元素的盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color:#bfa;
}
.box1{
width:100px;
height:100px;
background-color:red;
}
.s1{
/*
*内容区、内边距、边框、外边距
*/
/*
*内联元素不能设置width和height
*/
width：100px；
height：100px；
/*
*设置水平内边距，内联元素可以设置水平方向的内边距
*/
padding-left:100px;
padding-right:100px;
/*
*垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
*/
padding-top:50px;
padding-bottom:50px;
/*
*为元素设置边框
*内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
*/
border：1px blue solid;
/*
*水平外边距
*内联元素支持水平方向的外边距
*/
margin-left:100px;
margin-right:100px;
/*
*内联元素不支持垂直外边距
*/
}
.s2{
/*
*为右边的元素设置一个左外边距
*水平方向相邻的外边距不会重叠，而是求和
*/
margin-left:100px;
margin-right:100px;
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>
3.盒子模型内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width:200px;
height:200px;
background-color:#bfa;
/*设置边框*/
border:10px red solid;
/*
*内边距（padding），指的是盒子的内容区与盒子边框之间的距离
*一共有四个方向的内边距，可以通过：
* padding-top
* padding-right
* padding-bottom
* padding-left
* 来设置四个方向的内边距
*内边距会影响盒子的大小，元素的背景会延伸到内边距
* 盒子的大小由内容区，内边距和边框共同决定
* 盒子可见框的宽度=border-left-width +padding-left +width +padding-right +border-right-width
* 可见框的高度=border-top-width +padding-top +height +padding-bottom +border-bottom-width
*/
/*设置上内边距*/
padding-top：100px；
/*
* 使用padding可以同时设置四个边框的样式，规则和border-width一致
*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
4.盒子模型边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
*使用width来设置盒子内容区的宽度
*使用height来设置盒子内容区的高度
*
*/
.box1{
width:100px;
height:100px;
/*设置背景颜色*/
background-color:#bfa；
/*
*为元素设置边框
*要为一个元素设置边框必须指定三个样式
* border-width：边框的宽度
* border-color：边框颜色
* border-style：边框的样式
*/
/*
*设置边框的宽度
*/
border-width：10px；
/*
*使用border-width可以分别指定四个边框的宽度
*如果在border-width指定了四个值
* 则这四个值分别为上右下左，按照顺时针的方向设置的
*如果指定三个值
*则三个值分别设置给上 左右 下
*如果指定两个值
*则两个值分别设置给上下 左右
*如果指定一个值
*则四边全都是该值
*除了border-width，css中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
*/
border-width：10px 20px 30px 40px ;
/*
*border
* 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色，而且没有任何的顺序要求
*border 指定是同时指定，不能分别指定
*
*border-xxx
*/
/*
*
*设置边框的颜色
*/
border-color：red；
/*
*设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
*/
border-style：solid；
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5.盒子模型外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:#bfa;
boder:10px solid red;
/*
* 外边距指的是当前盒子与其他盒子之间的距离
* 他不会影响可见框的大小，而是会影响盒子的位置
* 盒子有四个方向的外边距
* margin-top
* margin-right
* margin-bottom
* margin-left
*由于页面中的元素都是靠左靠上摆放的
*所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变
*而如果是设置右和下外边距会改变其他盒子的位置
*/
/*
*设置box1的上外边距，盒子上边框和其他的盒子的距离
*/
/*margin-top：100px；*/
/*
*外边距也可以指定为一个负值
*如果外边距设置的是负值，则元素会向反方向移动
*/
margin-left：-100px；
/*
*margin还可以设置为auto，auto一般设置给水平方向的margin
* 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
* 垂直方向外边距如果设置为auto，则外边距默认为0
*
*如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值
* 就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
*/
margin-left：auto；
margin-right：auto；
/*
*外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和padding一样
*/
margin ：0 auto；
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
