盒模型练习

效果预览：demo

代码： gitHub

## 知识点

- 盒模型

- 属性：

- width 和height 设置了内容框的宽/高

- padding 设置内边距

- border 设置边框

- margin 设置外边距

- overflow 溢出

- auto 如果内容太多，那么超出盒子大小的内容会被隐藏，滚动条显示出来，从而可以让用户滚动看到所有内容。

- hidden 如果内容太多，那么超出盒子大小的内容被隐藏了。

- visible(默认) 如果内容太多，超出盒子大小的内容显示在盒子之外

- background 背景

- background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。

- border-box 背景延伸至边框外沿

- padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处。

- content-box 背景被裁剪至内容区（content box）外沿。

- text(实验，尽量不用) 背景被裁剪成文字的前景色。

- outline 轮廓<br>

盒子的 outline 看起来像边框，但是它不是盒模型的一部分。它表现得像边框，但是是画在盒子之上，不会修改盒子的大小（具体来说，outline 是画在边框之外，外边距区域之内）。

- 高级属性

- 设置宽和高的约束

- min-width

- max-width

- max-height

- 显示类型

- display

- block 块盒(盒子之前以及之后的内容出现在不同的行上)

- inline 它跟随文档的文本流堆放

- inline-block 行内块盒

- table 允许你像处理table布局那样处理非table元素

- flex 弹性盒子

- grid 网格

- 背景

- background-color 为背景设置一个纯色。<br>

- transparent 透明

- background-image 指定在元素的背景中出现的背景图像。这可以是静态文件，也可以是生成的渐变。

- url 背景图片

- 渐变

- linear-gradient() 函数至少需要用逗号分隔的三个参数——背景中渐变的方向，开始的颜色和结尾的颜色。

- background-position 指定背景应该出现在元素背景中的位置。<br>

通常，该属性将使用两个通过空格分隔的值，该空间指定了图像的水平(x)和垂直(y)坐标

- center

- left

- right

- top

- bottom

- background-repeat 指定背景是否应该被重复(平铺)

- no-repeat 图像将不会重复:它只会显示一次

- repeat-x 图像将在整个背景中水平地重复

- repeat-y 图像会在背景下垂直地重复。

- repeat 图像将在整个背景中水平和竖直地重复。

- background-attachment 当内容滚动时，指定元素背景的行为，例如，它是滚动的内容，还是固定的?

- scroll 使元素的背景在页面滚动时滚动

- fixed 会使元素的背景相对于视口固定

- local 将背景设置为它所设置的元素的背景，因此当您滚动元素时，背景会随之滚动。

- background-size 允许动态调整背景图像的大小。

- 边框

- border-width 设置边界宽度

- border-style 设置边界样式

- none 和hidden 类似，不显示边框

- hidden 不显示边框

- dotted 显示为一系列圆点

- dashed 显示为一系列短的方形虚线

- solid 显示为一条实线

- double 显示为一条双实线，宽度是 border-width

- groove 显示为有雕刻效果的边框

- ridge 显示为有浮雕效果的边框

- inset 显示为有陷入效果的边框

- outset 显示为有突出效果的边框

- border-color 设置边界颜色

- border-radius 设置边框圆角

- 椭圆形角两个不同的半径用正斜杠（/）分隔

- border-image 边界图像

- border-image-source 指定要使用的源图像作为边界图像

- border-image-slice 设置所需大小

- border-image-repeat 指定我们希望图像如何填充边界

- stretch(默认) 侧面的图像被拉伸来填满边界

- repeat 边图像被重复，直到边界被填满

- round 边的图像被重复，直到边界被填满，它们都被稍微拉伸

- space 边图像被重复，直到边界被填满，每个拷贝之间添加了少量的间隔

- 盒子阴影

- box-shadow

- 第一个长度值是水平偏移量

- 第二个长度值是垂直偏移量

- 第三个长度的值是模糊半径

- 第四个长度的值是扩散半径

- 颜色值是阴影的基本颜色

- inset(内部阴影)

- 滤镜（filter）

温故知新----css盒模型相关推荐

css盒模型和元素绘制
转自:http://www.mysjtu.com/page/M0/S438/438952.html 一.什么是css盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过 ...
深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
css盒模型中margin很牛逼
css盒子模型,说简单也简单,用的时候也有不简单的. 其中margin的值可以为负值,并且为了实现margin,忽略父级的padding.border.甚至定位.这在布局上很有用,要注意. ----- ...
【HTML/CSS】CSS盒模型及其理解
1 盒模型概念:CSS盒模型本质是一个盒子,包括:外边距margin.边框border.内边距padding.内容content 分类:标准盒模型(W3C)和怪异盒模型(IE) 标准盒模型:widt ...
【Day06】请画出 Css 盒模型，基于盒模型的原理，说明相对定位、绝对定位、浮动实现样式是如何实现的？
一.Css 盒模型页面上任何一个元素,我们都可以看成是一个盒子,盒子会占用一定的空间和位置,他们之间相互制约,就形成了网页的布局. w3c 的盒模型的构成:content border paddin ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

温故知新----css盒模型

盒模型练习

温故知新----css盒模型相关推荐

最新文章

热门文章