首页 > 代码库 > html+css基础
html+css基础
1.<blockquote>标签的解析是缩进样式
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
效果
2.<q>表示引用，实际就是双引号
<q>聪明秀出为之英，胆略过人为之雄</q>.
效果
3.<br/>换行 空格 <hr/>水平分隔线
4.<address>地址信息
<address>北京市西城区德外大街10号</address>
效果
5.<code>嵌套代码 只能为一行代码 多行使用<pre>
<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code>
6.mailto 发邮件链接
完整实例
7.<img>
<img src = http://www.mamicode.com/"myimage.gif" alt = "My Image" title = "My Image" />
8. <select multiple="multiple">
9.<label for="控件id名称">
当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
10.权值
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
!important具有最高权值
记住!important优先级样式是个例外，权值高于用户自己设置的样式。
11.
body{font-family:"Microsoft Yahei";}网页文字设置-微软雅黑
body{font-size:12px;color:#666}文字字号，颜色
p span{font-weight:bold;}文字粗体显示
p a{font-style:italic;}文字斜体显示
p a{text-decoration:underline;}文字下划线
.oldPrice{text-decoration:line-through;}文字删除线
p{text-indent:2em;}段落首行缩进两格
p{line-height:1.5em;}行间距（行高）
h1{letter-spacing:20px;}汉字，字母间距
h1{word-spacing:50px;}单词间距
div{text-align:center;}内容对齐方式
12.在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。
13<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。
14内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
15
border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
div{ border:2px solid red;}
16.盒子模型
蓝色为实际文本内容，黑色实线为边框
- 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。
- 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。
div{margin:20px 10px 15px 30px;}
padding和margin的区别，padding在边框里，margin在边框外。
- 单独设置下边框 li{border-bottom:1px dotted #ccc;}
17.CSS的有三种布局模型：
流动模型（Flow）
浮动模型 (Float)
层模型（Layer）
流动模型，流动（Flow）是默认的网页布局模式
浮动模型（Float）块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示可使用浮动模型
层模型（Layer）让html元素在网页中精确定位
(1)position:absolute(表示绝对定位)，作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对于浏览器窗口向右移动100px，向下移动50px。 向左移动100象素，向下移动20象素。(注意这里的向左移right，向下移top)
(2)position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
相对于以前位置向下移动50px，向右移动100px;
什么叫做“偏移前的位置保留不动”呢？
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
(3)position:fixed：表示固定定位，它的相对移动的坐标是视图（屏幕内的网页窗口）本身,会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响.
不会随浏览器窗口的滚动条滚动而变化,即永远处于当前窗口的某个固定位置。
相对于浏览器视图向右移动100px，向下移动50px。
（4）Relative与Absolute组合使用
18.字体格式缩写
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
缩写：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
19.长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
20.行内元素-水平居中显示
.imgCenter{
text-align:center;
}
块状元素-定宽块状元素和不定宽块状元素
(1)定宽块状元素：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
(2) 不定宽块状元素：块状元素的宽度width不固定。
最简单的方法：
.wrap{
background:#ccc;
display:table; margin:0 auto;
}
<div class="wrap">
设置我所在的div容器水平居中
</div>
其次：
1.加入table标签
2.改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
<body> <div class="container"> <ul> <li><a href=http://www.mamicode.com/"#">1</a></li> <li><a href=http://www.mamicode.com/"#">2</a></li> <li><a href=http://www.mamicode.com/"#">3</a></li> </ul> </div> </body>
<style> .container{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/ .container li{ margin-right:8px; display:inline; } </style>
3.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
21.垂直居中
两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
（1）父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
行间距100px意味着单行文本的上边有50px，下边有50px，当有下一行的时候，当前行的下边50px和下一行的上边50px构成了两行的行间距100px。
(2)父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
<table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table>
.wrap{height:300px;background:#ccc;vertical-align：middle;}
方法二：
#cc {
display:table-cell;/*IE8以上及Chrome、Firefox*/
background:#ccc;
height:500px;
vertical-align:middle;
}
<div id="cc">
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
22.隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
html+css基础