您的位置：首页 > Web前端 > CSS

HTML学习笔记（4）——CSS块级元素与盒模型

2015-08-09 11:17 656 查看

一、块级元素

<div></div>是个典型的块级元素，可以将其视为一整块进行操作。

1、背景图片

        Background-image : url(imag.jpg)

    背景图片平铺问题：

              可以用background-repeat:reprea-x(x轴平铺)、reprat-y(y轴平铺)、no-repeat(不平铺)。

      使用background-position设置图片的位置

                     常用关键词：top,bottom,left,right和center（常成对出现）

                   也可以用百分比：background-position：50% 50%

   使用关键词的时候第一个值是y轴，第二个值是x轴。使用具体的数值（例如百分比）第一个值是是x轴(水平方向)，第二个值是y轴（垂直方向）。

         背景关联：背景不会随滚动条移动。

                     Background-attachment: fixed

         背景图片的设置也可以用总结的写法，eg:

                     Background:#00ff00(颜色) url(imag.jpg)(图片来源) no-repeat(平铺) fixed(固定) center left(图片偏移)

2、边框

        Border:20px(边框宽度) solid/dashed(实线/虚线) #cccccc(颜色)

3、后代元素长度大于祖辈元素时

        用overflow:

          Visible 默认无处理。

          Hidden 直接将超出的部分隐藏掉。

          Scroll 会隐藏，但可以通过滚动条查看。

          Auto 浏览器显示滚动条。

          Inherit 继承父类的方法。

4、元素性质相互转化

               Display: block;      转换为块级元素

               Display:inline;      转换为内联元素

               Display:inlin-block;   转换为内联对象但作为块级元素呈现

               Display:none;

二、盒模型

每个内容都相当于一个盒子

         内边距：边框和内容之间的距离，通过padding属性设置。

         外边距：边框外围的空白区域，通过margin属性设置

         内边距设置方法：（可分别选择两个，四个，一个关键词对内边距进行分别的调整）

                Padding：上下左右（上右下左）（上下左右）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
#box1{
width:200px;
height:200px;
background:green;
border:1px solid red;
padding-top:20px;
padding-right:30px;
padding-bottom:40px;
padding-left:20px;
margin:10px 20px 30px 40px;
}
body{
border:5px solid blue;
margin:0px;
</style>
</head>
<body>
<div id="box1">
我是一个盒子
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航