day24-CSS属性

作者: xdxh | 来源:发表于2018-10-31 20:59 被阅读0次

day24-CSS属性
day24-css其他属性及京东登陆
day24-css
成员属性、静态属性、私有属性、原型属性
swift 属性(存储属性、计算属性、懒加载属性、类型属性)
jQuery属性操作
依赖属性｜简单属性｜附加属性
attribpromote
网站基本情况记录
人生三属性

一、标准流和浮动

1.标准流

标准流布局：
在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度并且可以设置宽度和高度。
行内标签，一行可以显示多个，默认宽度和高度都是内容的宽度和高度；设置宽高无效。
行内块标签，一行可以显示多个，默认宽度和高度都是内容的宽度和高度；设置宽高有效。

块级标签：h1-h6，p，hr，ol,ul,dl,li,table,tr,div
行内标签：a，img,td,input,select,option,textarea,span

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标准流和浮动</title>
    </head>
    <body>
        <!-- 解决方案1：使用display-->
        <div style="height: 200px;background-color: chocolate;"></div>
        
        <div style="height: 400px;background-color: yellow;">
            
            <div style="display: inline-block; background: blanchedalmond; ;width: 400px,height:300px;"></div>
            <div style="display: inline-block; background-color: slateblue;width: 400px,height:300px;"></div>
            <div style="display: inline-block; background-color: aqua;width: 400px,height:300px;"></div>
            
        </div>
        
        <div style="height: 200px; background-color: yellowgreen;"></div>
    </body>
</html>

测试结果

1.PNG

二、display属性

1.display(设置标签的性质)

block -> 将标签设置为块级标签
inline-block -> 将标签设置为行内块元素(注意：一般不会通过将标签转换成行内块来解决问题，因为行内块标签在显示的时候左右中间会有不能消除的空隙)
inline -> 将标签设置为行内标签

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
    </head>
    <body>
        <a href="" style="display: block; background-color: hotpink;width: 200px;">abc</a>
        <a href="" style="display: inline-block; background-color: darkcyan;width: 300px;">123</a>
        <a href="" style="background-color: darkkhaki;width: 300px;">456</a>
        
        <p style="display: inline; background-color: lightblue;width: 200px;">我是段落1</p>
        <p style="display: inline; background-color: lightblue;">我是段落2</p>
    </body>
</html>

测试结果

2.PNG

三、float属性

1.浮动原理

a.浮动会让标签脱离标准流进行布局(脱流)。
b.没有浮动的标签既占池底的位置，也占水面位置。浮动后只占水面位置。

2.float属性

left -> 左浮动
right -> 右浮动

3.脱流后的布局规则

不管什么标签，脱流后都是一行可以显示多个，并且可以设置宽度和高度。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>float属性</title>
        <style type="text/css">
            p{
                background-color: chartreuse;
                float: left;
                width: 200px;
            }
            
            a{
                background-color: sandybrown;
                width: 200px;
                float: left;
            }
            
            /*div{
                width: 200px;
            }*/
        </style>
    </head>
    <body>
        <!--<p>我是段落1</p>
        <p>我是段落2</p>
        <a href="">aaa</a>
        <a href="">aaa</a>
        
        <div style="float: right; background-color: hotpink; height: 300px;">div1</div>
        <div style="background-color: goldenrod; height: 200px">div2</div>
        <div style="float: left; background-color: yellow; height: 400px;">div3</div>-->
        
        <div style="background-color: slateblue;width: 100%;height: 100px;"></div>
        <div style="float:left; background-color: gold;width: 30%;height: 200px;"></div>
        <div style="float: left; background-color:red; width: 60%; height: 200px; "></div>
        <div style="float: right; background-color: greenyellow ;width: 10%;height: 500px;"></div>
        <div style="float: left; background-color: greenyellow ;width: 65%;height: 300px;"></div>
        <div style="float: left; background-color: gold ;width: 25%;height: 300px;"></div>
        <div style="float: left; background-color: black; width: 100%; height: 100px;" ></div>
    </body>
</html>

测试结果

3.PNG

四、清除浮动

1.清除浮动

清除浮动指的是清除因为浮动而产生的高度塌陷问题。

2.高度塌陷

当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题。

3.清除浮动的方法：

a.添加空的div：在父标签的最后添加一个空的div，并且设置样式clear属性的值为both。
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>清除浮动</title>
        <style type="text/css">
            #div2{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div style="background-color: hotpink;height: 100px;"></div>
        <div id="div2" style="background-color: yellow;">
            <div style="background-color: peru; width:200px; height: 300px;float: left;"></div>
            <div style="background-color: seagreen; width:200px; height: 200px;float: right;"></div>
            <!--<div style="clear: both;">  </div>-->
        </div>
        <div style="background-color: lightblue;height: 120px;"></div>
    </body>
</html>

测试结果

4.PNG

五、文字环绕效果

1.文字环绕

文字环绕：被环绕的标签(例如图片对应的标签)：浮动；文字对应的标签不浮动。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文字环绕效果</title>
    </head>
    <body>
        <!-- 图片对应的块 -->
        <div style="float:left; background-color: sandybrown;">
            <img src="img/aaa.ico"/>
        </div>
        
        <!-- 文字对应的块-->
        <div style="background-color: yellow;">
            但爱奇艺创始人兼CEO龚宇有话在前——至少“第三季度可能还无法实现盈利”，事实也的确如此。今日凌晨，爱奇艺公布了截至今年9月30日，公司未经审计的第三季度财报。财报显示，爱奇艺该季度总营收为人民币69亿元（约合10亿美元），同比增长48%；净亏损为人民币31亿元（约合4.573亿美元），去年同期为人民币11亿元，同比扩大亏损。
        </div>
    </body>
</html>

测试结果

5.PNG

六、定位

CSS可以通过left，right，top，bottom来对标签进行定位。前提是设置好参考对象。

1.定位属性：

left -> 标签左边距
right -> 标签右边距
top -> 标签上边距
bottom -> 标签下边距

注意：
a.定位需要通过position属性设置参考对象。 b.当标签的宽度固定的时候，同时设置left和right只有left有效。 c.可以同时设置left和right，不设置宽度或者宽度值为auto的时候，标签会自动拉伸。 c.可以同时设置top和bottom，不设置高度或者高度值为auto的时候，标签会自动拉伸。

2.position

initial -> 默认值
static -> 默认值，不希望自己的子标签相对自己定位的时候才是用

absolute -> 相对第一个非static和非initial的父标签进行定位
relative -> 相对于自己在标准流中的位置定位；如果一个标签希望自己的子标签能够相对自己定位，就设置这个标签的position为relative(自己不定位)。
fixed -> 相对于浏览器定位
sticky -> 粘性定位，只针对网页底部的标签定位，如果网页内容超过一屏(需要滚动)的时候相对浏览器定位；
否则相对标准流定位。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
        <style type="text/css">
            #div1{
            width: 600px;
            height: 600px;
            background-color: hotpink;
            
            }
        
            #div2{
            width: 400px;
            height: 400px;
            background-color: navajowhite;
            /*裁掉自己的子标签超出自己的范围的部分*/
            overflow: hidden;
            position: relative;
            }
            
            #div3{
            background-color: green;
            
            /*1.absolute定位*/
            /*width: auto;
            height: auto;
            position: absolute;
            left: 50px;
            right: 50px;
            top: 20px;
            bottom: 30px;*/
            
            /*2.relative定位*/
            /*width: 100px;
            height: 100px;
            
            position: relative;
            top: 50px;*/
            
            /*3.fixed定位*/
            /*width: 100px;
            height: 100px;
            position: fixed;
            bottom: 50px;
            right: 50px;*/
            
            /*4.sticky定位*/
            /*width: 100%;
            height: 100px;
            
            position: sticky;
            bottom: 0px;*/
            
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            right: -50px;
            
            }
        </style>
        
    </head>
    <body>
        
        <div id="div1">
            <div id="div2">
                <!--<div style="width: 100px; height: 100px; background-color: honeydew;"></div>-->
                <div id="div3">
                    
                </div>
            </div>
        </div>
        
        <div id="" style="height: 2000px; background-color: slategray;">    
        </div>
        
        <!--<div id="div3">
                    
        </div>-->
    </body>
</html>

测试结果

6.PNG

七、盒子模型

html中所有可见的标签都是盒子模型。有固定的结构，包括：内容、padding、border、margin四个部分。

1.内容

内容 -> 可见的，设置width和height实质就是设置内容的大小，默认大小是内容；
添加子标签或者设置文字内容都是添加或者显示在内容部分的；
设置background-color会作用于内容部分。

2.padding

padding -> 可见的，分上下左右四个部分，一般默认都是0；
设置background-color也会作用于padding。

3.border

border -> 可见的，分上下左右四个部分，一般默认都是0；
border的背景颜色需要单独设置。

4.margin

margin -> 不可见，按时占位置；分上下左右四个部分，一般默认是0。

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            #div1{
                /*设置内容部分和padding部分的背景颜色*/
                background-color: hotpink;
                
                /*设置内容的大小*/
                width: 100px;
                height: 100px;
                
                /*设置padding*/
                /*a.分开设置*/
                /*padding-left: 50px;
                padding-top: 20px;
                padding-right: 20px;
                padding-bottom: 30px;*/
                
                /*b.一起设置*/
                padding: 20px; /*同时设置四个padding值都为20px*/
                
                /*3.设置border*/
                /*
                 border值的格式 -> 线的样式 颜色 宽度
                 线的样式： solid(实线)\double(双实线)\dashed(点划线)\dotted(虚线)
                */
                /*border-left: solid blue 3px;
                border-top: solid yellow 4px;
                border-right: solid yellowgreen 5px;
                border-bottom: solid rosybrown 6px;*/
                
                /*同时设置*/
                border: solid lightblue 5px;
                
                /*4.设置圆角*/
                border-radius: 20px;
                
                /*分开切每个角的圆角*/
                /*border-top-left-radius: 50px;
                border-bottom-right-radius: 50px;*/
                
                /*5.添加margin*/
                margin-left: 20px;
                margin-top: 30px;
    
            }
        </style>
    </head>
    <body>
        <div id="div1" style="">
            <div id="" style="width: 20px; height: 20px; background-color: yellowgreen;">
                
            </div>
        </div>
        
        姓名：<input type="" name="" id="" value="" style="padding-left: 20px;"/>
    </body>
</html>

测试结果

7.PNG

8.练习

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>练习</title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background-color: green;
                float: left;
                margin-left: 20px;
                margin-top: 20px;
                
            }
        </style>
    </head>
    <body>
        <div id="" style="width: 360px; height: 100px;" >
            <div id='div1'>a</div>
            <div id='div1'>b</div>
            <div id='div1'>c</div>
            
            <div id='div1'>d</div>
            <div id='div1'>e</div>
            <div id='div1'>f</div>
        </div>
            
    </body>
</html>

测试结果

8.PNG

八、作业

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>作业</title>
        <style type="text/css">
            #head{
                width: 1208px;
                height: 80px;
                margin: 0 auto;
                overflow: hidden;
            }
            
            #head-left{
                float: left;
                background-color: palevioletred;
            }
            
            #head-right{
                float: right;
                width: 300px;
                height: 80px;
            }
            
            #seek{
                width: 200px;
                margin-left: 20px;
                margin-top: 30px;
                float: right;
            }
            
            #seekbox{
                width: 170px;
                height: 25px;
                padding-left: 10px;
                background-color: #F5F5F5;
            }
            
            #bt{
                width: 1208px;
                height: 50px;
                background-color:black;
                margin: 0 auto;
                
            }
            
            #div1{ 
                width: 150px;
                height: 36px;
                color: white;
                list-style: none;
                float: left;
                padding-top: 13px;
                border-right: solid #696969 1px;
                margin-top: 1px;
            }
            
            #image1{
                width: 1208px; 
                height: 500px;
                background-color: blanchedalmond;
                margin: 0 auto;
            }
            
            #div2{
                width: 1208px;
                height: 200px;
                background-color: darkkhaki;
                margin: 0 auto;
            }
            
            #content1{
                width: 500px;
                height: 200px;
                background-color: #F4A460;
                float: left;
            }
            
            #content2{
                width: 368px;
                height: 200px;
                background-color: #F4A460;
                float: right;
            }
            
            #content3{
                width: 340px;
                height: 200px;
                background-color: #f0f0ef;
                float: right;
            }
            
            #content4{
                width: 500px;
                height: 200px;
                background-color: #f0f0ef;
                float: left;
            }
            
            #content5{
                width: 368px;
                height: 200px;
                background-color: #f0f0ef;
                float: right;
            }
            
            #ct{
                padding-left: 20px;
            }
            
            #bt2{
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 20px;
            }
            
            #div3{
                width: 1208px;
                height: 300px;
/*              background-color: blueviolet;*/
                margin: 0 auto;
            }
            
            #image2{
                width:277px;
                height: 170px;
                background-color: red;
                margin-left: 20px;
                float: left;
            }
            
            #bt3{
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 5px;
            }
            
            #ct2{
                margin-left: 20px;
                margin-right: 20px;
                padding-top: 10px;
                border-top: solid #DCDCDC 2px;
            }
            
        </style>
    </head>
    <body>
        <div id="head">
            <div id="head-left">
                <img src="img/image1.PNG" width="300px" height="80px"/>
            </div>
            <div id="head-right">
                <div id="seek">
                    <input type="text" id="seekbox" name="" value="" placeholder="SEARCH..." />
                </div>
            </div>
        </div>
        
        <div id="bt" align="center">
            <div id="div1">集团介绍</div>
            <div id="div1">产品中心</div>
            <div id="div1">卧龙市场</div>
            <div id="div1">技术研发</div>
            <div id="div1">国际合作</div>
            <div id="div1">投资者关系</div>
            <div id="div1">新闻资讯</div>
            <div id="div1">人力资源</div>
        </div>

        <div id="image1">
            <img src="img/image3.jpg" width="1208px;" height="500px"/>
        </div>
        
        <div id="div2">
            <div id="content1">
                <div id="bt2">
                    新闻资讯
                </div>
                <div id="ct">
                    内容
                </div>
            </div>
            <div id="content2">
                <div id="bt2">
                    人才招聘
                </div>
                <div id="ct">
                    内容
                </div>
            </div>
            <div id="content3">
                <div id="bt2">
                    卧龙介绍
                </div>
                <div id="ct">
                    内容
                </div>
            </div>
        </div>
        <div id="div3">
            <div>
                <div id="bt2">
                    卧龙市场
                </div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
            <div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
            <div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
            <div>
                <div id="image2">
                    <img src="img/image2.PNG" width="277px" height="170px"/>
                </div>
            </div>
        </div>
        <div id="div2">
            <div id="content4">
                <div id="bt3">
                    产品中心
                </div>
                <div id="ct2">
                    内容
                </div>
            </div>
            <div id="content5">
                <div id="bt3">
                    技术研发
                </div>
                <div id="ct2">
                    内容
                </div>
            </div>
            <div id="content3">
                <div id="bt3">
                    营销网络
                </div>
                <div id="ct2">
                    内容
                </div>
            </div>
        </div>
    </body>
</html>

测试结果

1.PNG

day24-CSS属性
一、标准流和浮动 1.标准流标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容...
day24-css其他属性及京东登陆
1文字相关属性 1.1字体大小 1.2字体颜色 1.3字体名字 1.4文字加粗 border（更粗的）/bold（...
day24-css
一、标准流和浮动 1.标准流标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容...
成员属性、静态属性、私有属性、原型属性
一、成员属性和成员方法在构造函数中，通过this.属性声明，或者实例化出对象后，通过“对象.属性”追加的，都属于成...
swift 属性(存储属性、计算属性、懒加载属性、类型属性)
存储属性存储属性：用于存储一个常量或变量结构体实例赋值给常量，该实例属性不能被修改（因为结构体属于值类型，当值...
jQuery属性操作
attr（属性名，属性值）操作所有属性 removeAttr（属性名） prop（属性名，属性...
依赖属性｜简单属性｜附加属性
依赖属性简单理解就是属性，支持继承，比如 Window 有 Font 属性，Button 也有 Font 属性，...
attribpromote
属性创建。属性名称，属性类别，默认属性，输出属性。属性转移，atteibutrename. 在点属性上，现有属...
网站基本情况记录
各类属性：样例：／／辅助属性：属性／／可确定同表的属性：属性／／其他相关属性：属性乐器相关属性乐器ｉｄ乐器...
人生三属性
人生三属性：可分为善良属性，激情属性，愚昧属性；三属性又分为个性三属性、时间三属性、食物三属性。...

day24-CSS属性

一、标准流和浮动

1.标准流

代码

测试结果

二、display属性

1.display(设置标签的性质)

代码

测试结果

三、float属性

1.浮动原理

2.float属性

3.脱流后的布局规则

代码

测试结果

四、清除浮动

1.清除浮动

2.高度塌陷

3.清除浮动的方法：

代码

测试结果

五、文字环绕效果

1.文字环绕

代码

测试结果

六、定位

1.定位属性：

2.position

代码

测试结果

七、盒子模型

1.内容

2.padding

3.border

4.margin

代码

测试结果

8.练习

代码

测试结果

八、作业

代码

测试结果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读