很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这里,我可以很负责的告诉大家,这不叫web标准,这叫“div+css”.名副其实的“div+css”.也许有人会说,我用“div+css”做出来的页面完全表达出设计图的意图,浏览器都兼容,没有任何问题.的确,你这样做出来的页面看起来是没任何问题,注意,这里说的是“看起来没任何问题”,仅此而已. 人是可…

一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过是一个相对的空标签而已,在很多情况下,我们可以使用其他更合适且更简洁的标签可以替代它. 二.标签的差异 共性:都是一个容器,可以在其中放置内容 差异:分为行内和块级两个大类,且不同便签有相应含义上的预设,如:h-标题,p-段落,a-链接,等等 三.标签语义化的好处 a.让结构更简洁,让搜索引擎更友好…

标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面重要内容,予以较高的权值.h1~h6这几个标签在搜索引擎中权值非常高,用它们作页面标题就是一个简单的SEO,知道了这个你还使用DIV+CSS来写标题吗?(不是说直接用h1~h6标签做标题,要这几个标签+CSS) 回到开始时的疑惑,这时候header.footer.sidebar.ar…

Html语义化标签-语义化你的HTML标签和属性   1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.<li> 1.4 <dl>.<dt>.<dd> 1.5 <cite>.cite .<q>. <blockquote> 1.6 <em>. <strong> 1.7 <table>.<td…

web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用:另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容. 为什么要语义化? 有利于 SEO . SEO也就是Search Engine Optimization,搜索引擎优化.指通过站内优化…

这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost Standards Mode) 混杂模式 (Quirks Mode) 以上三种模式是浏览器在解析CSS时的三种工作模式,混杂模式是依据旧式的.非标准的CSS规则来渲染网页:标准模式则是遵循W3C标准去解析CSS的,接近标准模式与标准模式实际上差异并不大:关于Firefox中DTD与浏览器工作模式的详细…

灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标签就是代表文本,button 标签代表按钮,nav 标签代表导航等等. 二.为什么要标签语义化? 其实标签语义化是给浏览器和搜索引擎看的.没有人关心你写的 HTML 代码有没有正确的使用语义化,只有它们关心这件事情,是不是很暖心? 为什么浏览器关心? DOM 的大部分内容具有隐式语义含义. 也就是说…

Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面…

div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可惜了 给段比较好的讲布局的东西给你看看吧 反正我看了是受益非浅,希望你能参悟 由 于是要让站工自已定制,所以开放了HTML以及CSS.JS等代码.但默认的CSS是CSS是不能改的. 在写这个CSS时,我尽量用最少的标签,这样很站对CSS不是很熟的站长也可以定制.另外布局时和写CSS时,总的思想的就是从大的到小…

CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于前端开发布局中经常用到的水平垂直居中的总结.第一次写博客,可能会存在有的地方表述不是那么清晰明了还请各位多多见谅. 废话不多说了,下面进入主题:下面的例子父元素div 高600px   宽800px, 子元素div的高400px 宽300px; 知道父元素div的宽和高,子元素在父元素中水平垂直居中…

本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative(相对)以及absolute(绝对). 如何学习DIV+CSS布局之position属性 如果用position属性来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute.定位(position)布局页面说容易非常容易,只需要记住这节课…

认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点 其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 'margin' 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)…

转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项中的绝对定位,第二种则是使用CSS中的浮动(float)概念. DIV CSS布局中绝对定位和浮动 CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute.static.relative和fixed)中的绝对定位…

前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html…

CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段也许比较长的时间,除非MS把它捆绑在某个操作系统上,如何在现有基础上(IE6 80-90%),合理.妙用最小高度了? 假定有二个BOX,我们…

html5是html最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求.广义论及HTML5时,实际指的是包括HTML.CSS和JavaScript在内的一套技术组合.它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash.…

一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a)     -webkit- 兼容谷歌 b)     -moz- 兼容火狐 c)     -o- 兼容欧朋 d)     -ms- 兼容IE e)     例子:-webkit-样式属性 3.兼容性查询网站: http://caniuse.com 兼容写法 IE版本:如果小于等于IE 9 就执行if语句里面的代码 ( It小于 lte小于等于) 二.结构性…

一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流向对象的右侧.right对象向右浮动,而后面的对象流向对象的左侧(取消独占一行的行为,允许别人与其一行,其实是这个块从文档流中分离出来,他之后的对象视它不存在) [3].定位布局方式:通过设置html的position属性显示 position设置对象的定位方式, 值:static(静态定位,页面中…

导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type="text/css"> *{margin:0px;padding:0px;font-size:12px;} #nav li{float:left; list-style:none;} #nav li a{color:#;text-decoration:none;display:block;wid…

这两天在准备实习的面试和笔试,准备复习一下这些基础的概念,避免自己处于一种仅脑袋理解嘴巴不能表述出来的状态. 块状元素和行内元素的概念是在css页面布局这个地方出现.主要是将html标签按照一定的特性分成2类:块状元素和行内元素(内联元素). 首先概念上理解一下: 块状元素:   块状元素(Block element),字面理解就是一个方块嘛,它一般是其它元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其它元素同一行的,即相当于两个块状元素写一块是垂直布局的.最常用块状元素是div和p…

1. 高度自适应的问题 1. 一个元素是否可以使用百分比显示,取决于它的父级元素,所以如果需要给此元素设置100%,那么需要先给父元素设置高100%. 2. 一级元素的父元素是body,所以如果我们想让高度100%的话,那就给body设置高100%,但是又因为body的父元素是html,所以我们同时也要给html高设置成100%. 2. 什么是盒模型 就是每个盒子都由内容(content).填充(padding).边框(border).边界(margin) 3. 上下margin叠加的由来 cs…

在No.4中谈及了下盒子模型,引出布局模型 1.布局模型有三类: 1)流动模型  flow(默认) 2)浮动模型  float 3)层模型  layer 2.文档流 :指的是文本沿着从左到右的方向展开,就像流的形式 脱离文档流指的是一个元素脱离文档流之后,其他元素在定位的时候会当作没发现它,两者的位置重叠都是可以的 HTML的布局机制就是用文档模型的,即块元素独占一块 3.对于CSS的浮动float问题 查阅一些资料解释 弄清楚了些  先加个链接 这个对浮动问题总结的比较好http://www.…

什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠.而float和clear float也只对同一个BFC内的元素有效. 什么情况产生BFC W3C标准中这样描述:Floats, absolutely positioned elements, block containers (such as…

1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 通俗讲,BFC就是一种布局方式,在创建了 BFC后,其子元素会一个接一个地放置:盒子们自所在的 containing block 顶部起,水平方向上一个接一个撑满整个宽度,垂 直方向上他们的起点是包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 同一个BFC中…

前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-to…

关于inline-block元素间隙的处理 参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html 如下,两个inline-block之间,会产生默认的间隙.原因是因为元素被当成行内元素排版的时候,元素之间的空白符(空格.回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙.这些元素之间的间距会随着字体的大小…

一.起因: 子盒子设置浮动之后效果: 由此可见,蓝色的盒子设置浮动之后,因为脱离了标准文档流,它撑不起父盒子的高度,导致父盒子高度塌陷.如果网页中出现了这种问题,会导致我们整个网页的布局紊乱 二.解决方案: 父盒子设置固定高度 内墙法 伪元素清除法 overflow:hidden (1)父盒子设置固定高度 虽然,给父盒子设置了固定高度能暂时解决我们的问题,但是它的使用不灵活,如果未来子盒子的高度需求发生了改变(网页的多处地方),那么我们得手动需要更改父盒子的高度.后期不易维护. 应用:网页中盒子…

float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问题的,除了万恶的浏览器IE6,两层中间有缝隙 3px; 定位 在固定元素上加入绝对定位,自适应元素设置成margin-left:固定元素的宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&…

1.在说到百分比是前,先简单了解下基本的单位 英寸(inch) :in 1 in=2.54cm厘米(centimeter):cm毫米(millimeter):mm磅(point):pt 1pt=1/72 in皮卡(pica):pc 1pc==12 pt像素(pixel unit):px 1px=0.75 pt相对长度单位(相对于当前对象内文本的字体尺寸):em 1em=16pxCSS3新增的一个相对单位root em: rem 1rem=16px 注意:如果是定位的元素,则是相对最近的定位父级元…

什么是FC?FC(Formatting Context)格式化上下文,其实指的是一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素之间的关系和相互作用. 什么是BFC? BFC(Block Formatting Context)块级格式化上下文,指的是一个独立的块级渲染区域,拥有一套独立的渲染规则,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关.BFC的约束规则: 1.内部的BOX会在垂直方向一个接一个的排列着: 2.属于同一个BFC的两个相邻BOX的marg…