美文网首页
2018-10-31day3-css属性布局

2018-10-31day3-css属性布局

作者: MW演员 | 来源:发表于2018-11-01 08:59 被阅读0次

一、标准流布局

在标准流中块级标签是一个占一行,默认宽度是父标签的宽度,默认高度是内容高度,设置宽度和高度是有效的,并且可以设置宽度和高度。
行内标签:可以一行显示多个,默认高度和宽度都是内容的宽高,设置宽和高无效。
行内块标签:一行可以显示多个,默认宽高就是内容宽高,设置宽高有效。
注意:在标准流布局中需要将行内标签换行时,可以将行内标签放在一个块级标签中(div)

  • a. 块级标签:p、h1-h6、hr、列表相关标签、table、tr、option、div
  • b. 行内标签:a、img、td、input、select、textarea、span
  • c. 行内块标签:

二、非标准流布局

1、display属性:设置标签的性质

值: block:将标签设置为快级标签
inline-block:将标签设置为行内块标签
注意:一般不会通过将标签转换成行内块标签来解决问题,因为行内块标签在显示的时候左右中间会有不能消除的缝隙。
inline:将标签设置为行内标签

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <!-- display将标签设置为块级 -->
       <a href="#" style="display: block; width: 200px; height: 30px; background-color: brown;">我是a标签</a>
       <!-- 行内块标签 -->
       <a href="#" style="display: inline-block; width: 200px; height: 200px; background-color: aqua;">我是a标签</a>
       <a href="#" style="display: inline-block; width: 200px; height: 200px; background-color: aqua;">我是a标签</a>
       
       <!-- 行内标签 -->
       <a href="#" style="display: inline; width: 200px; height: 200px; background-color: aqua;">我是a标签,但是宽高无效</a>
       
       
       
   </body>
</html>

2、float浮动属性
  • 概念:浮动会让标签脱离标准流进行布局(脱流)
  • 设置样式的float属性

值:left:左浮动
right:右浮动

  • 浮动原理:水池原理(池底水面原理)

  • 注意:没有浮动的标签会占池底和水面的位置,但浮动后只占水面位置

  • 注意:脱流后的布局不管什么标签,脱流后都是一行可以显示多个,可以设置宽和高。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>布局</title>
    </head>
    <body>
        <!-- float的其他布局 -->
        <div style="background-color: aqua;height: 100px; width: 200px; float: left;">一</div>
        
        <div style="background-color: fuchsia;height: 200px; width: 300px; float: left;">二</div>

    </body>
</html>

二、清除浮动

1、概念:清除浮动指的是清除因浮动而产生的高度塌陷问题
2、当父标签未设置高度;但是子标签浮动的时候就会产生高度塌陷问题

清除方法:
a、添加新一个空盒子(div):在父标签的最后添加一个空的div,并且设置样式clear属性的值为both(一般不采用这种方法);

b、设置overflow属性:值为hidden(推荐使用),在会塌陷的标签中设置overflow属性的值为hidden;

三、文字环绕

1、被环绕的标签(图片标签)浮动,文字对应的标签不浮动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>文字环绕</title>
    </head>
    <body>
        <div id="" style="background-color: antiquewhite; ">
            <img src="img/new.jpg" style="background-color: antiquewhite; float: left;>
        </div>
        <div id="" style="background-color: aqua;">

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

四、标签定位

  • 概念:css可以通过left、right、top、bottom来对标签进行定位,但必须设置参考对象

相对定位属性:
left:标签左边距
right:标签右边距

top:标签上边距
bottom:标签下边距
  • 注意:定位需要通过position属性来设置参考对象
2、position属性:

initial:默认值(了解)
static:不希望自己的子标签相对自己定位时,才使用static(但也可以不写因为默认值就是initial)
absolute:相对第一个非static和非initial的父标签进行定位
注意:body的position属性值不是initial
定位时当标签的宽度确定时,同时设置left和right只有left有效
可以同时设置left和right,不设置宽度或者设置宽度值为auto,标签会自动拉伸
top和bottom同理

3、relative值:相对自己在标准流中的位置定位,如果一个标签希望自己的子标签能相对自己定位,就设置这个标签的position为relative
4、fixed值:相对于浏览器定位
5、stick值:粘性定位,只针对网页底部标签定位,如果网页超过一屏(需要滚动)时相对浏览器定位,否则就相对标准流定位。
6、overflow属性:还可以用于裁掉超出的部分
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>标签定位</title>
        
        <style type="text/css">
            #div1{
                width: 600px;
                height: 500px;
                background-color: burlywood;
            }
            #div2{
                width: 400px;
                height: 400px;
                background-color: aquamarine;
                position: relative;
                
                /* overflow属性裁剪掉超出范围的部分 */
                overflow: hidden;
            }
            #div3{
                /* 定位1 */
                /* width: 100px;
                width: auto;
                height: 100px;
                background-color: green;
                定位
                position: absolute;
                
                right: 30px;
                left: 30px;
                top: 20px; */
                
                /* 定位2 */
            /*  width: 100px;
                height: 100px;
                background-color: green;
                
                position: relative;
                left: 30px; */
                
                /* 相对浏览器定位 */
            /*  width: 100px;
                height: 100px;
                background-color: green;
                    
                position: fixed;
                bottom: 30px;
                right: 0; */
                
                /* 粘性定位 */
            /*  width: 100%;
                height: 100px;
                background-color: green;
                    
                position: stick;
                bottom: 0; */
                
            /*  width: 100px;
                height: 100px;
                background-color: green; */
                /* 定位 */
                /* position: absolute;
                left: -50px;
                top: -50px; */
                
                /* overflow属性裁剪掉超出范围的部分 */
                width: 100px;
                height: 100px;
                background-color: green;
                
                position: absolute;
                right: -25px;
                
                
            }
            
        </style>
        
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
        <div id="" style="height: 1000px;">
            
        </div>
        
    </body>
</html>

五、盒子模型

1、概念:HTML中所有可见的标签都是盒子模型。有固定的结构,包括:内容、padding、border、margin
2、内容:可见的,设置宽高实质就是设置内容的大小,添加子标签或者直接设置文字都是添加或者显示在内容部分的,默认大小是内容的大小,默认与大小有关

注意:可以设置背景颜色,但会作用于内容部分

3、padding:可见的,分上下左右四部分,一般没有默认值是0。

注意:设置背景颜色也会作用于padding部分

4、border:可见的,分上下左右四部分,一般默认为0,

格式:border:solid(边框样式) color 宽度;
样式:solid(实线)、double(双实线)、dashed(点划线)、dotted(虚线)
注意:border的颜色需要单独设置

切圆角:border-radius: 180px;

5、margin:不可见
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>盒子模型</title>
        
        <style type="text/css">
            #div1{
                /* 设置内容和padding部分的背景颜色 */
                background-color: #DEB887;
                /* 设置内容大小 */
                width: 100px;
                height: 100px;
                
                /* 设置padding */
            /*  padding-left: 20px;
                padding-top: 20px; */
                
                /* 同时设置四个方向值 */
                padding: 20px;
                
                /* 设置border */
                /* border: dotted black 5px; */
                
                /* 整体切圆角 */
                border-radius: 10px;
                
                /* 切部分圆角 */
                /* border-top-left-radius: 50px; */
                
                /* 设置margin */
                margin-left: 20px;
                
            }
                
        </style>
        
    </head>
    <body>
        <div id="div1">
            <div id="" style="width: 60px;height: 60px; background-color: blueviolet;">
                
            </div>
        </div>
        
    </body>
</html>

相关文章

  • 2018-10-31day3-css属性布局

    一、标准流布局 在标准流中块级标签是一个占一行,默认宽度是父标签的宽度,默认高度是内容高度,设置宽度和高度是有效的...

  • Flex 布局

    Flex布局 1 . 传统布局 display属性+position属性+float属性 --------垂直居中...

  • CSS布局

    CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+float属性(浮...

  • css属性书写顺序

    布局定位属性 自身属性 文本属性 其他属性

  • flex布局和传统布局有什么区别?

    传统布局,基于盒模型,依赖display属性 、position属性 、float属性。 它对于那些特殊布局非常不...

  • Flex布局(弹性布局)

    布局的传统解决方案:是基于盒模型,这种布局依赖display属性 + position属性 + float属性,但...

  • flex布局教程

    传统布局基于盒模型, 依赖 display属性+position属性+float属性. 它对于那些特殊布局非常不方...

  • CSS经常用到的东西

    一、左右布局 1.float属性实现左右布局 float属性是css中关于布局的一个关键属性,其意为将该块状区域脱...

  • flex布局

    布局的传统方案,基于盒模型,依赖display属性+position属性+float属性,它对于那些特殊布局非常不...

  • 浅谈我对容器属性---弹性盒模型的理解

    布局的传统方案,基于盒装模型,依赖display属性+position属性+float属性。他对于那些特殊的布局非...

网友评论

      本文标题:2018-10-31day3-css属性布局

      本文链接:https://www.haomeiwen.com/subject/sljtxqtx.html