css基础重点内容总结

一、目录引入

./同级(当前) ../上级目录  ../../上上级目录

 

二、标签种类：

    1.块级标签（block）：独占一行，宽高可设；

    2.行内块标签（inline-block）:不独占一行，宽高可设；

    3.行内标签（inline）：不独占一行，宽高不可设，由内容决定 br是行内标签。

 

三、三类标签之间的转换

    1.块级标签转换为行内标签：display:inline;

    2.行内标签转换为块级标签：display:block;

    3.转换为行内块标签：display:inline-block;

 

四、图片标签：

　 单标签 < img src=”./img/t9.jpg” alt=”图片不存在” />

 

五、CSS样式、写法

    1.行内样式（内联样式）：<span style=“color:blue;”>文本</span>

    2.内部样式：写在head标签里面，加上style标签，需要有选择器（选择给指点的标签加样式 结构：选择器+花括号+样式内容）

    3.外部样式引入：<link rel=”stylesheet ” href=”css/style.css”>

 

六、input常用的八种类型

  ①    intput类型(8)

1) <input type=”radio” name=””value=””/>单选

例：<lable for="sex">Math</lable>

<input tyoe="radio" name="" id="sex" />   （选中单选）

2) <input type=”checkbox”name=””value=‘’“>多选

3) <input type=”submit”name=””value=”提交”>

4) <input type=”button”name=””value=”按钮”>

5) <input type=”password”name=””value=””>密码

6) <input type=”text”name=””value=””>文本

7) <input type=”reset”name=””value=”清空”>

8) <input type=”hidden”name=”country”value=”China”>隐藏

② input标签中id、name、value的区别：

　　id唯一标识符，不允许有重复值；

　　name和id的功能是一样的，唯一不同的是name允许有重复的值；

　　value代表某个html标签的值 。如 value=“hello！” 你将看到网页中文本框的内容为“hello!” 

七css常用标签

 

八、优先级

　　！importent>style（行内元素）>id>class>元素选择器（在这个基础上，考虑就近原则）

 

九、px和em区别

px特点：

　　px像素，相对长度单位，像素px相对显示屏分辨率而言。

em特点：

　　1.em的值并不是固定的；

　　2.em会继承父级元素字体大小。

 

十、相对定位 、绝对定位 、固定定位 的区别：

　　1. position：reletive；  相对定位：该元素相对于自己原有的位置，偏移一定的距离，相对的是它自己，同时还占据原来的位置；

　　2. position：absolute；绝对定位：相对的是父元素偏移一定距离，这个父元素需要设置position属性，绝对定位的元素相对于最近已定位祖先元素，绝对定位不占据原来位置；

　　3. position：fixed；      固定定位：相对于浏览器窗口。

 

十一、伪类、伪元素区别

　  1、 伪类：类，class是就是一个类，就类似于class这样，表示一个元素的状态，但是无须标识的分类；   

 　 2、伪元素：就是一个元素，类似p标签元素等，逻辑上存在，实际上是不存在的 

 

十二、浮动含义

　　任何元素element都可以被浮动。且文本和行内的图像永远不会被浮动所覆盖。

 

十三、透明度区别

　　1.opacity：设置的透明度会被子元素继承，而切无法取消。

　　2.transparent：表示背景透明，不会被子元素继承。

 例：一个div中写有大段文字，设div的backgroud-color为红色透明度0.5，代码background-color：rgba(190,19,13,0.5);刷新后的效果只是div背景色会变，其内容颜色不收影响。  但设div的opacity值为0.5；显示效果整个div（包括里面的文字内容）都变成透明度为50%。

　　3.display:none，设置该属性后，该对象会在页面上彻底消失。宽度、高度等属性都将“丢失”；

　　4.visibility：hidden，隐藏，视觉上看不见（完全透明），但它所占据空间的位置仍然存在。仍具有高度宽度等属性值。

例：

            

 

十三、下拉列表 select标签    option 元素位于 select 元素内部

 

<select>
      <option>请选择</option>
      <option>山西</option>
      <option>上海</option>
      <option>北京</option>
  </select>