HTML和CSS的一些知识点的汇总

html：超文本标记语言

通过语义化标签，搭建页面 结构

css:层叠样式表

负责页面 样式 ，美化页面的

js:轻量级的脚本语言；交互指的是两个地方（行为）

前端自己在页面上写的 动效

前后台的 数据交互
结构，样式，和行为三者相结合

嵌入式；(内嵌式)

 style  body{ height:100%; background-color: red; /style 

行内样式

 body >
外链式（真正的开发，用的都是外链）
 link rel= stylesheet href= style.css?1.1.11 / 
css的优先级
行内 内嵌 外链
css常见属性和样式
当设置错误的时候，在chrome的控制台，会有黄色的叹号，进行提示
color：颜色值； 颜色有三种表示方法
快捷键：c+tab
用英文：red
rgb(255,0,0)
#fff
font-size:字体大小
快捷键：fsz30- font-size:30px
font:400 14px/28px 宋体 
background:添加背景
图片默认是横向重复和纵向重复
位置：
横向位置：left center right
纵向位置：top center bottom
综合写法：background: url( images/bg2.png ) no-repeat left center red;
background-image:url( 图片地址 )
background-repeat:no-repeat; /repeat-x;/repeat-y
background-position:0 0
background-color:red
字体是否倾斜
font-style:italic 倾斜／ normal 正常
下划线和删除线
text-decoration: line-through; 删除线
text-decoration: none; 去除下划线
text-decoration: underline;添加下划线
css中的选择器：
1.标签选择器：div p ul li dt dd em i u del strong b input label from table
缺点：只能进行共性的操作，无法个性操作
2.class选择器
3.id：
.class名,同一个页面能有无数个相同的class名
#id名，同一个页面只能有一个ID名；（ID名是不能重复的）
在真正的开发过程中，class是用来设置样式的，id是用来获取元素
 div >
4.后代选择器：div p(把div容器下，子子孙孙的p元素都选择上了)
5.子选择器：div p(选择div容器下的儿子)；兼容IE7+
6.交集选择器: div.div1
7.并集选择器：div,p
8.通配符*：代表所有的元素
9.序选择器：兼容IE8+
div p:first-child
div p:last-child
10.下一个兄弟选择器 ul li+li{} 兼容IE7+
开发常用的浏览器
chrome
IE7~11
firefox
CSS的继承性和层叠性
以font开头的属性都能够继承；line-height
color可以继承
text开头的也可以继承，比如text-align
css权重
!important权重无穷大；（少用为好）
id的权重大于class的权重
css盒子模型
css盒子模型由5部分：
内容的宽高+padding+border+margin
单行文本的居中：height = line-height
多行文本的居中，padding和line-height
padding：
padding是内边距
padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色
padding是复合值
padding:30px; - pl30; pt30;pr30;pb30
padding:20px 30px; - 上下为20px 左右30px
padding:10px 20px 30px; - 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左
如果现设置padding:30px
再设置padding-left:10px
请问最后的值各是多少？
左10px; 其他都是30px
margin：外边框
border:
border:1px solid #000;
border-width
border-style：solid（实体）,dashed（虚线）,dotted（点）
border-color
行内元素和块级元素
p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行
文本元素：p span a i em u b strong img
容器级：div li dt dd h级（不建议）
除了p，所有的文本元素，都是行内元素
所有容器级别的元素，都是块元素
块和行内元素的相互转化
display：inline; //行内
display:inline-block;//行内块
display：block; //块
关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）
关于脱离文档流的方法
浮动 float:left; float:right;
绝对定位 position:absolute;
固定定位 position:fixed;
重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；
注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽
清除浮动
固定高度height:xxxpx;
缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度
overflow:hidden
clear:both
缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度
伪类清除浮动
ul::after{display: block;height:0;content: clear: both;}
溢出隐藏
清除浮动
缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了
透明度处理
rgba() 背景透明，文字不透明；
opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7浏览器*/filter:alpha(opacity=10);
最基本的开发，首先必须创建的项目结构
images文件夹：放切好的图片
css文件夹：放置css文件：index.css
index.html文件
关于继承
宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)
font可以继承
color可以继承：当遇到a标签的时候， color无效；
line-height可以继承
当文本超度固定宽度的处理方法：
单行文本出超固定宽度出现省略号的写法：
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
英文不折行的问题处理： word-wrap:break-word;
出现滚动条的写法overflow-y:scroll;
区分伪类和伪元素
伪元素：用:和::都可以，现在建议用::
伪类：给当前选择器添加动效，只能用:
以上就是HTML和CSS的一些知识点的汇总的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。