zoukankan      html  css  js  c++  java
  • 2.CSS 的元素显示模式

    1. 什么是元素显示模式
    作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
    元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>。
    HTML 元素一般分为块元素行内元素两种类型
     
    2 块元素
    常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。
    块级元素的特点:
    ①比较霸道,自己独占一行。
    ②高度,宽度、外边距以及内边距都可以控制。
    ③宽度默认是容器(父级宽度)的100%。
    ④是一个容器及盒子,里面可以放行内或者块级元素。
    注意:
    文字类的元素内不能使用块级元素
    <p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
    同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
     
     
    3. 行内元素
    常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
    行内元素的特点:
    ①相邻行内元素在一行上,一行可以显示多个。
    ②高、宽直接设置是无效的。
    ③默认宽度就是它本身内容的宽度。
    ④行内元素只能容纳文本或其他行内元素。
    注意
    链接里面不能再放链接
    特殊情况链接 <a> 里面可以放块级元素,但是给 <a> 转换一下块级模式最安全
     
    4.行内块元素
    在行内元素中有几个特殊的标签 —— <img />、<input />、<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
     
    行内块元素的特点:
    ①和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
    ②默认宽度就是它本身内容的宽度(行内元素特点)。
    ③高度,行高、外边距以及内边距都可以控制(块级元素特点)
     
    5.元素显示模式总结
    学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。
     
     
    6. 元素显示模式转换
    特殊情况下,我们需要元素模式的转换,简单理解: 一个模式的元素需要另外一种模式的特性
    比如想要增加链接 <a> 的触发范围。
    转换为块元素:display:block;
    转换为行内元素:display:inline;
    转换为行内块:display: inline-block;
    <header>
    <style>
            a {
                 150px;
                height: 50px;
                background-color: pink;
                /* 把行内元素 a 转换为 块级元素 */
                display: block;
            }
     
            div {
                 300px;
                height: 100px;
                background-color: purple;
                /* 把 div 块级元素转换为行内元素 */
                display: inline;
            }
     
            span {
                 300px;
                height: 30px;
                background-color: skyblue;
                display: inline-block;
            }
        </style>
    </head>
     
    <body>
        <a href="#">金星阿姨</a>
        <a href="#">金星阿姨</a>
        <div>我是块级元素</div>
        <div>我是块级元素</div>
        <span>行内元素转换为行内块元素</span>
        <span>行内元素转换为行内块元素</span>
    </body>
     
     
    7. 一个小工具的使用 snipaste
    Snipaste 是一个简单但强大的截图工具,也可以让你将截图贴回到屏幕上.
    常用快捷方式:
    1.F1 可以截图. 同时测量大小, 设置箭头 书写文字等
    2.F3 在桌面置顶显示
    3.点击图片, alt 可以取色 (按下shift 可以切换取色模式)
    4.按下esc 取消图片显示
     
    8. 一个小技巧 单行文字垂直居中的代码
    CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.
    解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
     
     
    单行文字垂直居中的原理
     

     

     
  • 相关阅读:
    USACO Milk2 区间合并
    Codeforces 490B Queue【模拟】
    HDU 3974 Assign the task 简单搜索
    HDU 5119 Happy Matt Friends(2014北京区域赛现场赛H题 裸背包DP)
    Cin、Cout 加快效率方法
    POJ 1159 回文LCS滚动数组优化
    POJ 2479 不相交最大子段和
    POJ 1458 最长公共子序列 LCS
    在阿里最深刻的,还是职场之道给我的震撼
    精细化
  • 原文地址:https://www.cnblogs.com/GHNSL/p/13654697.html
Copyright © 2011-2022 走看看