css学习（4）

最新推荐文章于 2024-03-16 09:32:43 发布
最新推荐文章于 2024-03-16 09:32:43 发布
阅读量144 收藏
点赞数
分类专栏： 前端（html+css+js） 文章标签： css 学习 ruby
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua_Piter/article/details/128140582
版权

css学习（4）

一、css学习

1. 1 strong与b、em与i

表现形态都是 文本加粗 和 文本斜体

区别：是否具备语义化

1. 2.引用标签

blockquote : 引用大段的段落解释
q : 引用小段的短语解释
abbr : 缩写或首字母缩略词
address : 引用文档地址信息
cite : 引用著作的标题
在这里插入图片描述

1. 3.iframe标签

可以引入其他的html到当前html中显示。

主要是利用iframe的属性进行样式的调节。

在这里插入图片描述


    <iframe srcdoc="<h1>hello world</h1>" src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe>
   <iframe src="https://www.taobao.com" frameborder="0" scrolling="no"></iframe>

1. 4. br 与 wbr

1. br 就是换行、  
2. wbr 就是软换行（在指定时机进行换行）

1. 5. pre 与 code

针对网页中的程序代码的显示效果。

  <pre><code>&lt;!DOCTYPE html&gt;
            &lt;html lang=&quot;en&quot;&gt;
            &lt;head&gt;
                &lt;meta charset=&quot;UTF-8&quot;&gt;
                &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
                &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
                &lt;title&gt;Document&lt;/title&gt;
            &lt;/head&gt;
            &lt;body&gt;
                hello world
            &lt;/body&gt;
            &lt;/html&gt;
            </code></pre>

1. 6.map 与 area

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

    <!-- <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt=""> -->矩形
        <!-- <area shape="circ" coords="300 130 50" href="" alt=""> -->圆形
        <area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">多边形

1. 7. embed 与 object

给flash和一些插件进行渲染操作的标签。

1. 8. audio 与 video

引入音频与视频的标签。属于H5的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <audio src="./img/johann_sebastian_bach_air.mp3" controls loop autoplay></audio> -->
    <!-- <video src="./img/Intermission-Walk-in_512kb.mp4" controls></video> -->
    <video>
        <source src="./img/Intermission-Walk-in.ogv"></source>
        <source src="./img/Intermission-Walk-in_512kb.mp4"></source>
    </video>

    <div style="position: relative; height:250px; overflow: hidden;">
            <video style="min-width:100%; min-height:100%;" loop="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-fullscreen="false" x5-video-player-type="h5" id="introvideo" autoplay="">
                    <source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.mp4" type="video/mp4">
                    <source src="http://shimmer.neusoft.edu.cn/h/www/media/intro2016.webm" type="video/webm">
            </video>
    </div>
</body>
</html>

1. 9. 文字注解

  1. ruby标签定义ruby注释(中文注音或字符），rt标签定义字符（中文注音或字符)的解释或发音。
  2. bdo标签可覆盖默认的文本方向。
<style>
        span{direction: rtl;unicode-bidi: bidi-override;}
    </style>
</head>
<body>
    <ruby>
        寒<rt>han</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">创作中心</bdo>创作中心
    </p>
    <p>
        <span>创作中心</span>创作中心
    </p>
</body>

1. 10、扩展link标签

1、添加网址标题栏前的小图标：

<link rel="icon" type="/image/x-icon" href="">

2、加快访问速度

<link rel="dns-prefetch" href="远程IP地址">

1. 11、扩展meta标签

1、定义可描述的内容及辅助信息

 <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">

2、功能
渲染模式、刷新、缓存

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="3" url="">
    <meta http-equiv="expires" content="">

二、HTML语义化

2.1 HTML5新语义化标签

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航

header、footer、main在一个网页中只能出现一次

  1. artcle：独立的内容
  2. aside：辅助信息的内容
  3. section：区域
  4. figure：描述图像或视频
  5. figcaption：描述图像或视频的标题部分
  6. datalist：选项列表
  7. details/summary：文档细节/文档标题
  8. progress/meter：定义进度条/定义度量范围
  9. time：定义日期或时间
  10. mark：带有记号的文本
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                新水果篮子 高甜
                                <br>
                                十二生肖恋上美少女
                            </figcaption>
                        </figure>
                    </li>
                </ul>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                新水果篮子 高甜
                                <br>
                                十二生肖恋上美少女
                            </figcaption>
                        </figure>
                    </li>
                </ul>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                新水果篮子 高甜
                                <br>
                                十二生肖恋上美少女
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section>
                <input type="text"list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="ac"></option>
                    <option value="ad"></option>
                    <option value="ae"></option>
                </datalist>
                <details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="5"></progress>
                <meter min="0" max="100" value="35" low="10" high="60"></meter>
                <p>
                    今天是<time title="2-14">情人节</time>，街上人很多
                </p>
                <p>
                    今天是<mark>情人节</mark>，街上人很多
                </p>
            </section>
            <section></section>
        </article>
        <aside>

        </aside>
    </main>
    <footer></footer>
</body>
</html>

三、flex弹性盒模型

在这里插入图片描述

3.1 flex-direction

控制子项整体布局方向，是从左向右还是从右向左，是从上往下还是从下往上。
在这里插入图片描述

3.2 flex-wrap

控制子项整体单行显示还是换行显示
在这里插入图片描述

3.3 flex-flow

是flex-direction和flex-wrap缩写，表示flex布局的flow流动特性。
第一个值表示方向，第二个值表示换行，中间用空格隔开

 #box2{ width:300px;
		 height:300px;
		  border:1px black solid;
		   margin:20px auto;
		    display: flex;
		     /* flex-wrap:wrap; flex-direction: column; */ flex-flow: column wrap;}
    #box2 div{ width:50px;
    		 height:50px;
    		  color:white;
    		   line-height: 50px;
    		    text-align: center;
    		     background:red;}

3.4 justify-content

决定主轴方向上子项的对齐和分布方式
在这里插入图片描述

 #box3{ width:300px;
 	 height:300px;
 	  border:1px black solid; 
 	  margin:20px auto; 
 	  display: flex; 
 	  justify-content: space-evenly; 
 	  flex-wrap:wrap;}
    #box3 div{ width:50px;
     		  height:50px;
     		   color:white;
     		    line-height: 50px;
     		     text-align: center; 
     		     background:red;}

3.5 作用在flex子项上的CSS属性

在这里插入图片描述

3.6 order

  <style>
    #box{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex;}
    #box div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
    /* #box div:nth-child(2){ order:1;}
    #box div:nth-child(3){ order:-1;} */
     </style>
</head>
<body>
    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div> -->

在这里插入图片描述

3.7 flex-grow

优先级低于width

    <style>
    #box{ width:300px;
     height:300px;
      border:1px black solid;
       margin:20px auto; 
       display: flex;
       }
    #box div{ width:50px;
     		height:50px;
     		 color:white;
     		  line-height: 50px;
     		   text-align: center;
     		    background:red;
     		    }
    /* #box div:nth-child(2){ order:1;}
    #box div:nth-child(3){ order:-1;} */
    #box div:nth-child(2){ background:yellow;
    					 color:black;
    					  flex-grow: 1;
    					  }
      </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

在这里插入图片描述

3.8flex-shrink

  #box2 div:nth-child(2){ background:yellow;
     						color:black;
     						 flex-shrink:
  <div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

在这里插入图片描述

3.9 flex-basis

相当于给定宽度，但规定的宽度不能大于父容器的最大宽度，优先级比width高

 #box2 div:nth-child(2){ background:yellow; color:black; 
 						flex:1; 
 					    flex-basis: 150px;
 					    width:150px
 					 }
<div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

3.10 flex

优先级高于 flex-grow
flex-grow、 flex-shrink、flex-basis 的组合

在这里插入图片描述

3.11 align-self

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex;}
    #box div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
    /* #box div:nth-child(2){ order:1;}
    #box div:nth-child(3){ order:-1;} */
    #box div:nth-child(2){ background:yellow; color:black; flex-grow: 1;}
    #box div:nth-child(3){ background:blue; color:black; flex-grow: 2;}

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; align-items: flex-end;}
    #box2 div{ width:50px; color:white; line-height: 50px; text-align: center; background:red;}
    #box2 div:nth-child(2){ background:yellow; color:black; /* flex:1;  *//* flex-basis: 250px; */ /* flex-shrink: 2; */ align-self: center;}
    #box2 div:nth-child(1){ align-self: center;}
    </style>
</head>
<body>
    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div> -->

    <div id="box2">
        <div>1</div>
        <div>测试文字</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

四、Grid网格布局

4.1布局内容

在这里插入图片描述

4.2grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局，单位可以是像素、百分比、自适应以及fr单位（网格剩余空间比例单位）

   <style>
    .box{ width:300px; height:300px; border:1px gray dotted; display: grid;
        /* grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px; */
       /*  grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr; */
        grid-template-rows: repeat(3 , 1fr);
        grid-template-columns: repeat(3 , 1fr);
    }
     </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

在这里插入图片描述

4.2 grid-template-areas 和 grid-template

注意ax的排布，写法是否准确

       grid-template-columns: repeat(3,1fr);}*/
        .box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid;
              grid-template-rows: repeat(3,1fr);
              grid-template-columns: repeat(3,1fr);
              grid-template-areas:
              "a1 a1 a1"
              "a2 a2 a3"
              "a2 a2 a3";}
        .box2 div{ background: red; border: 1px black solid}
        .box2 div:nth-child(1){ grid-area: a1;}
        .box2 div:nth-child(2){ grid-area: a2;}
        .box2 div:nth-child(3){ grid-area: a3;}
                
    </style>
</head>
<body>
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

在这里插入图片描述

4.3 grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写

  .box2{ width: 300px; height: 300px; border: 1px gray dotted; display: grid;
              grid-template:
              "a1 a1 a1" 1fr
              "a2 a2 a3" 1fr
              "a2 a2 a3";
              /1fr 1fr 1fr;
              grid-column-gap:10px;
              grid-row-gap:20px;}

在这里插入图片描述

4.4 justify-items 和align-items

justify-items：水平拉伸、左中右对齐
align-items:垂直拉伸上中下对齐
place-items可以让 justify-items 和align-items属性写在单个声明中（ 纵、横）

在这里插入图片描述
justify-items

  .box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            justify-items: start;}

在这里插入图片描述

align-items

 .box3{width: 300px; height: 300px; border: 1px gray dotted; display: grid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            justify-items: start;
            align-items: end;}

在这里插入图片描述

4.5 justify-content和align-content

justify-content网格元素的水平方式
align-content网格元素的垂直方式

在这里插入图片描述

4.6Grid案例

1）骰子的点数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box div:nth-child(1){ grid-area: 2 / 2 / 3 / 3; }

    .box2{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box2 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box2 div:nth-child(2){ grid-area: 3 / 3 / 4 / 4; }

    .box3{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box3 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box3 div:nth-child(2){ grid-area: a5; }
    .box3 div:nth-child(3){ grid-area: a9; }

    .box4{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box4 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box4 div:nth-child(2){ grid-area: a3; }
    .box4 div:nth-child(3){ grid-area: a7; }
    .box4 div:nth-child(4){ grid-area: a9; }

    .box5{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box5 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box5 div:nth-child(2){ grid-area: a3; }
    .box5 div:nth-child(3){ grid-area: a7; }
    .box5 div:nth-child(4){ grid-area: a9; }
    .box5 div:nth-child(5){ grid-area: a5; }

    .box6{ width:100px; height:100px; border:1px black solid; border-radius: 5px;
        display:grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }
    .box6 div{ width:20px; height:20px; background:black; border-radius: 50%;}
    .box6 div:nth-child(2){ grid-area: a3; }
    .box6 div:nth-child(3){ grid-area: a7; }
    .box6 div:nth-child(4){ grid-area: a9; }
    .box6 div:nth-child(5){ grid-area: a4; }
    .box6 div:nth-child(6){ grid-area: a6; }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

2）百度搜索风云榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{ width: 280px; height: 352px; margin: 20px auto; display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(4 , 1fr);
            grid-template-areas:
            "a1 a2 a2"
            "a3 a2 a2"
            "a4 a4 a5"
            "a6 a7 a7";
        grid-gap: 6px 6px;}
        .box div{ background: red;}
        .box div:nth-child(1){ grid-area: a1;}
        .box div:nth-child(2){ grid-area: a2;}
        .box div:nth-child(3){ grid-area: a3;}
        .box div:nth-child(4){ grid-area: a4;}
        .box div:nth-child(5){ grid-area: a5;}
        .box div:nth-child(6){ grid-area: a6;}
        .box div:nth-child(7){ grid-area: a7;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

黄大帅@lz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 学习心得
12-09
不论页面的问题大小都统统交给他们解决，这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比...
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
Ruby Stylus: 一款强大的 CSS 预处理器
最新发布
gitblog_00019的博客
03-16 673
Ruby Stylus: 一款强大的 CSS 预处理器 Ruby Stylus 是一个基于 Ruby 的 CSS 预处理器，它提供了更高级的语法、变量、嵌套规则等特性，让你能够编写出更加优美、简洁且易于维护的样式表。 为什么选择 Ruby Stylus？ 简单易学：如果你已经熟悉了 CSS，那么学习 Ruby Stylus 将非常容易上手。它的语法与 CSS 类似，并且提供了许多方便的特性。 ...
html标记ruby,html5 ruby标签的定义及使用方法详解（内有实例介绍）
weixin_39644494的博客
06-11 561
本篇文章主要为大家讲解了html5中一个新标签，html5 ruby标签，虽然不算是新的，但也是在html5里新的标签，html5 ruby标签的定义和具体的用法实例都在这篇文章中，希望大家认真阅读html5 ruby标签的定义和用法： 标签定义 ruby 注释(中文注音或字符)。在东亚使用，显示的是东亚字符的发音。与 以及 标签一同使用：ruby 元素由一个或多个字符(需要一个解释/发音)和...
【CSS3高级应用】
橙子的博客
04-30 867
CSS3高级应用一、页面中的多媒体嵌入二、CSS3中过渡效果一级目录 一、页面中的多媒体嵌入 网页除了可以放置图片和文字，还可以放置音频和视频。 1、视频： 标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示内部的子元素。 (1)视频格式 <video src=“视频文件名” controls muted autoplay loop><p>你的浏览器不支持此视频格式<p></video> .mp4：mpe
css
ruby 闲谈
06-24 201
Blueprint 前端框架 bootstrap 前端框架 getskeleton
ruby rails 特点_如何在Rails上使用CSS和ruby添加砌体画廊的基本方法
weixin_26711425的博客
09-02 189
ruby rails 特点 背景故事 (Backstory) Our startup has been undergoing a lot of change over the past few months (as I mention briefly in my Everything I wish I Knew post). Part of that change has been switchi...
CSS学习总结
09-24
本文是小编日常整理了关于css学习总结相关知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
CSS 学习笔记
09-25
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
CSS使用学习总结
10-30
在分配ID和类名时，尽可能保持与表现形式无关，例如contleft有可能以后希望出现在右边。
CSS—定位
04-10 236
CSS—定位 CSS有三种基本的定位机制：普通流、浮动、绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 没有任何定位修饰效果 块级元素从上到下一个接一个地排列，元素之间的垂直距离是由元素的垂直外边距计算出来。行内元素在一行中水平布置。如图中P标签内的span，超链接，图片。
css注意
ruby 闲谈
01-05 82
1： span不能设置大小，div可以设置大小 2： #form中有两个div，他们浮动， 此时的#form不能自适应大小，那么我们需要在#form元素中添加overflow:hidden;
CSS基础
ruby_的博客
05-30 209
本博客是在MDN的知识基础上，结合了自己的开发经验所做出的总结 MDN地址：https://developer.mozilla.org/zh-CN/ 基础知识 什么是CSS? CSS的结构 CSS语句 基础知识 什么是CSS? css的英文全称是Cascading Style Sheets，它的含义是层叠样式表。它可以为HTML文档增加样式，使HTML有...
css常用属性总结
liunianmiyu的专栏
11-06 384
z-index:     auto (默认值)    检索或设置对象的层叠顺序。  并级的对象，此属性参数值越大，则被层叠在最上面。  如两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。  必须定义position属性值为 relative | absolute | fixed | center | pa
IOS APP中，使用h5播放器，默认打开网页的时候，会自动全屏，解决方法webkit-playsinline
热门推荐
satisfy
11-13 2万+
这个问题，安卓6.0以上，大部分手机都不会产生额，主要是针对IOS 加上上述属性就可以了
h5视频移动端禁止全屏 x5-playsinline
05-27 2393
移动端播放视频时禁止全屏 ，设置x5-playsinline <video x-webkit-airplay="allow" x5-playsinline="" webkit-playsinline="" playsinline="true" src=""></video> 移动端视频播放 <video class="video" controls preload="none" x-webkit-airplay="allow" x5-playsinline="" we
htmlcss学习感悟
06-07
作为一个 AI，我并没有学习过 HTML 和 CSS，但可以通过分析用户的使用情况和搜索历史来得出一些结论和建议。 首先，学习 HTML 和 CSS 是非常有用的，因为这是构建网站和应用程序的基础。HTML 是用于创建网页内容的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值