第四课:盒子模型+浮动+定位

1、盒子模型:<div>内容</div>

padding:内边距

margin:内边距

2、浮动:(css属性)

float:left  right   none

清除浮动:

clear:left   right   both

例:

<style>
                      #navigation {
                                   font-family:Arial;
                                        }
                      #navigation u l {
                                   list-style-type:none; 
                                   margin:0px;
                                   padding:0px;
                                            }
                       #navigation li {
                                   float:left;
                                            }
                       #navigation li a:hover{
                                   background-color:#990020; 
                                   color:#ffff00; 
                                             }
               </style>

<body>

<div id="navigation">
                    <ul>
                         <li><a href="#">首页</a></li>
                         <li><a href="#">产品中心</a></li>
                         <li><a href="#">电影</a></li>
                         <li><a href="#">书籍</a></li>
                         <li><a href="#">学习天堂</a></li>
                     </ul>
                 </div>

</body>

3、块级元素:<div>   <ul>   <li>    <p>   <ol>

块级元素:占满整行

4、行内元素:<span>  <a>

行内元素:只受自身内容大小占位置

5、行内元素和块级元素互换:

display:block           行变块

display:inline           块变行

display:inline           具有块和行元素的功能:1、受到高宽的影响   2、不会占满一行

1、padding对行内元素的各种情况是支持的。

2、margin对行内元素只支持左右,不支持上下。

时间: 2024-10-04 17:11:14

第四课:盒子模型+浮动+定位的相关文章

前端重要盒子模型 浮动 定位 块级元素、行元素 7.9

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

css盒子模型,定位,浮动

1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Content(内容) - 盒子的内容,显示文本和图像. 最终元素的总宽度计算公式是这样的: 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 2.定位 Static 定位

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

选择器的优先级问题 1.选择器相同 就近原则 2.选择器不同 行内 > id选择器 > 类选择器 > 标签选择器 除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

CSS(四)盒子模型

本章内容 内边距(padding) 外边距(margin) 盒子宽度计算规则 盒子边框设置(border) 盒子宽度及盒子宽度范围设置 行内与块级元素的转换(display) 盒子模型示意图 . 一.内边距 A.指盒子内容到盒子边框的距离 B.设置四边的距离 padding-top:长度值 | 百分比 padding-left:长度值 | 百分比 padding-right:长度值 | 百分比 padding-bottom:长度值 | 百分比 C.简写 padding:a;   a = 上 下

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

css盒子模型和定位

content padding border margin 可以理解为在商场上看到的电视机. 电视机------content 装电视机的箱子边框有粗细------border 电视机与箱子之间的泡沫-------padding 一台电视机与另一台电视机的距离-----margin content为电视机,padding为电视机与箱子之间的泡沫,border为装电视机的箱子厚度,margin当前这台电视机与其他电视机的距离 position relative        相对   相对原来的位

CSS基础学习十五:盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者. (1)外边距合并 外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外 边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

CSS——盒子模型

一.什么是CSS? CSS(Cascading Style Sheet):层叠样式表是将网页的内容与样式进行分离的一种语言,也就是在aspx或html中设计网页的内容,在CSS中设置网页的样式等. 二.什么是CSS盒子模型? 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性.这些属性和我们日常生活中盒子的属性是一样一样的.内容就是盒子里面装的东西:而填充就是怕盒子里的东西损坏而添加的抗震材料:边框就是

CSS3 —— 盒子模型

盒子模型 主要的属性就5个:width.height.padding.border.margin.如下:  width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距. border:边框. margin:外边距. 标准盒子模型 但IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度 <body>也有 margin 整个网页最大的盒子是<document>,即浏览器.而<body>是&l