1.html模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
</body>
</html>

2.DOCTYPE声明放在html文件头部
最新HTML5用<!DOCTYPE html>声明

3.css的引入方式
a.直接在html下引入<style></style>
b.直接写在div内；如<div style="background=red;"></div>
c.写一个css文件（文件里不用写style），在html头部中引用；
<link rel="stylesheet" href="./my.css"> (./表示在根目录下）
d.在css文件中引入；@import url(../star.css);（必须写在css文件的开头）

4.ID选择器：ID="id名"，在样式中用# +id名{}表示
id名要以英文字母开头；id名是唯一的
class选择器：class="class名"，在样式中用 . + class名{}表示
标签名选择器<class选择器<id选择器<行间样式

5.div的布局属性position属性
a.position:static;无定位；表示div没有position属性不能用top、left等定位
b.position:relative;相对定位；表示div用top、left、right、bottom来定位
定位时根据父div，没父div时用他的前一个同属性div
c.position:absolute绝对定位；能用top、left等将div准确的移到你想要的位置
能覆盖div，就像图层的最上层；定位时根据父同属性的div定位，没有
同属性的父div时相对于body定位（注意：1.如果父div不是absolute属性
不会影响到该子div的定位；2.如果改div没有用top等定位会默认放置相对于
上个div的高的位置下）
d.position:fixed;相对于窗口的固定位置；于absolute类似，当窗口滚动时div不会
随着窗口滚动
6.css的基础样式：
width:100px;宽100像素
height:100px;
背景颜色蓝色
background-image:url("图片路径");背景图片
background-repeat : repeat | no-repeat | repeat-x | repeat-y 如何重复背景图片
平铺/不平铺/向x轴平铺/向y轴平铺
background-position:第一个值（x轴位置）第二个值（y轴的位置）;
background的复合写法：
background:color image position repeat;
例：background:red url("img/1.jpg") 30px 100px no-repeat;
background-attachment:fixed;背景图固定不滚动；
background-size:第一个值（x轴的比例） 第二个值（y轴的比例）;

7.border边框
border-width:50px;边框宽度
border-top-width;边框顶部宽度 border-right-width:边框右边宽度
border-bottom-width:边框底部宽度 border-left-width:边框左边宽度
border-style:solid;边框样式：实线
border-color:blue;边框颜色：蓝色
border的复合写法：
border:border-width border-style border-color;
border-top:border-top-width border-top-style border-top-color;
border-radius:10px;边框圆角为10像素

8.padding内边距
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding的复合写法：
padding:10px 20px;俩个值 第一个值代表上下 第二个值代表左右
padding:10px 20px 40px;三个值 第一个值代表上 第二个值代表左右 第三个至代表下
padding:10px 20px 30px 40px;四个值代表上右下左

9.margin外边距
margin-top;上外边距
margin-right;右外边距
margin-bottom;下外边距
margin-left;左外边距
margin的复合写法和padding类似；
注意：标签的嵌套 确定父子级关系
a.第一个子级的margin-top会在特定的情况下穿透父级
规避方法：1、给父级加边框
2、给父级加 overflow:hidden;
3、不要用margin-top，用父级的padding-top代替
b.兄弟关系的margin-top和margin-bottom会叠压

10.文本设置(以下可以继承文本样式）
font-size 文字大小（一般为偶数）
font-size：16px； 字体为16像素
font-family 文字字体
font-family："SimSun";字体为宋体
color 文字颜色
color:rgb(255,0,0);字体为红色
line-height 文字行高
text-align 文本对齐方式（left center right）
text-indent 首行缩进（em缩进字符或者是具体的数值）
font-weight 文字着中（normal bold bolder 100-900）
font-style 文字倾斜（normal italic oblique）
text-decoration 文本修饰（none underline overline line-through）
letter-spacing 字母间距（具体的数量px）
word-spacing 单词间距（以空格为解析单位）

11.常见的复合属性
background:background-color background-image
background-position background-repeat
border:border-width border-style border-color
padding:padding-top padding-right padding-bottom padding-left
margin:
font:font-style font-weight font-size/line- height font-family;

12.常见标签
title标签 写法：<title></title> 双标签 语义：网页标题 权重最大
div标签 写法：<div></div> 双标签 语义：无意义
h标签 h1~h6 写法：<h1></h1> <h2></h2> ...<h6></h6> 语义：标题
h标签默认样式：font-size font-weight margin h1权重最大h2次之
p标签 写法：<p></p> 语义：段落 默认样式：margin p标签在嵌套里不要包含块元素的标签
ul标签 写法：<ul></ul> 语义：无序列表 默认样式：margin padding-left list-style-type
li标签 写法：<li></li> 语义：列表项 默认样式：list-style-type
ol标签 写法<ol></ol> 语义：有序列表 默认样式：margin padding-left list-style-type
ul，ol和li是组合标签 ul，ol的第一层子级一定是li li的父级一定是ul或ol
dl标签 字典标签 写法：<dl></dl> 语义：自定义列表 默认样式：无
<dt></dt> 语义：列表标题 默认样式：无
<dd></dd> 语义：列表说明 默认样式：margin-left
块属性标签的特性：1、默认是父级100%的宽
2、支持所有CSS的样式
3、独占一行
内联属性的标签：
内联标签 特性：
1、同属性的标签排在同一排
2、内容撑开宽度
3、不支持宽高，不支持上下的padding和margin（支持左右的），
4、代码换行被解析 间距的大小取决于父级的font-size的大小
span标签 写法：<span></span> 语义：无意义
strong标签 写法：<strong></strong> 语义强调 默认样式：font-weight 权重比较高
em标签 写法：<em></em> 语义强调 默认样式：font-style 权重比较高
a标签 写法：<a href="需要连接的网页地址" target="打开网页的方式"></a> 语义：超链接
默认样式：color text-decoration cursor
target="_self"(默认)当前页打开 target="_blank"新窗口打开
href属性中：1、如果要连接一个网址，一定要加http://
2、#代表连接到当前页
内联块块标签：
内联块属性特性：
1、同属性的标签排在同一排
2、内容撑开宽度
3、支持所有的CSS的样式
4、代码换行被解析，间距大小取决于父级的font-size的大小
注意：图片路径地址一定要正确，alt属性一定要写
img标签 写法：<img src=图片的路径地址"" alt="图片说明"> 单标签 语义：图片
默认样式：在低版本浏览器中有默认的边框

13.标签类型的转换
显示为无：display:none;
块属性 display:block;
内联属性：
内联：display:inline;
内联块：display:inline-block;

14.浮动的样式和特性
浮动的特性：
1、浮动的元素排在同一排
2、浮动的元素内容撑开宽度
3、浮动的元素支持所有的css样式
4、浮动的元素脱离文档流
5、浮动的元素提升层级半级（属性盖住内容溢出，可做文字环绕div的效果）
注意：
1、overflow溢出 会重新计算元素的空间
hidden溢出隐藏
auto溢出出现滚条
scroll出现滚动条
2、元素的居中
margin:0 auto;
3、元素的伪类
伪类：就是css一些元素身上的特殊属性
:hover 鼠标停留
:after 在元素内容之后插入一些内容
浮动：就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来

15.BFC的常见方法及优缺点
BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题
1、父级也浮动
弊端：左右的margin:0 auto;会失效；
2、给父级加display:inline-block;
弊端：左右的margin:0 auto;会失效；(如果需要让元素居中可以给父级家text-align:center)
3、给父级加高
弊端：扩展性不好
4、br标签
写法<br/> 作用：换行
5、clear
clear 元素的某一方向不允许出现其他的浮动元素
left right both推荐使用 none
第4、5种：不符合W3C规范 违反结构、样式、行为三者分离原则
6、伪类清浮动
:after{
content:"";display:block;clear:both;
}
目前主流方法，建议使用。

16.定位特性
定位：把一个元素按照一定的方式定到页面的某一位置
position
相对定位 relative
针对自己本身的位置进行定位
绝对定位 absolute
针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上
有没有定位，如果有，针对父级的父级的原点定位，以此类推，如果都没有定位，
针对document进行定位
温馨提示：绝对定位即使没有初始值，也一定要设置值（如：left:0px;top:0px;）
固定定位 fixed
针对页面窗口进行定位
温馨提示：IE6 不支持固定定位
偏移量：left、top、right、、bottom
注意：left top比right bottom的优先级要高
三种定位特性
相对定位 relative
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位
绝对定位 absolute
1.会使元素完全脱离文档流
2.内容完全撑开宽度和高度
3.使元素支持所有的css样式
4.提升层级
z-index：数值；定位层级设置数值越大，层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级，针对定位父级发生偏移，没有定位父级针对document发生偏移
7.如果绝对定位的子级有浮动，可以省略清浮动的操作
固定定位 fixed
1.不兼容IE6
2.针对窗口进行定位
3.如固定定位的子级有浮动，可以省略清浮动的操作

17.派生选择器
是由id选择器 class选择器 标签名选择器组合而成
id选择器 10000
class选择器 100
标签名选择器 1
例：#box span{} =10000+1 这个值越高，优先级就越高

18.兼容性
页面在不同的浏览器中可能会显示不同。
1、在IE6下，子级的宽度会撑父级设置好的宽度
温馨提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同
2、在IE6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动元素才可以
3、在IE6下，元素要同过浮动排在同一排，就需要给这行元素都加浮动
例：如果一右边元素浮动，左边元素利用margin排在同一排，俩个元素之间会产生3像素的间隙
4、注意标签的嵌套规则；例：<p> <div></div> </p> 网页默认会产生2个p标签
5、在IE6下，元素的高度如果小于19px的时候，会被当成19px来处理
解决方法：ovreflow：hidden；
6、在IE6下，不支持1px的边宽样式；例：border:1px dotted red;
解决方法：切背景平铺
7、在IE6下，大部分兼容性都是因为haslayout属性的触发问题，尽量触发haslayout属性可以减少
很多IE下的兼容性问题；
父级有边框的时候，子元素的margin会失效
解决方法：触发父级的haslayout属性
8、IE6下双边距的bug
在IE6下，块元素有浮动有横向的margin的值的时候，横向的margin的值会扩大俩倍
解决方法：把块元素转成内联元素
9、设置margin-left 一行中左侧的第一个元素有双边距
设置margin-right 一行中右侧的第一个元素有双边距
解决方法：转化成内联元素
10、在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙
解决方法：1.给li加浮动 2.给li加vertical-align：top；
在IE6下，最小高度的bug和li的间隙问题共存的时候，vertical-align不好使
解决方法：给li加浮动
11、当一行子级的元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情
况的时候，最后一行的子级元素的margin-bottom会失效
12、在IE6下的文字溢出bug
子元素的宽度和父级的宽度如果相差小于3px的时候，俩个浮动元素中间有注释或者内联元素，
就会出现文字溢出，内联元素越多，溢出越多
解决方法：用div把注释或者内联元素包起来
13、在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效
解决方法：不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来
14、在IE6、7下，子级元素有相对定位，父级overflow保不住子级元素
解决方法：给父级也加相对定位
15、在IE6下，如果绝对定位的父级的宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差
16、在IE6下，当设置body高度，div设置固定定位是，拉动网页滚动条div并不会固定
解决方法：用JS
17、在IE6、7、8下设置透明度opacity无效
解决方法：设置透明度应写俩行代码：opacity:0.5; filter:alpha(opacity=50);
18、在IE6、7下，输入型的表单标签控件上下会有1px的间隙。
处理方法：给input加浮动
19、在IE6下，引用透明图片在网页显示不出透明效果
解决方法：JS
20、注释里面的内容在IE浏览器中通过条件注释语句是可以进行识别的
例：<!--[if ie]
我是ie
<![endif]-->
21、css hack：
\9 IE10之前的IE浏览器解析的代码 例：background:yellow\9;
+或者*表示IE7之前包括IE7的浏览器 例：+background:black;
_表示IE6之前包括IE6的浏览器 例：_background:pink:

Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. HTML&CSS基础-样式的继承

    HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  3. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. Html+CSS基础之CSS样式

    认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...

  6. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  7. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  8. css——基础样式总结

    颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色 单位 ...

  9. 一、HTML和CSS基础--HTML+CSS基础课程--第5部分

    第九章 CSS盒模型 元素分类
: 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的 ...

随机推荐

  1. epoll源码分析(基于linux-5.1.4)

    API epoll提供给用户进程的接口有如下四个,本文基于linux-5.1.4源码详细分析每个API具体做了啥工作,通过UML时序图理清内核内部的函数调用关系. int epoll_create1( ...

  2. 8 Jvm堆分析

    备注:直接内存分配,无法触发GC动作 备注:with outgoing reference (当前选中对象引用的对象),with incoming references(引用当前对象的对象)

  3. Most simple basic of internet programming based on two different machines sharing the same local net

    This blog is just shown for the most simple basic of internet programming based on two different mac ...

  4. poj 2376 Cleaning Shifts 最小区间覆盖

    Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 40751   Accepted: 9871 ...

  5. SpringBoot启动流程分析

    前景提示 @ComponentScan  的处理都放在org.springframework.context.annotation.ConfigurationClassParser#doProcess ...

  6. asp.net增加指定404页面

    对于在asp中添加404页面我并不熟悉,所以刚开始只能在网上找各种资料,网上资源太多,各种借鉴.   1.借鉴网上尝试的第一种方法:   首先,修改应用程序根目录的设置,打开 “web.config” ...

  7. Oracle IF-ELSE条件判断结构

    关于条件判断的几个函数: 一.IF-ELSE 判断语句1.IF 语法 IF 表达式 THEN ... END IF; 输入账号名 kiki 以登陆账号 declare v_name ):='& ...

  8. django-ckeditor使用

    django-ckeditor 1 安装 pip install ckeditor 2 配置 INSTALLED_APPS中添加 'ckeditor', 修改写入字段的格式 主题相关配置(settin ...

  9. 137-PHP static修饰的类属性

    <?php class test{ //定义一个类 public static $num=0; //定义static修饰的类属性 public function __construct(){ / ...

  10. Create Table操作

    CREATE TABLE 语句 CREATE TABLE 语句用于创建数据库中的表. SQL CREATE TABLE 语法 CREATE TABLE 表名称 ( 列名称1 数据类型, 列名称2 数据 ...