html+css
文章平均质量分 72
Crazier_qi
这个作者很懒,什么都没留下…
展开
-
非行内元素与行内元素转换的几种方法
文章缘起于在编写代码时看到别人在将行内元素转换为块级元素时的一个简便方法:为元素加定位position:absolute;或者position:fixed;之前没遇到过的情况,今天就来一块说说几种行内元素转化为块级元素的方法~在这之前先回顾下何为块级元素何为行内元素:简单来说块级元素和行内元素的区别:大家都知道块级元素可以设置width,height,并且有原创 2016-01-31 16:27:16 · 2088 阅读 · 0 评论 -
关于浮动
先来看看几个浮动的例子: float .div1{ width: 100px; height: 100px; background-color: red; } .div2{ width: 100px; height: 100px; background-color: green; } .div3{ width: 100原创 2016-04-22 16:19:27 · 3230 阅读 · 0 评论 -
Less和Sass
CSS预处理器css预处理器基本思想就是用一种专门的编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码的工作通俗来讲:“css预处理器用一种专门的编程语言,进行web页面样式的设计,然后再编译成正常的css文件,以供项目使用。css预处理器为css增加一些编程的特性,无需考虑浏览器的兼容性问题”下面介绍了常用的两种css预处理器Sass Sa原创 2016-06-11 16:06:13 · 6083 阅读 · 0 评论 -
关于清除浮动
上篇博客列举了浮动的几个栗子,并且说明了浮动布局带来的问题,那么如何解决呢,关于清除浮动,解决思路有两种:1.利用clear属性,清除浮动2.使父元素容器形成BFC先来看看如何利用clear属性清除浮动:语法:clear:both | left | right 具体方法:通过在浮动元素末尾添加一个空的标签例如: .child {原创 2016-04-22 17:44:52 · 537 阅读 · 0 评论 -
浏览器兼容性
要搞清楚浏览器内核是什么,首先应该先搞清楚浏览器的构成。简单来说浏览器可以分为 两部分,shell+内核。其中shell的种类相对比较多,内核则比较少。Shell是指浏览器的外壳:例如菜单,工具栏等。主要是提供给用户界面操 作,参数设臵等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。 从Mozilla将Geck转载 2016-03-11 19:48:43 · 471 阅读 · 0 评论 -
居中显示and自适应布局
一、水平居中div给div设置一个宽度,然后添加margin:0 auto属性div{ width:600px; margin:0 auto;}设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。不过,当浏览器窗口比元素的宽原创 2016-04-26 01:11:53 · 616 阅读 · 0 评论 -
深入理解盒子模型
css盒子模型具备的属性:内容(content)、填充(padding)、边框(border)、边界(margin)每个盒子都有:边界、边框、填充、内容四个属性;每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,当然也可以分别设置~记忆时可以将此想象为一个表,从12开始逆时钟旋转,所以属性设置的顺序便为上、右、下、左~并且当某一方向缺失时,会去对面找他原创 2016-03-12 14:32:11 · 768 阅读 · 0 评论 -
CSS书写规范
基本原则:CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。样式为设计师自定义的新 CSS 样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例:“ .shadow ”;文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“ .no12 ” 、“ .no12-24 ”。义HTML样式为转载 2016-03-11 19:41:24 · 259 阅读 · 0 评论 -
html代码书写规范
一、 网页制作细节 ---- head区代码规范head区是指HTML代码的和之间的内容。必须加入的标签:公司版权注释 ;网页显示字符集。简体中文:繁体中文:英 语:网页制作者信息 网站简介 搜索关键字 网页的css规范 网页标题 xxxxxxxxxxxxxxxxxx可以选择加入的标签:设定网页的到期时间。一旦网页过期,必须到服务器上重转载 2016-03-11 19:40:11 · 934 阅读 · 0 评论 -
inline-block之妙用
首先解释一下inline-block,在w3c school中定义:行内块元素。(CSS2.1 新增的值)什么叫行内块元素呢?来看看英文版的定义,我觉得这个比较明确,暂时在中文版上没找到inline-block elements are like inline elements but they can have a width and a height.大概意思也和这个属性的原创 2016-03-07 16:45:45 · 433 阅读 · 0 评论 -
元素的包裹性之css绘制三角形问题
由css绘制三角形说起我们知道利用css绘制三角形时利用宽高为0,border transparent等属性可以实现,示例代码如下:.div_parent{ width: 0; height: 0; border-color: #e8aeb8 #333 #ccc #666; border-style: s原创 2016-08-26 14:53:39 · 869 阅读 · 0 评论