css display属性

display属性值有block和inline。分别代表块级元素和行内元素。

块级元素有:段落、标题、列表等。在浏览器中上下堆叠显示。
行内元素有:a/span/img。并排显示。


一个小栗子,可以在菜单栏中将超链接(a)由块级元素设为行级元素,他就可以填满父级元素了。

css display属性_第1张图片
html:


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜单栏title>
    
    <link rel="stylesheet" href="../css/menu.css" type="text/css">
head>
<body>
    <nav class="list1">
        <ul>
            <li><a href="#">Testfdfdfdsa>li>
            <li><a href="#">Testfdfdfdsa>li>
            <li><a href="#">Testfdfdfdsa>li>
            <li><a href="#">Testfdfdfdsa>li>
        ul>
    nav>
body>
html>

scss:
(scss是css的预处理语言,很好用,编译器也可以直接将scss转换为css,结构清晰,很方便)

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

li {
  list-style: none;
}

.list1 {
  margin: 10px;
  width: 150px;
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    +li {
      border-top: 1px solid #7ba694;
    }
    a{
      font-family: SimSun-ExtB;
      display: block;
      text-align: center;
      padding: 10px 0;
      &:hover {
        background-color: antiquewhite;
      }
    }
  }
}

稍微改一点,用float就可以变为横着的菜单了:
css display属性_第2张图片

你可能感兴趣的:(前端)