【静态页面架构】CSS之盒子模型

fanux 发布于2019-08-29 16:34 / 3575人阅读

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

CSS架构 盒子模型；

以内容区(显示文本和图像)

内边距(内容区至边距的距离)

边距(内容区的边界)

外边距(元素的边框之间的距离)

1.边距； border属性；

简写属性用来设置边距的上(top)右(right)下(bottom)左(left)。宽度，颜色和样式

盒子的阴影；

以box-shadow属性设置盒子阴影效果

offset-x表示阴影的水平方向偏移量；
负值为左偏移正值为右偏移

offset-y表示阴影的垂直方向偏移量；
负值为左偏移正值为右偏移

边框圆角；

以border-radius定义来设置边距的圆角；直角，圆角还是椭圆角

边框图像；

以border-image定义来设置在元素的边框上的图像

爱新觉罗

2.内边距； paddying属性；

也属于简写属性用来设置盒子的内边距上，右，下，左

3.外边距；

上外边距和左外边距；
以margin-left设置元素的水平方向的位置
值为正数，当前元素向右移动
值为负数，当前元素向左移动
margin-top设置元素垂直方向的位置
值为正数，当前元素向下移动
值为负数，当前元素向上移动

上外边距和右外边距

以margin-bottom设置下一个元素的位置
值为正数，下一个兄弟元素向下移动
值为负数，下一个兄弟元素向上移动
margin-right设置下一个元素的位置
值为正数，下一个兄弟元素向右移动
值为负数，下一个兄弟元素向左移动

外边距重叠；

以设置两个相邻的元素的外边距，第一个设置下外边距第二个设置上外边距

外边距传递；

以设置两个元素师父子元素，当子元素设置上外边距，该上边距会在父级元素内出现

内容水平居中；

以margin: 0 auto；父级div设置在元素的水平居中

星际战甲

4.盒子模型； 块级元素盒子模型；

可设置宽高，设置高度为其中内容的高度

内块级元素盒子模型；

是不可设置宽和高，元素的大小事其中内容撑起




星际战甲

行内块级元素盒子模型；

不自动换行，可设置宽高；

box-sizing属性；

以box-sizing属性设置盒子模型；
content-box；为默认值为标准盒子模型
设置为内容区；内边距；边框；外边框
border-box；为怪异盒子模型
设置盒子的大小；外边距

        #qq {
            width: 200px;
            height: 200px;
            /*
                默认值，标准盒子模型
                * 实际的宽度 = width + padding-left + padding-right + border-left + border-right
                * 实际的高度 = height + padding-top + padding-bottom + border-top + border-bottom
             */
            box-sizing: content-box;

            border: 10px solid black;
            
            padding: 50px;
            /*设置内边距*/
            margin: 50px;
            /*设置外边距*/
            background-color: lightcoral;
        }
        #hh {
            width: 200px;
            height: 200px;
            /*
                怪异盒子模型
                * 实际宽度 = width
                * 实际高度 = height
             */
            box-sizing: border-box;

            border: 10px solid black;
            
            padding: 50px;
            /*设置内边距*/
            margin: 50px;
            /*设置外边距*/
            background-color: green;
        }

GPU云服务器云服务器盒子模型架构之坑系列服务器架构模型 jsp 设置页面之

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

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

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
css随堂笔记（三）

摘要：随堂笔记三关于背景图片设置背景图片图片的路径背景图片位置方位名词背景位置如果只设置一个方位词，另外一个默认居中如果设置的值是两个方位词，与顺序无关数值背景位置如果设置的值是数字一个值得时候，表示水平方向的位移，垂直方向默认居中两个值得Css随堂笔记（三） 1 关于背景图片 A 设置背景图片：background-image：url(图片的路径)； B 背景图片位置： backgrou...

focusj 2019-04-23 13:26 评论0 收藏0
《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0