03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中

一、CSS操作规范

1、CSS书写技巧

（1）最外层是一个<div id="bigDiv">，将所有元素都包进去

（2）去除<body>的外边距（body{margin: 0px;}），因为不同浏览器对body边距的处理有差别

（3）去除所有元素的内外边距（*{padding: 0px; margin: 0px;}），并让最大的盒子水平居中（#bigDiv{margin: 0px auto;}）

（4）布局多用<div>，使用4个属性：border=0、padding=0、margin=0、width

（5）做背景图片时，使用background这一背景属性（background-image：url(xxx/xxx.jpg);）。如果想将<ul>中<li>前的默认图标（实心圆点）换掉，要先将<ul>中<li>前的默认图标样式清除（list-style: none; ），之后加入自定义图片为其设置新的图标样式（list-style-image：url(xxx/xxx.jpg);）

（6）使用标签时，要先考虑是块元素还是行内元素

注：除使盒子居中，距浏览器的上下边距使用margin外，其他最好都使用padding。因为margin的兼容性不好

<head><title></title><style type="text/css">/* 去除<body>的外边距 */body {margin: 0px;}/* 去除所有元素的内外边距 */* {padding: 0px;margin: 0px;}/* 让最大的盒子水平居中 */#bigDiv {margin: 0px auto;}/* 为<ul>设置背景图片 */ul {background-image: url("1.jpg");}/* 将<li>前的默认图标（实心圆点）换掉 */ul li {padding: 10px;margin: 20px;/* 清除默认样式 */list-style: none;/* 添加自定义图片样式 */list-style-image: url("1.jpg");}</style>
</head>
<body><!-- 最外层是一个<div>，将所有元素都包进去 --><div id="bigDiv"><!-- 为<ul>设置背景图片 --><ul><!-- 将<li>前的默认图标（实心圆点）换掉 --><li>xxx</li></ul></div>
</body>

二、通栏布局

1、导航栏和页面底部为通栏模块，它们始终横铺于浏览器窗口中。通栏布局的关键在于在相应模块的外面添加一层<div>，并将外层<div>的宽度设置为100%。而对于内部的子盒子，只要固定宽度并居中对齐即可

三、标签的注意事项

1、图片<img>

（1）默认情况下图片不显示边框，但在图片作为超链接时，会显示边框。border=0即可消除超链接图片的边框

（2）图片的宽高（width、height）通常只设置其中的一个，另一个会按原图等比例显示

2、表格<table>

（1）在没有添加css样式之前（默认情况下），表格没有边框/表格线，即border=0

（2）表格的宽度和高度靠其自身的内容来支撑，也可以设置width和height

（3）表格不能加滚动条，可以在<table>外嵌套一个<div>，设定<div>的高度，然后给<div>加滚动条（overflow: auto;）

（4）表格嵌套表格：里面表格的宽度一般用百分比（不设固定值），根据外面表格的变化而变化

（5）border-collapse: collapse;：表格边框合并，此时HTML中设置的cellspacing属性值无效

3、行<tr>

1、<tr>没有width属性，<tr>的宽度取决于<table>

2、<tr>没有border属性，但<th>、<td>有border属性

4、单元格<td>

1、<td>中有padding属性，但无margin属性（对<td>设置margin无效）

四、三大类标签（块元素、行内元素、行内块元素）

1、块元素

（1）块元素可以设置宽高、行高、顶底边距以及对齐属性

注：text-align只对块元素有效（eg：块元素中的文本、图片等内容），对行内元素无效

2、行内元素

（1）行内元素不可以设置宽高、顶底边距以及对齐属性

a). 行内元素的宽度由其内容决定

b). 行内元素只可以定义左右外边距，不能定义上下外边距（定义上下外边距无效）

3、行内块元素（<img>、<input>）

（1）行内块元素可以设置宽高、行高、顶底边距以及对齐属性

（2）行内块元素不能独占一行

4、行内元素不可以设置宽和高。想要设置宽高，可以将行内元素变成块元素/行内块元素。有以下几种方式：

（1）用 display: block; 将行内元素转成块元素 -- 块元素（display: block;）

（2）浮动（float: left | right;） -- 行内块元素（display: inline-block;）

注：很多浏览器在显示未指定width属性的浮动元素时会出现bug。所以，要为浮动的元素指定width属性

（3）固定定位（position: fixed）的元素会变成块元素，不管原来是什么元素 -- 行内块元素（display: inline-block;）

（4）绝对定位（position: absolute）也可以使行内元素变成块元素 -- 行内块元素（display: inline-block;）

5、display属性

（1）a{display: block;}：行内元素 --> 块元素

（2）div{display: inline;}：块元素 --> 行内元素

（3）display: inline-block;：行内块元素

（4）display: none：元素被隐藏（相当于该元素不存在）

五、边距合并问题（尽量避免使用margin属性）

1、两个垂直块元素的上下外边距会发生合并，取其中较大的一个值

2、行内元素、浮动元素、定位元素，外边距不会发生合并

3、解决办法

（1）增加上面元素的下外边距，并将下面元素的上外边距设置为0px -- 兼容性较好

（2）在上下两个元素的中间，加一个高为100px的空<div>，然后将上面元素的下外边距和下面元素的上外边距都设置为0px -- 兼容性更好（不用margin）

六、图文混排

1、步骤

（1）先将数据进行标签的封装（外层都用<div>封装，因为<div>操作是统一化的）

    <!-- 文字和图片是一体的，外层也用<div>标签封装 --><div>    <!-- 用<img>标签封装图片，再用<div>标签封装<img>标签 --><div><img src="" /></div><!-- 用<div>标签封装文字内容 --><div>图文混排中的文字内容</div></div>

（2）给不同的<div>起名字，用id属性

（3）在<style type="text/css"></style>标签中加css样式

<head><title></title><style type="text/css">/* 对最外层的<div>设置宽高 */#imgtext {width: 500px;height: 300px;border: 1px solid red;}img {width: 300px;/* 图片的宽高（width、height）通常只设置其中的一个，另一个会按原图等比例显示 *//*height: 300px;*/}/* 图片左浮动 *//* 图片一个<div>，文字一个<div>，两者外层还有一个<div>。此时，图片漂浮起来，也得在外层<div>范围内 */#img {/* 图片左漂浮（居左） */float: left;/* 图片右漂浮（居右） *//*float: right;*/}/* 如果文字不想受漂浮的影响，或只想受左漂浮的影响，设置clear: both; 或 clear: right; */#text {/*clear: both;*//*clear: left;*/}</style>
</head>
<body><!-- 文字和图片是一体的，外层也用<div>标签封装 --><div id="imgtext"><!-- 用<img>标签封装图片，再用<div>标签封装<img>标签 --><div id="img"><img src="1.jpg"/></div><!-- 用<div>标签封装文字内容 --><div id="text">图文混排中的文字内容。图文混排中的文字内容。图文混排中的文字内容。</div></div>
</body>

七、图像签名

1、在图片上显示文字（文字在图片上，随图片移动）

<head><title></title><style type="text/css">img {width: 500px;/* 图片的宽高（width、height）通常只设置其中的一个，另一个会按原图等比例显示 *//*height: 300px;*/}#text {font-family: "中华隶书";font-size: 24px;color: red;/* 文字脱离文档流，用absolute *//* 需要相对于父<div>进行偏移，而不是相对于<body>。所以，父<div>也要进行定位 */position: absolute;top: 30px;left: 30px;}#imgtext {border: 1px solid red;/* 和<img>标签的宽度一样 */width: 500px;/* 需要相对于父<div>进行定位，所以父<div>需要设置position，但可以不设偏移属性 */position: relative;}</style>
</head>
<body><div id="imgtext"><div id="img"><img src="1.jpg"></div><div id="text">显示在图片上的文字</div></div>
</body>

注：上面的代码，保存图片时不会保存文字。因为图片和文字是两部分内容，只是用了定位position让文字显示在图片上而已（文字本身不属于图片）

八、水平居中

1、行内元素水平居中

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align: center; 来实现的

<head><style type="text/css">img {width: 500px;}#imgCenter {border: 1px solid red;/* 父元素水平居中 */text-align: center;}</style>
</head>
<body><div id="imgCenter"><img src="1.jpg"/></div>
</body>

2、块元素水平居中，根据块元素的宽度width是否为固定值，分为两类

（1）定宽块元素水平居中：通过设置"左右margin"的值为auto来实现水平居中（"上下margin"的值可以随意设置）

<head><style type="text/css">div {border: 1px solid red;/* 定宽块元素 */width: 200px;/* margin-left和margin-right设置为auto，margin-top和margin-bottom随意 */margin: 20px auto;}</style>
</head>
<body><!-- 定宽块元素：块元素的宽度width为固定值 --><div>定宽块元素水平居中</div>
</body>

（2）不定宽块元素水平居中，有三种方法

方法一：加入<table>标签

方法二：设置 display: inline; ，将该不定宽块元素设置为行内元素显示。然后使用行内元素水平居中的方式（给父元素设置 text-align: center;）对其进行设置

方法三：设置 position: relative; 和 left: 50%; ，利用相对定位的方式，将元素向左偏移50%，即达到水平居中的目的

具体如下：

方法一：加入<table>标签。利用<table>标签的长度自适应性 -- 既不定义<table>的长度，也不默认父元素<body>的长度（<table>的长度根据其内文本长度决定），因此可以看做是一个定宽块元素。然后再利用定宽块元素水平居中的方法（"左右margin"的值为auto），使其水平居中

a). 为需要设置居中的元素外面加入一个<table>标签（包括<tbody>、<tr>、<td>）

b). 为这个<table>设置"左右margin"的值为auto，使其水平居中

<head><style type="text/css">table {border: 1px solid red;margin: 0px auto;}</style>
</head>
<body><div><table><tbody><tr><td><!-- 需要水平居中的不定宽块元素（整个<ul>水平居中） --><ul><li>我是第一行文本</li><li>我是第二行文本</li><li>我是第三行文本</li></ul></td></tr></tbody></table></div>
</body>

注：

a). 让<div>xxx</div>的整个<div>水平居中，使用上面的方法

b). 让<div>xxx</div>中的文本内容水平居中，直接给该<div>添加"text-align: center;"样式即可

方法二：

a). 设置 display: inline; ，将该不定宽块元素设置为行内元素显示

b). 使用行内元素水平居中的方式（给父元素设置 text-align: center;）对其进行设置

<head><style>ul {/* 将不定宽块元素设置为行内元素 */display: inline;list-style: none;/* 消除文本与<div>边框之间的间隙 */padding: 0;margin: 0;}li {/* 将不定宽块元素设置为行内元素 */display: inline;/* 设置<li>文本之间的间隔 */margin-right: 8px;}/* 父元素水平居中 */#container {text-align: center;}</style>
</head>
<body><div id="container"><!-- 设置页码（不定宽块元素）水平居中 --><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></div>
</body>

注：这种方法相比第一种方法的优势是不用增加无意义的标签，但也存在着一些问题：将块元素变成行内元素（display: inline;），会少一些功能（eg：设定长度值）

方法三：通过设置浮动和相对定位来实现不定宽块元素水平居中

a). 给父元素设置float

b). 给父元素设置 position: relative; 和 left: 50%;

c). 给子元素设置 position: relative; 和 left: -50%;

<head><style>#container {/* 给父元素设置float */float: left;/* 给父元素设置 position: relative; 和 left: 50%; */position: relative;left: 50%}ul {list-style: none;margin: 0;padding: 0;/* 给子元素设置 position: relative; 和 left: -50%; */position: relative;left: -50%;}li {float: left;display: inline;margin-right: 8px;}</style>
</head>
<body><div id="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></div>
</body>

注：可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线，将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中

九、垂直居中

1、垂直居中分两种情况：父元素高度确定的单行文本和父元素高度确定的多行文本

2、父元素高度确定的单行文本的垂直居中的方法，是通过设置父元素的 height（元素的高度）和 line-height（行高/行间距）的高度一致来实现的

注：

（1）line-height和font-size的计算值之差，在css中叫"行间距"。分为两半，分别加到一个文本行内容的顶部和底部

（2）这种文字行高（line-height）和块高（height）一致有一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块

<head><style>#container {/* 父元素高度确定的单行文本的垂直居中：height与line-height高度一致 */height: 100px;line-height: 100px;background: #999;/* 弊端：当文字内容的长度大于块的宽时，就有内容脱离了块 *//*width: 300px;*/}</style>
</head>
<body><div id="container">文字内容（当文字内容的长度大于块的宽时，就有内容脱离了块）</div>
</body>

3、父元素高度确定的多行文本、图片等的垂直居中，有两种方法

（1）方法一：插入<table>标签（包括<tbody>、<tr>、<td>），同时设置 vertical-align: middle;

注：css中有一个用于垂直居中的属性vertical-align。在父元素设置此样式时，会对inline-block类型的子元素都有用

<head><style>table td {height: 500px;background: #ccc;/* <td>标签默认设置了 vertical-align: middle;，所以不需要再显式设置此属性 *//*vertical-align: middle;*/}</style>
</head>
<body><table><tbody><tr><td class="wrap"><!-- 父元素高度确定的多行文本、图片等的垂直居中 --><div><p>可以垂直居中的文本内容 </p></div></td></tr></tbody></table>
</body>

（2）方法二：设置块元素的 display: table-cell;（设置为表格单元显示），同时激活vertical-align属性。这种方式在Chrome、Firefox及IE8以上的浏览器中有效，但IE6、IE7不支持此样式（兼容性较差）

<head><style>#container {height: 300px;background: #ccc;/* 只适用于Chrome、Firefox和IE8以上 *//* 设置块元素的 display: table-cell; */display: table-cell;/* 激活vertical-align属性 */vertical-align: middle;}</style>
</head>
<body><!-- 父元素高度确定的多行文本、图片等的垂直居中 --><div id="container"><p>可以垂直居中的文本内容 </p><p>可以垂直居中的文本内容 </p><p>可以垂直居中的文本内容 </p></div>
</body>

注：这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好（不兼容IE6、IE7）。而且这样修改display的block变成了table-cell，破坏了原有的块元素的性质

03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中相关推荐

html怎么制作图文混排页面,CSS 网页图文混排的10个技巧
1. 首行缩进你知道的,从小学,老师就教我们,段落的开头应该空两格.而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了.当然,你可以用来代替一个空格,但这不是理 ...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码. 今天我们共同学习一款"图文混排CSS列表&qu ...
python 输出结果图文混排_div css图文混排列表设计中的基础问题总结
最近业务需要,想设计一个比较通用的图文混排的列表.结果设计的过程中遇到了不少问题,虽然都是一些css设计中比较基础的问题,但是自己认为有必要总结下,希望可以帮到一些css设计的初学者,同时也想扩大下自 ...
用CSS实现HTML图文混排
在网页中经常需要文字环绕图片,或文字与图片分开来排列,目前常用的方法是使用表格来定位文字和图片以此来实现 .但对于动态的网页,图文混排的格式并不是一成不变的所以要想动态的生成表格来实现图文混排是非常困 ...
css控制图文混排、图文自适应容器显示的效果
闲来无聊,写了一个css控制图文混排.图文自适应容器显示的效果. 下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果. 留存参考: <!DOCTYPE html /&g ...
CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属 ...
css制作竖向图文列表,上下结构的图文混排CSS列表.pdf
上下结构的图文混排CSS列表天我们共同学习一款经常能用到的图文混排CSS 列表"的制作.首先从分析一下此列表的特点,然后编写HTML 代码,最终应用CSS 样式实现最终的效果.在52C ...
html5网页制作图文混排,03第3章制作图文混排网页.docx
第3章制作图文混排网页图像也是网页中的主要元素之一,图像不但能美化网页, 而且能够更直观地表达信息. 在页面中恰到好处地使用图像,能使网页更加生动.形象和美观. [教学导航] 教学目标 (1)学会通 ...
Word图文混排中图片的高级处理技巧
Word图文混排中图片的高级处理技巧 1.插入联机图片 2.图片的处理方式 1.插入联机图片 2.图片的处理方式

03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中

03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中相关推荐

最新文章

热门文章