HTML--day02

1.1容器盒子

Box-size:设置盒子模型,CSS3标准,

content-box:正常默认模式,起源于谷歌,元素的整体大小会被内边距和边框撑开

border-box:怪异模式,起源于IE,元素的整体大小不会被内边距和边框撑开

Width:宽度

Height:高度

注意:width,height会根据box-size盒子模型的不同来决定是内容的宽度和高度,还是整个元素大小的宽度和高度。

Padding:内边距

Padding-left,padding-right,padding-top,padding-bottom

Padding:上 右 下 左;

Padding:上 右 下;左边距等于右边距

Padding:上 右;下跟上边一样,左跟右一样

Margin:外边距

外边距跟内边距一致。但是两个元素的外边距会重叠。

Border:边框

语法:border: 边框宽度 边框样式 颜色;

Display:设置盒子是块级元素还是行级元素还是弹性元素

Block:块级元素,会占据一整行,有宽高,div,h1,p,li,ul...

inline-block:行块元素,不会占据一整行,有宽高,img...

inline:行元素,不会占据一整行,也没有宽高,a,span...

Border-radius:边框的圆角

Background:设置元素的背景,背景图片,背景颜色

Background:是一个综合性的属性,可以分出背景颜色,背景图片,背景是否重复,背景图片的位置,背景图片的大小

Background-color:背景颜色

Background-image:设置背景图片,可以放置多张背景图片,中间用逗号隔开,越写在前面,层级越高。

Background-repeat:设置背景图片是否重复,可以设置no-repeat,repeat,repeat-x,repeat-y;

Background-position:设置背景图片的位置,left,right,top,bottom,center,百分比一般可以设置2值,第一个值是设置水平位置,第二个值设置垂直位置

Background-size:设置背景图片的大小,注意:有时候不知道图片的确切比例的时候,只需要设置一个宽度或者高度,另外一个值设置为auto即可。

2.2浮动

浮动元素会寻找父元素的边缘或者是同样浮动元素的边缘,紧紧的靠拢在一起。

优点:

1、可以让文字包围图片。

2、可以去掉莫名其妙的间距

3、可以让内容向左和向右排布

缺点:

父元素高度塌陷

原因:使用了浮动的元素,会脱离正常的文档流,使其父元素找不到子元素,从而认为自己内部没有元素,所以没有高度。

解决方案:

1、给父元素设置高度

2、万能的解决方案

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .parent{
                width: 900px;
                /*height: 600px;*/
                border: 1px solid #000;
                margin: 20px auto;
            }
            
            .child{
                width: 200px;
                height: 200px;
                background: skyblue;
                display: inline-block;
                
            }
            
            
            .left{
                float: left;
            }
            
            .right{
                float: right;
            }
            
            /*
             解决方案:清除浮动
             1、在父元素的最后面加上一个div
             2、设置这个div的样式为:clear:both;
             
             缺点:多了1个div,结构比较混乱
             * */
            
            /*
             完美升级方案:
             1、使用伪元素创建一个假的元素,:after在元素的最后面创建一个假的子元素
             2、设置这个假的元素为块级元素
             3、清除左右浮动clear:both
             * */
            
            .clear:after{
                content: "";
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <!--只有class才可以同时放置多个class,中间用空格隔开-->
            <div class="child left"></div>
            <div class="child right"></div>
            <div class="child right"></div>
            
            <div style="clear: both;"></div>
        </div>
        
        
        <div class="parent clear">
            <!--只有class才可以同时放置多个class,中间用空格隔开-->
            <div class="child left"></div>
            <div class="child right"></div>
            <div class="child right"></div>
            
            
        </div>
    </body>
</html>

3.定位 Position

相对定位relative

语法:postion:relative;

特点:相对于自身进行位移,只是样子进行了移动,其实还是会牢牢占据原来的位置,不会影响到整个布局的变化

绝对定位absolute

语法:postion:absolute

特点:脱离正常的文档流,不会占据原来的位置。相对于设置了定位的父元素或者是祖先元素。

固定定位fixed

语法:position:fixed

特点:脱离正常的文档流,不会占据原来的位置。相对于浏览器进行定位

层:z-index

语法:Z-index:数字;

解析:z-index可以设置统一级别下,使用了定位的层级关系。z-index值越大,层越在上面。默认情况下,所有元素的z-index值为0。没有使用定位的元素,不可用。

 

posted @ 2019-05-28 09:07  WhisperHong  阅读(105)  评论(0编辑  收藏  举报