目录
1.元素分类
2.盒子布局
3.浮动布局
4.定位布局
1.元素分类
块级元素内联元素独占一行，可以设置宽和高不会自动换行，设置宽和高的时候不起作用div p h 等span a 等
块级元素和内联元素可以通过 display 相互转换
???????????????????????????????????????????? ? ? ? display属性none元素不会被显示block元素将显示为块级元素，前后会带有换行符inline默认。元素将显示为内联元素，前后没有换行符
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素和内联元素</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
display: inline;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
border:1px solid black;
background-color: yellow;
}
a{
width: 200px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<div class="box">这是第一个div</div>
<div class="box1">这是第二个div</div>
<div class="box2">这是第三个div</div>
<a href="#">这是一个a标签</a>
<a href="#">这是一个a标签</a>
<a href="#">这是一个a标签</a>
</body>
</html>
?
?css隐藏元素的方式：①display:none;②width:0 height:0
2.盒子布局
????????????????????????????????????????????????? border边框dotted点状边框（大多数浏览器呈实线）dashed虚线（大多数浏览器呈实线）solid实线double双线，宽度等于 border-width的值
???? ???????????????????????????????????????? padding内边距 padding:10px 5px 15px 20px;
上内边距是 10px右内边距是 5px下内边距是 15px左内边距是 20px padding:10px 5px 15px;
上内边距是 10px右内边距和左内边距是 5px下内边距是 15px padding:10px 5px;
上内边距和下内边距是 10px右内边距和左内边距是 5px padding:10px; 所有 4 个内边距都是 10px
????????????????????????????????????????????????margin外边距用法和padding类似px%
<html>
<head>
<style type="text/css">
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
3.浮动布局
??????????????????????????????????????????????? float浮动left向左浮动right向右浮动none不浮动
???????????????????????????????????????????? clear清除浮动left左侧不允许浮动元素。right右侧不允许浮动元素。both左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>
</html>
4.定位布局
????????????????????????????????????????????????position定位absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。需注意绝对定位和相对定位的区别
<html>
<head>
<style type="text/css">
h2.one
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="one">标题</h2>
</body>
</html>
?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。
|
标签： #CSS布局 #p #H #等span #a #等块级元素和内联元素可以通过 #display
