CSS 之盒子模型——边框、内边距、外边距
使用width来设置盒子内容区的宽度
使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值
则四个值会分别设置给上、右、下、左,按照顺时针的方向设置的
如果指定三个值
则三个值会分别设置给上、左右、下
如果指定两个值
则两个值会分别设置给上下、左右
如果指定一个值,则四边全都是该值
除了border-width,CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
* 设置边框的颜色
* 和宽度一样,color也提供四个方向的样式,可以分别指定颜色
例如:border-color: red;
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
/*border-color: red yellow;*/
格式和边框设置颜色相同.
* 设置边框的样式
* 可选值:
* none,默认值,没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
*
* style也可以分别指定四个边的边框样式,规则和width一致,同时它也提供border-xxx-style四个样式,来分别设置四个边
设置边框
大部分的浏览器中,边框的宽度和颜色都是有默认值,而边框的样式默认值都是none
*/
/* border-width: 10px;
border-color: red;
border-style: solid; */
/*
border
- 边框的简写样式,通过它可以同时设置四个边框的样式,宽度,颜色
- 而且没有任何的顺序要求
- border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式,规则和border一样,只不过它只对一个边生效
*/
/*border: red solid 10px;*/
/*border-left: red solid 10px;*/
内边距:
内边距(padding),指的是盒子的内容区与盒子边框之间的距离,一共有四个方向:
padding-top
padding-right
padding-bottom
padding-left
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
*/
/*设置上内边距*/
/*padding-top: 100px;*/
/*设置右内边距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;*/
/*
使用padding可以同时设置四个边框的样式,规则和border-width一致
*/
/*padding: 100px;*/
/*padding: 100px 200px;*/
/*padding: 100px 200px 300px;*/
外边距:
外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置
盒子有四个方向的外边距:
margin-top
margin-right
margin-bottom
margin-left
由于页面中的元素都是靠左靠上摆放的,所以注意当我们设置上和左外边距时,会导致盒子自身的位置发生改变,而如果是设置右和下外边距会改变其他盒子的位置
*/
/*设置上外边距,即盒子的上边框与其他盒子的距离*/
/*margin-top: 100px;*/
/*左外边距*/
/*margin-left: 100px;*/
/*设置右和下外边距*/
/*margin-right: 100px;
margin-bottom: 100px;*/
/*
外边距也可以指定为一个负值,如果外边距设置的是负值,则元素会向反方向移动
*/
/*margin-left: -100px;
margin-top: -100px;
margin-bottom: -100px;*/
/*margin-bottom: -100px;*/
/*
margin还可以设置为auto,auto一般只设置给水平方向的margin
如果只指定,左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto,则外边距默认就是0
如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中
所以我们经常将左右外边距设置为auto,以使子元素在父元素中水平居中
*/
/*margin-left: auto;
margin-right: auto;*/
/*margin-top: auto;*/
/*
外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,规则和padding一样
*/
/*margin: 10px 20px 30px 40px;*/
为上边的元素设置一个下外边距:margin-bottom: 100px;
为下边的元素设置一个上外边距:margin-top: 100px;
垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素
.box3{
width: 200px;
height: 100px;
background-color: yellow;
/*为box3设置一个上边框*/
/*border-top: 1px red solid;*/
/*padding-top: 1px;*/
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*为子元素设置一个上外边距,使子元素的位置下移*/
/*margin-top: 100px;*/
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
格式:
*{
margin: 0;
padding: 0;
}
作者:啊烟雨
链接:https://www.jianshu.com/p/8970807d2a84
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
CSS 之盒子模型——边框、内边距、外边距相关推荐
- Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- css --- [读书笔记] 盒模型(边框、内外边距)
说明 源代码 学习 盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位 目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距 能说出内边距的作用,设置不同数值分别代表 ...
- 【CSS】盒子模型、内边距、背景设置_03
目录 一.CSS3概述 二.CSS的语法规范 三.基础选择器 四.尺寸和边框 五.盒子模型 4.内边距padding 5.margin和padding的使用场合 六.背景 1.背景颜色 2.背景图片 ...
- 盒子模型、div盒子、边框粗细、外边距
1.盒子模型 概念:盒子模型是由margin + border + padding +网页元素(content)组成 图示: 最简单的盒子: <style> ul{ border: 1px ...
- css中 盒模型的属性包括(),css的盒子模型属性有哪些?css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
- Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- 前端笔记(5)盒子模型,边框,内外边距,盒子模型布局,ps基本操作,列表样式,圆角边框,盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
- 【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
文章目录 一.内边距 1.概念 2.内边距设置语法 3.内边距设置效果 二.内边距代码示例 1.不设置边距的示例 2.设置边距的示例 一.内边距 1.概念 内边距 是 盒子 的 边框 与 内容 之间的 ...
最新文章
- linux c warning 'XXX' declared 'static' but never defined解决方法
- epoch,iteration,batch,batch_size
- Vs2010与VC的区别
- Spring集成Shiro框架实战
- 遭遇棘手 交接_Librosa的城市声音分类-棘手的交叉验证
- win10下装黑苹果双系统_win10远程双系统重装电脑维修7黑苹果笔记本安装做虚拟机服务mac8...
- 【QMIX】一种基于Value-Based多智能体算法
- Korney Korneevich and XOR(CF750F1/F2)
- Docker自动构建开发测试平台
- 微信小程序 获取cookie 以及设置 cookie
- 加密软件漏洞测试,加密软件漏洞评测系统
- Keil5在线调试汇总及基本操作教程
- 希尔密码C语言源代码,希尔密码加密解密(示例代码)
- android手机微信收藏功能实现,微信小程序实现收藏功能
- asp.net web压力测试
- 《大数据》第七章 聚类 K-means算法 BFR算法 CURE算法
- 字符编码的故事(ASCII ISO GBK GB2312 UTF-8)
- typescript77-在CRA创建支持ts的项目
- .netCore在Linux容器上的发布
- 怎么在Visio里编辑公式
热门文章
- 不欠费销号也要缴保证金有么有 青海移动霸王条款 青海移动开户容易销户难,情何以堪啊...
- Android Studio 教程:入门开发第一个程序,附超全教程文档
- 马斯克:如果 Twitter 被苹果 App Store 下架,那我打算造手机!
- 地球35处神秘魅力之地:中国有两处
- 现代图形学入门需要掌握的全部数学知识总结
- 海康威视 2024届实习生 应用软件开发工程师 Java 在线笔试
- ByteBuffer.allocate()与ByteBuffer.allocateDirect()方法的区别。
- WPS Office AI实战:智能表格化身智能助理
- STM32项目总结及代码中delay函数需慎用
- python基于selenium实现自动删除qq空间留言板