HTMLCSS学习

子选择器：第一代

        .food>li{border:1px solid red;}

后代选择器：所有后代

        .first  span{color:red;}

通用选择器：

        * {color:red;}

鼠标经过

        a:hover{}

span不继承父类的width，他为内联;

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承最低。p{color:red!important;}

p{text-indent:2em;}缩进字体的两倍

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

　　块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行　

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

 

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

　　内联元素特征：(1)设置宽高无效

　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　(3)不会自动进行换行

常用的内联块状元素有：

<img>、<input>

　　行内块状元素特征：(1)不自动换行

　　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　　(3)默认排列方式为从左到右

 

1.display:block;转化为块状元素  
2.display:inline;转化为内联元素
3.display:inline-block;转换为行内块状元素

float:left或position:absolute自动转化为内联 

相对于其它元素进行定位:

  父类：position:relative;子类：position:absolutebottom:0px;(放到父类的底部)

 

块状元素居中：width:200px; margin:20px auto;

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的