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）使⽤标签时，要先考虑是块元素还是⾏内元素
padding是外边距还是内边距
注：除使盒⼦居中，距浏览器的上下边距使⽤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、在图⽚上显⽰⽂字（⽂字在图⽚上，随图⽚移动）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。