前端笔记 | CSS盒子模型
CSS盒子模型
- 一、盒子模型
- 1.1 网页布局的本质
- 1.2 盒子模型的组成
- 1.3 边框border
- 1.4 内边距padding
- 1.5 外边距margin
- 1.6 清除内外边距
- 二、特殊样式
- 2.1 圆角边框
- 2.2 盒子阴影
- 2.3 文字阴影
一、盒子模型
网页布局学习有三大核心,盒子模型,浮动和定位,学习盒子模型可以帮助我们很好的布局页面。
1.1 网页布局的本质
网页布局过程:
- 先准备好相关的网页元素,网页元素基本都是盒子Box
- 利用CSS设置盒子样式,然后摆放到相应位置
- 往盒子里面装内容
因此网页布局的本质:利用CSS摆盒子
1.2 盒子模型的组成
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容
- border边框
- content内容
- padding内边距
- margin外边距
1.3 边框border
boder可以设置元素的边框。边框有三部分组成:边框粗细、边框样式、边框颜色
语法:
border: border-width || border-style || border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式(none默认无|solid实线|dashed虚线|dotted点线) |
border-color | 边框颜色(默认黑色) |
(1)边框的复合写法:(没有顺序)
border: 1px solid red;
(2)边框的分开写法:
border-top: 1px solid red;
(3)表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。(绘制表格时两个单元格的边框重叠在一起,边框宽度会变粗)
语法:
border-collpse: collapse;
- collpse单词是合并的意思
- border-collapse: collapse;表示相邻边框合并在一起
(4)边框会影响盒子大小
边框会额外增加盒子的实际大小,因此我们有两种方案解决:
- 测量盒子大小的时候,不量边框
- 如果测量的时候包含了边框,则需要width/height减去边框宽度
例:
div {width: 200px;height: 200px;background-color: skyblue;border: 10px solid red;
}
1.4 内边距padding
padding属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding简写:
值的个数 | 释义 |
---|---|
padding: 5px; | 1个值,代表上下左右都有5px内边距 |
padding: 5px 10px; | 2个值,代表上下内边距是5px,左右内边距是10px |
padding: 5px 10px 20px; | 3个值,代表上内边距5px,左右内边距10px,下内边距20px |
padding: 5px 10px 20px 30px; | 4个值,上是5px,右是10px,下是20px,左是30px(顺时针) |
padding影响了盒子实际大小
如果盒子已经有了宽度和高度,此时再指定内边框,会增大盒子。即内容不变只能使盒子变大。
解决方案:width/height减去多出来的内边距大小
例:
div {width: 200px;height: 200px;background-color: skyblue;padding: 20px;
}
1.5 外边距margin
margin属性用于设置外边距,即控制盒子和盒子之间的距离
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin的简写方式与padding一致。
(1)外边距的典型应用
margin可以让块级盒子水平居中,但必须满足两个条件:
- 盒子必须指定宽度(width)
- 盒子左右的外边距都设置为auto。
.header { width: 960px; margin: 0 auto; }
以下三种写法都可以:
- margin-left:auto; margin-right:auto;
- margin: auto;
- margin: 0 auto;
行内元素或行内块元素水平居中:给父元素添加 text: align:center 即可。
(2)外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
- 相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是两者之和。取两个值中较大者,这种现象被称为相邻块元素垂直外边距的合并。
解决方案:尽量只给一个盒子添加margin值。
- 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加overflow:hidden
1.6 清除内外边距
网页元素很多都带有默认的内外编剧,而且不同浏览器默认的值也不一致。因此我们在布局前,首先要清除网页元素的内外边距。
* {padding: 0;margin: 0;
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。
二、特殊样式
2.1 圆角边框
CSS3中新增了圆角边框杨适,这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角
语法:
border-radius:length;
参数值可以为数值或百分比
border-radius: 50%;
如果是正方形,想要设置为一个圆,把数值修改为高度或宽度的一般即可,或者直接写为50%
同理如果是个矩形,半径设置为高度的一般就成了圆角矩形
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角。跟两个值,分别代表左上右下、右上左下。
圆角边框也可以分开写:如border-top-left-radius
2.2 盒子阴影
CSS3中新增了盒子阴影,可以使用box-shadown属性为盒子添加阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
参数值 | 描述 |
---|---|
h-shadow | 必须。水平阴影的位置,允许负值。 |
v-shadow | 必须。垂直阴影的位置,允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影outset改为内部阴影 |
- 默认是外阴影outset,但是不可以写outset,否则会使阴影失效
- 盒子阴影不占用空间,不影响其他盒子的位置
例:
box-shadow: 10px 10px 10px -3px rgba(0, 0, 0, 0.3);
2.3 文字阴影
text-shadow属性可以将阴影应用于文本
语法:
text-shadow: h-shadow v-show blur color;
参数值 | 描述 |
---|---|
h-shadow | 必须。水平阴影的位置,允许负值。 |
v-shadow | 必须。垂直阴影的位置,允许负值。 |
blur | 可选。模糊距离。 |
color | 可选。阴影的颜色。 |
本文参考了黑马程序员pink老师的视频教程
黑马程序员pink老师前端入门视频教程: https://www.bilibili.com/video/BV14J4114768
前端笔记 | CSS盒子模型相关推荐
- 11.前端笔记-CSS盒子模型-外边距margin
1.margin 1.1 margin的语法 盒子与盒子之间的距离 <!DOCTYPE html> <html lang="en"> <head> ...
- 程序媛老张前端Day3———CSS盒子模型
Day4--css盒子模型 网页中的布局可以看成事一个一个盒子组成,排在网页中. 属性: 宽度:width:px.%.auto(%是该元素相对于父级盒子宽度的%) 高度:height:px.%.aut ...
- 从零开始学前端:CSS盒子模型属性 --- 今天你学习了吗?(CSS:Day14)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 前端学习——css盒子模型简单布局
<html><head><title>盒子模型简单布局</title><meta charset="UTF-8"/>&l ...
- 【web前端】CSS盒子模型
居然隔了一个星期了,啊我到底在干嘛. 使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 框架 一.盒子模型 ...
- css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- 咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型 盒子模型 盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影 盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一 ...
- 【Web前端】落地成盒?达咩之——CSS盒子模型及属性
目录 前言 什么是盒子模型 盒子的组成 盒子的大小 盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
- 前端基础之CSS盒子模型
目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
最新文章
- AM3354开发 -- 使用root模式登录Ubuntu18.04
- SLAM中有关占据栅格地图的的表示方法和利用激光传感器构建占据栅格地图的方法
- 【Java多线程】Join的使用、如何使用getState()查看线程的状态
- android r.java 原理,深入理解Android消息处理系统原理
- hive命令出现问题Failed with exception Java.io.IOException:java.lang.IllegalArgumentException: java.NET.URI
- HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面
- oracle olap报告,10g部署oracle olap组件
- spark应用程序的运行架构(简单到复杂)
- 幻灯片:LINQ Inside, Part 1
- hbase jdbc相关
- 挠场的科学丨四、穿梭阴阳的挠场——道家风水、八卦、布阵的解密
- which的用法总结c语言,which的用法总结
- 数据库在开发中的作用
- CMS并发清理阶段为什么是安全的
- Alien Skin ExposureX8专业图像编辑器全新版本
- 前端学习个人心得,总结(个人向)
- word操作——论文中——设置WPS奇偶页页眉内容不同和公式居中,公式的标号靠右、......
- 嵌入式lab3——自行车码表
- 怎么做视频特效?不妨试试抖音特效创作平台
- 关于卫星伪距残差的理解