黑马程序员技术交流社区
标题: HTML+CSS基础技术总结 [打印本页]
作者: Mdny丶 时间: 2018-9-13 22:41
标题: HTML+CSS基础技术总结
首先在HTML中值得关注的是一些浏览器的内核
Chrome的内核是Chromium/Blink
Firefox的内核是 Gecko
Oprea的内核是 Blink
IE的内核是Trident
Safari的内核是Webkit
而对于ANDROID手机来说 使用最高的是Webkit
其次便是HTML基本的标签
h系列标题标签，hr水平线标签，br换行标签 img插入图片标签，a链接标签
以及div和span用以布局的盒子标签
另外补充的base标签 可以设置所有a标签添加_blank，使其在新窗口打开链接
另还有pre预格式化标签 会根据我们html的排版来显示，而我们有自己规范的结构（且后期可能压缩HTML代码），所以不用。
特殊字符的代码:
 ； 空格 ,>； 大于 ,<；小于 ,&； 和号, ¥； 人民币, ©；版 权 , ®； 注册商标 等等。
然后便是表格表单列表的标签：
表单：
<table>
<caption></caption>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody>
<tfoot></tfoot>
</table>
其中tr表示行，td（table data）表示数据单元格，th表示表头单元格，caption 表示表格标题（只 在table中有意义）
合并单元格：跨行合并 rowspan=“合并单元格的个数”跨列合并 colspan=“合并单元格的个数”
注：值得一提的是实际可以不用手动设置thead，tbody，tfoot标签。
列表：
无序列表 ul
<ul>
<li></li>
</ul>
有序列表 ol
<ol>
<li></li>
</ol>
自定义列表 dl
<dl>
<dt></dt>
<dd></dd>
</dl>
表单：
表单主要是input标签,但他它有许多类型（type）：
text（文本），password（密码），radio（单选，使用同一个name来联系二者），checkbox（多选框，也要使用同一个name 来联系他们），button（按钮 需要写value值），submit（提交），reset（重置），image（图片形式的提交按钮 必须包含src属性），file（文件域 上传文件使用）。
checked=checked；可以默认选中
用以用户体验的label(效果为点击文字对应行的输入框会获得焦点)
文本域：textarea
select下拉列表以及其子元素option selected=selected 可以默认选中。
以及用来包裹所有表单元素的 form表单域
至此便是基本的HTML。
随后便是CSS （层叠样式表）
首先按照样式表书写的位置可分为：
行内样式表
内嵌样式表
外部样式表
然后便是CSS的选择器了：
标签选择器
类选择器
ID选择器
通配符选择器
复合选择器（交集/并集，后代/子，伪类，）
接下来就是对于标签内容修饰的属性了：
font的字体样式：
-size
-family
-weight（100-900）
-style （italic, normal）
综合设置的有顺序：style weight size family （可以省略style和weight）
注：unicode字体编码 /5b8b/4f5c/为宋体
text的文本样式
-align(水平对齐方式) center left right
-indent（首行缩进）em
-decoration（文本装饰线）underline none overline
补充：line-through （穿过文本下的一条线）
显示模式：
块级元素 display：block；
行内元素 display：inline；
行内块元素 display：inline-block；
行高以及行高与高度的三种关系：
如果行高等高度文字会 垂直居中
如果行高大于高度文字会 偏下
如果行高小于高度文字会 偏上
要使单行文本垂直居中行高等于高度即可。
CSS背景：
background
-color颜色
-image图片
-position位置
-attachment附着 （scoll/fixed）
连写方式background：url（）no-repeatx y；（建议顺序）
补充：rgba（0,0,0，.3）CSS3背景透明属性；
CSS三大特性:
层叠性：写在前面的样式会被写在后面的优先级相同的或优先级高的重叠掉。
继承性：text font line color等属性可以被继承 a标签不继承任何属性
优先级：优先级由高到低!important>行内>ID>类>标签 （可以叠加但不可以越过高低等级，且继承的权重为0）
盒子模型来咯！
border边框：
-width
-style
-color
常连写：border：1px solid #ccc；
内边距padding：
-lfet、right、top、bottom
复合写法：
padding：一个值（上下左右内边距）
两个值（上下内边距和 左右内边距）
三个值（上 左右 下）
四个值（上右 下 左 即顺时针方向）
值得一提,padding可以撑开盒子
盒子实际大小=内容宽度 高度+内边距+边框
外边距margin：
写法同padding
注：有垂直外边距合并和嵌套元素的垂直外边距的塌陷问题。
圆角边框和盒子阴影：
border-radius：length
其中每一个值可以为数值或百分比的形式。
让一个正方形变成圆圈 ：border-radius: 50%;
矩形用高度的一半就好了。精确单位。
border-radius:左上角 右上角 右下角 左下角;
左上角 右上左下 右下角
左上右下 右下左上
左上右上右下左下
box-shadow:
水平阴影垂直阴影
模糊距离（虚实）阴影尺寸（影子大小）阴影颜色 内/外阴影】；
注：前两个属性是必须写的。其余的可以省略。
外阴影（outset）是默认的，但是不能写
如需内阴影可以写inset
可以通过逗号来写多个
CSS浮动：
float：left、right，none
主要注意清楚浮动的两个方法：
1）
.clearfix::after{
content:””;
display:block;
height:0 ;
visiability：hidden；
clear：both；
}
.clearfix{
*zoom:1;
}
2）
.clearfix::before,
.clearfix::after{
content:“”;
display:table;
}
.clearfix::after{
clear:both;
}
.clearfix{
*zoom:1;
}
CSS定位：
position：
static 静态定位（即无定位）
relative 相对定位（指元素相对于它原来在标准流中的位置来说的）（原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待）
absolute 绝对定位（完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）； 上级元素有定位时：则依据最近的已经定位（绝对、固定 或相对定位）的父元素（祖先）进行定位 ）
fixed 固定定位（完全脱标——完全不占位置；只认浏览器的可视窗口 ，跟父元素没有任何关系（是单独使用的），且不随滚动条的滚动而消失（即固定在了那个位置））
注：
绝对定位和固定定位也和浮动类似，有默认转换的特性 会转换为行内块。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用paddingborder overflow解决的）也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。
z-index:
属性值：正整数、负整数或 0，默认值是 auto，数值越大，盒子越靠上；如果属性值相同，则按照书写顺序，后来居上；数字后面不能加单位。
注意：
z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
综合的HTML和CSS高级技巧：
元素的显示与隐藏：
display:none; 隐藏对象（隐藏之后不保留位置）
display:block; 显示对象
visibility：hidden； 隐藏对象（隐藏之后保留位置，即占位隐藏）
visibility：visible； 显示对象
overflow： visible； 溢出显示
overflow： hidden； 溢出隐藏（超出盒子部分的内容隐藏起来）
overflow： auto；自动判断是否需要滚动条，即内容超出就会显示滚动条，不超出则不显示滚动条。（同下）
overflow： scroll； 显示滚动条（总是会显示）-不会超出盒子大小内容能显示全，但是滚动条不美观所以不常用
CSS用户界面样式：
鼠标样式：
cursor：default （默认样式）
cursor：pointer （小手）
cursor：move （移动）
cursor：text （文本）
cursor：not-allowed （禁止）
轮廓线：
outline：none/0 ；（一般不设置，直接去掉）
防止拖拽文本域：
resize：none；
vertical-align垂直对齐：
图片、表单和文字对齐：
通过vertical-align控制图片和文字的垂直关系：
vertical-align：baseline；（默认 基线对齐）
vertical-align：middle； （垂直居中对齐）
vertical-align：top； （顶部对齐）
vertical-align：bottom； （底部对齐）
去除图片底侧空白缝隙:
原因：
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。( 就是图片底侧会有一个空白缝隙。)
解决的方法：
给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐给img 添加 display：block;转换为块级元素就不会存在问题了。
溢出的文字省略号显示:
white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
white-space:normal； 默认处理方式
white-space:nowrap； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。
text-overflow文字溢出
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-overflow: clip ；不显示省略标记（...），而是简单的裁切
text-overflow：ellipsis ； 当对象内文本溢出时显示省略标记（...）
注意：一定要首先强制一行内显示，再次和overflow属性 搭配使用
用法 :
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
英文自动换行 word-wrap：break-word；
文字距离：letter-spacing：1px；
精灵图技术：
使用背景图片的定位 负值
推拉门技术：
一般结构为：
<li>
<ahref="#">
<span>导航栏内容</span>
</a>
</li>
其中a 设置 背景左侧，padding撑开合适宽度。
span设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
之所以a包含span就是因为 整个导航都是可以点击的。
Margin负值后如何高亮显示：使用相对定位 使其高层级显示。
CSS三角：
使用粗像素的边框且不设宽度
想要哪个方向的三角，其他方向的边框颜色设置为transparent即可。
为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |