The most comprehensive common techniques for CSS development

CSS (Cascading Style Sheets) is a computer language used to express file styles such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). CSS can not only statically modify web pages, but can also cooperate with various scripting languages ​​to dynamically format various elements of web pages. CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page object and model styles.

Benefits of using css abbreviations

Using abbreviations can help reduce the size of your CSS file and make it easier to read.

Explicitly define units unless the value is 0, as well as px and em distinctions.

Forgetting to define the unit of size is a common mistake among CSS newbies. In HTML you can just write width="100", but in CSS you must give an exact unit, such as: width:100px width:100em. There are only two exceptions for not defining units: row height and 0 value. In addition, other values ​​must follow the unit. Be careful not to add spaces between the value and the unit. The px unit is suitable for fixed layouts such as 960Grid. em is suitable for fluid layouts.

Use line-height for vertical centering, and experimental demonstration of the difference between line-height and height

line-height:24px; When using a fixed-width container and need a row to be vertically centered, use line-height That’s it (the height is the same as the parent layer container.

Syntax:

 line-height : normal | length

Parameters:

normal: Default row height

length: Percentage number | By The length value composed of floating point numbers and unit identifiers is allowed to be negative. The percentage value is based on the height size of the font. See length unit
Description:
Retrieve or set the line height of the object. The distance between the bottom and the top of the font. If there are multiple objects in the line, the maximum line height cannot be negative.

<div style="line-height:24px; border:2px; border-style:dashed; margin:">
使用 line-height 垂直居中<br />
使用 line-height 垂直居中<br />
使用 line-height 垂直居中<br />
使用 line-height 垂直居中<br />
</div>

Clear container float, and overflow:hidden; Association of clear:both

#main {overflow:hidden; },clear:both;clear:left;clear:right; Overflow can be used to clear the overall container such as Body, and clear can be used to clear the div. And it is more flexible. It is also a very commonly used two attributes: clear: none | left | both

Parameters:

none: allowed. There can be floating objects on both sides

both: Floating objects are not allowed

left: Floating objects are not allowed on the left side

right: Floating objects are not allowed on the right side Description: The The value of the attribute indicates the edge on which floating objects are not allowed.

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

Syntax: overflow : visible | auto | hidden | scroll

Parameters:

visible: Do not cut the content or add scroll bars. If this default value is explicitly declared, the object will be cut to the size of the window or frame containing the object. ;The clip attribute setting will be invalid

auto: This is the default value for the body object and textarea. Cut the content and add scroll bars when needed

hidden: Do not display content that exceeds the object size

scroll: Always display scroll bars

Description:

Retrieve or set how to manage content when the content of the object exceeds its specified height and width. Setting the textarea object to the hidden value will hide its scroll bars. For tables, if the table-layout attribute is set to fixed, the td object supports the overflow attribute with a default value of hidden. If set to hidden, scroll or auto, content exceeding the td size will be cut. If set to visible, it will cause extra text to overflow to the cells on the right or left (depending on the direction property setting). Starting with IE5, this property is available on MAC platforms.

Do not allow links to wrap

a { white-space: nowrap; } p { white-space: nowrap; } The above settings can prevent links from wrapping.

Syntax: white-space : normal | pre | nowrap

Parameters:

normal: Default processing method

pre: Display pre in fixed-width font Formatted text. Do not merge spacing between words and perform justification. See pre object

nowrap: Force all text to be displayed on the same line until the end of the text or a br object is encountered. See the nowrap attribute (property) of td, div and other objects

Description: Set or retrieve the processing method of spaces within the object.

Always make Firefox show scroll bars

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

2 body, html {min-height:101%; } If it is greater than 100%, a scroll bar will inevitably appear.

Center the block element horizontally

margin:0 auto; is actually margin-left: auto; margin-right: auto; (top, right, bottom, left), remember one rule. Turn clockwise.

body{text-align: center; }

Then define the inner container text-align: left;

Hide the scroll bar of the Explorer textarea

textarea { overflow:auto; }

Exploer By default textarea will have vertical scroll bars (don't ask me why).

Set printing paging (if the experiment is not successful and the effect is not seen, please communicate)

h2 {page-break-before:always; } The page-break-before attribute can set the page break when printing a web page. Pagination.

Syntax:

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

Parameters:

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盒模型的区别

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

认识日常生活中盒子：

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

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

通常我们这样： 
一组

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

日常使用CSS盒子： 
我们说将什么内容放入一个盒子里，我们就要想到是放入

里，脑海里就要这个概念。 
假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：

Css样式代码： 

.yangshi{width:100px;}

对应html代码： 

<div class="yangshi">内容</div>

这个时候我们可以将

<div class="yangshi">内容</div>看作为一个盒子。

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

相关推荐：

巧用css代码打造圆角table

css3简单图形绘制教程

html和css中常见的浏览器兼容性问题

The above is the detailed content of The most comprehensive common techniques for CSS development. For more information, please follow other related articles on the PHP Chinese website!