php css布局技巧,最全的CSS开发常用技巧

css(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

使用css缩写好处

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。

明确定义单位,除非值为0,以及px和em区别。

忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一 个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以 外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。px单位适合固定布局如960Grid。 em适合流体布局。

使用 line-height 垂直居中,以及line-height和height区别 实验展示

line-height:24px;使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致。

语法:line-height : normal | length

参数:

normal : 默认行高

length : 百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位

说明:

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 如行内包含多个对象,则应用最大行高。此时行高不可为负值。

使用 line-height 垂直居中

使用 line-height 垂直居中

使用 line-height 垂直居中

使用 line-height 垂直居中

清除容器浮动,以及overflow:hidden; clear:both的关联

#main {overflow:hidden; },clear:both;clear:left;clear:right; overflow对于清除如Body。类似整体容器可以选择使用它。而clear清除div以及它更灵活。可以根据实际选择使用。也是非常常用的两个属性。

语法: clear : none | left |right | both

参数:

none : 允许两边都可以有浮动对象

both : 不允许有浮动对象

left : 不允许左边有浮动对象

right : 不允许右边有浮动对象 说明: 该属性的值指出了不允许有浮动对象的边。

div { clear : left } img { float: right }

语法: overflow : visible | auto | hidden | scroll

参数:

visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且">clip属性设置将失效

auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden : 不显示超过对象尺寸的内容

scroll : 总是显示滚动条

说明:

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。 设置textarea对象为hidden值将隐藏其滚动条。 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。 自IE5开始,此属性在MAC平台上可用。

不让链接折行

a { white-space:nowrap; } p { white-space: nowrap; } 上面的设定就能避免链接折行。

语法: white-space : normal | pre | nowrap

参数:

normal : 默认处理方式

pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象

nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

说明: 设置或检索对象内空格的处理方式。

始终让 Firefox 显示滚动条

1 html {overflow:-moz-scrollbars-vertical; }

2 body, html {min-height:101%; } 大于100%必然会出现滚动条。

使块元素水平居中

margin:0 auto;其实就是 margin-left: auto; margin-right: auto;(上右下左),记住一个规则。顺时针转。

body{text-align: center; }

然后定义内层容器 text-align: left;

隐藏 Exploer textarea 的滚动条

textarea { overflow:auto; }

Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。

设置打印分页(实验未成功未看到效果可以交流下)

h2 {page-break-before:always; } page-break-before 属性能设置打印网页时的分页。

语法:page-break-before : auto | always | avoid | left | right | null

参数:

auto : 假如需要在对象之前插入页分割符

always : 始终在对象之前插入页分割符

avoid : 避免在对象前面插入页分割符

left : 在对象前面插入页分割符直到它到达一个空白的左页边

right : 在对象前面插入页分割符直到它到达一个空白的右页边 null : 空值。IE5用来取消页分割符设置

说明:

检索或设置对象前出现的页分割符。 IE5仅支持always值和空白值(null)。 在IE4中此属性不作用于br对象,但是IE5作用。

删除链接上的虚线框

a:active, a:focus {outline:none; }

Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。

最简单的 CSS 重置

* {margin: 0; padding: 0 } 如果想“复杂详细”,参考YUI 的做法(还有这里)。

http://developer.yahoo.com/yui/2/

/*CSS reset 示例*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}

table{border-collapse:collapse; border-spacing:0;}

fieldset,img{border:0}

address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal;font-weight:normal;}

ol,ul{list-style:none}

caption,th{text-align:left}

h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}

q:before,q:after{ content:''}

abbr,acronym{border:0}

CSS盒模型以及IE和Firefox盒模型的区别

dd3c4eb3aaade5f1bc911579d3fed01c.gif

6f3c4c8ded8e527be73d62571f21b873.gif

CSS盒子模型-什么是CSS盒子模型。

认识日常生活中盒子:

常常我们遇到盒子是用于可装东西长方形、正方形的盒子。如装皮鞋盒子、装电视机盒子,这个是比较具体的盒子。

CSS盒子:

根据字面我们可以理解,CSS盒子也是装东西的,比如我们要将文字内容、图片布局网页中,那就需要像盒子一样装着。这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding),即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样:

一组

等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding)等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。

日常使用CSS盒子:

我们说将什么内容放入一个盒子里,我们就要想到是放入

假如我们说设置一个宽度为100px盒子,我们就要知道如下一个概念:

Css样式代码:.yangshi{width:100px;}

对应html代码:

内容

这个时候我们可以将

内容
看作为一个盒子。

CSS简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。这就避免了一个个网页的修改,大大减少了工作量。以上就是CSS开发常用的技巧总结,希望在开发上能帮助到大家。

相关推荐:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/405874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

守护(后台)进程的创建

/*功能&#xff1a;守护进程的创建后台进程的创建思想&#xff1a;首先父进程创建一个子进程&#xff0c;然后子进程杀死父进程。信号处理所有的工作由子进程来处理。 */ #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <st…

Lucene-3.0.0配置

Lucene-3.0.0配置2009-12-02 21:38一、Lucene开发环境配置step1.Lucene开发包下载step2.Java开发环境配置step3.Tomcat安装step4.Lucene开发环境配置解压下载的lucene-3.0.0.zip&#xff0c;可以看到lucene-core-3.0.0.jar和lucene-demos-3.0.0.jar这两个文件,将其解压(建议放在…

jQuery实现响应式瀑布流 - 实现灯箱效果

在这之前&#xff0c;有写过一篇关于实现瀑布流的文章&#xff0c;后期有人留言提出需要添加灯箱效果的功能&#xff0c;所以这次则讲述下如何实现此功能。由于该篇接上篇写的&#xff1a;jQuery实现响应式瀑布流效果&#xff08;jQueryflex&#xff09;_jquery瀑布流插件-CSDN…

php 特有,PHP单一入口的特有作用

在说单一入口之前&#xff0c;先说说多入口。Discuz!, PHPCMS 2008, DedeCMS 都是采用多入口的结构。多入口&#xff0c;即通过访问不同的 php 文件运行对应的功能。如&#xff1a;/index.php - 网站首页/show.php?id1 - 内容页/list.php?page2 - 列表页/login.php - 用户登录…

我的新发现:AVL树旋转的一个特性

关于AVL树旋转的代码网络上铺天盖地。 一些经典的实现方法如下&#xff1a; AVLTree SingleLeftRotation(AVLTree A) {AVLTree B A->left;A->Left B->Right;B->Right A;A->Height Max(GetHeight(A->Left), GetHeight(A->Right)) 1;B->Height Max…

VC中设置头文件的搜索路径~~

From:http://hi.baidu.com/woaimuxiaoyizhong/blog/item/cc3d260a9b75f21795ca6b2a.html 近日&#xff0c;小弟在研究UCOS VC版的时候&#xff0c;发现它的头文件并没有在当前目录下&#xff0c;却可以精确的找到。我估计一定是&#xff1a;VC编辑器早设置好了&#xff0c;早已…

真是的= =还是对linux不太了解啊

最近很无聊.....得到了3天假期~~~ 于是乎把Ubuntu10.10下载下来安装了 结果第二天root用户就登陆不上了 进入单用户模式后读shower文件发现密码那就一"!" 真是奇怪.... 之前在网上查说passwd命令没加载... 结果明明加载了 改了之后终于用上root权限了 结果又是惨…

php form validator 下单,PHP Form表单验证:PHP form validator使_php

在php网站开发建设中&#xff0c;用户注册、留言是必不可少的功能&#xff0c;用户提交的信息数据都是通过Form表单提交&#xff0c;为了保证数据的完整性、安全性&#xff0c;PHP Form表单验证是过滤数据的首要环节&#xff0c;PHP对表单提交数据的验证方式多种多样&#xff0…

云服务器,价格其实不便宜,但为什么还要用呢

2012年的时候&#xff0c;接触到云服务器&#xff0c;一心想搞个个人网站。当时&#xff0c;云服务器最低配置&#xff0c;1个月55元&#xff0c;1M带宽、1核CPU、512M内存&#xff0c;独立IP。加上&#xff0c;一些优惠&#xff0c;代金券之内的&#xff0c;1年400元左右。自认…

React开发(189):ant design textarea允许清除allowClear

<div style{{ margin: 10px 0 }}><span style{{ marginRight: 50px }}>调整原因</span><span><TextAreastyle{{ width: 55% }}placeholder"请输入调整原因"value{balancchangereason}formatter{(value) > &#xffe5; ${value}.repla…

DOS管道与重定向

From:http://hi.baidu.com/liouxueyun/blog/item/6951d9611ab9b76a0d33fa60.html 一、 重定向&#xff1a; 所谓重定向&#xff0c;就是不使用系统的标准输入端口、标准输出端口或标准错误端口&#xff0c;而进行重新的指定&#xff0c;所以重定向分为输出重定向、输入重定…

js 调用服务器端方法总结

javascript函数中执行C#代码中的函数&#xff1a; 方法一&#xff1a;1、首先建立一个按钮&#xff0c;在后台将调用或处理的内容写入button_click中; 2、在前台写一个js函数&#xff0c;内容为document.getElementById("btn1").click(); 3、在前台或…

[C语言 - 12] Union联合

union Student{int age;char *name;} stu;union只按照最长的数据成员分配控件&#xff0c;适用于有N个数据不会同时出现的情况&#xff0c;用以压缩空间。转载于:https://www.cnblogs.com/wvqusrtg/p/4501217.html

新闻数据采集php,PHP新闻采集在线源码

PHP新闻采集在线源码可以高效采集新闻网站内容&#xff0c;由于它是一种可以在服务器端执行的嵌入HTML文档的脚本语言&#xff0c;所以它支持在UNIX、LINUX、WINDOWS等系统下运行&#xff0c;而且消耗的系统资源很少。PHP新闻采集在线源码介绍全网采集采集任意互联网公开数据Aj…

[Objective-c 基础 - 1.3] OC带返回值的类方法

1 /*2 计算器类3 1>返回π4 2>计算两个整数的平方5 3>计算两个整数的和6 */7 8 9 #import <Foundation/Foundation.h> 10 11 interface Calculator: NSObject 12 //方法名:pi 13 - (double) pi; 14 15 //OC方法中&#xff0c;一个参数对应一个冒号: 16 /…

UCGUI的模拟器UCGUISim详解

From: http://www.cnblogs.com/shellstudio/articles/ucgui.html 本文转自www.ucgui.com感谢原作者(最近发现该网站已经撤销,不知道作者近况如何.想当初,他对我理解ucgui提供了很多支持和帮助呢!)。 联系方式: ucgui.comgmail.com 一、问题的由来-----模拟器完成了什么 在官方发…

php 最后几个字符,php怎么去掉最后三个字符

在php中&#xff0c;可以利用substr()函数来去掉字符串最后三个字符&#xff0c;该函数可以返回字符串的一部分&#xff1b;具体语法格式为“substr(指定字符串,0,-3)”。本教程操作环境&#xff1a;windows7系统、PHP7.1版&#xff0c;DELL G3电脑php去掉字符串最后三个字符he…

透过北京通信展看国产手机的崛起

透过北京通信展看国产手机的崛起<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />小刀马北京国际通信展已经落下了帷幕&#xff0c;多少繁花似锦都已归尘土&#xff0c;本届通信展到底给我们留下了什么印象什么回忆&#xff1f;大…

Spark(四) -- Spark工作机制

一、应用执行机制 一个应用的生命周期即&#xff0c;用户提交自定义的作业之后&#xff0c;Spark框架进行处理的一系列过程。 在这个过程中&#xff0c;不同的时间段里&#xff0c;应用会被拆分为不同的形态来执行。 1、应用执行过程中的基本组件和形态 Driver&#xff1a; 运…