前端重要盒子模型 浮动 定位 块级元素、行元素 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的浮动)或both(同时清除两侧的浮动)

  简单说明:想排在一行就使用浮动(float:left) ,想提行就清除浮动(直接用 clear:both 即可,不用管左右)

3、盒子模型:

  (1)border:边框
    border-top:上边框
    border-left:左边框
    border-right:右边框
    border-bottom:下边框

  (2)padding:内边距(框内文字距离框线的间距)有3种写法

    第一种:上下左右 padding:10px;
    第二种:上下 左右 padding:10px 20px;
    第三种:上 右 下 左 padding:10px 20px 10px 15px;

  (3)margin:外边距(边框对边框外其他内容的间距)有3种写法

    第一种:上下左右 margin:10px;
    第二种:上下 左右 margin:10px 20px;
    第三种:上 右 下 左 margin:10px 20px 10px 15px;

  注意:在设定好宽度时,padding会把盒子撑开,此时可以通过减小width、height的值来保持盒子原大小

  *{ padding,margin:0px;}:默认网页里所有的标签都内外间距为0

4、行内元素的特点:

  (1)默认情况下,不受到height、width属性的影响

  (2)不会占满一行

  常用的行内元素:span(适用于一小节文字的样式设定)、a(链接)

  【备注】 display:block;  将 行内元素 转成 块级元素

5、绝对定位 & 相对定位:

  (1)绝对定位:position:absolute;

    当设置一个块级元素为绝对定位的时候,它就脱离了文档流,浮动就不会对它有影响

    此时对它设置top、left、right、bottom,就是针对窗体的距离

  (2)相对定位:position:relation;

    当设置一个块级元素为相对定位的时候,它没有脱离文档流,浮动对它是有影响的

    此时对它设置top、left、right、bottom,是针对上一级容器的距离

    【注意】当相对定位的前面有块级元素占据位置时,则实际距离=设置距离+占位块级元素宽或高

【请大家多多实践,结合 浮动float、清除浮动 clear、绝对及相对定位】

时间: 2024-10-05 23:46:43

前端重要盒子模型 浮动 定位 块级元素、行元素 7.9的相关文章

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

1.盒子模型:<div>内容</div> padding:内边距 margin:内边距 2.浮动:(css属性) float:left  right   none 清除浮动: clear:left   right   both 例: <style>                      #navigation {                                   font-family:Arial;                         

块级标签(行元素)和内联标签(行内元素)

块级标签 如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签. 块级标签的特点: 占据整行,自带换行效果.除了div以外,一般块级标签都会有内外边距,宽度和高度. 常见的块级标签: <h1-h6></h1-h6>,<p></p>,<div></div> 块元素标签示例: <!DOCTYPE html> <html lang="en"> <head> <meta

学习总结:CSS(一)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

.displayTal { width: 100%; font-size: 13px } .displayTal1 { width: 30%; height: 30px; font-size: 13px; color: #009933 } .displayTal2 { width: 40%; height: 30px; font-size: 13px; color: #009933 } .displayTal3 { width: 30%; height: 30px; font-size: 13p

css 文档流中块级非替换元素水平区域的计算规则(1)

最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的时候,虽然凭感觉能猜出个大概,但是总是有点不是很靠谱.直到最近看到这一本书,觉得总觉得挺好的. 首先要知道,元素除了通过display来指定block.inline.inline-block这一些属性之外,还有一种能在的特性--替换还是非替换. 替换元素:像img.video.canvas等稳定种指定的内容只

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

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

css盒子模型,定位,浮动

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

前端布局---盒子模型

由于公司运营后台页面不是前端人员做的,当初搭建页面结构时考虑的太少,导致现在问题越来越多,于是决定重构,让我们几个前端提出建议,让我从给几个同事(前端+后端+设计)普及布局知识??.想想还是写篇文章的好 布局可以大概理解为规划,在初始搭建页面时,就要根据需求去考虑将来可能出现的问题,从而选择最优的布局方式.布局要遵从从外到内,从整体到局部,搭建完外部架子,指定到部分呢添加内容,内部元素少用固定宽高,尽量使用padding和内容撑开父级元素,保证页面可维护性. 常用的布局方式大概有几种,盒模型(常

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

web前端入门到实战:html块级元素和行级元素的区别和认识

行内.块状元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的:块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列. 3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(li