CSS-盒子模型

简介: CSS-盒子模型

盒子模型、浮动、定位

什么是标准流?

就是标签的排列顺序,在标准流中,

  • 块级元素:div,占一行
  • 行内元素:span,有多少占多少 ,上一个接下一个


问:行内元素能变成块级元素吗?

<body>
    <div class="menu">栏目一</div>
    <span class="menu xian">栏目二</span>
    <span class="menu">栏目三</span>
    <span class="title">这是<span>一</span>条新闻标题</span>
</body>
.xian{
    display:block;
}


效果展示:



盒子模型

每个标签就像一个盒子



  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。
目录
相关文章
|
9天前
|
前端开发
CSS盒子模型
【5月更文挑战第4天】CSS盒子模型。
21 7
|
14天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
15天前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
22天前
|
前端开发
CSS 盒子模型
CSS 盒子模型。
16 4
N..
|
2月前
|
前端开发
CSS盒子模型
CSS盒子模型
N..
14 0
|
7月前
|
前端开发
|
3月前
|
前端开发 JavaScript 容器
CSS学习笔记(一) 盒子模型
CSS学习笔记(一) 盒子模型
|
8月前
|
前端开发
CSS布局:CSS三大特性、盒子模型
CSS布局:CSS三大特性、盒子模型
104 0
|
4月前
|
Web App开发 前端开发 容器
CSS:盒子模型
CSS:盒子模型
64 1
|
4月前
|
前端开发
CSS【盒子模型】
CSS【盒子模型】
59 0