夏沫樱花雨-CSDN博客

转载 POSITION定位有哪几种？各有什么特点？

1.背景介绍 position 是CSS用来为HTML文档的一些元素提供定位的属性,定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。常规取值： 1.static(静态） 2.Relative(相对） 3.Absolut...

2018-08-06 16:48:31 890

原创 grid布局

1.背景介绍 CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inl...

2018-08-02 22:37:24 1025

原创 bootstarp的栅格布局

1.背景介绍Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 2、网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成1...

2018-07-11 16:27:36 962

转载 Bootstrap常用组件

目录1.背景介绍2.知识剖析3.常见问题4.解决方案5.编码实战6.扩展思考7.参考文献8.更多讨论1.背景介绍什么是 BOOTSTRAP？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。它是2011 年八月由 Twitter 的 M...

2018-06-30 16:14:04 682

原创 CSS sprites 应用

1.背景介绍当在浏览器里输入一个URL地址的时候，你会感觉无数张图片“唰唰唰”的闪出来了。在这个过程中，浏览器会把这个网站的主资源（就是Html文件）拉取回来，然后开始分析网页中的Js，Img之类的标签，然后再去拉取这些图片和资源，这些后拉取的资源称为「子资源」。对于浏览器来说，他们的请求方式都是发起一个Http请求，经历三次握手，并把文件拉取回来，一般的浏览器内核只...

2018-06-21 21:13:46 634

原创 flex弹性布局

1.背景介绍常用的WEB布局有哪些？ 1.静态布局 2.弹性布局 3.流式布局 4.自适应布局 5.响应式布局 FLEX布局是什么？ 2009年，W3C提出了一种新的布局方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得...

2018-06-08 20:55:51 111

原创常见的inline元素、block元素、inline-block元素

1.背景介绍 2.知识解析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 1.背景介绍历史这三个元素到底是怎么产生的。 line和block可能是类似于1+1=2的基础概念，还记得在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，...

2018-05-30 21:53:38 2165

原创手机分辨率和网页中的PX是一回事吗？

.1.背景介绍首先，什么是viewport。通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。什么是绝对长度单位？什么是相对长度单位？绝对长度单位：in（inc...

2018-05-18 10:29:02 1631

原创 PX、EM、REM、%、VW、WH、VM等单位有什么区别？

1.背景介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别2.知识...

2018-05-08 18:07:44 444

原创 HTML 行内元素与块级元素

目录 1.HTML 行内元素与块级元素 2.常用的 display 值 3.行内元素和块级元素盒模型区别 4.块级元素与 overflow 5.实践 1.HTML 行内元素与块级元素行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和...

2018-04-23 17:21:57 404

原创盒子的模型

1.什么是盒子 2.盒子的种类 3.标准的盒子模型 4.盒子模型的属性 5.盒子的边框 6.盒子内边距 7.盒子外边距 8.标准盒子模型宽度计算方试 9.设置固定宽度 10.充满父级容器 11.包裹内容的情况下 12.怪异盒子模型 13.盒子的元素 1.盒子的特性一个盒子中主要的属性就5个：width、height、padding、border、...

2018-04-17 18:21:43 185

weixin_42012282的博客