CSS学习笔记 - 盒模型

外边距margin
内边距padding
背景background
- 背景图background-image
边框border
- 样式
- 宽度
- 颜色
- 圆角
- 边框图片border-image
- - 边框图片资源border-image-source
显示隐藏display
溢出隐藏overflow
- 单行文本溢出text-overflow
- 多行文本溢出
盒尺寸box-sizing
尺寸控制
参考资料

简写	对应四个边
一个值	四个边相同
两个值	`1`上边和下边，`2`左边和右边
三个值	`1`上边，`2`右边和左边，`3`下边
四个值	1上、2右、3下、4左（从头开始，顺时针）

外边距margin

设置（上下左右）方向的外边距

margin: 10px 20px 30px 40px;
/* 等同于 */
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;

内边距padding

设置（上下左右）方向的内边距

背景background

支持纯色、渐变、图片

背景图background-image

边框border

样式

默认值：none

border-style: dashed;

搬运自 MDN

样式	说明
none	和关键字 `hidden` 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`none` 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
hidden	和关键字 `none` 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 `0`，即使先前已经指定过它的值。在单元格边框重叠情况下，`hidden` 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
dotted	显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。
dashed	显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
solid	显示为一条实线。

宽度

支持px 和 %

border-width: 300px;
border-[top|right|bottom|left]-width: 300px;

颜色

支持 #FFFFFF、#FFF、rgb(255,255,255)、rgba(255,255,255,1)

border-color : #FFF;
border-[top|right|bottom|left]-color : #FFF;

支持px 和 %

圆角

border-top-[left|right]-radius : 25px; /* 左上右上 */
border-bottom-[left|right]-radius : 25px; /* 左下右下 */
border-radius: 25px 25px 25px 25px; /* 左下右下 */

边框图片border-image

语法

<'border-image-source'>
|| <'border-image-slice'> [ <'border-image-width'> | <'border-image-width'> ? <'border-image-outset'> ]?
|| <'border-image-repeat'>

边框图片资源border-image-source

/* 边框图片 */
border-image-source: url(image.jpg);/* 使用渐变色 */
border-image-source: linear-gradient(to top, red, yellow);

显示隐藏display

控制显示模式

选项	说明
none	隐藏元素
block	显示为块元素
inline	显示为行元素，不能设置宽/高
inline-block	行级块元素，允许设置宽/高
flex	弹性盒模型
grid	网格布局

溢出隐藏overflow

选项	说明
hidden	溢出内容隐藏
scroll	显示滚动条（有些浏览器会一直显示，有些在滚动时显示）
auto	根据内容自动处理滚动条

单行文本溢出text-overflow

overflow : hidden; /* 超出宽度隐藏 */
text-overflow : ellipsis; /* 超出隐藏用 ... 代替 */

多行文本溢出

overflow : hidden; /* 超出隐藏 */
text-overflow : ellipsis; /* 文本溢出时显示省略符号代表被修剪的文本 */
display : -webkit-box; /* 和 -webkit-line-clamp 结合使用，将对象作为弹性伸缩盒子模型显示 */
-webkit-line-clamp : 5; /* 限制显示的行数, 5表示最多显示5行。 为了实现该效果，需要组合其他的WebKit属性 */
-webkit-box-orient : vertical; /* 和 -webkit-line-clamp 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 */

盒尺寸box-sizing

控制宽度中是否包含外边距

值	结果
content-box	width 不包括 padding 和 border
border-box	width 包括 padding 和 border
inherit	从父元素继承 box-sizing 属性

尺寸控制

选项	说明
width	宽度
height	高度
min-width	最小宽度
min-height	最小高度
max-width	最大宽度
max-height	最大高度
fill-available	撑满可用的空间
fit-content	根据内容适应尺寸

参考资料

MDN：盒模型
MDN：CSS_背景、边框
官方页面上有个推荐的样式生成器
MDN：CSS属性值定义语法

CSS 学习笔记 - 盒模型相关推荐

css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
HTML5+CSS3基础学习day3盒模型
文章目录前言一.盒模型盒模型图例盒子水平布局盒子垂直布局外边距的重叠行内元素的盒模型盒子的尺寸轮廓和圆角二.练习练习1(图片的列表) 练习2(导航条) 练习3(列表) 总结前言 ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...

CSS 学习笔记 - 盒模型

CSS学习笔记 - 盒模型

外边距margin

内边距padding

背景background

背景图background-image

边框border

样式

宽度

颜色

圆角

边框图片border-image

边框图片资源border-image-source

显示隐藏display

溢出隐藏overflow

单行文本溢出text-overflow

多行文本溢出

盒尺寸box-sizing

尺寸控制

参考资料

CSS 学习笔记 - 盒模型相关推荐

最新文章

热门文章