weixin_58526727的博客

Bootstrap简介Bootstrap 来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组建和插件。使用者要按照框架所规定的某种规范进行开发。中文官网：http://www.bootcss.com/官网:http://getbootstrap.com/优点标准化的html+css编

响应式布局原理使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。（一套代码可以在PC和移动端使用）设备划分尺寸区间超小屏幕（手机）小于768px小屏设备(平板）>=768px~<992px中等屏幕（桌面显示器）>=992px~<1200px宽屏设备（大桌面显示器）>=1200px响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素实现变化效果。原理就是在不同屏幕下，通过媒体查询来改

rem布局rem单位rem(root em)是一个相对单位，基准是相对html元素字体大小，类似em(父元素字体大小)比如，根元素(html)设置font-size=12px，非根元素设置width：2rem；，转换成px就是24px。rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好的来控制整个页面的元素大小比例。媒体查询媒体查询（Media Query）是CSS3新语法。使用@media 查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不

flex布局和传统布局分别的使用场景传统布局兼容性好布局繁琐在移动端不能很好的布局flex布局操作方便，布局极为简单，移动端应用广泛PC端浏览器支持情况较差IE11或更低版本不支持或仅部分支持建议PC端布局选择传统布局，移动端或者不考虑兼容性的PC端界面，使用flex布局。flex 布局概念flex 是 flexible Box的缩写，意味弹性布局。为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的f

CSS3 盒模型了解 box-sizing 属性CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。属性值简介content-box默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。 在 width 和 height 之外绘制元素的内边距和边框。border-box怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 为元素指

CSS3 新增选择器子级选择器子级选择器用于选取带有特定父元素的元素。书写语法：element1 > element2注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。> 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签。选择的是box中的两个直接子元素p，而inner中的p则不会被选中，因为inner中的p不是box的子元素，是孙子级的。<style> .box>p {

HTML5HTML5 简介它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。H5 新变化XHTML 可扩展超文本标记语言(h5的基础)XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。HTML5HTML5的设计目的是为了在移动设备上支持多媒体。增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，

定位属性我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。定位属性 position属性名：position。属性值：relative 相对定位absolute 绝对定位fixed 固定定位作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移偏移量属性定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。水平方向：left、right。垂直方向：top、bottom。属性值：常用 px 为单位的数值，或者百分比。

CSS 常用样式背景属性CSS 中除了布局类属性，还需要添加一些背景类的内容进行页面的修饰，从而让网页变得更加的美观。CSS 中通过 background 属性来设置背景，它是一个综合属性，可以拆分成多个单一属性。背景颜色 background-属性名：background-color作用：在盒子区域添加背景颜色的修饰。加载区域：在 border 及以内加载背景颜色。属性值：颜色名、颜色值。背景图片 background-image属性名：background-image作用：给盒子添

显示模式和标准文档流在我们遇到的 HTML 元素中，有的标签元素如<div>、 <p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么？标准文档流标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。HTML就是一种标准文档流文件。HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。微观现象空白折

CSS 常用样式盒模型扩展应用清除默认样式大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。body,div,h1,h2,h3,h4,h4,h6,p,ul,li { margin: 0; padding: 0; }<ul>和<ol>两种列表有默认的

CSS常用属性盒模型盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性，分别是宽度 width、高度 height、内边距 padding、边框 border、外边距 margin。常见盒模型区域盒模型的属性中，根据不同属性的效果，可以划分区域：书写元素内容区域：width+height盒子可以实体化的区域：width+height+padding+border盒子实际占位的位置：width+height+padding+border+margin学习过程中，应该学会查看浏览器控制

CSS 常用样式字体属性（可以继承给后代）1.粗细 font-weight作用：设置文字是否加粗显示。属性名：font-weight(属于 font 属性的一个单一属性)属性值有两种方式：单词类型、数字类型。单词类型属性值说明normal定义标准的字体（默认值）bold定义粗体字符（b,strong标签的默认值）bolder定义更粗的字体lighter定义更细的字体数字类型用100-900 之间的整百数字来设置粗细。数字越大，文字显示越粗