day03

今天学了什么

1.css列表样式

<style>
ul{
list-style:none; //去除小图标
list-style-type:disc;  //默认实心圆
list-style-type:circle; //空心圆
list-style-type:square; //正方形
list-style-image:url("xxx"); //图片小图标
}
</style>

2.css边框

<style>
border-width://边框的宽度
border-style:// 边框的样式
border-color: //边框的颜色
</style>

可以简写成

<style>
border： width style color;  
p{border:1px solid #333;} //四个方向的边框
p{border-top:1px solid #333;} //单独设置各边
</style>

3.表格

3.1折叠边框

border-collapse属性设置表格的边框被折叠成一个单一的边框

//css
<style>
table{
        width: 500px;
        text-align: center;
        border-collapse: collapse;
 }
table,td,th{
      border: 2px solid #333; 
}
</style>
//html
 <table>
       <thead> <tr><th>手机</th><th>商城</th></tr> </thead>
       <tbody>
            <tr> <td>苹果</td><td>京东</td></tr>
            <tr><td>小米</td><td>京东</td></tr>
            <tr><td>华为</td><td>苏宁</td></tr>
       </tbody>
 </table>

实现效果

表格.png

3.2跨越的列

//css
<style>
       table{
            width: 500px;
            text-align: center;
            border-collapse: collapse;
        }
        table,td,th{
            border: 2px solid #333; 
        }
</style>
//html
 <table>
    <tbody>
        <tr><th colspan="3">商城</th></tr>
        <tr><td>京东</td><td>苹果</td><td>4999</td></tr>
        <tr><td>淘宝</td><td>oppo</td><td>2899</td></tr>
        <tr><td>苏宁</td><td>华为</td><td>1999</td></tr>
    </tbody>
</table>

实现效果

合并列.png

3.3 跨越的行

//css
<style>
   table{ width: 500px;
          text-align:center;
          border-collapse:collapse;}
   table,td,th{border: 2px solid #333;}
</style>
//html
 <table>
   <tbody>
        <tr><th rowspan="3">商城</throwspan></th><td>手机</td><td>电池</td></tr>
        <tr><td>衣服</td><td>鞋子</td></tr>
        <tr><td>电风扇</td><td>话筒</td></tr>
   </tbody>
</table>

实现效果

行合并.png

4.轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

p{outline:1px solid pink}

5.透明

//css
  <style>
        .chlid {
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 0.5;
        }
        .parent {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
</style>
//html
<div class="parent">
<div class="chlid"></div>
</div>

实现效果

透明.png

6.CSS继承

6.1width和height

发生在块元素之间
width子元素不设置width他会继承父元素的width属性

//css
  <style>
        .parent{
            width: 200px;
            height: 200px;
            background-color:red;
        }
        .chlid{
            height: 100px;
            background-color: yellow;
        }
    </style>
//html
  <div class="parent">
       <div class="chlid"></div>
   </div>

子类继承父类width.png

height：如果父元素没有设置height，他会得到子元素的高度

//css
   <style>
        .parent{
            width: 200px;
            background-color:red;
        }
        .chlid{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
//html
 <div class="parent">
      <div class="chlid"></div>
 </div>

父类得子类height.png

6.2css可以继承的属性

6.2.1文本相关属性:

color,
//颜色
text-align,
//对齐方式
text-decoration,
//文本装饰
text-transform,
//字符转换
text-indent(内联标签不能设置此属性)
//缩进

6.2.2字体相关属性:

font-family,
//字体系列
font-style,
//字体风格
font-size,
//字体大小
font-weight,
//字体粗细
line-height
//行高

6.2.3列表相关属性:

list-style
//列表样式

6.2.3表格相关属性:

border-collapse
//折叠边框

其他属性:

cursor,
//光标
visibility
//可见度

7.导航

//css
<style>
        *{ margin: 0; padding:0;}
        .parent{
            background: pink;
            font-size: 0px;
        }
        a{  
            display: inline-block;
            line-height: 60px;
            width: 100px;
            text-decoration: none;
            text-align: center;
            color:#fff;
        }
        .parent>a{
            font-size: 14px;
        }
        a:hover{
            background: deeppink;
        }
    </style>
//html
  <div class="parent">
        <a href="#">手机</a>
        <a href="#">电脑</a>
        <a href="#">平板</a>
    </div>

内联块-导航.png

8.浮动float

8.1clear: both;解决浮动污染问题

//css
<style>
        .parent{
            width: 200px;
            background: red;
            height: 400px;
        }
        .child{
            width: 100px;
            height: 50px;
            background: yellow;
            float: left;
        }
        .two{
            width: 150px;
            height: 150px;
            background: green;
            clear: both;
        }
    </style>
//html
   <div class="parent">
        <div class="child"></div>
        <div class="two"></div>

both.png

8.2overflow解决浮动污染问题

//css
<style>
        /*
        子元素float,让父元素有高度
        1.给父元素overflow:hideen;
        */
        .parent{
            overflow: hidden;
            width: 200px;
            background: red;
        }
        .child{
            width: 100px;
            height: 50px;
            background: yellow;
            float: left;
        }
        .two{
            width: 150px;
            height: 150px;
            background: green;
        }
    </style>
//html
 <div class="parent">
        <div class="child"></div>
        <div class="two"></div>
 </div>

实现效果

overflow.png

9.定位：position

position:absolute | relative

Relative 相对定位

相对定位元素的定位是相对其正常位置。
postion:relative

Absolute定位

绝对定位的元素的位置相对于最近的相对定位的父元素，
如果没有已定位的父元素，那么它的位置相对于<html>:
都通过left,top,right,bottom移动

z-index:设置元素的堆叠顺序

给position:absolute绝对定位的元素
例子:搜索框
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度