(6)css盒子模型(基础下)
一、理解多个盒子模型之间的相互关系
现在大部分的网页都是很复杂的,原因是一个“给人用的”网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着。
html与DOM的关系
详情了解“DOM” :http://baike.baidu.com/link?url=SeSj8sRDE-JZnTdkIQgh-P2nEMvoYdvis19aXaGJrMVCQCV_r3mA1kJ7vaCam4wpPLAsQ9T3WyhRfbP4Bdi6yrZolr5_bf7sLtTeFOWDMBu
DOM 是 Document Object Model(文档对象模型)的缩写。“一个网页的所有元素组织在一起,就构成一颗DOM树。”
(HTML DOM 节点树)
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:
<html><head><title>DOM树与盒子模型的关系</title></head><body><h1>DOM树</h1> <a href="****">DOM树结构关系</a></body></html>
上图是把一个html文档的内容组织起来,形成了严格的层次结构。
上面所有的节点彼此间都存在关系。
标准文档流(Normal Document Stream),简称:标准流。
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。
HTML文档中的元素可以分为两大类:行内元素和块级元素。
1、行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
比如<span>与</span>、<strong>与</strong>标记
2、块级元素
总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。比如:<div>与</div>标记
3、标准流就是css规定的默认的块级元素和行内元素的排列方式 在用css排版的页面中经常使用到<span>和<div>标记,利用这俩个标记,加上css对其样式的控制,可以很方便地实现各种效果。
<span>标记与<div>标记都是视作为容器标记而被广泛应用在html语言中。
<span>标记与<div>标记的区别在于:
<div>是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等,div包围的元素会自动换行。
而<span>是一个行内元素,在SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
代码: <!doctype html> <html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>div与span的区别</title></head><body><p>div标记自动换行</p><div> 第一章</div><div> 第二章</div><div> 第三章</div><p>span标记同一行</p><span> 第四章</span><span> 第五章</span><span> 第六章</span><hr/><p>div标记自动换行</p><div> <img src="apple.jpg"></div><div> <img src="apple.jpg"></div><div> <img src="apple.jpg"></div><p>span标记同一行</p><span> <img src="apple.jpg"></span><span> <img src="apple.jpg"></span><span> <img src="apple.jpg"></span></body>
效果图:
4、盒子在标准流中的定位原则若想精确地控制盒子的位置,那么必须深入了解margin元素;margin元素是用于调整不同盒子之间的位置关系。
(1)、行内元素之间的水平margin当两个行内元素紧邻时,他们之间的距离是第一个行内元素的margin-right加上第二个行内元素的margin-left。
代码:
<!doctype html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>两个行内元素的margin</title><style type="text/css">span{background-color:red;text-align:center;font-family:Arial,宋体 ;font-size:18px;padding:14px;}span.left{margin-right:25px;background-color:green;}span.right{margin-left:35px;background-color:yellow;} </style></head><body><span class="left">行内元素1</span><span class="right">行内元素2</span></body> </html>
效果图:
(2)、块级元素之间的竖直margin两个元素的之间的距离不是margin-bottom加margin-top的总和,而是两者中的较大者。代码:
<!doctype html> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>两个块级元素之间的竖直margin</title><style type="text/css">div{background-color:red;text-align:left;font-family:Arial,sans-serif ;font-size:12px;padding:10px;}</style></head><body><div style="margin-bottom:40px;">第一个块级元素</div><div style="margin-top:20px;">第二个块元素</div></body> </html>
效果图:
(3)、嵌套盒子之间的margin
当一个<div>块包含在另一个<div>块中时,便形成了典型的父子关系。其中儿子块的margin将以父块的内容为参考。 在标准流中,一个块级元素的盒子水平方向的宽度会自动延伸,直至上一级盒子的限制位置。 案例:
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>父子块的margin</title> <style type="text/css"> div.father{background-color:red;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:20px;border:1px solid green;} div.son{background-color:gray;margin-top:30px;padding:15px;border:1px dashed #000000; } </style> </head> <body> <div class="father"> <div class="son">子div</div> </div> </body> </html>
效果图:
以上第二节所介绍的是标准流中的盒子排列方式。以上内容部分来自http://www.artech.cn。
转载于:https://www.cnblogs.com/KTV123/p/5516677.html
(6)css盒子模型(基础下)相关推荐
- 前端基础之CSS盒子模型
目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
- Web前端基础知识:CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
- 转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 初识HTML(五)进阶:CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局 浮动流 制作导航栏 如何页面布局 定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
- html 盒子模型添加图片,[HTML/CSS]盒子模型,块级元素和行内元素
目录 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
- CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素 行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 块状元素 ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型 一.什么是CSS? CSS(Cascading Style S ...
- CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包 ...
- html盒模型中border的写法,HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
最新文章
- Android之Pull解析XML
- 生产环境子域降级记录
- SAP CRM Fiori 标准应用 My Account - search by ID 根据 ID 进行搜索的标准功能实现原理
- 老华为可以升级鸿蒙,真良心!五年前老机型都能升级华为鸿蒙
- warning no newline at the end of file
- Python——有关transpose的多维转置的难点
- Hackathons 101-以及为什么要考虑参加
- c++ 实现录音并且指定到文件_2020年的办公装备新选择,搜狗AI录音笔E1深度评测...
- Vue 组件间的传值(通讯)
- ffmpeg和SDL教程 04:创建线程
- MongoDB复制集安全认证
- 飞算(SoFlu)软件机器人——人人都是全栈架构师
- quot 云计算 quot 是计算机,云计算是什么意思?
- HBase2.4.8详细教程(三)Java操作HBase
- 做技术应该持有什么样的工作态度?
- 抖音C#版,自己抓第三方抖音网站
- 打印机服务器端口无显示器,什么是打印机端口?无法找到打印机端口是怎么回事?...
- 编程菜鸟到大鸟--代码积累
- [Matlab]篇----回归分析Matlab命令(regress篇)
- IP网络主动测评系统——X-Vision
热门文章
- 前端加按钮将图片另存为_Windows 10系统如何将自己的照片制作成文件夹图标
- 华北科技学院计算机期末考试,华北科技学院 专业计算机 考试专用
- 安装卡主_智能温室四周玻璃的安装学问还这么多
- 操作系统上机作业--根据莱布尼兹级数计算PI(2)(多线程)
- 《MySQL——使用联合索引、覆盖索引,避免临时表的排序操作》
- LeetCode 15. 三数之和 思考分析(双指针解)
- 数字签名 那些密码技术_密码学中的数字签名
- 操作系统 系统开销比率_操作系统中的最高响应比率下一个(HRRN)调度
- 线性方程组 python_线性方程组的表示 使用Python的线性代数
- linux中将光标与操作系统,linux操作系统基本命令介绍(2)