HTML学习（V）

前端

本篇是关于css样式的设计技巧。
2017.3.28初稿 2017.3.30二改。

css样式设计技巧：

单位！！单位！！！宽度长度的单位（比如px）不要忘了写！！！血的教训啊……

1.水平居中

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{
	text-align:center;
}
</style>
……
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

(2)定宽块状元素：定宽块状元素即为宽度width为固定值的块状元素，设置“左右margin”值为“auto”来实现居中。如

1
2
3
4
5
6
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

【定的宽是div元素的宽，居中显示的是div元素。】

(3)不定宽块状元素：有三种方法，如下

·加入 table 标签：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )；为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

1
2
3
4
5
6
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

·设置 display: inline ：改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。如下

html代码为：

1
2
3
4
5
6
7
8
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>        
    </ul>
</div>
</body>

css代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

·设置 position:relative 和 left:50% ：给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}

【假设 | 为页面的中线，则第一次右移之后变为 |- -，第二次左移之后变为 -|- 】

2.垂直居中

(1)父元素高度确定的单行文本：设置父元素的 height 和 line-height 高度一致。

(2)父元素高度确定的多行文本、图片等：两种设置方法。

·使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。如下

1
2
3
4
5
6
7
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

（ td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。）

·设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性。如

1
2
3
4
5
6
7
8
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*兼容IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*兼容IE8以上及Chrome、Firefox*/
}
</style>




这部分也结束了啊，最后这部分不是特别懂，也不怎么会用，多练练吧~加油呀

2017.3.30笔记

列布局-自动居中
1.标准文档流
2.块级元素
3.margin属性

为父层设置宽度值，为子层宽度设置为100%；
外面的总的包裹层（如wrap），样式设置为 #wrap{width:770px;margin:0 auto;} ；
auto会根据浏览器的宽度自动的设置两边的外边距；
原理是：（浏览器的宽度-外包含层的宽度）/2=外边距；
但是不能为外包含层设置浮动（float:left）或者绝对定位属性（position:absolute），否则无法自动居中。