【零基础入门】 css学习笔记（2）盒模型

mrcode 发布于2019-08-30 15:53 / 1677人阅读

摘要：盒模型，盒模型看待元素的一种方式，它将每个元素看作由一个盒子表示。盒子实际占用的大小是左左右右，属性细节一个块元素的默认宽度是，表示它会自动延伸占满可用的空间。表示元素之间的距离，在边框外部。不能对和指定颜色，添加任何装饰。

盒模型 1，盒模型：

CSS看待元素的一种方式，它将每个元素看作由一个盒子表示。

2，五个属性：

从内往外：

width:内容的宽度，而不是盒子的宽度；

height：内容的高度，而不是盒子的高度；

padding：盒子的内边距；

border：盒子的边框；

margin：盒子的外边距

注：在css中设置了宽度width，但浏览器展现出的元素可能超出你的设置，因为元素的边框和内边距会撑开元素。如下图所示。

盒子实际占用的大小是：左border + 左padding + width + 右padding +右border=302px

3，属性细节：

1）一个块元素的默认宽度是”auto”，表示它会自动延伸占满可用的空间。这就是为什么块元素默认是占满浏览器的整个宽度。一般，一个元素的高度也默认是auto，在垂直方向上会延伸内容区，使所有内容都可见。

2） width：指定宽度可通过像素指定具体宽度、或使用百分数（为元素所在容器宽度的一个百分比，容器可以是body div等）

3） padding：可看作元素的一部分。如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding。加padding就要减width。

4） margin：表示元素之间的距离，在边框外部。

5）不能对padding和margin指定颜色，添加任何装饰。但如果元素设置了background-color或backgroud-image，则padding区域会有背景颜色/图像，即border以内的所有区域都有颜色。

6） padding、boder、margin 的属性既可以写综合属性，也可以按方向分开写：

综合写：padding: 10px 20px 30px 40px;
如果是4个数，则是按上、右、下、左四个方向；如果只写3个，2个数，则按这个方向将没写的按对等的算出来。只写一个，表明四个方向的都一样。

应用：用小属性层叠大属性：

padding: 20px;
padding-left: 30px;

4， border属性：

有三要素：宽度，样式，颜色；
1）border: 1px solid red ;如果颜色不写，默认是黑色。三要素顺序可任意；

2）也可以按三个要素拆开来写：
border-width:1px; 也可用关键字指定宽度：thin/medium/thick
border-style:solid;

共有8种边框样式：
solid（实线）、double（双线）、dotted（虚线）、dashed（破折线）、groove、outset、inset、ridge

border-color:red; 与字体颜色设置方式类似

3）border的三个要素可按方向拆开写：

border-top-color:red;
border-bottom-style:dashed;
border-top-width:thick;

4）指定边框为圆角：

border-radius:15px;
border-top-left-radius:0px;
border-radius:50%;

5，background背景图像/颜色：（出现在内容区和内边距下面）

注：background-color和background-image都是不能继承的，想继承要显式地写：inherit。
1、背景色：background-color: orange;
2、背景图片：background-image: url(图片路径);

3、属性细节：
1）默认地，背景图像会平铺，即反复重复来填满整个背景空间，background-repeat 属性可控制这种平铺行为。

background-repeat;   //图像在水平和垂直方向上重复，这是默认行为。
background-repeat: no-repeat;   //图像显示一次，不重复
background-repeat: repeat-x;    //x方向重复；
background-repeat: repeat-y;    //y方向重复；
background-repeat:inherit;      //按父元素的设置来处理

2）浏览器默认把图像放在元素的左上角。background-position 能设置图像的位置
background-position：向右移动量向下移动量;
表示背景的定位，其值可以是关键字，如：center、 left、 right、 top、 bottom，也可以是百分比、像素值（正负都可）。

用关键词描述：

左右： left、 center、right ；
上下： top 、center、bottom
例：background-position: right bottom; 如下图所示。

应用场景：大背景图在页面中居中：
1）大背景图居中: center top

2）通栏banner : center top

用像素描述：
background-position:100px 200px;

像素值可以是负数，负数即向相反方向移动：

应用场景：
“css精灵”，英语css sprite，所以也叫做“css雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
css精灵优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。

3） background-attachment:fixed；背景是否被固定，固定了，则不会被滚动条滚走。

4） background属性也是个综合属性，可将上述所有属性写在一起，与border类似
例：

background: red url(1.jpg) no-repeat 100px 100px fixed;

这些属性不一定要写全，可以省略其中的任意部分。

idc机房托管专线服务零基础入门学习零基础入门深度学习零基础入门学习python 基础学习笔记

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

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

Java入门基础知识点总结（详细篇）

摘要：深入理解数据库管理系统通用知识及数据库的使用与管理。为后台开发打下坚实基础。项目文档，项目规范，需求分析，数据库设计，工程构建，需求评审，配置管理，修复，项目管理等。很多新手在学习java的时候都比较迷茫，不知道从哪里开始学起，这里就给大家整理了一份java开发学习路线，比较系统全面，可参...

shinezejian 2021-09-08 09:36 评论0 收藏0
深度学习

摘要：深度学习在过去的几年里取得了许多惊人的成果，均与息息相关。机器学习进阶笔记之一安装与入门是基于进行研发的第二代人工智能学习系统，被广泛用于语音识别或图像识别等多项机器深度学习领域。零基础入门深度学习长短时记忆网络。多图｜入门必看：万字长文带你轻松了解LSTM全貌作者 | Edwin Chen编译 | AI100第一次接触长短期记忆神经网络（LSTM）时，我惊呆了。原来，LSTM是神...

Vultr 2019-06-26 18:19 评论0 收藏0
深度学习

摘要：深度学习在过去的几年里取得了许多惊人的成果，均与息息相关。机器学习进阶笔记之一安装与入门是基于进行研发的第二代人工智能学习系统，被广泛用于语音识别或图像识别等多项机器深度学习领域。零基础入门深度学习长短时记忆网络。多图｜入门必看：万字长文带你轻松了解LSTM全貌作者 | Edwin Chen编译 | AI100第一次接触长短期记忆神经网络（LSTM）时，我惊呆了。原来，LSTM是神...

cncoder 2019-06-26 19:38 评论0 收藏0
深度学习

摘要：深度学习在过去的几年里取得了许多惊人的成果，均与息息相关。机器学习进阶笔记之一安装与入门是基于进行研发的第二代人工智能学习系统，被广泛用于语音识别或图像识别等多项机器深度学习领域。零基础入门深度学习长短时记忆网络。多图｜入门必看：万字长文带你轻松了解LSTM全貌作者 | Edwin Chen编译 | AI100第一次接触长短期记忆神经网络（LSTM）时，我惊呆了。原来，LSTM是神...

BicycleWarrior 2019-06-26 19:38 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0