一、目录引入

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

二、标签种类:

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>

css基础重点内容总结的更多相关文章

  1. CSS基础 overflow 内容溢出部分显示效果

    属性:overflow 值 作用 visible 默认,内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出,都有滚动条 auto 有内容溢出,自动显示滚动条

  2. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

  3. 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...

  4. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  5. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  6. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  7. css基础5

    今天在这里跟大家分享css基础最核心的部分,浮动和定位.话不多说,直接上干货! 一.浮动 定义:定位元素是相对于其正常位置应该出现的位置.定位元素的位置是相对于自身.父级元素位置.其他元素以及浏览器窗 ...

  8. html前端之css基础

    CSS 属性导航: CSS 属性组 动画 背景 边框和轮廓 框 颜色 内容页的媒体属性 尺寸 盒子模型(新) 盒子模型(旧) 字体 内容生成 网格 超链接 线框 列表 外边距 字幕 多列 内边距 页面 ...

  9. CSS基础面试题,快来查漏补缺

    本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...

随机推荐

  1. 15树莓派安装图形界面截图工具Shutter

    2017-09-27 13:02:54 参数-添加/删除软件-搜索软件名称“shutter”,勾选,点击“应用”,等待安装完成后点击“确定”.(需下载安装包后安装) 补充:更多截图软件可以https: ...

  2. 在docker中安装mysql

    #!/bin/sh # 安装docker # 在docker中安装mysql # 解决了docker容器中无法输入中文的问题 ##########################安装docker # ...

  3. ORACLE11g 重装系统后根据dbf恢复数据库

    1.安装一个和原系统一致的oracle 环境,主要包括版本.数据名sid.实例名.路径和数据库编码一致 2.修改listener.ora的参数 SID_LIST_LISTENER = (SID_LIS ...

  4. dup(dup2/dup3)

    readme man~ NAME dup, dup2, dup3 - duplicate a file descriptor SYNOPSIS #include <unistd.h> in ...

  5. Java 中 String 的字面量与 intern 方法

    下方代码主要说明: String b = new String("xyz")  创建2个对象,一个在常量池中的 "xyz",一个 String 实例对象,返回的 ...

  6. 170217、nginx 安装时候报错:make: *** No rule to make target `build', needed by `default'. Stop.

    出现此种情况,是linux系统没有安装先决条件 1.GCC——GNU编译器集合(GCC可以使用默认包管理器的仓库(repositories)来安装,包管理器的选择依赖于你使用的Linux发布版本,包管 ...

  7. Junit/idea Junit支持/Spring test之间的孽世纠葛

    最近应老板要求,研究研究Spring测试相关的东西,力求搞一个方便使用的测试工具,对于一个Spring不熟Junit不懂的人这是一个很大的坑,扫了一边spring test文档没感觉有什么收获,spr ...

  8. javascript的数组之push()

    push()方法讲一个元素或多个元素添加到数组的末尾,并返回新数组的长度length,修改数组自身. var numbers = [1, 2, 3]; numbers.push(4); console ...

  9. mysql 编码问题

    有时候insert数据的时候,会报以下异常: ERROR 1366 (HY000): Incorrect string value: '\xE6\x9D\x83\xE9\x99\x90...' for ...

  10. nmcli命令使用以及网卡绑定bond

    一.nmcli命令 1.什么是nmcli 以前我配置网卡的时候都要打vim /etc/sysconfig/network-scripts/ifcfg-eth0这么一长串命令,有很多配置名字还记不住就需 ...