CSS盒子模型(内容区、边框、内外边距)
一、盒子模型
1、什么是盒子模型、为什么要设置盒子模型,盒子模型具体怎么构成,怎么设置?
把各种元素布局到页面,就像想买个桌子,放到家里,要知道桌子的大小,形状,然后才能放到家里所以我们把所有的元素都想成盒子,矩形。
2、盒子模型:就是将页面所有的元素都统一设置为一个个盒子,一个个矩形,在布局时,就不用考虑元素的形状,只需要考虑元素的大小,大大的方便了页面的布局
3、 盒模型、盒子模型、框模型(box model)
快递
内容区(content) 放具体内容 冰箱
内边距(padding) 泡沫
边框 (border) 纸箱子
外边距(margin) 快递离你的距离
影响盒模型大小是:内容区、内边距、边框
外边距不会影响到盒子的大小
二、内容区(content)
内容区:元素中所有的子元素和文本内容都在内容区中排列,默认情况下,设置的width、height就是内容区的大小
div{width: 200px;height: 200px;background-color: #bfa;}
三、边框(border)
1、边框(border)元素 : 设置边框边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部
2、边框三个样式
(1)border-width 设置边框大小
(a)可以跟多个值,值与值之间用空格隔开
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
(b)可以单独设置某一边宽度
border-XXX-width:;
XXX可以是 top(上) right(右) left (左) bottom(下)
(c)有默认值,默认值大小是1-3px
(2)border-style 设置边框的样式
(a)可选值:
solid 实线
double 双线
dotted 圆点虚线
dashed 虚线
(b)可以单独设置某一边的样式
border-XXX-style: ;
XXX可以是 top(上) right(右) left (左) bottom(下)
(c)没有默认样式,设置边框必须要设置
(3)border-color 设置边框的颜色
(a)可以放多个颜色值 四个,三个,两个,一个
规则跟border-width是一样的
(b)可以单独设置某一边颜色
border-XXX-color: ;
XXX可以是 top(上) right(右) left (左) bottom(下)
(c)有默认值,默认值是黑色
3、border简写
(1)、 border: 边框的大小 边框的样式 边框的颜色;
三个参数以空格隔开,不分先分后顺序
(2)单独设置某一边边框
border-xxx:边框的大小 边框的样式 边框的颜色;
XXX可以是 top(上) right(右) left (左) bottom(下)
(3):border:none;去除边框
4、用border设置小三角
div {width: 0px;height: 0px;border: 10px solid orange;border-color: transparent transparent green transparent;border-top: none;}
四、内边距(padding)
1、内边距(padding):内容区和边框之间的距离,它会影响到盒子的大小
2、分别给每边设置内边距
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
3、padding简写
padding后可以写多个值
4个值
3个值
2个值
1个值
规则跟之前讲的border-width是一样
五、外边距(maring)
1、外边距 margin:外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,而是会影响到盒子的位置。
2、盒子有四个方向的外边距:
margin-top
上外边距,设置一个正值,元素会向下移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距,设置一个正值,其下边的元素会向下移动,挤别人
margin-left
左外边剧,设置一个正值,元素会向右移动
外边距也可以指定为一个负值,如果外边距设置的是负值,则元素会向反方向移动
(注意)由于页面中的元素都是靠左靠上摆放的,所以当我们设置上和左外边距时,会导致盒子自身的位置发生改变,而如果是设置右和下外边距会改变其他盒子的位置(挤别人)
3、外边距同样可以使用简写属性 margin,可以同时设置四个方向的外边距,规则和padding一样
六、圆角边框(border-radius)
1、border-radius 属性:可以实现任何元素的“圆角”样式
2、border-radius 属性实际上是以下属性的简写属性:分别定义每一个角
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
3、border-radius 属性可以接受一到四个值。规则如下:
四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角)
三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,第三个用于右下角)
两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下角)
一个值 - border-radius: 15px;(该值用于所有四个角,圆角都是一样的)
CSS盒子模型(内容区、边框、内外边距)相关推荐
- CSS边框、边距、轮廓(边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移)——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式 实例 CSS 边框宽度 实例 特定边的宽度 实例 CSS 边框颜色 实例 特定边框的颜色 实例 HEX 值 实例 RGB 值 实例 HSL 值 实 ...
- 2021-04-05 web前端CSS之权重,盒子边框内外边距
视频学习:黑马程序员pink老师 笔记:层叠性 相同选择器给设置相同的样式--如果样式冲突,就近原则 样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
- CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型 网页布局过程: 盒子模型(Box Model)组成 边框(border) 表格的细线边框 边框会影响盒子实际大小 内边距(padding) padding应用-新浪导航 编辑 ...
- 盒子模型(插入图片,外边距,内边距)
盒子模型(Box Model) 所谓盒子模型 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器 盒子模型有元素的内容.边框(border).内边距(padding).和外边 ...
- 【CSS】行高、边框、外边距、内边距
一.行高line-height 1.概念 2.作用 3. 影响行高因素 4. 单位 二.边框border 1.属性 2.联写 3.扩展 三.内边距/内填充(padding) 1.概念 2. 联写 3. ...
- 前端基础之CSS盒子模型
目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
- html盒模型中border的写法,HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手...
很多小伙伴在前端学习的时候,发现盒子模型默认为正方形.如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况---- .box{ width: 100px; height: 100px; backg ...
- html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- css --- [读书笔记] 盒模型(边框、内外边距)
说明 源代码 学习 盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位 目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距 能说出内边距的作用,设置不同数值分别代表 ...
最新文章
- 【SSRS】入门篇(二) -- 建立数据源
- 把本地txt文件导入到内表中
- java 判断日期是同一天_如何检查Java中的两个日期是否在同一天
- 期末考试前的预习,科目:化工设备与反应器(1)
- bios免电池补丁_补丁和权限 处理器漏洞多大这样看
- linux c 进程编程,linux c/c++ 编程之-----进程操作
- 微软宣布开源WPF、WinForms和WinUI
- 黑马程序员--ADO.Net中的知识点和难点
- Python【02】【基础部分】- B
- Java 8 流API(Stream)介绍与示例
- 一个资深系统管理员的O2O实践(引子)
- Jenkins使用经验谈
- Python使用matplotlib可视化环形图
- 【软件测试系列十二】《压力测试报告模板》
- 程序员女朋友都是在哪找的
- java拆箱 装箱 一篇文章就够了
- vs2015调试时无法显示QString变量的值,只显示地址
- jsp80141汽车租赁租车车辆管理系统ssm+mysql
- 为什么Hashtab的大小通常取远离2^n 的素数
- ROS2学习笔记(2)什么是ROS2 nodes