CSS（三）

番茄西红柿发布于2019-04-23 13:43 / 2545人阅读

摘要：盒子模型示意图如下把元素叫做盒子，设置对应的样式分别为盒子的边框盒子内的内容和边框之间的间距盒子与盒子之间的间距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

CSS盒子模型

盒子模型解释
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置边框
设置一边的边框，比如顶部边框，可以按如下设置：

border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
  dashed(虚线)  dotted(点线); */

上面三句可以简写成一句：

border-top:10px solid red;

设置其它三个边的方法和上面一样，把上面的top换成left就是设置左边，换成right就是设置右边，换成bottom就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的padding换成margin就是外边距设置方法。

盒子模型的尺寸

按照下面代码制作页面：

通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: ;
    display:table;
}

私有云服务器托管三范式三分钟三要素系列三

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

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

三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

hqman 2019-08-30 15:55 评论0 收藏0
三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

nodejh 2019-08-23 15:10 评论0 收藏0
三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

wmui 2019-08-02 14:13 评论0 收藏0
三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

gggggggbong 2019-04-23 11:50 评论0 收藏0
CSS学习笔记(四) CSS优先级

摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...

高胜山 2019-08-28 18:01 评论0 收藏0
css3 动画（三）animation 简介

摘要：默认，只执行一次动画动画名称，该名称为动画关键帧的名称。默认如何理解表示的是关键帧的名称，那么如何定义关键帧呢使用。语法名称关键帧样式或总结其实也并不复杂，其有个子属性。下一篇动画三源码解析通过阅读动画库的源码，来提高对中属性的认识前言上一篇中，总结了一下 transition 以及 cubic-bezier()。本篇中，将介绍 css3 动画中的更为灵活的动画属性：animati...

itvincent 2019-08-29 16:05 评论0 收藏0