咸鱼前端—CSS盒子模型
咸鱼前端—CSS盒子模型
- 盒子模型
- 盒子边框（border）
- 圆角边框(CSS3)
- 内边距（padding）
- 外边距（margin）
- 盒子阴影
盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
（图片来源网络，侵删。谢谢）
盒子边框（border）
盒子边框（border）
语法：
border : border-width || border-style || border-color
边框属性—设置边框样式（border-style）
边框样式用于定义页面中边框的风格，常用属性值如下：
| 属性 | 说明 |
|---|---|
| none | 没有边框即忽略所有边框的宽度（默认值） |
| solid | 边框为单实线(最为常用的) |
| dashed | 边框为虚线 |
| dotted | 边框为点线 |
| double | 边框为双实线 |
圆角边框(CSS3)
语法格式：
border-radius: 左上角 右上角 右下角 左下角; | border-radius: 全体；
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
| 属性 | 说明 |
|---|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
注意： 后面跟几个数值表示的意思是不一样的。
| 值的个数 | 表达意思 |
|---|---|
| 1个值 padding | 上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
| 2个值 padding | 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
| 3个值 padding | 上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
| 4个值 padding | 上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
| 属性 | 说明 |
|---|---|
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 上外边距 |
margin:上外边距 右外边距 下外边距 左外边
取值顺序跟内边距相同。
盒子阴影
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 但是不能写 默认 想要内阴影 inset
咸鱼前端—CSS盒子模型相关推荐
- 前端笔记 | CSS盒子模型
CSS盒子模型 一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距 二.特殊样式 2 ...
- 【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录 前言 什么是盒子模型 盒子的组成 盒子的大小 盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
- 前端基础之CSS盒子模型
目录 长度单位 像素 百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型 内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
- Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
- 前端开发面试题—CSS盒子模型
今天分享一下我遇到的一个面试题,是关于CSS盒子模式的问题,简单列举说明一下CSS盒子模型的组成有哪些?
- 程序媛老张前端Day3———CSS盒子模型
Day4--css盒子模型 网页中的布局可以看成事一个一个盒子组成,排在网页中. 属性: 宽度:width:px.%.auto(%是该元素相对于父级盒子宽度的%) 高度:height:px.%.aut ...
- 咸鱼前端—CSS浮动
咸鱼前端-CSS浮动 浮动(float) 浮动特性 布局流程 浮动(float) 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程. 在CSS中,通过float ...
- [HTML/CSS]盒子模型，块级元素和行内元素
目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
- CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型 又称框模型 (Box Model) ,包 ...
最新文章
- 开发日记-20190407
- linux使用遇到的一些小问题
- [BUUCTF-pwn]——bjdctf_2020_babyrop2
- 分布式事务与一致性算法Paxos amp; raft amp; zab
- 安装mysql5 1步骤_Linux系统安装MySQL详细步骤（mysql-5.1等）
- PHP+Mysql+jQuery实现发布微博程序--PHP篇
- PHP微信公众平台源码 支持多账号 仿pigcms 小猪微信 已经修改完毕 完整可用
- 53 - leetcode 1. 两数之和 数据结构map类
- 掌握面试——弹出框的实现
- mysql开发平台_搭建mysql编程平台
- 我对安卓recovery的流程大致总结
- 阿里首席架构师分享的Java工程师职业规划
- php mysql统计去掉重复的,php - Mysql：根据最小数量删除重复记录 - 堆栈内存溢出...
- PHP课程设计《PHP网上购物系统的设计与实现》
- python实现明星专家系统：人脸识别自动比对
- 身材与攻打全体变得有些扭曲怪僻文学会员手打
- Bilibili for mac 2019 - 国内知名的视频弹幕社区软件（b站）
- 四:MySQL 表介绍
- Urule规则引擎快速搭建
- 验证集和测试集的区别