HTML CSS基础

一、css的元素显示模式

1、块级元素

div、p、li、dt、dd、h1-h6...
* 独占一行
* 设置宽高起效
* 不设置宽度，宽度默认值是父亲的百分之百

2、行内元素

 a、span em i strong b ...  
* 可以和其他行内元素并排 
* 设置宽高无效
* 宽高由其子元素决定

3、行内块元素

  img、input
* 设置宽高
* 可以与其他行内元素或行内块元素并排

4、display属性 改变元素的显示模式

display: inline; 转成行内元素
display: inline-block; 转成行内块元素
display: block； 转成块元素
display: none； 让元素隐藏

二、选择器

1、id选择器

<div id='idName'></div>
#idName{}

2、类选择器

<div class='className'></div>
#className{}

3、后代选择器

<div>
    <p>
        <span></span>
    </p>
</div>
div span{} 后代即可
div>p{} 亲儿子

4、交集选择器

<ul>
    <li>
        <p class="p3">我是li内部的元素</p>
    </li>
</ul>
ul li p.p3 {}

5、并集选择器

<p></p>
<div></div>
p,span{}

三、标签以及伪类选择器

<a href="http://www.qq123.com"></a>
 
/* 消除下划线 */
text-decoration: none;
/*下划线*/
text-decoration: underline;
/*上划线*/
text-decoration: overline;
/*中划线*/
text-decoration: line-through;
/*首行缩进 2em 2倍的字号*/

1.未访问前

a:link {}

2.链接访问后的状态

a:visited {}    

3. 鼠标放入超链接时的状态（常用）

a:hover {}

4.按住超链接不放的状态

a:active {}

四、字体

1、分开写

/*字体大小*/
font-size: 20px;
/* 设置字体*/
font-family: Arial, "Microsoft YaHei", "黑体";
/* 文字样式 正常/倾斜*/
font-style: italic;
/* 字体加粗  400正常 700 */
font-weight: 500;

2、合一起写

font: italic 700 22px "黑体";

五、背景

<div class="box1"></div>
<div class="box2"></div>

.box1 {
        width: 400px;
        height: 300px;
        background-color: red;
        /* 背景图设置 */
        background-image: url(p.jpg);
        /* 控制背景图是否平铺 */
        background-repeat: no-repeat;
        /* background-repeat: repeat-x;
        background-repeat: repeat-y; */
        /* 背景定位 
        background-position: 0 0; 水平方向坐标 垂直方向坐标 
        */
        /*也可以用方位名词 水平 left center right
        竖直 top center bottom
        假如只写一个方向 另外一个方向默认是center
        */
        background-position: center center;
        background-position: bottom left;
        background-position: top;
        background-position: 30px center;
    }
    
.box2 {
        width: 400px;
        height: 300px;
        background-color: red;
        background: #ccc url(p.jpg) no-repeat center center;
    }

<ul>
    <li></li>
</ul>
ul li{
    /*去掉列表的默认样式*/
    list-style: none;
}

六、其他样式

1、首行缩进

<p></p>
p{
    /* 可以被子元素继承*/
    font-size: 22px;
    /*首行缩进 2em 2倍的字号*/
    text-indent: 2em;
}

2、表格合并相邻的单元格

<table>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</table>
table,
td {
    border: 1px solid #ccc;
    /* 合并相邻的单元格 制作细线表格*/
    border-collapse: collapse;
}

3、边框

<input type="text" name="" id="">
input {
        /*取消边框*/
        border: none;
        /* dashed虚线*/
        border-bottom: 1px solid green;
    }

4、元素显示和隐藏

/* 元素隐藏 不保留位置*/
display: none;
display: block; 

/*元素隐藏 保留位置*/
visibility: visible;

/* 元素一行单行显示，并且超出部分用小点表示*/
overflow: hidden;
white-space: nowrap; /*强制一行显示*/
text-overflow: ellipsis;

5、鼠标显示图标cursor

6、边框样式

<p>边框样式</p>
p{
    border:red solid thin;
    /*在border的外面加边框*/
    outline:#00ff00 dotted thick;
}

7、textarea去掉右下角小尖角

textarea {
    resize: none;
}

8、图片对齐方式

vertical-align对行内元素或行内块元素有效

图片和文字默认是基于底部的线对其
.two{
    vertical-align: middle;
}
.two{
   vertical-align: top;
}

<div><img class="one" src="" width="180">多啦A梦</div>
<div><img class="two" src="" width="180">多啦A梦</div>
<div><img class="three" src="" width="180">多啦A梦</div>

七、权重

<div>文本文本文本</div>
<div class="box">
    <p>
        我是第一段
    </p>
    <p>
        我是第二段
    </p>
    <span>111</span>
</div>
<div class="box2" id="box2">
    程序员工资那么高，为什么找不到女朋友
</div>

标签选择器 /* 0 0 0 1*/
div {
        color: blue;
    }
   
id选择器 /*0 1 0 0*/
#box2 {
        color: pink;
    }

类选择器 /*0 0 1 0*/
.box2 {
        color: green;
    }
    
交集选择器 
    /*
      0 0 0 1
      0 0 1 0
     ---------
      0 0 1 1
    */
div.box2 {
        color: yellow;
    }
    
    /*
       0 0 0 1
       0 1 0 0
       ---------
       0 1 0 1
    */
   div#box2 {
        color: purple;
    }

八、div+css布局（padding和margin）

/* 复合写法  上  右  下  左 从上顺时针设置 */
padding: 6px 10px 8px 10px;
/* 上 左右  下*/
padding: 4px 8px 10px;
/* 上下  左右*/
padding: 4px 6px;

/* 让box左右居中 */
margin: 0 auto;

九、浮动

1、标准流（默认状态）

css元素的划分(块级元素、行内元素。。。)和特征都是在标准流前提下成立

2、浮动，脱离标准流

• 浮动元素 1 脱标 2 相互贴靠 3 浮动元素可以设置宽高，不设置宽高 默认靠内容撑开 4 文字环绕(了解)

• 浮动元素影响的是自己和后面的元素

十、清除浮动

    浮动的元素不能撑开父亲，浮动往往会对后面的元素布局造成影响，所以需要清除浮动造成的影响
    
    <div class="box clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
        <!-- <h3 class="clear"></h3> -->
    </div>

1、隔墙法

给浮动的元素增加一个高度，缺点：儿子的高度有时候不确定，所以高度设置固定，不灵活
.box{
    height: 260px;
}

2、额外标签法

clear:left; clear:right; 
clear:both

在浮动元素末尾加一个空标签(一般是块级元素) 给这个标签设置clear: both
缺点：会影响页面的结构

.clear {
        clear: both;
}

3 给浮动元素的父亲增加overflow: hidden

4、使用after伪元素清除浮动

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}  

5、双伪元素清除浮动

.clearfix {
    /*专门ie6、7清除浮动*/
    *zoom: 1
}
    
.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}
    
.clearfix:after {
    clear: both;
}

十一、定位

1.相对定位

• 相对于自己标准流的位置进行局部的位置微调

• 相对定位的元素还是标准流的元素

    position: relative;
    left: 20px;
    top: 60px;
  

2、绝对定位

• 一个绝对定位元素是body儿子，此时参考点就是body左上角

• 在工程上，一般采用子绝父相，也就是儿子设置绝对定位，父亲设置为 相对定位，父亲设置相对定位，此时儿子绝对定位的参考点就是以 最近的带有定位的祖先元素为准

• 绝对定位的元素脱离标准流

    position: absolute;
    left: 20px;
    top: 60px;