HTM L+CSS所学基本知识点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTM L+CSS所学基本知识点相关的知识，希望对你有一定的参考价值。
1、html制作页面的结构，由head和body构成。
2、CSS为页面的显示样式，可以控制页面中的元素的位置，颜色，大小等。
3、html代码注释方式<!--代码注释部分-->
4<head> <body> <div> <h1>-.......<h6> <p> <br> <hr> <span> <pre> <strong> <em> <q> <blockquote> <adress> <code> <pre> <ul> <ol> <li> <table> <caption> <a> <img> <input> <option>
5、CSS注释方式 ：/*CSS代码注释*/
6、CSS的样式添加方式：（1）直接以style=“color：red;”的方式添加在标签中（内联样式）。（2）在头部<head>中的<style>用选择器的方式添加样式（嵌入样式）。（3）将CSS写在另一个文档中B，在文档头部<head>中以link链接的方式将文档B加入（外部样式）。
7、样式优先级：内联>嵌入>外部。多个同样选择器的嵌入样式时，按照最后一个的样式来。也可以在属性值后加!important来增加优先级。
8、CSS选择器：（1）标签选择器q{}，权重001。（2）类选择器.class{}，权重010。（3）id选择器#id{}，权重100。（4）子选择器p>span{}。(5)后代选择器p span{}。（6）通用选择器*{}。（7）伪类选择器a:hover{};a:link{};a:actived{};a:visited{}。（8）分组选择器p,h1{}。
9、继承：某些样式会继承父类的样式，比如font-size,color等。但是某些样式则不会继承，比如border。
10、CSS样式：font-family、font-size、font-style、color、text-decoration、text-indent、letter-spacing、line-height、text-align。
11、盒子模型：由四部分组成，分别为content、padding、border、margin。长度：margin-left+border+padding-left+content+padding-right+border+margin-right。填充是盒子中的padding、边界是border部分。
12、元素分类：（1）块级样式：block，宽度是父类宽度，可以设置样式的宽度、高度等，每个块级元素占据一行。（2）内联样式：inline,宽度是由文本内容决定的，不能设置样式的高度和宽度等，多个内联样式可以在一行显示。（3）内联块状样式：inline-block，其宽度有文本内容决定，多个可以显示在一行，并且具备内联样式可以设置高度和宽度的功能。
13、布局模型：（1）流动模型：块级元素各占一行；内联元素可以多个显示在一行。（2）浮动模型：float:left/right。（3）层模型：absolute定位参照物是父类对象；relative定位参照物是自身；fixed定位父类，但是下拉条形框会一直随之移动。（4）absolute和relative组合：现在父类设置position:relative,，然后子类元素设置position：absolute，则子类的定位参照物是刚设置的父类对象。
14、缩写：border:10px 20px 10px 20px为border:10px 20px;border:10px 20px 20px 20px为border:10px 20px 20px。
15、长度值：px；em是参照父类的长度，%也是参照父类的长度。
16、居中设置：行内元素里文本的居中：text-align:center。定宽块状元素：margin:0 auto（由于有宽度，块状元素没有独占完整的一行，可以移动）。不定宽块状元素：由于每个块状元素宽度都是父类宽度，独占一行，不能自由移动。（1）添加在table里，然后再table里设置margin：0 auto；（2）display：inline。将块状元素设置为行内元素，在使用text-algin:center来设置。（3）先在父类设置floa:left;position:relative;left:50%;然后在子类设置 floa:left;margin:0;padding:0;position:relative;left:-50%。margin:0 auto;不能用于inline中，可以用于display：table中。
17、垂直居中：（1）单行：父元素height:100px;line-height:100px;行间距类似于信纸的一行，包括了字体大小和字体之间空白的间距。（2）多行：将多行文本或者图片放置在标签<table>中，再使用vertical-align:middle；td标签下默认设置了vertical-align:middle。（3）多行：将<div>盒模型设置为display:table-cell；激活vertical-align:middle。
18、position:absolute;和float:left/right;内联元素会自动设置成inline-block，即可设置宽度和高度了，且元素不会占用一整行。
以上是关于HTM L+CSS所学基本知识点的主要内容，如果未能解决你的问题，请参考以下文章