构建静态页面之 [ 盒子模型 ]

teren 发布于2019-08-29 16:32 / 1994人阅读

摘要：盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式

盒子模型 描述

每一个元素都可以叫做是盒子模型

盒子模型的组成

内容区 - 元素中内容（文本、图片、等等）

内边距 - 内容区到边框的距离

边距 - 内容区的边界

外边距 - 盒子与盒子之间的距离

border属性

表示设置元素的边框

border属性是简写属性,可以分为

border-width - 表示边框的宽度

border-style - 表示边框的样式

border-color - 表示边框的颜色

简写顺序: 边框宽度边框样式边框颜色

border属性也可以按照上、右、下、左四个方向进行划分来分别设置

分别设置边框时，设置的顺序固定不变的：上、右、下、左


    
    边框

border-radius属性

表示设置元素边框的圆角

属性值表示为圆的半径

当属性值等于元素宽度的一半时,会得到一个圆形

也可以写多个属性值,顺序为: 左上角右上角右下角左下角


    
    边框的圆角

padding属性

表示设置元素内边距

内边距可以分上、右、下、左、四个方向进行设置

也可以同时写多个值分别设置，设置的顺序固定不变的：上、右、下、左

内边距无法设置颜色，会显示与背景相同的颜色

设置内边距时会改变元素本身的大小


    
    内边距

margin属性

表示设置外边距

外边距也可以分上、右、下、左、四个方向来分别进行设置

在设置上外边距和左外边距时会影响到元素本身的显示位置

在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置


    
    外边距

外边距的重叠

两个垂直方向排列的相邻元素分别设置上外边距和下外边距时，显示出的效果并不是两个数值相加，而是只显示两个数值中大的

在水平方向排列的相邻元素分别设置左外边距和右外边距时，不会出现外边距重叠的效果


    
    外边距的重叠

外边距的传递

表示在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置

外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现

解决方法

通过为父级设置上内边距来调整子级想要显示的位置

因为：子级的上外边距等于父级的上内边距

注意：在设置内边距时会改变元素本身的显示大小


    
    外边距的传递

元素的水平居中

外边距也可以用来实现元素的水平方向居中

margin: 0 auto; - 固定写法

auto - 表示自适应

外边距水平方向的属性值必须为 auto ，垂直方向的属性值可以根据需求来设置

在设置时，目标元素的宽度不能等于父级元素的宽度


    
    元素水平居中

box-shadow属性

表示设置盒子模型的阴影

属性值有

水平方向偏移量

垂直方向偏移量

模糊度

颜色


    
    盒子模型

box-sizing属性

表示改变盒子模型的类型

content-box属性值

表示标准盒子类型（默认值）

会改变元素的显示大小

最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）

最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）

border-box属性值

表示怪异盒子类型

不会改变元素的显示大小

最终显示宽度 = 宽度

最终显示高度 = 高度


    
    盒子模型的类型

服务器托管私有云盒子模型 jsp 设置页面之 asp单文件页面模型静态页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113814.html

构建静态页面之 [ 盒子模型 ]

摘要：盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区元素中内容文本图片等等内边距内容区到边框的距离边距内容区的边界外边距盒子与盒子之间的距离属性表示设置元素的边框属性是简写属性可以分为表示边框的宽度表示边框的样式盒子模型描述每一个元素都可以叫做是盒子模型盒子模型的组成内容区 - 元素中内容（文本、图片、等等）内边距 - 内容区到边框的距离边距 - 内容区的...

coordinate35 2019-08-02 11:21 评论0 收藏0
【静态页面架构】CSS之盒子模型

摘要：架构盒子模型以内容区显示文本和图像内边距内容区至边距的距离边距内容区的边界外边距元素的边框之间的距离边距属性简写属性用来设置边距的上右下左。 CSS架构盒子模型；以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距； border属性；简写属性用来设置边距的上(top)右(right)下(bottom)左(lef...

fanux 2019-08-29 16:34 评论0 收藏0
CSS学习笔记(六) 元素定位

摘要：方法一为父元素添加方法二同时浮动元素方法三添加非浮动的清除元素定位布局的核心是属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。绝对定位绝对定位会把元素彻底从文档流中拿出来，然后相对于其他元素默认是定位上下文定位。 1.盒模型盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子们都要按照可见版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

DesGemini 2019-08-01 17:15 评论0 收藏0