CSS布局小技巧

来源：互联网发布：一手数据编辑：程序博客网时间：2024/04/29 08:39

1.让文字在盒子里垂直居中：把文字的行高设置为盒子的高度即可实现文字垂直居中。

2.图片的垂直居中：vertical-align:middle;

3.color和backgroundcolor的区别？

color文字颜色background-color背景色

4.填充padding的使用。

CSS Padding（填充）属性定义元素边框与元素内容之间的空间。例如有一个文本框的宽度是30px，如果在文本框内输入的内容太长，则有可能覆盖文本框的背景图片，为了解决这个问题，可以设置文本框的右边距为20px，即padding-right:20px;

5.background和background-color的区别

background 可以设置背景颜色、背景图片、定位等

background-color 只能设置背景颜色

设置background-color: #aaa;时仅仅改变了背景色，但此时有一个默认的的background:repeat;

而设置background: #aaa;后，相当于同时设置了background:no-repeat;

既{background-color: #aaa;background:no-repeat;}=={background: #aaa;}

6.布局时为了兼容IE浏览器，一般把span标签放在li的考前位置。例如：<li><span>2014-1-4</span><a href="news.html">【慕课访谈用户篇】“有位屌丝”在路上</a></li>。

7.给内联元素设置宽，高，margin，padding等属性无作用，解决方法是：给span设置display:inline-block.

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> 。

8.有些样式需要应用于所有网页。可以用通用选择器，即*{}。

9.文本样式，1.文本缩进：text-indent 。例如：p {text-indent: 5em;}

10.布局时，有些盒子的内容偏多，如果设置固定的盒子宽度，责可能造成内容过多溢出，为了解决这个问题，可以给盒子设置最小的高度。即：min-height:299px;这样设置后，同时还能解决内容自适应时的盒子边框问题。

0 0