您的位置：首页 > Web前端 > CSS

[js]css导航栏细究

2017-07-31 10:08 225 查看

a元素(行内元素)操作思想1–导航栏li>a

1,转块–display:block

2,设宽–即使设置了宽度也会独占一行

3,浮动

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a1{
display: block;
width: 200px;
float: left;
}
.a2{
display: block;
width: 100px;
float: left;
}
</style>
</head>
<body>
<a href="" class="a1">a1</a>
<a href="" class="a2">a2</a>
<a href="" class="a3">a3</a>
</body>


a元素(行内元素)操作思想2

1,转块–display: inline-block

2,设宽–
inline-block
不会独占一行

好处: 减免了浮动操作

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
display: inline-block;
}
</style>
</head>
<body>
<a href="" class="a1">a1</a>
<a href="" class="a2">a2</a>
</body>


转块 
display block

行内元素转块了,即使设置了宽度,还是单独占一行,除非浮动

display:inline-block既可以设置宽和高,又可以设置

导航菜单实例–最佳代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav{
width: 960px;
height: 50px;
background-color: black;
margin: 0 auto;
}
<
dfcb
span class="hljs-class">.nav ul{
list-style: none;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: inline-block;
height: 50px;
font: 400 15px/50px "微软雅黑";
padding: 0 20px;
text-decoration: none;
color: yellow;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单1234</a></li>
<li><a href="#">导航菜单12345</a></li>
<li><a href="#">导航菜单</a></li>
</ul>
</div>
</body>
</html>


1.整体思路

1.设置宽高背景–居中对齐

2.ul>li左浮动

3.ul>li>a转块,设高(撑开父亲li),设置字体大小行高使居中.

4.a设置padding左右使有间距

2.nav不给高度,a撑不开,为什么?–子浮动,撑不开父 nav(ul)>li

因为a的父li浮动了. 此处a可以撑开li,但是由于li浮动了,无法撑开父.

3.父亲浮动了,子还可以撑高父吗?—父浮动,子可以撑开父 li>a

可以,因为只有父设置了高度,子才没法撑开他.

4.a元素此处使用inline-block和block有啥区别吗?

他们本身是有区别的,行捏元素经过block后,即使设置宽度也会独占一行,除非float.而经过inline-block处理则不会独占一行.免去了float.

然而在此处没啥区别. a的父li,这里是一父一子的形式,,

- 使用inline-block会自适应内容

- 使用 block 会填满li的宽度,独占一行

然而这里li没设置宽,即li的宽度是由a的内容撑大的.所以没区别

盒子加了padding后会被撑大

盒子里套盒子,可以用父盒子调整子盒子的位置

如果加了padding,但是不希望父盒子变大,则需要减少宽高

研究一下padding

h3加padding-top padding-left, 发生位移

盒子即使设置了宽高,加padding 自动撑大

盒子加了宽高,子盒子无法撑大他. 子盒子使用padding可以发生出父盒子.

盒子加padding

盒子加padding调整内容的位置.一般是调整上下,即使撑大也撑大的是上下,本来内容就是要被撑大的

父定位子

子自己定位

垂直居中问题:文本在盒子里要居中

单行文字居中: line-height = div的高度

多行文本居中: 使用padding

padding-top=(盒子高度-总行高)/2

总高度-(盒子高度-总行高)/2 ,如果不减少盒子会被撑大

水平居中问题: text-align: center;-只是针对块级元素

对块级元素居中直接生效

h1 {text-align: center}


对行内元素-情况1-需要将其转块后居中

<head>
<title>Document</title>
<style>
a{
display: inline-block;
width: 400px;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<h1>this is h1</h1>
<a href="">this is an a</a>


对行内元素-情况2,如a,需要把a放到块级元素里才能将它居中.

<head>
<title>Document</title>
<style>
.box1{
width: 200px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>this is h1</h1>
<div class="box1"><a href="">this is an a </a></div>
</body>


盒子撑开问题:

盒子里套盒子,

- 外盒子一旦设置了高度,里面的不会撑大

- 外盒子不设高度,则里面盒子高度会撑大外盒子

float

行内元素float后,自动转块,可以设置宽高了.如a.

2个盒子float第二个—相当于把自己当前位置腾开了

绝对定义–脱标,相对原来位置top left

相对定位:

原来位置定位,还占着,形影分离,能看到的是幻象

不脱标

形影分离,能看到的是幻象,使用margin和padding操作的是他本身位置,不是影子.

使用时候: top:10px,是向下移动,反着的.

作用: 微调元素,如input和按钮之间的位置.

绝对定位

一旦使用定位,则即使行内元素也可以设置高宽

会脱标

相对于页面左上角定位

滚动滚轮经过绝对定位的盒子可以被卷动走.因为参考点是页面右上角

如果使用bottom描述,那么就是浏览器首屏窗口尺寸对应的左下角.

绝对定位后

原来的块级元素不在是块级了 不可以居中.居中方法: left 50%; margin-left: -宽度的一半.

.box1{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
margin-left: -100px;
}


脱标方法

浮动 绝对定位 固定定位

固定定位

做固定的nav

做返回顶部

显示隐藏的区别

overflow: hidden;
溢出隐藏
visibility: none;
隐藏元素
隐藏后还会占据原来位置
display: none;
隐藏元素
隐藏后不会占据原来位置
display: block;
元素可见


次日小结:

padding布局

1.一个盒子 padding定位自己里的内容

一般设padding-top,会撑开


2.父子盒子,父盒子给子盒子定位内容

父设置padding-top padding-left 同样被撑大.


3.父盒子-子盒子, 子盒子设置padding定位自己位置

父盒子不变,子盒子变大.


4.父盒子-子盒子–子子盒子,子盒子,子盒子定位子子盒子的内容

<head>
<meta charset="utf-8">
<style>
/* 大盒子 */
.box1{
width: 200px;
height: 200px;
background-color:pink;
}
/* 子盒子
目的就是为了定位子子盒子*/
.box1 .box11{
/* 子盒子的宽度让充满父盒子 */
width: 50px;
height: 100px;
/* 待子子盒子位置位置通过padding调整好后这个子盒子颜色干掉. */
/* background-color: green; */
padding-top: 50px;
padding-left: 50px;
}
/* 子子盒子 */
.box1 .box11 .box111{
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box11">
<div class="box111">12</div>
</div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航