day04

A我今天学到了什么

一.css盒子模型

1.1:box-sizing:border-box

当设置box-sizing:border-box;
设置padding,和border,它的宽度还是会保持不变

box-sizing:content-box;(默认清晰)

当设置padding和border时宽度会发生改变
总宽度=width+border+padding

1.2.实现元素居中

margin-left:auto;margin-right:auto;

二.浮动

目的:为了让元素并排显示

2.1如何清除浮动

1.给下面的兄弟元素给clear:both;
2.给父级加overflow:hidden;
3.用伪元素,给父级内容生成
.row:before{display:table;content:””    }
.row:after{display:table;content:””clear:both;}

三.定位:position

position:absolute (绝对定位) | relative(相对定位)
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
通过left,top,right,bottom移动
Absolute定位

绝对定位的元素的位置相对于最近的相对定位的父元素,如果没有已定位的父元素,那么它的位置相对于<html>;
通过left,top,right,bottom移动
没有设置已定位的父元素,position:absolute 通过left移动
//HTML
<div class="one">
    <div class="two"> </div>
</div>
//css
   *{margin:0;padding:0}
        /*相对定位:就是元素在页面上正常的位置*/
        .one{
            margin-left:100px;
            width:100px;
            height:100px;
            background-color: red;
        }
        .two{
            width:50px;
            height:50px;
            background-color: yellow;
            position: absolute;
            left:0;
           }
利用float和display实现导航
//HTML
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">电脑</a></li>
</ul>
//CSS
 *{
margin:0;
   padding:0;
}
 a{
  text-decoration: none;
   display: block;
   color:white;
}
 ul{
     list-style: none;
     overflow: hidden;
     background:pink
}
  li{
float:left;
line-height: 50px; 
width:100px;
text-align:center;
}
 a:hover{
color:gainsboro;
background-color: deeppink;
}

3.1z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素

//HTML
<div class="parent">
    <div class="one"> </div>
    <div class="two"></div>
</div>
//CSS
  /*z-index:可以给绝对定位的元素,设置它们的堆叠顺序*/
        .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .one{
            z-index: 100;
            position: absolute;
            width:100px;
            height:50px;
            background-color: green;
        }
        .two{
            z-index:90;
            position: absolute;
            width:50px;
            height:50px;
            background-color: pink;
        }
        .parent:hover .one{
            z-index: 80;
        }

3.2当子元素没有设置宽度,如果设置了绝对定位,它不会继承父元素的宽度

//HTML
div class="center">
    <input type="text" placeholder="搜素"/>
    <a></a>
</div>
//CSS
*{margin:0;padding: 0;}
        div{
            width:250px;height:40px;margin-top:15px;
            position:relative;
        }
        input{
            box-sizing: border-box;
            width:250px;
            outline: none;
            padding-left:20px;
            height: 38px;
            font-size: 14px;
            border: 1px solid #eee;
            border-radius: 40px;
            background: #eee;
        }
        a{
            cursor: pointer;
            width:24px;
            height:24px;
            display: block;position:absolute;top:9px;right:5px;
            background:url(images/icon4.png) no-repeat
        }
        input:focus div{width:300px;}

四.实现元素的垂直水平居中

父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

五.CSS样式的几种引入方式

5.1外部样式表

<link rel="stylesheet" type="text/css" href="/c5.css">
5.2
内部样式表(位于 <head> 标签内部)
<style>
p{color:pink;font-size:16px}
</style>
5.3内联样式(在 HTML 元素内部)

<p style=”color:pink;font-size:16px”>hello world</p>
5.4给同一选择器设置同一样式,离元素近的样式设置方式优先级高

B我今天学到了什么

一.css盒子模型

1.1:box-sizing:border-box

当设置box-sizing:border-box;
设置padding,和border,它的宽度还是会保持不变

box-sizing:content-box;(默认清晰)

当设置padding和border时宽度会发生改变
总宽度=width+border+padding

1.2.实现元素居中

margin-left:auto;margin-right:auto;

二.浮动

目的:为了让元素并排显示

2.1如何清除浮动

1.给下面的兄弟元素给clear:both;
2.给父级加overflow:hidden;
3.用伪元素,给父级内容生成
.row:before{display:table;content:””    }
.row:after{display:table;content:””clear:both;}

三.定位:position

position:absolute (绝对定位) | relative(相对定位)
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative
通过left,top,right,bottom移动
Absolute定位

绝对定位的元素的位置相对于最近的相对定位的父元素,如果没有已定位的父元素,那么它的位置相对于<html>;
通过left,top,right,bottom移动
没有设置已定位的父元素,position:absolute 通过left移动
//HTML
<div class="one">
    <div class="two"> </div>
</div>
//css
   *{margin:0;padding:0}
        /*相对定位:就是元素在页面上正常的位置*/
        .one{
            margin-left:100px;
            width:100px;
            height:100px;
            background-color: red;
        }
        .two{
            width:50px;
            height:50px;
            background-color: yellow;
            position: absolute;
            left:0;
           }
利用float和display实现导航
//HTML
<ul>
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">电脑</a></li>
</ul>
//CSS
 *{
margin:0;
   padding:0;
}
 a{
  text-decoration: none;
   display: block;
   color:white;
}
 ul{
     list-style: none;
     overflow: hidden;
     background:pink
}
  li{
float:left;
line-height: 50px; 
width:100px;
text-align:center;
}
 a:hover{
color:gainsboro;
background-color: deeppink;
}

3.1z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素

//HTML
<div class="parent">
    <div class="one"> </div>
    <div class="two"></div>
</div>
//CSS
  /*z-index:可以给绝对定位的元素,设置它们的堆叠顺序*/
        .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .one{
            z-index: 100;
            position: absolute;
            width:100px;
            height:50px;
            background-color: green;
        }
        .two{
            z-index:90;
            position: absolute;
            width:50px;
            height:50px;
            background-color: pink;
        }
        .parent:hover .one{
            z-index: 80;
        }

3.2当子元素没有设置宽度,如果设置了绝对定位,它不会继承父元素的宽度

//HTML
div class="center">
    <input type="text" placeholder="搜素"/>
    <a></a>
</div>
//CSS
*{margin:0;padding: 0;}
        div{
            width:250px;height:40px;margin-top:15px;
            position:relative;
        }
        input{
            box-sizing: border-box;
            width:250px;
            outline: none;
            padding-left:20px;
            height: 38px;
            font-size: 14px;
            border: 1px solid #eee;
            border-radius: 40px;
            background: #eee;
        }
        a{
            cursor: pointer;
            width:24px;
            height:24px;
            display: block;position:absolute;top:9px;right:5px;
            background:url(images/icon4.png) no-repeat
        }
        input:focus div{width:300px;}

四.实现元素的垂直水平居中

父元素设置parent{position:relative;}
子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

五.CSS样式的几种引入方式

5.1外部样式表

<link rel="stylesheet" type="text/css" href="/c5.css">
5.2
内部样式表(位于 <head> 标签内部)
<style>
p{color:pink;font-size:16px}
</style>
5.3内联样式(在 HTML 元素内部)

<p style=”color:pink;font-size:16px”>hello world</p>
5.4给同一选择器设置同一样式,离元素近的样式设置方式优先级高

C.今天没有掌握的

没有,只是不熟悉
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容