盒子模型属性，标签的浮动和定位

目录

盒子模型

盒子模型部分属性

边框属性

内边距属性

外边距属性

背景属性

其他属性

布局

布局的常用属性

标签的浮动

清除浮动

标签的浮动属性

浮动实例

标签的定位属性

布局的其他属性

over-flow属性

Z-index标签层叠

网页模块的命名规则

---

盒子模型

三要素：

• 内边距(padding)：内容和边框之间的距离
• 外边距(margin)：和其他盒子之间的距离  
• 边框(border)：边框线

盒子模型部分属性

边框属性

1. 边框样式(border-style)：none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
2. 边框宽度(border-width)：单位是像素值（px）      px，em单位之间的区别
3. 边框颜色(border-color)：rgb(r,g,b)、rgb(r%,g%,b%)、十六进制颜色值、颜色名
4. 综合设计(border)：border，四边宽度 四边样式 四边颜色
5. 圆角(border-radius)：水平半径参数/垂直半径参数
6. 图片边框(border-image)：url（图片路径）

内边距属性

1. 上边距：padding-top   
2. 右边距：padding-right   
3. 下边距：padding-bottom   
4. 左边距：padding-left   
5. 综合设置：padding：top  right  bottom  left

外边距属性

不允许取负值

1. 上边距：margin-top
2. 右边距：margin-right
3. 下边距：margin-bottom
4. 左边距：margin-left
5. 综合设置：margin：top，right，bottom，left

注意：margin：auto；可以实现块级元素的自动居中

          “*”是一个通配选择符，代表所有元素；网页中默认含有内外边距

背景属性

1. background-color：背景颜色(颜色值、十六进制颜色值、rgb函数)   
2. background-image：背景图像(url(图像路径))   
3. background-repeat：背景图像的平铺属性   

   属性值	描述
   repeat	默认值，表示水平方向、垂直方向都平铺
   no-repeat	不平铺
   repeat-x	水平方向平铺
   repeat-y	垂直方向平铺

4. background-position：背景图像的位置   
5. background-attachment：背景图像固定   

 强调：
   盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

   盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

其他属性

1. 颜色透明度：rgba(r,g,b,alpha)  alpha表示透明度取值在0.0~1.0(0表示完全透明，1表示完全不透明、0.5是半透明)   
2. 圆角：border-radius   
3. 阴影：box-shadow
4. 渐变：linear-gradient(第一个颜色，第二个颜色)

我们来看一张官网图

布局

版心：“版心”是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示。

分析页面中的模块

根据上面西安邮电大学官网图可以看到，我们的页面布局主要由头部（header）、导航（nav）、焦点图（banner）、内容（content）、页面底部（footer）五部分组成。

我们可以将每个页面用盒子模型来处理，通过div+css布局来控制网页的各个模块。

布局的常用属性

标签的浮动

浮动：所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

基本语法格式： 选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

清除浮动

原因：由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。

基本语法格式： 选择器{clear:属性值;}   

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

说明：清除左浮动则是清除此div左边的所有浮动，但div左边其他的div仍然是浮动状态，只是不影响此div的位置，在清除之前前面的div下面可以放置其他的东西，清除之后不可以放置。

标签的浮动属性

空标签：在浮动元素之后添加空标签，并对该标签应用“clear:both”样式，可清除浮动。这个空标签可以为

、

、

---

等任何标签。

over-flow：“overflow:hidden;”样式，也可以清除浮动对该元素的影响，该方法弥补了空标签清除浮动的不足。

after伪对象：使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。

浮动实例

分析：制作一个简单的盒子模型，将网页分为几个板块，点击文字可跳转到相应的网站，并将其放在盒子中间位置。

    

    

        

            

                

                    
                    百度
                
                

                    凤凰网
                
            
        
       
        

            
            
        
    
    

实现结果：

标签的定位属性

浮动布局无法对元素位置进行准确的控制，我们可以通过定位属性实现网页中元素的精确定位。

定位模式：position属性    其基本语法格式为：选择器{position:属性值；}

属性值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

边偏移：通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比。

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

强调：任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位：是将元素相对于它在标准文档流中的位置进行定位。（在文档流中的位置仍然保留）

绝对定位：是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。（在文档流中的位置没被保存）

固定定位：是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

布局的其他属性

over-flow属性

可以解决溢出问题，基本语法格式为： 选择器{overflow:属性值;}

属性值	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）
hidden	溢出内容会被修剪，并且被修剪的内容是不可见的
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器会始终显示滚动条

Z-index标签层叠

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如图所示。

 

z-index可以调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0。z-index默认值是0。

网页模块的命名规则

• 避免使用中文字符命名（例如id=“导航栏”）。
• 不能以数字开头命名（例如id=“1nav”）。
• 不能占用关键字（例如id=“h3”）。
• 用最少的字母达到最容易理解的意义。

常用的命名方式：

驼峰式：除了第一个单词外后面的单词首写字母都要大写（例如：partOne）。

帕斯卡：每一个单词之间用“_”连接（例如：content_one）。