html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
以苹果手机盒子为例:
盒子的挡板---------->边框:border
填充的泡沫---------->内边距:padding
盒子中装的物体---->内容
盒子与盒子之间的距离----->外边距:margin
CSS盒子模型.png
2.内外边距
内边距属性
padding属性用于设置内边距,也是复合属性,相关设置如下:
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:[上内边距 右内边距 下内边距 左内边距]
还有一种是:
padding: 10px 20px 30px;
padding: 上内边距 左右内边距 下内边距;
外边距属性
margin属性用于设置外边距,也是复合属性,相关设置如下:
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin: [上外边距 右外边距 下外边距 左外边距]
还有一种是:
margin: 0 auto; /*让元素居中 */
为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
内外边距使用单位: px
3.边框
border-style 确定边框的显示样式
None:没有边框
Solid:实线
Dashed:虚线
Dotted:点线
Double:双线
Border-width 边框宽度: 具体的像素值px
Border-color 边框颜色
表单的边框通常改为 0;
border:0 none;
表格的细线边框
table { border-collapse:collapse; }
轮廓 (链接有虚线 和 文本框 有 蓝色边框)
outline-style:none;
边框样式的连写方式:
Border:Border-width border-style Border-color;
4.行高 line-height:
两个基线之间的距离叫做行高。行高是可以继承。
行高.png
百分比:
如果行高使用百度比,那么这个行高的基数为当前标签字体大小。
120%,150%
em:
跟百分比的使用是一样一样的。唯一不同的是它是以倍数出现。
1.5em,1.2em
什么单位也不带:
不带单位和em是一样的。
直接用px作单位,一般会配合设置水平居中
text-align: center;
5.背景
Background-color 设置背景颜色
Background-image 设置背景图片 url(图片的路径)
background-repeat 背景是否平铺:
No-repeat:不平铺
repeat-x:在x轴平铺
repeat-y:在y轴平铺
Background-position 设置背景图片的位置
取值:
top 上center中 bottom下y轴
Left左 center中 right 右 x轴
注意:如果使用上面的关键字x轴和y轴的设置不分先后。
其实还可以设置成具的像素值:
注意:如果使用了具体的像素值那么x,y轴是分先后的,先是x轴,后是y轴。
background-attachment 背景是否固定
Fixed:固定
背景的连写方法:
Background: color image repeat position attachment;
eg:
Background:url(图片的路径) no-repeat top center;
伪类
每一个元素都有自己的伪类(但是不建议使用其它元素的伪类),伪类一般应用在a标签上:
爱恨:LOVE HATE 设置a标签的伪类
我们必须按照一定的顺序来设置,由此就有了爱恨原则: l v h a
a: link 标签的样式
a: visited 访问之后的样式
a: hover 鼠标悬停的样式
a: active 点击时的样式
focus 得到焦点时候的样式
获得焦点.
大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和
CSS相关文章
我是楚简约,感谢您的阅读,
喜欢就点个赞呗,“❤喜欢”,
鼓励又不花钱,你在看,我就继续写~
非简书用户,可以点右上角的三个“...”,然后"在Safari中打开”,就可以点赞咯~
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景相关推荐
- 【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录 一.实现效果 二.基本 HTML 结构 三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
- CSS 盒模型之外边距 margin属性
外边距会在元素外创建额外的空白区域,这个区域不能放置其他元素.因此,大多数情况下,普通流中都是通过外边距来控制元素之间的距离,使元素间出现间隔. 外边距默认是透明的,在这个区域中可以看到父元素的背景. ...
- CSS3day(CSS三大特性,行高的继承,选择器的权重,盒子模型:外边距,边框,内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级 层叠性 继承性 行高的继承 优先级 优先级权重的叠加 盒子模型: 边框(border) 表格的细线边框 边框会影响盒子的实际大小 内边距(paddin ...
- html盒子距离上边距50px,Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
- 2021-04-05 web前端CSS之权重,盒子边框内外边距
视频学习:黑马程序员pink老师 笔记:层叠性 相同选择器给设置相同的样式--如果样式冲突,就近原则 样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
- CSS盒子模型(内容区、边框、内外边距)
一.盒子模型 1.什么是盒子模型.为什么要设置盒子模型,盒子模型具体怎么构成,怎么设置? 把各种元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里所以我们把所有的元素都 ...
- CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠 参考自:某不知名网课 文章目录 盒子模型 外边距 属性设置 块级盒子水平居中 文字居中以及盒子居中 插入图片和背景图片的区别 清除元素的默认内外边距 外边距合并(只存在垂 ...
- html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
- 前端笔记(5)盒子模型,边框,内外边距,盒子模型布局,ps基本操作,列表样式,圆角边框,盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
最新文章
- git 回退版本并强制提交
- js-ajax-,JavaScript实现Ajax
- 使用Cloud SQL的Google App Engine全文搜索
- python接口自动化(三十五)-封装与调用--流程类接口关联(详解)
- hadoop streaming怎么设置key
- python可选参数和可变量参数_解析参数并构建值变量
- android添加工程依赖工程,将项目依赖项添加到Android studio中的另一个项目
- NavisWorks Api 简单使用与Gantt
- 一个开发人员,遇到问题一句“加载出错“就完事了?
- 自动驾驶车辆控制 最终项目作业 实现分析
- CATIA怎么约束快捷键_CATIA快捷键设置详解
- 当python撞上echarts时 add各个图形参数
- 关于ORA-12505, TNS:listener does not currently know of SID given in connect descript的一个解决思路
- 数字IC设计----MOS管与逻辑门
- 计算机网络码片序列计算问题
- 怎么在电脑上玩电击文库零境交错 电击文库零境交错电脑版教程
- 霍尔开关在行车记录仪中起速度检测作用
- amd显卡驱动目录linux,安装ATI Linux显卡驱动
- 2021年全球运动文胸收入大约10690百万美元,预计2028年达到21150百万美元
- JVM 新生代老生代
热门文章
- 打造Win10下完美Linux体验(WSL2+WindowsTerminal+oh-my-zsh),完整图文教程+报错解决方案
- 网络图片异步加载(用到多线程(线程池),java回调机制,图片缓存,图片的动画)
- java webservice 调用超时_调用webservice接口超时
- GT I9082 刷机的过程
- CARLA相机传感器坐标系
- mysql拼音搜索中文_mysql实现用拼音搜索中文的数据库实现
- 笔记本安装linux显卡,为笔记本上的Ubuntu系统安装Nvidia驱动及进行显卡切换的教程...
- STM32delay函数应用与说明
- linux给数据库重命名,Linux学习笔记:mv移动或文件重命名
- 应用计算机测定线性电阻电路图和实物图,中国大学MOOC电子线路设计、测试与实验二网课答案...