1, 简述<!doctype > 的作用
<!doctype > 是文档的声明, 告诉浏览器当前的文档类型;<!doctype html>: 告诉浏览器以当前 HTML 最新标准解析当前文档.
2, 谈谈你对语义化的理解
简单讲就是根据内容的结构化 (内容语义化), 选择合适的标签(代码语义化) 便于开发者阅读和写出更优雅的代码的同时让浏览器的 爬 虫和机器很好地解析, 有利于 SEO, 便于团队开发和维护. 有利于拓展
3, 如何合并表格单元格, 需要注意什么?
跨行合并: rowspan, 跨两行合并的表格; 跨列合并 colspan, 跨两列合并的表格.
4,thead,tbody,tfoot 有什么作用?
thead 表格的头部 用来放标题之类的东西
tbody 表格的身体主题部分 放数据本体
tfoot 表格的脚 放表格的脚注之类
作用: 优化表格加载, 增强用户体验, 表格结构清晰, 增强可读性
5, 常见的表单元素有哪些?
表单元素: input-type:text,password,radio,checkbox,buttom,submit,reset,flie,image
- select:option
- textarea
文本域, 下拉列表, 单选框, 复选框
6,CSS 的方式有几种?
(1)内嵌式
通过 < style></style > 来书写 CSS 代码.
只能应用于当前网页, 不能被其它网页共享.
注意:<style > 标记一般放在 < head>.
(2)外联式, 外嵌式
通过 < link > 标记来引入外部的 CSS 文件(.CSS).
可以被其它网页共享.
格式:<link href="CSS 的 URL" rel="stylesheet" type="text/css" />
注意:<link > 标记只能放在 < head > 中
(3)行内样式
通过 style 的属性来书写 CSS 代码.
举例:<p style="font-size:24px;"></p>
7, 单行文本水平垂直居中如何实现
(1)水平居中
text-align:center: 控制单行文字水平居中
(2)垂直居中
设置行高, line-height: 元素的高度, 如果元素的高度是 50px, 则 line-height:50px
8, 常见的选择器有哪些?
基础选择器: 通配符选择器(*),
标签 (元素选择器, element) 选择器
元素 1
类选择器 10
id 选择器 100
进阶选择器: 群组选择器
后代
子代
交集
相邻选择器 +
9, 选择器优先级如何计算
a. 内联样式表的权值为 1000
b.ID 选择器的权值为 100
c.class 类选择器的权值为 10
d.HTML 标签选择器的权值为 1
将权重相加得到总权重值
等级相同, 则看权重大小, 大优先
权重相同, 后写的优先
等级不同, 等级大优先
!important
我们可以把选择器中规则对应多加法, 比较权值, 如果权值相同那就后面的覆盖前面的.
!important 可以使样式优先级最高
10, 哪些 CSS 属性是可继承的?
(1), 字体系列属性
font-family: 字体系列
font-weight: 字体的粗细
font-size: 字体的大小
font-style: 字体的风格
line-height: 行高
(2), 文本系列属性
text-indent: 文本缩进
text-align: 文本水平对齐
color: 文本颜色
text-decoration: 文本修饰
text-index, text-color
11, 简述 CSS 盒模型
盒模型又称框模型, 包含了元素内容 (content), 内边距(padding), 边框(border), 外边距(margin) 几个要素.
元素框的总宽度 = 元素 (element) 的 width + padding 的左边距和右边距的值 + margin 的左边距和右边距的值 + border 的左右宽度;
元素框的总高度 = 元素 (element) 的 height + padding 的上下边距的值 + margin 的上下边距的值 + border 的上下宽度.
盒模型是设计与布局的一种概念思想, 把 HTML 中所有元素看作是一个盒子(盒模型)
12,margin 外边距常见问题及处理方法
父子元素 margin 合并问题
在父元素里面有子元素时, 则父元素的 margin-top 的值为子元素中的 margin-top 的值.
父子元素 margin 合并问题解决办法
方法一: 设置父元素的 overflow 属性为 hidden.
方法二: 设置父元素的 border 属性, 如: border:1px solid red;
兄弟元素 margin 合并问题
规避
1, 塌陷 父子关系时, 第一个元素的 margin-top, 会影响父元素
- a,border padding
- b,overflow:hideen nauto scroll
2, 两个元素上下垂直摆放时, 上下外边距会重叠
13, 块级标签与行级标签的区别
- .clearfix{
- *zoom:1;
- } /* 处理 ie7 以下兼容 */
- .clearfix:after{
- content:"";
- clear:both;
- display:block;
- }
- /** 向下的三角 **/
- .trangle_down{
- width:0;
- height:0;
- overflow:hidden;
- font-size: 0; /* 是因为, 虽然宽高度为 0, 但在 IE6 下会具有默认的 */
- line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
- border-width:10px;
- border-style:solid; /*ie6 下会出现不透明的兼容问题 */
- border-color:#f30 transparent transparent transparent;
- }
- text-style ,
- text-size
- ,.clearfix:after{
- content:"";display:bock;clear:both;
- }
- ,display:inline-block
- ,position:absoulte/fixed
- margin-bottom:-99999px;
- <body>
- <div class="father">
- <div class="left">ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定 ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定 ga7a7dgadd </div>
- <div class="center">撒旦哈偶地 暗杀号段电话刈待定 ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定 ga7a7dgadd </div>
- <div class="right">撒旦哈偶地 暗杀号段电话刈待定 ga7a7dgadd 撒旦哈偶地 暗杀号段电话刈待定 ga7a7dgadd </div>
- </div>
- </body>
- .father {
- overflow: hidden;
- margin: 0 auto;
- /* width: 900px; */
- }
- .left {
- width: 100px;
- background-color: blue;
- float: left;
- padding-bottom: 9999px;
- margin-bottom: -9999px;
- }
- .center {
- width: 150px;
- background-color: green;
- float: left;
- padding-bottom: 9999px;
- margin-bottom: -9999px;
- }
- .right {
- width: 100px;
- background-color: skyblue;
- float: left;
- padding-bottom: 9999px;
- margin-bottom: -9999px;
- }
- <div class="bigbox">
- <div class="bg1">
- <div class="bg2">
- <div class="bg3">
- <div class="red">第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅</div>
- <div class="green">第二列第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅</div>
- <div class="blue">第三列第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第三列第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第三列第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅第一列撒大概的 ad 好贵呀噶 唉大概的噶大概空间大幅</div>
- </div>
- </div>
- </div>
- </div>
- <style>
- .bigbox{
- margin: 0 auto;
- width:1000px;
- }
- .bg1{
- width: 100%;
- background-color: orange;
- overflow: hidden;
- }
- .bg2{
- width: 100%;
- background-color: pink;
- position: relative;
- right: 300px;
- float: left;
- }
- .bg3{
- width: 100%;
- background-color: skyblue;
- position: relative;
- right: 400px;
- float: left;
- }
- .red{
- width: 300px;
- /* background-color:red; */
- float: left;
- position: relative;
- left: 700px;
- }
- .green{
- width: 400px;
- /* background-color: green; */
- float: left;
- position: relative;
- left: 700px;
- }
- .blue{
- width: 300px;
- /* background-color: blue; */
- float: left;
- position: relative;
- left: 700px;
- }
- </style>
- <body>
- <div class="container">
- <div class="middle">
- 圣杯布局的中间自适应部分
- </div>
- <div class="left">
- 圣杯布局左边固定宽度部分
- </div>
- <div class="right">
- 圣杯布局右边固定宽度部分
- </div>
- </div>
- </body>
- .container { padding: 0 200px 0 200px; overflow: hidden; } .middle, .left,
- .right { float: left; position: relative; } .middle { width: 100%; background-color:
- blue; } .left { width: 200px; background-color: red; margin-left: -100%;
- left: -200px; } .right{ width: 200px; background-color: green; margin-left:
- -200px; right: -200px; }
- <body>
- <div class="middle">
- <div class="inner">
- 双飞翼布局的中间自适应部分
- </div>
- </div>
- <div class="left">
- 双飞翼布局左边固定宽度部分
- </div>
- <div class="right">
- 双飞翼布局右边固定宽度部分
- </div>
- </body>
- .middle, .left, .right { float: left; min-height: 130px; } .middle { width:
- 100%; } .inner { margin: 0 220px 0 200px; background-color: orange; min-height:
- 130px; } .left { width: 200px; background-color: red; margin-left: -100%;
- } .right { width: 220px; background-color: green; margin-left: -220px;
- }
- ul,ol{
- margin:0;padding:0;list-style:none
- }
- a{
- text-decortion:none
- }
- p{
- margin:0;
- }
- input[{
- type="text"]{
- border:none;outline:none;
- }
- a:margin:0 auto
- b:display:inline-block
- text-align:center;
- line-height:height;
- text-align:center
- line-height:height
- c,display:inline-block
- d,float: left/right
- e,position:absolute/fixed
- E:[attr]{
- }; E:[attr="val"]{
- };
- E:[attr^="val"]{
- };E[attr$="val"]{
- };E: ['attr*="val"];
- E:link
- E:hover
- E:visited
- E:focus
- E:active
- E:first-child{
- }
- E:last-child{
- }
- E:nth-child(m){
- }
- <script>
- document.createElement("header")
- </script>
- <style>
- header { color: red; display: block; }
- </style>
- a,display:none
- b,visibility:hidden;
- c,opacity
- Chrome webit -webkit
- firfox Gecko -moz
- IE Trident -ms-
- Opera Presto -o-
- Safari Webkit
- p{
- width:200px;// 限定盒子的宽度
- p {
- width:200px;
- overflow:hidden;
- text-overflow:ellipsis;
- display:-webkit-box;
- -webkit-line-clamp:2;// 限制块元素显示的文本行数
- -webkit-box-orient:vertical;// 设置伸缩盒对象的子元素的排列方式
- }
来源: http://www.jianshu.com/p/929ba5b75887