全球彩票平台_全球彩票注册平台|官网下载地址

热门关键词: 全球彩票平台,全球彩票注册平台,全球彩官网下载地址

CSS基础课程,发生的有趣小事

物体position:absolute后设置left:50%发生的有趣小事,positionabsolute

今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下

一 准备知识

①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高

②一个内敛元素设置position:absolute会自动转为一个块状元素

那么我提出三个问题:

problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示?

problem02:一个内联元素position:absolute,top:0;left:0,它的宽高如何显示?

problem03:一个元素position:absolute,left:50%发生什么有趣小事?

 

二 针对 problem01:一个没有设置宽高的块状元素position:absolute,top:0;left:0,它的宽高如何显示? 的回答

首先给物体设置position:absolute,top:0;left:0

测试代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
                position: absolute;
                background-color: red;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
            </div>
        </div>
    </body>
</html>

出现效果如下:

图片 1

得出结论:没有宽高的块状元素position:absolute,top:0;left:0后默认宽度是屏幕的宽度

 

三针对 problem02一个内联元素position:absolute,top:0;left:0,它的宽高如何显示?的回答

首先给物体设置position:absolute,top:0;left:0

测试代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
                position: absolute;
                background-color: red;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="div1">

         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试

        </div>
    </body>
</html>

效果如下:

图片 2

可得结论:内联元素position:absolute,top:0;left:0后,效果和没有宽高的块状元素效果一致,即默认宽度是屏幕的宽度.

 

下面来延伸一段测试,看看:内联元素position:absolute,top:0;left:0后是否真的转为块状元素,最简单的测试就是给浮动起来的内联元素设置下宽高,看看是否起作用,测试代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
              width: 100px;
              height: 100px;
                position: absolute;
                background-color: red;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="div1">

         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试

        </div>
    </body>
</html>

效果如下:

图片 3

得出结论:内联元素position:absolute,top:0;left:0后会转为块状元素,且高宽为程序员设置的宽高

 

四 针对 problem03:一个元素position:absolute,left:50%发生什么有趣小事?的回答

这个效果我之前都没有注意到,如果没有意识到这个效果存在,很有可能出现样式重复或者其他一些小问题

注意为了方便研究我将top设置为了0,下面来看测试代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
                position: absolute;
                background-color: red;
                top:0;
                left:50%;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
            </div>
        </div>
    </body>
</html>

效果如下:

图片 4

这个效果很容易接受,但是请注意此时的div2的宽度已经被强制设置为父宽度(300px/2)的一般,用chrome自带的审核元素查看

图片 5

上图并不能证明,可能会有人猜想是屏幕宽度限制了它的宽度,测试这个想法最简单的方法就是当它position:absolute,left:50%后,让它往左移足够的空间,显示它的全部宽度,我这里采用transform: translateX(-50%);对它进行移位

测试代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
                position: absolute;
                background-color: red;
                top:0;
                left:50%;
              transform: translateX(-50%);
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
            </div>
        </div>
    </body>
</html>

效果如下:

图片 6

用Chrome审查元素发现:

图片 7

我们可以看出这个没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度(300px)的一半.

当我把父宽度设置为400px的时候,再次测试上面的代码,出现结果如下:

图片 8

得出的结论是一致的,没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度(400px)的一半.

哈哈,这个效果一定要注意,要不然这个效果和其他样式混在一起会出现很多难以解释的效果.

下面再扩展一下,当有宽度的div设置了position:absolute,left:50%以后,它的宽度如何显示,不要被绕晕哦,就是正常显示啦

测试代码如下:(设置父宽度400px,子宽度300px)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width:400px;
                height:400px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
              width: 300px;
                position: absolute;
                background-color: red;
                top:0;
                left:50%;
              transform: translateX(-50%);
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
            </div>
        </div>
    </body>
</html>

效果如下:

图片 9

结论:当有宽度的div设置了position:absolute,left:50%以后,它的宽度正常显示.

 

今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录...

下面再扩展一下,当有宽度的div设置了position:absolute,left:50%以后,它的宽度如何显示,不要被绕晕哦,就是正常显示啦

problem03:一个元素position:absolute,left:50%发生什么有趣小事?

1-2,定宽块状元素居中

.div1 {  

  border: 1px solid red;

  width: 200px;

  background-color: #ff0;

  margin: 30px auto

}

运行效果:

图片 10

设置“margin: 30px auto”来实现块状元素居中,元素必须满足定宽(宽度width是固定值)和块状两个条件

  元素分类
:

problem02:一个内联元素position:absolute,top:0;left:0,它的宽高如何显示?

下面来延伸一段测试,看看:内联元素position:absolute,top:0;left:0后是否真的转为块状元素,最简单的测试就是给浮动起来的内联元素设置下宽高,看看是否起作用,测试代码如下:

3,隐性改变display类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,display: none除外)设置以下2个句之一:

  1. position:  absolute

2. float: left 或 float: right

简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以display: inline-block(内联块状元素)的方式显示,当然就可以设置元素的width和height了,且默认宽度不占满父元素。

.div6 {

  width: 300px;

  height: 200px

}

.div6 a {

  float: left; /*或 position: absolute*/

  width: 100px;

  background: #0cc

}

运行效果:

图片 11

    元素分类--块级元素
:

测试代码如下:(设置父宽度400px,子宽度300px)

②一个内联元素设置position:absolute会自动转为一个块状元素

2-1,父元素高度确定的单行文本

设置父元素的 height 和 line-height 高度一致来实现

.div4 {

  height: 200px;

  line-height: 200px;

  background-color: #0cc

}

运行效果:

图片 12

注:

这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离块。

  CSS布局模型
:

效果如下:

效果如下:

2)设置display: inline方法:

改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align: center 来实现居中效果

.div2 { text-align: center }

运行效果:

图片 13

.div2 ul { display: inline }

运行效果:

图片 14

.div2 li {

  display: inline;

  border: 1px solid red;

  margin-right: 20px

}

运行效果:

图片 15

将上面三组css样式组合为一组,

.div2 { text-align: center }

.div2 ul {

  border: 1px solid yellow;

  display: inline

}

.div2 li {

  display: inline;

  border: 1px solid red;

  margin-right: 20px

}

运行效果:

图片 16

这种相比第一种的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,减少了一些功能,比如设定长度值。

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
    常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
    常用的内联元素有:<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
    常用的内联块状元素有:<img>、<input>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
                position: absolute;
                background-color: red;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="div1">

         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试

        </div>
    </body>
</html>

效果如下:

1)加入table标签

利用table标签的长度自适应性(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

步骤如下:

第一步:为需要居中的元素外面加入一个 table 标签(包括 <tbody>,<tr>,<td>)

<div>

  <table>

    <tbody>

      <tr>

        <td> 不定宽元素一 </td>

      </tr>

    </tbody>

  </table>

</div>

第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

table {

  border: 1px solid red;

  margin: 0 auto

}

div { border: ipx solid red }

运行效果:

图片 17

    清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
    流动模型
:先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
      流动布局模型具有2个比较典型的特征:
        第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
        第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

效果如下:

测试代码如下:(设置父宽度400px,子宽度300px)

1,水平居中

第九章 CSS盒模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
                position: absolute;
                background-color: red;
                top:0;
                left:50%;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
            </div>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                border: 1px #000 solid;
                overflow: hidden;
                position: relative;
            }
            .div2{
              width: 100px;
              height: 100px;
                position: absolute;
                background-color: red;
                top:0;
                left:0;
            }
        </style>
    </head>
    <body>
        <div class="div1">

         我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试

        </div>
    </body>
</html>

2-2,父元素高度确定的多行文本

    元素分类--内联块状元素:

效果如下:

下面再扩展一下,当有宽度的div设置了position:absolute,left:50%以后,它的宽度如何显示,不要被绕晕哦,就是正常显示啦

3)设置position: relative和 left: 50%:

利用相对定位的方式,将元素向左偏移50%,即达到居中的目的

.div3 {

  position: relative;

  left: 50%

}

运行效果:

图片 18

 

 

四 针对 problem03:一个元素position:absolute,left:50%发生什么有趣小事?的回答

1)使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align: middle。

<div>

  <table>

    <tbody>

      <tr>

        <td class="td1">

          <p>父元素高度</p>

          <p>父元素高度</p>

          <p>父元素高度</p>

          <p>父元素高度</p>

          <p>父元素高度</p>

        </td>

      </tr>

    </tbody>

  </table>

</div>

css代码:

.td1 {

  height: 500px;

  background: #cc0

}

运行效果:

图片 19

td 标签默认情况下就默认设置了 vertical-align 为 middle,因此我们不需要设置

    浮动模型
:块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。
    任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

首先给物体设置position:absolute,top:0;left:0

那么我提出三个问题:

1-3,不定宽块状元素居中

不定宽度的块状元素有三种方法居中:

      
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),<img>、<input>标签就是这种内联块状标签。
      inline-block 元素特点:
      1、和其他元素都在一行上;
      2、元素的高度、宽度、行高以及顶和底边距都可设置。

效果如下:

我们可以看出这个没有设置宽度的div在position:absolute,left:50%自动设置了自己的宽度为父宽度(300px)的一半.

2,垂直居中

第十章 CSS布局模型

图片 20

图片 21

1-1,行内元素居中

h1 { text-align: center }

运行效果:

图片 22

可以设置文本,图片等居中排列

    宽度和高度
      盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。
      因此一个元素实际宽度(盒子的宽度)=左边界 左边框 左填充 内容宽度 右填充 右边框 右边界。
      填充
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)。
      边界
元素与其它元素之间的距离可以使用边界(margin)来设置。边界也是可分为上、右、下、左。
总结一下:padding和margin的区别,padding在边框里,margin在边框外。  

本文由全球彩票平台发布于全球彩官网下载地址Web前端,转载请注明出处:CSS基础课程,发生的有趣小事

TAG标签: 全球彩票平台
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。