sample 003中 //关于导航栏

最新推荐文章于 2024-10-10 10:50:43 发布

Sherry1014miss

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量207

点赞数

分类专栏： JS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Sherry1014miss/article/details/121549921

版权

在创建导航栏时，通过将CSS的box-sizing属性设置为border-box，可以允许设置行内元素如ul li和a的宽高，包括边框和内边距，解决百分比宽度与固定边距的冲突。这对于自适应布局尤其有用，但遇到JavaScript无法运行的问题，尚待解决。

摘要由CSDN通过智能技术生成

如果我们经常会制作导航栏，这时就要使用ul li
和a组合的方式，但是<a>是行内元素，我们无法设置它的宽和高，这时，就可以在<a>的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。

box-sizing:border-box;

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，
可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.tab {
     
			box-sizing: border-box;
			width: 960px;
			height: 730px;
			margin: 50px auto;
			border: 1px solid #E0E0E0;/*这个改的颜色是最大盒子的边框*/
			overflow: hidden;/*这个是不要溢出的内容，我浅显的认为*/
			background: #fff;
		}
		ul.tab-nav,
		ul.tab-item {
     
			margin: 0;
			padding: 0;
			width: 100%;
			height: 50px;
			list-style: n