css实现三栏布局的几种方法及优缺点_CSS布局实例_CSS
前言
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。
我们不妨假定这样一个布局：高度已知，其中左栏、右栏宽度各为300px,中间自适应，可以通过几种...[2018/10/8]
CSS 小结笔记之BFC
BFC 即为Block formatting context 的缩写，BFC 主要用来将一个盒子设置为一个隔离的容器，不管盒子内部的元素具有什么属性，都不会影响到盒子的外面。1、哪些元素能产生BFC 不是所有的元素都能产生BFC的，只有display 属性为 block, list-item, t...[2018/9/30]
表格与表单
表格表单
一、表格
1、基本结构
<table>
<caption></caption>
<thead>
<tr>
<th></th>
<...[2018/9/30]
CSS之inline和inline-block
inline-block
控制台-代码：
PS：inline-block是让元素以内联形式存在，也就是不是块级，但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height)
二· 如果是inl...[2018/9/30]
弹性盒布局实例
今天给大家搞一个弹性盒布局的实例，最近一直在复习一些基础的东西，所以一直会跟大家分享一些基础的东西
说实话，最近感觉被掏空了，别问我为什么，谁去保健谁知道，哈哈，注意安全，好了步入正题，今天用弹性盒写了一个小例子，
关于弹性盒的一些基础我就不列举了，大家有需要可以去 ...[2018/9/30]
移动端适配（3）---rem适配移动端适配（3）---rem适配
rem适配
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<script>
(function(){
var html=document.docum...[2018/9/30]
BFC(块状格式化上下文)
今天先来说关于BFC的一些基础知识
BFC是块状格式化上下文，它是一个独立的渲染区域，规定了内部如何布局，并且这个布局和外部毫不相干
触发BFC的方法
1.根元素（即html）
2.float属性不为none
3.position属性为absoulute，fixe...[2018/9/30]
Web前端行业的机遇与自我规划，如果你对未来没有方向 不如看一看，或许就是一道曙光！Web前端行业的机遇与自我规划，如果你对未来没有方向 不如看一看，或许就是一道曙光！
本篇是来自西安前端开发者分享社区的经验分享，给出前端工作人员在行业中的发展建议，如果我们没有目标时候 不妨看看别人是怎么做的！
感谢西安前端开发者分享社区的分享！
资源下载：来自示说网平台（https: www.slidestalk.com web_wdshare_p59hm1...[2018/9/30]
CSS 盒子模型及 float 和 position
## CSS和模型 ## CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，包括 外边距（marign），边框（border），填充（padding），内容物（content）
盒子模型的类型：W3C 标准和模型和 IE 盒模型（怪异盒模型）
W3C 标准盒模型：属性 width ...[2018/9/30]
404页面自动跳转到首页
很抱歉，网站搬新家啦！
body { margin: 0px; padding: 0px; font-family: "微软雅黑", Arial, "Trebuchet MS", Verdana, Georgia, Baskerville, Palatino, Times; font-size: ...[2018/9/28]
css之表格,表单
一.表格
1.定义
表格由<table>标签来定义.每个表格均有若干行(由tr标签定义),每行被分割为若个单元格(由td标签定义).字母td指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本、图片、列表、段落、表单、水平线等待
2.基本结构
<tab...[2018/9/28]
css杂项补充
c 杂项补充
一、块与内联
1.块
独行显示
支持宽高，宽度默认适应父级，高度默认由子级或内容撑开
设置宽高后，采用设置的宽高
2.内联
同行显示
不支持宽高
margin上下无效果，左右会起作用，padding不会影响它的高度，背景会影响。
一般不设置内联的margin和padding
3...[2018/9/28]
高级布局补充.过滤以及动画
一.Flex布局
1.概念
下图为flex的相关概念示意图
? 使用flex布局的容器(flex container),他内部的元素自动成为flex项目(flex item).容器拥有两根隐性的轴,水平的主轴(main axis),竖直的交叉轴(cro axis).主轴开始的位置,即主轴与...[2018/9/28]
CSS的再深入2（更新中···）
在上一章中，我们又引出了一个知识点：
margin的问题
margin：0 auto；（上下为0，左右自适应）会解决元素的居中问题（auto 自适应）
同时，我们又要学习新的知识：
CSS的两个性质和一个标准
1.继承性：后代会继承父系的一些属性（fon、color、text、line）...[2018/9/28]
高级布局
一、文档流(normal flow)
1.概念
将窗体自上而下分成一行一行，块级元素从上至下，行内元素在每行中从左至右顺序排放元素
本质为normal flow(普通流，常规流)，文档流就是一个连续具有逻辑上下的页面整体，也可以片面的说，出现在页面中的显示内容都可以理解为在文档流中。
2.BFC...[2018/9/28]
JavaScript switch语句
JavaScriptswitch语句
switch语句用于基于不同的条件来执行不同的动作。
JavaScript switch 语句
使用switch语句可以进行多项选择。
语法：
switch( 变量1 ){
case 变量2:
语句1;
...[2018/9/28]
移动端适配（2）---viewport适配
通过viewport来适配
<script>
(function(){
var w=window.screen.width;
console.log(w); 获取屏幕尺寸
var targetW=320; 之后所有的都是按照320来做
var scale=w...[2018/9/28]
过度与动画
一、过度
从一个状态，以动画方式变成另一个状态的变化过程
1.过度属性
1.transition-duration 持续时间
2.transition-delay 延迟时间
3.transition-property 属性 表示可过度的样式属性(多个值，用逗号连接)
transition-p...[2018/9/28]
vue 解决无法设置滚动位置的问题
问题描述
在实现锚点定位的时候发现无法设置滚动条的位置。
在Vue中，使用 document.body.scrollTop=952 无法设置滚动条的高度。
document.body.scrollTop一直是0
原因
因为vue的页面指定了DTD，即指定了DOCTYPE时，使用doc...[2018/9/28]
css定位
html部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>c 定位</title> <link rel="stylesheet" href="...[2018/9/28]
多个Img标签之间的间隙处理方法
1.多个标签写在一行
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/>
<img src...[2018/9/27]
高级布局
一.文档流
1.概念
normal flow(普通流,常规流)将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。一个连续具有逻辑上下的页面整体,出现在页面中的显示内容,均可以理解为文档流中。
2.BFC(Block formatting context)
...[2018/9/27]
CSS的再深入（更新中···）CSS的再深入（更新中···）
在上一章我们提到了一个新的概念，叫做块级样式，讲到这里就要科普一下：
标签又分为两种：
（1）块级标签
元素特征：会独占一行，无论内容多少，可以设置宽高···
（2）内敛标签（又叫做行内标签）
元素特征：根据内容的多少占用空间大小，它的上下margin不起作用
（块级：P ...[2018/9/27]
layui form.on('select(xxx)',function(){});绑定失败
使用layui的form.on绑定select选中事件中, form.on()不执行, 主要原因有
1, select标签中没有写lay_filter属性,用来监听
<select id="watch" lay-filter="watch"cla ="layui-input layui...[2018/9/27]
CSS编码规范 - 前端-小刘
p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-size: 10.5000pt }
h1 { margin-top: 5.0000pt;...[2018/9/27]
CSS 实现滚动的图片栏 实例代码_CSS教程_CSS
在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过c 的动画效果来实现。具体效果如下
主要原理是通过动画向左移动。
首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，
这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来...[2018/9/27]
css中的position属性值的探究(小结)_CSS教程_CSScss中的position属性值的探究(小结)_CSS教程_CSS
c 的position属性指定了元素的定位类型，然后通过top，botton，left，right来具体定位。
在具体定位之前必须使用position属性，否则所有的具体定位属性都无法生效。
position可选择的值一共五个：static ，relative，absolute，fixed...[2018/9/27]
浅谈遇到的几个浏览器兼容性问题_浏览器兼容教程_CSS
背景 解决浏览器的兼容性问题是一件很烦的事情，其中并没有太多高深的技巧，但是开发需要，也不得不去解决它，最近在开发项目中也遇到一些兼容性的问题，希望把这些问题的解决方式记录下来，下次遇到就直接拿过来用，也希望对他人有一些帮助。 兼容性问题及解决方式 1.object-fit在ie11和edge中不...[2018/9/27]
CSS的再一次深入
全面我们学了6个选择器，今天再来学习两个选择器，分别是通配符选择器和并集选择器： 1.通配符选择器： *{ } 表示body里所有的标签都被选中 2.并集选择器: 选中的标签之间用逗号隔开，表示这几个标签都被选中 *选择器 有好处也有弊端 好处 就是省事，弊端，就是因为太省事了，加大了浏览器...[2018/9/26]
css之盒模型
盒模型1.定义 1.任意一个元素都可以当作盒模型
2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border)
3.盒子由外边距(margin),影响盒子的位置
广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签.
狭义盒模型:文档中以块级...[2018/9/26]
前端之CSS
目录
一.c 三种引用方式
1.行间式
2.内联式
3.外联式
4.三种方式的优先级
二.样式与长度颜色
1.基本样式
2.长度
3.颜色
三.常用样式
1.字体样式
2.文本样式
3.背景样式
四.CSS选择器
1.基础选择器
2.基础选择器优先级
一.c 三种引用方式
1.行间式
...[2018/9/25]
CSS 小结笔记之伸缩布局（flex）
之前块级元素布局在同一行，可以通过display或position或float来实现，而本篇介绍一个新的方法——flex（弹性布局）。[2018/9/25]
CSS 实例之打开大门
本个实例主要的效果如下图所示
本案例主要运用到了3D旋转和定位技术。具体步骤如下：
1、首先在页面主体加三个很简单的div标签：
<div cla ="door">
<div cla ="door-l"></div>
...[2018/9/25]
前端学习之路之CSS （一）前端学习之路之CSS （一）
Infi-chu:
http: www.cnblogs.com/Infi-chu/
简介： CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML...[2018/9/25]
前端学习之路之CSS （二）
Infi-chu:
http: www.cnblogs.com/Infi-chu/
id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 "#" 来定义。
#id_name
{
color:red;
...[2018/9/25]
css清除浏览器默认样式css清除浏览器默认样式
c 清除浏览器默认样式（代替 *{}）
将代码放入 c 文件，使用 link 引入。
/* v2.0 | 20110126
http: meyerweb.com/eric/tool c reset/
License: none (public domain)
*/
html,...[2018/9/25]
CSS 实例之翻转图片
具体效果图如下：
主要用到的技术除了3D翻转和定位 ，还用到了一个新的属性 backface-visibility：visable|hidden;
该属性主要是用来设定元素背面是否可见。
具体的步骤如下：
1、写出页面主体，
<div>
&l...[2018/9/25]
CSS 实例之滚动的图片栏
在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过c 的动画效果来实现。具体效果如下
主要原理是通过动画向左移动。
首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，
这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一...[2018/9/25]
css样式的优先顺序
一、c 样式的权重：！important(1000+) > 内联样式( 1000 ) > ID选择器(100 ) > 类选择器(10) > 标签选择器( 1 ) > 默认样式( 0 )
二、常用的样式顺序： 内联样...[2018/9/25]
css 选择器 + >
c 选择器 + ：element+element 相邻元素 div+p 找到div之后的同邻的所有p元素
c 选择器>:element>element 子元素 div>p 找到div之后的所有为p的子元素
[2018/9/25]
前端学习之路之CSS （三）
Infi-chu: http: www.cnblogs.com/Infi-chu/ 创建CSS 有三种方法：外部样式表、内部样式表、内联样式。 优先级：内联样式>内部样式>外部样式表>浏览器默认样式 CSS背景： CSS 背景属...[2018/9/25]
关于div设置display: inline-block之后盒子之间间距的处理
当两个盒子都设置display: inline-block之后并且c 也清除了默认样式 这时候会发现div盒子之间仍然存在间隙 将font-size清0间距就会取消 [2018/9/25]
浅谈css溢出机制探究_CSS教程_CSS浅谈css溢出机制探究_CSS教程_CSS
为什么需要深入学习CSS溢出机制？
在实际开发的过程中，内容溢出是经常见到的。如果不深入了解这个机制，你经常会碰到这样的问题：为什么这个元素没有受到祖先元素的overflow:hidden的影响？这里出现的滚动条是哪个元素的？如果消除这个滚动条？如何在指定的元素上增加滚动功能？
在这篇文章...[2018/9/25]
CSS多种方式实现底部对齐的示例代码_CSS教程_CSS
因公司业务要求需要实现如下图中红色区域的效果：
效果说明：
1、红色区域数据需要倒排（即从底部开始数，数字为1、2、3、4、5），并且显示在最底部
2、当数据过多时需要显示滚动条，**并且滚动条需要拉到最底部**
3、数据从websocket中推送过来，推送间隔为几十毫秒
...[2018/9/25]
详解CSS 伪元素及Content 属性 _CSS教程_CSS详解CSS 伪元素及Content 属性 _CSS教程_CSS
初识伪元素
说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个cla 为.before和.after不是一样的吗？” &ems...[2018/9/25]
CSS 实现滑动门的实例代码_CSS教程_CSS
所谓的滑动门技术，就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时，背景看起来也会变长。
大多数应用于导航栏之中，如微信导航栏:
具体实现方法如下：
1、首先每一块文本内容是由a标签与span标签组成
<a href="#"&g...[2018/9/25]
浅谈CSS 多栏布局（Multi-Columns Layout）_CSS教程_CSS
多栏布局是CSS3新增布局中的一种，尽管它很低调。
一、明确结构
多栏布局的结构很简单，主要由multi-column container和column box组成。
当一个元素设置了column-width和column-count属性并且值不为auto，那么这个元素就是multi-...[2018/9/25]
纯 CSS 撸一个漂亮的加载_CSS教程_CSS
为什么要做加载
只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载
我是如何做的
不同的页面, 对加载的设计也就可能不同. 本文设计的加载适合大多数页面.
并且, 本...[2018/9/25]
css设置多列等高布局的方法示例_CSS教程_CSS
初始时，多个列内容大小不同，高度不同。现在需要设置不同的背景来显示，而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。
最终需要的效果：
1. 真实等高布局
flex 技术点：弹性盒子布局flex，默认值就是自带等高布局的特点。
定义flex布...[2018/9/25]
15行CSS代码让苹果设备崩溃,最新的iOS 12也无法幸免_CSS教程_CSS
只需15行CSS代码，就可以让你的iPhone崩溃
Wire 的安全研究员 Sabri Haddouche 发现了一种新的攻击，只需访问包含某些 CSS 和 HTML 的网页，就会导致 iOS 重新启动以及 macOS 冻结。 Windows 和 Linux 用户不受此错误的影响。
攻击利...[2018/9/25]
经验首页