CSS总结4

元素的显示模式

块级元素：

  • 独占一行（一行只能显示一个）

  • 宽度默认是父元素的宽度，高度默认由内容撑开

  • 可以设置宽高

div ，p，h1~h6，dl，ul，li，dt，dd，header，footer，nav，main，form...

行内元素:

  • 一行可以显示多个

  • 宽度和高度默认由内容撑开

  • 不可以设置宽高

span,a,b,u,i,strong,em...

行内块元素

  • 一行可以显示多个

  • 可以设置宽高

input textarea,select,button，img...

元素显示模式转换

改变元素显示的特点，让元素符号我们布局要求

display:block;         转换为块元素    
display:inline-block;  转换为行内块元素 
display:inline;        转换为行内元素    极少使用 
  

注意: 几乎不会把块元素转换为其它元素，用的最多的是把行内元素转换为行内块或者块，比如a

元素嵌套规范

块元素一般作为大容器，可以嵌套文本，块元素，行内元素，行内块元素等...

注意 p标签里不能嵌套 p，div，h等块级元素

a标签内部可以嵌套任意标签

注意: a标签不能嵌套a标签

行内元素不要嵌套块元素

元素和内容的居中方法

元素 <标签名>内容</标签名>

标签 <标签名>

内容 xxx

代码

 <style>
      .main {
        text-align: center;
      }
      /* marign */
      .container {
        width: 300px;
        height: 100px;
        background-color: red;
        margin: 0 auto;
      }
      .head {
        width: 400px;
        height: 50px;
        background-color: yellow;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 
      第一种:
      text-align(文本，行内元素，行内块元素)
      如果要让以上内容实现居中，给他们的父元素(块)设置  text-align属性
    -->
    <div class="main">hello world</div>
    <div class="main">
      <span>span标记</span>
    </div>
    <div class="main">
      <img src="./img/logo.png" width="100" alt="" />
    </div>
    <div class="main">
      <input type="text" />
    </div>

    <hr />
    <!-- --------------------------------------------------- -->
    <!-- margin:0 auto
     块元素水平居中，直接给当前元素设置属性
    -->
    <div class="container"></div>

    <!-- 垂直居中 
    line-height  单行文本 -->
    <div class="head">我是头部页面</div>

CSS特性

继承性

子元素继承父元素样式的特点

//继承常见的属性
文字属性都可以继承
color
font-style，font-weight，font-size，font-family
text-indent，text-align
line-height
list-style
....
//通过调试工具可以判断是否可以继承

好处:在一定程度上减少代码

应用：

  • 给ul设置list-style:none；去除默认的小圆点样式

  • 给body设置统一的font-size的样式，统一不同浏览器的默认文字大小（移动端）

继承性失效问题

<style>
      .main {
        font-size: 14px;
      }
​
      .box {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 元素有浏览器默认的样式，继承性依然存在，但是优先显示浏览器默认样式
     1: h标题系列的标签，font-size会继承失效
     2：a标签color会继承失效
    -->
​
    <div class="main">
      我是h3标记
      <!-- 浏览器默认的字体大小样式 把继承的font-size给覆盖了 -->
      <h3>我是h3标记</h3>
    </div>
​
    <div class="box">
      box标记
      <a href="#">超链接</a>
    </div>

 

层叠性

<style>
      p {
        color: red;
      }
      .main p {
        
        
        /* 层叠覆盖 */
      }
      /* 以上两个样式共同作用域p标记 层叠性 */
    </style>
  </head>
  <body>
    <div class="main">
      div标记
      <p>p标记</p>
    </div>
  </body>

选择器的优先级

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

!important 写在属性值的后面 分号的前面
!important提升不了继承的优先级，只要是继承优先级是最低
实际开发中不建议使用!important

复合选择器优先级

!important >id选择器(100)> 类选择器(10)>元素选择器(1)

<style>
   /*11  */
   .one p {
     color: red;
   }
​
   /* 21 */
   .one > .active > p {
     color: yellow;
   }
​
   /* 1 */
   p {
     color: blue;
   }
​
   /* 11 */
   .active > p {
     color: blueviolet;
   }
 </style>
</head>
<body>
 <div class="one">
   <div class="active">
     <p>我是p标记</p>
   </div>
 </div>
</body>
 

posted on 2022-08-01 16:56  7891asdf156  阅读(24)  评论(0)    收藏  举报

导航