CSS——文档流及盒子模型样式设置

猎户李铁柱

已于 2022-06-24 16:29:59 修改

阅读量273

点赞数

分类专栏： html 文章标签： html css java 前端

于 2022-06-24 16:29:00 首次发布

本文链接：https://blog.csdn.net/asdfg2047/article/details/125447908

版权

1、文档流

文档流（normal flow）

网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层

文档流是网页最底层

我们创建的元素默认情况下，都在文档流中

元素分为两种状态：在文档流中，脱离文档流

元素在文档流中的特点

块元素

1:会独占一行

2:块元素的宽度默认是父元素的100%

3:块元素的高度默认是被内容撑开的

内联元素（行内元素）

1:不会独占一行

2:宽度高度默认都是被内容撑开的，不能自己定义宽高

行内块元素

1、可以设置宽高

2、而且不会独占一行

元素脱离文档流后，就不再区分块元素，行内元素，也就不具有元素在文档流中具有的特点

脱离文档流的元素会更加类似行内块元素

2、盒子模型

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

所以我们把所有的元素都想成盒子，矩形 */

/* 盒模型、盒子模型、框模型（box model）*/

内容区 content

内边距 padding

边框 border

外边距 margin

盒子模型的大小跟内容区，内边距边框有关系

跟外边距没有关系

/* 1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列

width 设置内容区的宽度

height 设置内容区的高度

3、盒子边框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      /*
		2:边框（border）元素设置边框
			边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

最低0.47元/天解锁文章

猎户李铁柱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——文档流及盒子模型样式设置

目录1、文档流2、盒子模型3、盒子边框4、盒子内边距5、外边距6、默认样式文档流（normal flow）网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层文档流是网页最底层我们创建的元素默认情况下，都在文档流中元素分为两种状态：在文档流中，脱离文档流元素在文档流中的特点块元素 1:会独占一行 2:块元素
复制链接

扫一扫